一、css简介
1.1.初识CSS
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：**CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。**
CSS 最大价值: **由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离**
1.2.语法规范
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
- 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英文“;”进行区分
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>1.3.CSS代码风格
1.3.1.样式格式书写
- 紧凑格式
h3 { color: deeppink;font-size: 20px;}- 展开格式
h3 {
color: pink;
font-size: 20px;
}强烈推荐第二种格式， 因为更直观。
###### 1.3.2. 样式大小写风格
1.小写格式
h3 {
color: pink;
}2.大写格式
H3 {
COLOR: PINK;
}强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
###### 1.3.3. 样式空格风格
h3 {
color: pink;
}属性值前面，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格
二、CSS基础选择器
2.1. 标签选择器
- 标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
/* 标签选择器：标签名 */
属性：属性值
...
p {
color: aquamarine;
}
div {
color: mediumorchid;
}2.2. 类选择器（最常用）
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名， 尽量使用英文字母来表示。
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
/* 类选择器口诀：样式点定义 结构类<class>调用 一个或多个 开发最常用 */
2.3. id选择器
- id选择器使用#进行标识，后面紧跟id名
- 元素的id值是唯一的，只能对应于文档中某一个具体的元素
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名"></p>
2.4. 通配符选择器
- 通配符选择器用号表示， 就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
下面指清除所有的元素标签的内外边距
* {
margin: 0;
padding: 0;
}三、css字体属性
3.1.font-size 字体大小
px（像素）大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
- 可以给 body 指定整个页面文字的大小
h2 {
font-size: 16px;
}3.2.字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细
● normal 默认值
● bold 定义加醋 700
● 100-900 400=normal 700=bold
p {
font-weight: bold;
}
3.3.字体样式
CSS 使用 font-style 属性设置文本的风格。
● normal 默认值
● italic 斜体
● 平时很少加斜体 反而要给斜体标签<em></em>改为正常字体
p {
font-style: normal;
}3.4.font-family 字体系列
最好是英文
h2 {
font-family: "Microsoft YaHei";
}
p {
font-family: "Times New Roman",'Times New Roman', Times, serif;
}3.5.font复合属性
顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
body { font: font-style font-weight font-size/line-height font-family;}