1、CSS简介（标记语言）
1.1、HTML的局限性
只关注内容的语义 丑 可以做简单的样式，但带来的是无尽的臃肿和繁琐
1.2、CSS-网页的美容师
主要作用：用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
总结：
- HTML主要做结构，显示元素内容
- CSS美化HTML,布局网页
- CSS最大的价值：由HTML专注做结构呈现，样式交给CSS,即结构（HTML）与样式（CSS）相分离。
1.3、CSS语法规范
CSS规则由两个主要的部分构成，选择器以及一条或多条声明
- 选择器是用于指定CSS样式的HTML标签，花括号内是对该对像设置的具体样式
- 属性和属性值以键值对的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等
- 属性和属性值之间用英文“：” 分开
- 多个“键值对”之间用英文“；”进行区分
1.4、CSS代码风格
符合实际开发书写方式
1.格式书写
①紧凑格式
h3 {color:deeppink; font-size:20px;}②展开格式
h3 {
color:pink;
font-size:20px;
}2. 样式大小写：强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外
3.空格规范
h3 {
color: pink;
}①属性值前面，冒号后面，保留一个空格
②选择器（标签）和大括号中间保留一个空格
③④⑤⑥
2、CSS基础选择器
2.1 CSS选择器的作用
根据不同需求把不同的标签选出来这就是选择器的作用，简单来说，就是选择标签用的
2.2、选择器分类
2.2.1、基础选择器
- 由单个选择器组成的
- 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器
1、标签选择器
语法：
标签 {
属性1：属性值1；
属性2：属性值2；
}
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签
优点：
能快速为页面中同类型的标签统一样式
缺点：
不能设计差异化样式，只能选择全部的当前标签
2、类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号表示。
语法：
.类名{
属性1：属性值1；
属性2：属性值2；
......
}
结构需要用class属性来调用class类的意思
<div class='red' > 变红色</div>
<head>
<style>
/*类选择器口诀：样式点定义 结构（class）调用 一个或多个 开发最常用*/
.red{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="red">冰心</li>
<li>李大钊</li>
<li>陈独秀</li>
<li>高君曼</li>
<li>胡适之</li>
</ul>
</body>注意：
①类选择器使用“.”（英文点号） 进行标识，后面紧跟类名（自定义，我们自己命名）
②可以理解为给这个标签起了一个名字，来表示
③长名称或词组可以使用中横线来为选择器命名
④不要使用纯数字，中文等命名，尽量使用英文字母来表示
⑤命名要有意义，尽量使别人一眼就知道这个类名的目的
⑥命名规范：见附件（Web前端开发规范手册.doc）
①②③④⑤⑥
多类名：
（1）多类名使用方式
①在标签class属性中写多个类名
②多个类名中间必须用空格分开
③这个标签就可以分别具有这些类名的样式
（2）多类名使用场景
①可以把一些标签元素相同的样式（共同的部分）放到一个类里面
②这些标签都可以调用这个公共的类，然后再调用自己独有的类
③从而节省CSS代码，修改也很方便
④⑤⑥
3、id选择器
和类选择器的区别：
①类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
②id选择器好比人的身份证号码，全中国唯一的，不得重复。
③id选择器和类选择器最大的不同在于使用次数上
④类选择器在修改样式中用的很多，id选择器一般用于页面唯一性的元素上，经常与javascript搭配使用
⑤⑥
4、通配符选择器
在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）
语法：
* {
属性1： 属性值1；
......
}
- 通配符选择器不需要调用，自动就给所有的元素使用样式
- 特殊情况才使用，后面讲解使用场景（以下是清除所有元素标签的内外边距）
* {
margin: 0;
padding: 0;
}
2.2.2、复合选择器
3、CSS字体属性
CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）
3.1、字体系列
h2 { font-family: "微软雅黑";}
div { font-family: Arial, "Microsof Yahei", "微软雅黑";}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果空格隔开的多个单词组成的字体，加引号。
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
- 最常见的几个字体：body{ font-family:"Microsoft YaHei", tahoma,arial,"Hiragino Sans GB";}
3.2、字体大小
font-size属性定义字体大小
p {
font-size: 20px;
}
- px（像素）大小是我们网页的最常用单位
- 谷歌浏览器默认文字大小为16px
- 不同浏览器可能默认显示的字体大小不一致，我们尽量给一个明确大小，不要默认大小
- 可以给body指定整个页面文字的大小
3.3、字体粗细
font-weight: normal | bold | bolder | lighter | number
参数：
normal：正常的字体，相当于number为400.声明此值将取消之前任何设置
bold:粗体，相当于number为700,也相当于b对象的作用。
bolder：IE5+ 特粗体
lighter:IE5+ 细体
number:IE5+ 100 | 200 | 300 | 400 | 500 。。。| 900
3.4、文本样式
font-style
| 属性值 | 作用 |
| normal | 默认值，浏览器会显示标准的字体样式 font-style:normal |
| italic | 浏览器会显示斜体的字体样式 |
3.5、字体复合属性
字体属性可以把以上文字样式综合来写，这样可以节约代码；
body {
font: font-style font-weight font-size/line-height font-family;
}
- 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性可以空格隔开
- 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用
总结：
| 属性 | 表示 | 注意点 |
| font-size | 字号 | 我们通常用的单位是px像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是700或bold 不加粗是normal或者400 记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是italic 不倾斜是normal 工作中我们最常用normal |
| font | 字体连写 | 1、字体连写是有顺序的 不能随意换位置 2、其中字号和字体必须同时出现。 |
4、CSS文本属性
CSS TEXT（文本）属性可定义文本的外观，比如文本的颜色，对齐文本、装饰文本、文本缩进，行间距等。
4.1、文本颜色
color属性用于定义文本的颜色。
div {
color:red;
}
| 表示 | 属性值 |
| 预定义的颜色值 | red 、green、blue |
