CSS初识
- 概念：
CSS(Cascading Style Sheet),通常称为CSS样式表或层叠样式表（级联样式表）
-
作用：
- 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版画的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制以及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
CSS样式表
1.行内式（内联样式）
- 概念：
称为行内样式、行间样式，是通过标签的Style属性来设置
-
基本语法格式：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容</标签名>
实际上任何HTML标签都拥有style属性，用来设置行内式。。
-
案例：
<div style="color:red;font-size:12px;">我爱前端 前端真棒</div> -
注意：
- style其实就是标签的属性
- 属性和值中间是:
- 多组属性之间用;隔开
- 只能控制当前的标签和嵌套在其中的子标签
-
缺点：
没有实现样式和结构分离。
2.内部样式（内嵌样式）
- 概念：
称为内嵌式，是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
-
其基本语法格式如下：
<head> <style type="text/CSS"> 选择器{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } </style> </head> <Style> div{ colr:red; font-size:20px; } </style> -
注意：
- style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
- type="text/CSS"在HTML5中可以省略。
- 只能控制当前的页面。
-
缺点：
没有彻底分离。
3.外部样式（外链式）
- 概念：
成外链式，是将所有的样式放在一个或多个以CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文件中。
-
其基本语法格式如下
<head> <link rel="stylesheet" type="text/css" href="css文件路径"/> </head> -
注意：
- link是一个单标签。
- link标签需要放在head头部标签中，并且指定link标签的三个属性。
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表，我们都可以省略。 |
| href | 定义所链接外部样式表文件deurl，可以是相对路径也可以是绝对路径。 |
4.三种样式表总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 内联样式 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内嵌样式 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制整个站点（多） |
