机制和原理

CSS是一种样式表语言,用于为HTML(或其他)文档定义样式,包括字体、颜色、边距、高度、宽度、背景图像、布局等等。

HTML用于结构化内容,CSS用于格式化结构化的内容,CSS让HTML文档的表示和内容分离成为可能。

 

基本结构

CSS的基本概念就是选择HTML元素然后设定选择元素的样式,选择器+样式设置即构成了一条CSS规则

CSS规则的语法结构如下:

selector1  {
  property1 : value1;
  property2 : value2;
  propertyn : valuen;
}

除一般的规则之外,CSS中还有其他比如定义字符集,导入其它的外部样式表,字体等比较特殊的命令,这些是通过at规则语句来实现的。

选择器

选择器用来指定设置样式的对象元素。CSS提供了以下几类选择方法:

  • 属性指定
    通过指定标签、ID、类即其他任意属性和属性值来选择样式适用的对象元素
  • 状态指定
    通过指定状态(如光标是否停在在面、链接是否已被点击得过等等)选择样式适用的场面。
  • 关系指定
    通过指定关系(如某某元素的子元素等等)选择样式适用的对象元素。

以上的方法可以单独指定,也可以自由组合使用。

样式的适用

从CSS的基本结构可以看到,CSS的基本单位是规则。同一个HTML元素可能同时适用有多个规则,如果这些规则定义的样式存在重叠,那应该适用哪个规则呢?

基于这个问题,CSS为规则提供了一个权重的概念,不同的规则拥有不同的权重值,大致是这样一个大小顺序:“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承。

权重值高的规则优先获得匹配,权重值相同的规则则是后者优先。

盒子模型

CSS将HTML元素呈现成一个个的矩形区域,即盒子模型。它定义了一个长方形的盒子,每个盒子拥有各自的内边距和外边距,并根据视觉格式化模型来对元素进行布局。