概念与理解
层叠样式表 — 也就是 CSS — 是在 HTML 之后应该学习的第二门技术。HTML 用于定义内容的结构和语义，CSS 用于设计风格和布局。比如，我们可以使用 CSS 来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果。
修改页面样式
根据样式表在页面中呈现的方式不同，可以通过以下三种方式在页面中使用
内联样式
该样式用于某个元素属性中，借助于 style 标签属性，为当前的标签添加样式说明，格式如下：
<标签名 style="样式声名">
样式声明：由 CSS 属性和值组成
实验：css内联样式
css内联样式表就是把css代码直接写在现有的HTML标签中
-
创建一个新的 HTML 文件 myhtml9.html 文件
点击浏览器图标，查看网页效果
选择器（很多标签如何选定）
内嵌样式
借助于 style 标签，在 HTML 文档中嵌入 CSS 样式代码，实现 CSS 样式与 HTML 标签之间的分离，格式如下：
实验：css内嵌样式
嵌入式css样式，就是可以把css样式代码写在 标签之间。
-
创建一个新的 HTML 文件 myhtml10.html 文件
点击浏览器图标，查看网页效果
外链样式
外链式css样式(也可称为外联式)就是把css代码写一个单独的外链文件中，这个css样式文件以“”为扩展名，在内（不是在标签内）使用标签将css样式文件链接到HTML文件内，创建一个单独的样式表文件用来保存样式规则
- 一个纯文本文件，文件后缀为 .css
- 该文件中只能包含样式规则
- 样式规则由选择器和样式声明组成
CSS 选择器用于查找 HTML 中的标签，通过标签名或者某些属性值到页面中选取相应的标签，并为其应用样式
实验：css外链样式
-
新建一个css外部层叠样式表，文件名css1.css，存放在 static/css目录下
修改 HTML 文件 myhtml10.html 文件
点击浏览器图标，查看网页效果
CSS 选择器
作用
匹配文档中的某些标签为其应用样式，根据查找元素的方式不同，可以分为以下几类：
标签选择器
根据标签名匹配文档中所有该标签，语法格式：
实验：标签选择器
-
修改 HTML 文件 myhtml10.html 文件，将外链样式注释掉，重新修改h1的样式
点击浏览器图标，查看网页效果
ID选择器
通过 id 属性进行标签的定位，然后进行属性的修改
实验：ID 选择器
-
修改 HTML 文件 myhtml10.html 文件
点击浏览器图标，查看网页效果
class 选择器
根据标签的 class 属性值匹配相应的标签，class属性值可以重复使用，实现样式的复用，语法格式：
实验：class 选择器
-
修改 HTML 文件 myhtml10.html 文件
点击浏览器图标，查看网页效果
-
使用最频繁，类选择器，可以选单个，可以选多个
后代选择器
使用后代选择器，需要在HTML页面中说明父子关系
实验：后代选择器
-
创建一个新的 HTML 文件 myhtml11.html 文件
点击浏览器图标，查看网页效果
子代选择器
匹配蛮子选择器的所有直接子标签，语法格式：
实验：子代选择器
-
修改 HTML 文件 myhtml11.html 文件
点击浏览器图标，查看网页效果
常见标签创建方法的快捷键
伪类选择器
该类选择器可以为标签的不同状态分别设置样式，但必须与基础选择器结合使用才能生效。
分类
- :hover表示：鼠标划过时的状态
- :focus表示：焦点状态（文本框被编辑时就称为获取焦点）
使用
实验：伪类选择器
-
创建一个新的 HTML 文件 myhtml12.html 文件
鼠标只有移动到文字上时才变色，接着修改 myhtml12.html 文件
加过渡变化
鼠标移动的样式修改，现在是竖线，改成手形
点击浏览器图标，查看网页效果