Web前端学习—基础篇(17)_CSS的三大特性是什么、特性都有什么内容

前端学习——基础篇

四、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)

三、层叠性

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

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

Web前端学习—基础篇(17)_CSS的三大特性是什么、特性都有什么内容

上一篇:mariadb是替代MySQL的好方式


下一篇:Web前端学习—基础篇(6)_行块级标签img的特性、HTML怎么实现换行和水平分割、HTML中常用的特殊字符用什么表示