前端学习——基础篇

四、CSS学习

4.7、css三大特性

一、继承性

子元素继承父元素的样式

• 不是所有的属性都能被继承（width、height、background、padding、border、margin、text-decoration）
• 可以继承的属性（部分）：
  • 字体系列属性
    • font-family属性 字体
    • font-size属性 字号
    • font-weight属性 加粗
    • font-style属性 文字样式
    • line-height属性 行高
  • 文本系列属性
    • text-align 属性 文本水平对齐方式
    • text-indent属性 文本首行缩进
    • text-transform属性 字母大小写转换
    • letter-spacing属性 字间距
    • word-spacing属性 词间距
    • color属性 文字颜色
  • list-style属性 列表符样式
• 作用
  定义公共样式；可以精简代码，降低代码复杂度

a标签自带文字颜色，不会继承父元素的文字颜色，因此要改变a标签的文字颜色必须设给a标签

二、优先级

样式引入方式优先级

• 行间样式优于内部和外部样式
• 内部样式和外部样式就近原则

选择器优先级

• 选择器优先级与权值相关
• 权值
  • 基础选择器的权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
  • 复合选择器权值是所有单一选择器权值的累加
• 权值越大优先级越高；权值相同，后写的会覆盖先写的
• 继承样式没有权值，权值比0小，子元素设置样式会覆盖继承样式
• 行间样式权值（1000），优于id选择器
• !important优于行间样式，拥有最高优先级

width: 200px !important;

• 伪类选择器（10）、属性选择器（10）、伪元素选择器（1）

三、层叠性

样式冲突:
存在优先级问题，优先级高的显示；不存在优先级，后写的会覆盖先写的

样式不冲突:
样式叠加，并同时作用在内容上