01-01-03 CSS基础学习整理

一、CSS背景

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

二、CSS的组成

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

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

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

三、CSS的语法

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

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

外联式与导入式区别：

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

 

CSS样式格式

• 展开格式：开发过程使用，代码可读性强，便于调错。
• 紧凑格式：上传服务器时使用，减少不必要的空白字符，压缩文件大小，利于传输。

四、CSS常用样式

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

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

字号 font-size：px  em  %

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

五、CSS选择器

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

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

六、CSS层叠式

包含继承性和层叠性。

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

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

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