概述

CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）
主要用于改变网页的一些样式，更高级的交互样式由JavaScript来定义，本文不涉及。

CSS导入方式

1. 内联导入

内联样式：在标签内部使用style属性，属性值是css属性键值对
例如：<div style="color: red">Hello CSS~</div>。
此方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。

2. 内部导入

内部样式：定义<style>标签，在标签内部定义css样式
例如：

<style type="text/css">
	div{
		color: red;
    }
</style>

这种方式可以做到在该页面中复用。

3. 外部导入

外部样式：定义link标签，引入外部的css文件
编写一个css文件。名为：demo.css，内容如下:

div{
	color: red;
}

在html中引入 css 文件，如下
<link rel="stylesheet" href="demo.css">
这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。

CSS选择器

我们要写样式肯定是要选择某部分结构，对其修改样式，所以我们需要CSS选择器。

1. 元素选择器

格式：
元素名称{color: red;}
例子：
div {color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/

2. 类选择器

格式：
.class属性值{color: red;}
例子：
html代码如下：

<div class="cls">hello css3</div>

css代码如下：

.cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

3. id选择器

格式：
#id属性值{color: red;}
例子：
html代码如下：
<div id="name">hello css2</div>
css代码如下：
#name{color: red;}/*该代码表示将页面中id属性值是 name 的标签的内容的颜色设置为红色*/
注：页面中的id属性具有唯一性

CSS属性

CSS属性众多，本文不详述，需要用时查官方文档即可。
【CSS官方文档】

Q.E.D.