第三章选择器的使用

选择器

  • 伪类选择器 在某种状态下所显示的样式 爱恨原则 love hate
    • 超链接:link{} 链接未点击之前
    • 超链接:visited{} 链接访问之后
    • 任何元素:hover{} 鼠标划过该元素
    • 超链接:active{} 鼠标按下的状态

css属性

白利利(040E3C47E492对话) 11:24:46

选择器

  • 伪类选择器 在某种状态下所显示的样式 爱恨原则 love hate
    • 超链接:link{} 链接未点击之前
    • 超链接:visited{} 链接访问之后
    • 任何元素:hover{} 鼠标划过该元素
    • 超链接:active{} 鼠标按下的状态
  • 后代选择器
    选择器 选择器{}
    • 可以是多个选择器
    • 选择器之间可以跨级,但是必须存在后代关系
  • 群组选择器
    选择器,选择器{}
  • 选择器的权重
    • 内联样式 1000
    • id选择器 100
    • class选择器/伪类选择器 10
    • 标签选择器 1
    • 继承样式 0
  • 选择器权重特点
    • 权重值越高,优先显示该样式
    • 后代选择器的权重由每个选择器的权重值相加
    • 群组选择器的权重值为选择器本身的权重值
    • 权重值相同的,就近原则
    • 继承样式的权重值是最低的

css属性

  • 字体属性
    • 字体大小 font-size 一般情况是偶数,并且一般不低于10px
      • 数值+px
      • 数值+em 默认值1em=16px 父元素有字体大小,参考的是父元素的字体大小
      • 数值+rem 默认值 1rem=16px 根元素有字体大小时,参考根元素的字体大小(移动端)
      • 字体加粗 font-weight
      • bold 加粗
      • normal 去掉加粗样式
    • 字体倾斜 font-style
      • italic 倾斜
      • normal 去掉倾斜样式
    • 字体类型 font-family
      • 中文,加引号
      • 英文,一个单词不用引号,多个单词要加引号引起来
      • 多个字体类型用逗号隔开,浏览器会依次检索,有该字体直接显示,找到最后都没有该字体时,显示默认字体
        • 多个字体类型用逗号隔开,浏览器会依次检索,有该字体直接显示,找到最后都没有该字体时,显示默认字体
  • 文本属性
    • 颜色 color
      • 颜色单词
      • 十六进制 #f1f1f1
      • rgb(0-255,0-255,0-255) rgb(241, 241, 241);
    • 文本水平对齐方式 text-align
      • left 左对齐 默认值
      • center 居中
      • right 居右
      • justify 两端对齐 内容向两边,加大中间的间距
    • 行高 line-height
      • 数字:字体大小的倍数
      • 数值+px
      • 应用
        • 多行文本:加行高可以增大行和行之间的距离
        • 单行文本:将行高和元素的高度设置成一样,实现垂直居中
    • 文本修饰 text-decoration
      • underline 下划线
      • overline 上划线
      • line-through 删除线
      • none 去掉下划线t:
    • 文本缩进 text-indent
      • 数值+px 只对独占一行的元素才生效
      • 可以设置负数
      • 缩进两个词:设置text-indent:2em; 参考当前元素的字体大小
    • 字符间距 letter-spacing
      • 数值+px
      • 中文:加大字和字之间的距离 英文:加大字母之间的距离
    • 单词之间的距离 word-spacing
      • 数值+px
      • 只对英文生效,加大单词和单词之间的距离
  • 列表属性
    • 列表符号 list-style-type
      • disc 实心圆
      • squre 方块
      • circle 空心圆
      • none 去掉列表符号

你可能感兴趣的:(css)