深入理解CSS | 青训营

九歌947
138 阅读7分钟

CSS的定义

CSS的全称是层叠样式表（Cascading Style Sheets，缩写为 CSS ），是一种样式表语言，用于描述 HTML 或 XML 文档的呈现。

示例

选择器Selector {
    属性Property: 属性值Value; /* 规则 */ 
}

CSS的使用方式

CSS的使用方式分为三种，分别为：外链、嵌入、内联。

  1. 外链

<link rel="stylesheet" href="xxx.css">

  1. 嵌入
html
复制代码
<style>
    body {
        width: 100px;
        height: 100px;
    }
</style>
  1. 内联

<p style="margin: 1em 0">This is a example.</p>

CSS工作原理

当浏览器加载HTML后，对HTML进行解析，浏览器一方面利用解析结果生成DOM树，另一方面加载CSS并解析，将解析所得的样式添加到DOM树的节点，由此构成的DOM树用于进一步渲染展示页面。

选择器

选择器用于找出页面中的元素以为其设置样式。选择元素的方式有多种，有按照标签名、类名或id进行选择，按照属性进行选择，按照DOM树中位置进行选择。除了基本的通配选择器、标签选择器、id选择器、类选择器、属性选择器外，还有伪类选择器、组合选择器、选择器组。
下面介绍常见的选择器类型：

通配选择器

css
复制代码
*{
  width: 100px;
}

作用：匹配所有的HTML元素。

元素选择器

css
复制代码
div{
  width: 100px;
}

作用：匹配所有元素名相同的元素。

类选择器

css
复制代码
.className{
  width: 100px;
}

作用：匹配所有类名相同的元素。

id选择器

css
复制代码
#idName{
  width: 100px;
}

作用：匹配对应ID的元素。

属性选择器

css
复制代码
/* 存在 href 属性并且属性值以"example"开头的<a> 元素 */
a[href^="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

补充：属性选择器语法中^=等的使用问题

伪类选择器

用于定义元素的特殊状态分为两种，分别为状态类伪类和位置类伪类。

状态类伪类：元素在特定的状态下被选中

  • 链接：link、visited、hover、active；（也存在focus，但是时间比较短，因此忽略不计）
  • 输入框：checked、disabled、enabled、focus、invalid（输入内容无效）；

结构类伪类：元素在DOM树中的位置相关，如：first-child、last-child等。

选择器组合方式

名称语法说明
直接组合AB同时满足A和B
后代组合A B选中B，如果他是A的子孙
亲子组合A>B选中B，如果他是A的子元素
兄弟选择器A~B选中B，如果它在A后且和A同级
相邻选择器A+B选中B，如果它紧跟在A后面

选择器组

将相同样式的选择器组合在一起，利用逗号分隔。

css
复制代码
h1,h2,h3,h4,h5,h6{
  color: red;
}

颜色

在CSS中颜色使用三种方式：RGB模型、HSL模型、关键字。

RGB模型：#000000或rgb(0,0,0)

HSL模型：hsl(200,30%,50%)

Hue -- 色相，取值为0-360；

Saturation -- 饱和度，色彩的鲜艳程度，取值范围为0-100%，越高越鲜艳；

Lightness -- 亮度，颜色的明亮程度，取值为0-100%，越高越亮；

关键字：red

透明度alpha：取值为0-1，越高越不透明。

使用方式：#ff006e、rgba(255,0,0,0.43)、hsla(0,100%,50%,0.43)

字体与段落格式

字体族

示例：font-family: "Gill Sans Extrabold", sans-serif;

一般来说字体族需要设置多个，这是为了设备的兼容性问题，其匹配规则按照从前往后的方式进行匹配。需要注意的是要在最后设置通用字体族。

通用字体族分为五种，分别为：

  • Serif 衬线体；
  • Sans-Serif 无衬线体；
  • Cursive 手写体；
  • Fantasy：梦幻字体族；
  • Monospace：等宽字体。

字体族使用建议：

  1. 字体列表最后写上通用字体族；
  2. 英文字体放在中文字体前面；

远程字体：使用@font-face，示例如下：

css
复制代码
@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

字体大小：font-size，其取值有三种方式，分别为关键字、长度单位（px、em）、百分比。

需要注意的是，当字体使用百分比时是相对父元素字体大小的。

字体样式：font-style，取值分为三种，分别为normal（默认）、italic（斜体）、oblique（倾斜体，若当前字体不存在倾斜体就会用斜体代替）。

字体粗细：font-weight，可以取数字值（100-900），也可以使用关键字 normal（400）、bold（700）。需要注意的是，不是所有的字体粗细都存在数字表示的。

行高：line-height，表示两行文字之间baseline的距离，取值为四种，分别为 normal（默认）、不带单位的数字（与当前设置的字体尺寸相乘得到行高）、带单位的数字（固定行间距）、百分数（基于当前字体尺寸得到行高）。

建议使用 font 来进行简写，使用公式如下：font: font-style font-weight font-size/line-height font-family

对齐方式：text-align，取值分为四种：left、right、center、justify

间距：分为两种间距，分比为letter-spacing（字符间距）和word-spacing（单词间距）。

首行缩进：text-indent，取值可以为带单位数值，也可以为百分比（百分比是相对于块宽度的）。

文本装饰：text-decoration，取值为none（默认）、underline、line-through、overline。

空白：white-space，其详细取值请参阅mdn文档

CSS的调试

浏览器开发者模式（F12）

CSS选择器优先级

样式的优先级一般为：!import > style > id > class > 元素。然而在实际使用中，我们常常遇到多类选择器判断优先级的问题，那么遇到这个问题该如何解决呢？

优先级由A、B、C、D四个值进行判断，其中对应值计算规则如下：

  • 如果存在内联样式则A为1，否则为0；
  • B为ID选择器出现的个数；
  • C为类选择器、属性选择器、伪类选择器出现的个数；
  • D为标签选择器和伪元素选择器出现的个数

将ABCD进行按顺序进行组合，组合数字最大的，优先级更高，当优先级相同时，遵循后面的优先级更高的原则。

样式属性的覆盖与冲突

覆盖：当样式属性相同的情况下，遵循优先级高的覆盖优先级低的，后面的覆盖前面的这个原则。

继承：当样式属性没有设置且可以继承的时候，其会自动继承父元素中的样式属性计算值，需要注意的是这里继承的是样式的计算值，而不继承相对值。也可以使用inherit属性值来进行显式继承。

初始值：属性的默认初始值，CSS中的每个属性都有一个初始值。

CSS的属性计算过程

其流程描述如下：

  1. HTML解析成DOM树，解析过程中将从CSS中搜集的样式放在一起组成样式规范；
  2. 对样式规范进行筛选，获得符合规则的一组声明值；
  3. 按照优先级顺序选出优先值最高的属性值即层叠值；
  4. 若层叠值为空，此时采用继承或使用初始值的方法得到指定值（指定值一定不为空）；
  5. 将一些相对值转换为绝对值，从而获得计算值（此时，属性值之中的关键字、百分比等还没有转换）；
  6. 进一步将计算值转换从而获得使用值（此时的使用值中存在小数）；
  7. 将小数转换为整数，从而得到实际值。

计算值和使用值的区别：单纯的分析CSS和HTML就可以得到的值即为计算值，使用者需要结合实际环境才能得到的值为使用值。继承的属性值为计算值。

布局

CSS中布局的相关技术分为三种：分别为文档流、浮动和绝对定位。

avatar
文章
阅读
粉丝