目录
学习目标：
1. 说出什么是CSS
2. 能够使用CSS基础选择器
3. 能够设置字体样式
4. 能够设置文本样式
5. 能够说出CSS的三种引入方式
6. 能够使用chrome调试工具调试样本
一、CSS简介
1. CSS是什么
CSS是层叠样式表（Cascading Style Sheets）的简称，也称为CSS样式表/级联样式表。
用于显示网页的样式，实现结构、样式相分离。
2. CSS语法规范
CSS规则由两部分组成：选择器、一条或者多条声明。
选择器是用于指定CSS样式的HTML标签，花括号内是具体样式；
属性和属性值是 键值对；
属性：样式属性，属性和属性值之间用：分开。
3. CSS代码风格
<style> —— 在head里
p {
color: red;
font-size: 12px;
}
</style>
二、CSS基础选择器
1. 选择器的作用
选择标签用的。
2.选择器分类
2.1基础选择器
由单个选择器组成，又分为：标签选择器、类选择器、id选择器、通配符选择器。
2.2 复合选择器
3. 标签选择器
用HTML标签名称作为选择器。
4. 类选择器
差异化选择不同标签
.red {
color: red;
}
类选择器口诀：样式点定义，结构类调用，一个或多个，开发最常用。
类选择器——多类名
<div class="red font20">亚瑟</div>
5. id 选择器
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。
#nav {
color：red；
}
id选择器口诀: 样式#定义，结构id调用，只能调用一次，被人切勿使用
id选择器与类选择器区别：使用次数上
类选择器可被多次使用，id选择器只能被使用一次。
6. 通配符选择器
不用调用，自动给所有元素使用样式。
* {
margin：0；
padding：0；
}
三、CSS字体属性
CSS fonts（字体）属性用于定义字体系列、大小、粗细、文字样式（如斜体）。
1. 字体系列： font-family
p {
font-family: "Microsoft YaHei", Arial;
}
各种字体用逗号隔开；
字体有前到后依次类推；
最常见的几个字体：
body{font-family: 'Microsoft YaHei', tahoma, Arial, "Hiragion Sans GB";}
2. 字体大小：font-size
p {
font-size: 16px;
}
px大小是网页最常用单位；
谷歌默认文字大小为16px;
不同浏览器默认字大小不一样，所以我们尽量设置一个大小；
可以给body指定整个页面的文字大小，标题的文字大小需要额外设定。
3. 字体粗细：font-weight
p {
font-weight: bold;
}
| 属性 | 描述 |
|---|---|
| normal | 属性值（不加粗的） |
| bold | 加粗 |
| 100-900 | 400=normal；700=bold 无单位 |
4. 文字样式：font-style
p {
font-style: normal; //让倾斜的字体不倾斜；italic倾斜
}
5. 复合属性：font-style font-weight font-size/line-weight font-family
body {
/* font: font-style font-weight font-size/line-weight font-family */
font: italic 700 16px "Microsoft YaHei";
}
顺序不能变，字号font-size和字体font-family必须有
提问：
字体符合属性怎么写？有什么细节需要注意？
如果让加粗的文字不加粗显示 倾斜的文字不倾斜该怎么做呢？
四、CSS文本属性
CSS Text属性可定义文本的外观，如文本颜色、对齐文本、装饰文本、文本缩进、行间距等等。
1. 文本颜色：color
最常用的是十六进制
2. 对齐文本：text-align
h1 {
text-align: right;
}
3. 装饰文本：text-decoration
下划线、删除线、上划线
重点记住如何添加下划线，如何让下划线删除
4. 文本缩进：text-indent
div {
text-indent: 10px;
}
缩进当前元素两个文字的大小如下。如没有设置当前元素的大小，则按照父元素元素的大小。
div {
text-indent: 2em;
}
5. 行间距：line-height
p {
line-height: 26px;
}
行高由三部分组成：上间距、文字高度、下间距。
总结：
五、CSS引入方式
1. 行内样式表（行内式）
在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。
PS: 未实现结构样式相分离，不常用。
<div style="color: pink;">小年快乐<div>
2. 内部样式表（嵌入式）
写到HTML内部，将所有的CSS代码抽取出来，单独放到<style>标签内。
PS: 理论上<style>可放于HTML文档中任何地方，但一般放到head里。控制整个页面。但未完全分离出去。
<style>
div {
line-height: 25px;
}
</style>
3. 外部样式表（连接式）
适于样式较多的情况：样式单独写在CSS文件中，之后将CSS文件引入HTML页面中使用。
PS: 引入外部样式表步骤:
1. 新建一个后缀名为.css的样式文件，将所有CSS代码放入其中。
2. 在HTML页面中，使用<link>标签引入这个文件。
<link rel="stylesheet" href="CSS文件路径">
总结：
六、chrome调试工具
调试HTML和CSS
460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
