css 网站的美容师，它的作用便是对页面的样式进行修改、美化
知识导航
- css引入的三种格式
- css基础选择器
- font属性
- 基本外观属性
css初识
- 概念：
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） - 作用：
- 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
- CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
1. css引入的三种格式
1.1行内式
它是通过标签的style属性来直接控制样式的
使用：
基本格式
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
示例
<body>
<p style="color: red;">这是一个段落</p>
</body>
注意
- 样式属性和样式值之间以:隔开
- 不同属性之间以；隔开
- 只能控制当前的标签以及嵌套其中的子标签
- 没有实现结构和样式的分离
1.2 内嵌样式表
将css代码接种写在head标签内
其语法格式如下：
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
示例：
<style>
div {
color: red;
font-size: 12px;
}
</style>
注意:
- style 标签一般是写在head标签内，但是理论上它是可以写在任何位置
- type=“text/css” 在html5中可以省略。
- 只能控制当前的页面
- 它的缺点是没有彻底的实现结构和样式的分离
1.3 外链式
是将所有的样式均放在一个或者多个的以.css后缀结尾的文件中，然后通过link标签实现html文件与css文件的链接
基本语法格式：
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
注意：
- link标签需要放在head标签内，并且需要指定它的三个属性
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。我们都可以省略 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
1.4 三种方式总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
css基础选择器
作用：找到指定的html元素，就是选择指定的标签
2.1 标签选择器
是以html标签名作为选择器
基本语法：
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3; }
- 它的作用是将某一类标签全部选择出来，比如选择全部的div
- 它的缺点是不能设计差异化样式
2.2 类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名。
基本用法：
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签
<div class='类名'></div>
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)见名知意即可
2.3 id选择器
其用法与类选择是相同的
基本语法：
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签
<p id="id名"></p>
它和类选择的区别是在使用次数上。id只能使用一次，类却可多次使用
2.4 通配符选择器
通配符选择器用*号表示， * 就是 选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
基本语法：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
值得注意的是：
它会匹配页面所有的元素，降低页面响应速度，不建议随便使用
font属性
对字体进行设计的一种属性
3.1 font-size
设置字体的大小
如
p {
font-size:20px;
}
单位推荐使用px。谷歌浏览器默认的大小为16px。一般不同浏览器的默认字体的大小不同，所以我们都会事先设置一下页面的文本字体大小
3.1 font-family
设置使用哪种字体
如：
p{ font-family:"微软雅黑";}
网页中常用的字体有宋体、微软雅黑、黑体等,我们可以同时为它指定多种字体，中间以逗号隔开。表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体， 如果都没有，则会使用我们电脑默认的字体。
值得注意的是：
- 各种字体之间必须使用英文状态下的逗号隔开。
- 文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
- 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示
扩展：cssUnicode字体
为什么使用 Unicode字体？
答：在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。同时xp 系统不支持 类似微软雅黑的中文。
解决方法
- 你可以使用英文来替代。 比如
font-family:"Microsoft Yahei"。 - 在 CSS 直接使用 Unicode 编码来写字体名称
如：
font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。
不同字体对应的Unicode编码
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
3.3 font-weight
用来设置字体的粗细
它的属性值：
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话 |
3.4 font-style
设置字体的风格，是否倾斜
其可用属性值如下：
| 属性 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 font-style: normal; |
| italic | 浏览器会显示斜体的字体样式。 |
3.5 设置字体格式的综合写法
基本语法：
选择器 { font: font-style font-weight font-size/line-height font-family;}
注意：
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
- 其中不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用。
css外观属性
4.1 color
用于定义文本的颜色。其取值方式有三种，如下：
| 表示表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue |
| 十六进制 | #FF0000（俩俩相同可以写成f00），#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
4.2 text-align
设置文本的对其方式（文本，盒子中的内容而不是盒子本身）
其属性值如下：
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
4.3 line-height
设置行间距
它的属性值就是数字和它的单位。单位还是推荐使用px
小技巧：一般情况下，行距比字号大7.8像素左右就可以了。
4.4 text-indent
主要是设置段落的首行缩进，比如一般段落的首行会缩进俩个位置
它的属性值：
建议使用em作为设置单位
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
如：
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
4.5 text-decoration
对文本进行装饰，比如有无下划线。通常我们用于给链接修改装饰效果
它的属性值：
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。（不常用） |
| line-through | 定义穿过文本下的一条线。（不常用） |
