01-01-03 CSS基础学习整理-优快云博客

一、CSS背景

CSS的诞生是为了解决HTML页面臃肿的问题，将表现HTML的文件样式的计算机语言提炼规整化。

层叠式：CSS中贯穿始终的加载特性，层叠性、继承性

样式：定义如何显示HTML元素

文字、文本、背景、盒模型、浮动、定位、其他

选择器+声明（一条/多条），如(p{width:300px;font-size:14px;})

内联（写在）、内嵌、外联、导入式@import url(路径)

外联式与导入式区别：

但是由于导入式在浏览器中加载时，会在 HTML 结构加载完毕后再进行编译，如果网速比较慢时，会导致网页出现没有 css 样式的效果，给用户的体验不好。

CSS样式格式

颜色color(rgb 模式红、绿、蓝 255 255 255 灰色128 和十六进制 #000000 #ffffff )、

字体font-family、可以设置多个字体名称“，”号隔开，在实际加载时按书写顺序加载，建议将英文字体写在属性值最前面

字号 font-size：px em %

盒子实体化三属性：宽、高、背景色

标签选择器、id 选择器（#id）、类选择器(.class名称)、通配符选择器(*)

后代选择器(嵌套关系)、交集选择器、并集选择器(，号隔开)

包含继承性和层叠性。

继承性：子标签（文字相关的样式属性）会继承祖先级标签的样式，而可以不需要重新设置样式。

层叠性：解决同一个标签被多个选择器选中时，只会有一个属性被成功加载，覆盖掉其他属性。

选中目标标签：
- 比较权重，权重高的层叠权重低的：
  - 基础选择器：比较多个选择器的权重（* < 标签选择器 < 类选择器 < id选择器）
  - 高级选择器：依次比较组成高级选择器的id的个数、类的个数、标签的个数。
- 如果权重相同，比较书写顺序，后写的层叠先写的
选中目标标签祖先级
- 比较就近原则，距离目标进的层叠远的
- 如果距离相同，比较选择器权重，权重大的层叠权重小的
- 如果权重相同，比较CSS书写顺序，后面的层叠钱前面的
important(.span{ color:yellow !important})
- important可以提升某条属性的权重到最大
- 在就近原则比较时无效
行内式
- 行内式权重高于所有其他选择器，但低于important