深入理解CSS

CSS是什么？

CSS,全称Cassading Style Sheets（层叠样式表），是前端“三剑客”之一的语言，其主要作用是定义网页页面的样式，其中包括设置字体和颜色、设置位置和大小、添加动画效果等

如何写CSS代码？

来看以下CSS代码：

我们的CSS代码由以下几部分组成：

1.选择器（Selector），比如代码中的h2,用于选择界面中的元素，然后给这些元素去定义样式，比如这里的h2是选择器，说明我们要给所有的h2元素定义样式； 2。属性选择器（Property）：如图中的color、font-size，在选择元素之后，我们要设置元素相关的一些属性，比如说在这里，我们把h2标题的字体颜色改为了红色，字体大小改为了17px； 3.属性值（Value）：如代码中的17px，red，代表选择的属性所具有的值。 4.声明（Declaration）：如代码中的font-size：17px，我们将属性选择器和属性值放在一起用冒号隔开，后面加上分号叫做声明，将多个声明放在一个大括号里面组成了一个声明块；

在页面中如何使用CSS代码

1.外部 CSS 通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！ 每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。 外部样式在 HTML 页面 部分内的 元素中进行定义：如下：

2.内部 CSS 如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。 内部样式是在 head 部分的 元素中进行定义。 内部样式在 HTML 页面的 部分内的 元素中进行定义：如下：

3.行内 CSS 行内样式（也称内联样式）可用于为单个元素应用唯一的样式。 如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。 行内样式在相关元素的 "style" 属性中定义

css是怎样工作的

浏览器运行HTml文件时，会先加载HTML文件，再解析HTMl文件，然后就创建DOM树，最后展示页面，而引入CSS之后，再解析HTMl时会加载CSS，再解析CSS，最后添加样式到DOM节点后再创建DOM树，最后同样展示页面

选择器Selector

作用：找出页面中的元素，以便给他们设置样式 种类：根据使用需求，选择器分为三类：按照标签名、类名或ID；按照属性；按照DOM树中的位置。 通配选择器：一次性选中所有的元素，一般用于去除页面默认的属性

这便是一个通配选择器的案例，将多有标签字体颜色改为red,字体字号改为20px，字体样式改为微软雅黑；