这是我参与 第五届青训营 伴学笔记创作活动的第2天~

CSS是什么？

Cascading Style Sheets：

CSS的全称是层叠样式表，是一种样式表语言，用于描述HTML或XML文档的呈现。

设置字体和颜色

设置位置和大小

添加动画效果

CSS的使用方式

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

外链

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

嵌入

<style>
    body {
        width: 100px;
        height: 100px;
    }
</style>

内联

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

推荐使用外链的写法，因为这样涉及到内容和样式的分离。不推荐使用内联样式。

CSS是如何工作的？

1.浏览器载入HTML文件。

2.将HTML文件转化成一个DOM（Document Object Model）。

3.接下来，浏览器会拉取该HTML相关的大部分资源，比如嵌入到页面的图片、视频和CSS样式。

4.浏览器拉取到CSS之后会进行解析，根据选择器的不同类型把他们分到不同的“桶”中。

5.上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。

6.网页展示在屏幕上（这一步被称为着色）。

选择器

选择器的作用就是找出页面中的元素，以便给他们设置样式。

选择器使用多种方式选择元素：

1按照标签名、类名或ID

2按照属性

3按照在DOM树中的位置

下面介绍常见的选择器类型：

通配选择器

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

元素选择器

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

类选择器

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

id选择器

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

#idName{
  width: 100px;
}

属性选择器

/* 存在 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等。

选择器组合方式

选择器组

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

h1,h2,h3,h4,h5,h6{
  color: red;
}

CSS（上） | 青训营笔记