当前位置： 移动技术网 > IT编程>网页制作>CSS > css笔记

css笔记

2019年01月04日  | 移动技术网IT编程  | 我要评论

胡玉芳,天才宝宝律师妈,暗月迷雾卡片

注释:  /* */
1、css和html的结合方式
(1)用(每个)html标签上的style属性结合
(2)使用html的<style>标签
(3)在style标签里使用语句 @import url(css文件路径);(某些浏览器不支持)
(4)使用头标签link引入外部css文件
2、css的选择器(* 代表所有)
(1)标签选择器

  • 使用标签名作为选择器名称： 标签名{css属性}

(2)class选择器

  • 每个html标签都有个class属性(可以有多个class属性,用空格隔开)
    • - [标签].class名{css属性}　　

(3)id选择器

  • 每个html标签都有个属性id
    • - [标签]#id名{css属性}　　

(4)属性选择器

  • 选择具有指定属性值的标签
    • - 选择器[id='abc']{css属性}　　

优先级：

  • style属性 > id选择器 > class选择器 > 标签选择器

3、css的扩展选择器
(1)关联选择器

  • 指定嵌套标签里面的样式(标签1中的标签2)
    • - 标签1 标签2{css属性}　　

(2)组合选择器

  • 把不同标签设置成相同的样式
    • - 标签1,标签2{css属性}}　　

(3)伪元素选择器

  • css里面提供了一些定义好的样式,可以定义元素在不同条件下的样式
  • 超链接(顺序不能变)
    • 状态：原始状态(:link)，鼠标放上去(:hover)，点击还没释放(:active)，点击后(:visited)　　
    • - a:状态{css属性}}　　

(4)相邻兄弟选择器

  • 标签1 + 标签2{css属性}
    • 标签2紧邻标签1之后,有同一个父元素　　

4、css属性(冒号设置)
定位

  • float：指出对象是否及如何浮动(可以使元素飘起来)(当浮动时必须指定宽)
  • clear: 规定元素不被浮动元素覆盖(使普通元素不被浮动元素覆盖)
  • display: 规定如何显示该元素(隐藏(不占位置),内联, 块状等)
  • visibility: 规定元素是否可见(隐藏时占页面位置)
  • position: 定位类型, 作用于 top 等属性
  • 相对定位(相对于正常位置,原来的位置不会被其它元素占用),绝对定位(相对于父元素位置,不占用其它元素位置,会盖在其它元素上)等
  • 用绝对定位时,父元素要有 position 属性,否则会一直向上找,直到body
  • top: 设置相对于顶部偏移(buttom:下, left:左, right:右)
  • z-index: 设置元素的堆叠顺序(当使用 绝对定位 时使用,当多个绝对定位元素重叠时,此值大的会在上面)
  • overflow: 规定当子元素内容溢出时的处理

盒子

  • margin: 外边距(margin-top:上,margin-right:右,margin-bottom:下,margin-left:左)
  • padding: 内边距(内边距不算在元素大小中)(padding-top:上,padding-right:右,padding-bottom:下,padding-left:左)
  • border: 设置边框属性(border-top:上...)(边框宽度不算在元素宽度中)
    • 可设置的属性(可以直接设置用空格隔开,也可单独设置):　　
      • border-width: 设置边框宽度, 当 border-style 不为 none 时有效　　　　
      • border-style: 设置边框样式　　　　
      • border-color: 设置边框颜色(red/#000000)　　　　
  • border-radius: 设置圆角边框　　
    • border-bottom-left-radius: 设置左下　　
    • border-bottom-right-radius: 设置右下　　
    • border-top-left-radius: 设置左上　　
    • border-top-right-radius: 设置右上　　
  • border-image: 将图片作为边框
    • 可设置的属性(可以直接设置用空格隔开,也可单独设置):　　
      • border-image-source: 图片的路径　　　　
      • border-image-slice: 图片切片位置(那部分显示为边框)　　　　
      • border-image-width: 图片边框的宽度　　　　
      • border-image-outset: 边框图像区域超出边框的量　　　　
      • border-image-repeat: 图像边框如何显示　　　　
  • box-shadow: 给边框添加阴影　　
  • width: 元素宽度
  • height: 元素高度
  • background: 背景样式
    • 可设置的属性(可以直接设置用空格隔开,也可单独设置):　　
      • background-color: 背景颜色(red/#000000)　　　　
      • background-position: 背景图像的位置　　　　
      • background-size: 规定背景图片的尺寸　　　　
      • background-repeat: 规定如何重复背景图像　　　　
      • background-attachment: 规定背景图像是否固定　　　　
      • background-image: 规定要使用的背景图像　　　　
  • opacity: 规定元素的透明程度
  • cursor: 规定鼠标放上时鼠标的形状
  • columns: 规定子元素分成几列以及列的宽度

变化

  • transform: 对元素进行转换(旋转,缩放,移动,倾斜等)
  • cursor: 定义光标形状
  • transition-delay: 设定当状态改变(伪类选择器)时,几秒后属性变化
  • transition-duration: 设定改变状态(伪类选择器)要经过几秒(当此值为0时, 没有过度效果)
  • transition-timing-function: 设定状态改变(伪类选择器)的速率
  • transition-property: 设定应用过渡效果的属性(当指定属性变化时,过渡效果开始)
  • animation: 设定动画

文本

  • text-indent: 设置文本块首行的缩进(段落效果)
  • text-align: 规定水平对齐方式(靠左,居中等)
  • text-decoration: 设置文本的装饰效果(下划线等)
  • text-transform: 控制文本大小写
  • text-shadow: 设置文字投影效果(阴影等)
  • line-height: 行高(行高与块高相同实现文字上下居中)
  • letter-spacing: 控制字符间距
  • color: 字体颜色(red/#000000)
  • font-style: 设置字体样式(斜体等)
  • font-family: 设置字体(用逗号隔开,会依次查找能用的字体)
  • font-weight: 设置字体粗细
  • word-spacing: 设置单词间距
  • letter-spacing: 设置字符间距
  • white-space: 设置如何处理元素中的空白

列表

  • list-style-type: 设置列表标记的类型(实心圆,空心圆等)
  • list-style-image: 将图片作为列表的标记
  • list-style-position: 设置标记的位置

表格

  • border-collapse: 设置表格边框是否为单一边框
  • border-spacing: 相邻表格边框的距离(必须设置 border-collapse:separate; 否则会忽略)
  • empty-cells: 空单元格是否显示边框(必须设置 border-collapse:separate; 否则会忽略)

5、自定义规则
字体(供 font-family 属性使用):

@font-face    /*自定义字体*/
{
    font-family: myfirstfont;    /*自定义字体名*/
    src: url('sansation_light.ttf'),    /*字体路径*/
    url('sansation_light.eot'); /* ie9 */
}

6、bootstrap

响应式布局,即布局会根据浏览器大小等进行调整
中文文档 'https://v3.bootcss.com/' 官网 'http://getbootstrap.com/'
包括:

  • css样式(一些基本的css样式):
  • 组件(图标,下拉菜单,导航等css样式):
  • js插件: 配合 jquery 使用


7、font-awesome
字体图标, 即显示的小图标

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网