第三章选择器的使用

选择器

• 伪类选择器 在某种状态下所显示的样式 爱恨原则 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 去掉列表符号