1 CSS简介
CSS(Cascading Style Sheets) ，通常称为CSS样式表
语法规范：
- 所有的样式，都包含在 <style></style> 标签内。<style> 一般写到<head> </head> 内
- 注释：/* ... */
- 键值对形式，多条之间；分隔
- 字母小写
2 CSS引入方式
| 样式表 | 写法 | 优点 | 控制范围 |
|---|---|---|---|
| 行内样式表 | <div style="color: red; font-size: 12px;"> </div> |
书写方便，权重高 | 一个标签（少） |
| 内部样式表 | <style> div { color: red; font-size: 12px; } </style> |
部分结构和样式相分离 | 一个页面（中） |
| 外部样式表 | <link rel="stylesheet" href="css文件路径"> | 完全实现结构和样式相分离 | 整个站点（多） |
注：
- rel 定义当前文档与被链接文档之间的关系，在这里需要指定为 “stylesheet”，表示被链接的文档是一个样式表文件
3 CSS基础选择器
选择器分类：基础、复合选择器
| 基础选择器 | 作用 | 特点 | 使用情况 | 语法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 多 | p {color: red;} |
| 类选择器 | 可以选出1个或者类名相同的标签 | 可以根据需求选择 | 很多 | .nav {color: red;} |
| id选择器 | 一次只能选择1个标签 | 只能使用一次 | 一般 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 少 | * {color: red;} |
4 CSS字体属性
| 属性 | 表示 | 属性值 | 说明 |
|---|---|---|---|
| font-size | 字号 | 10px | 单位：px 像素（必须） |
| font-family | 字体 | "微软雅黑" | 按团队约定来 |
| font-weight | 字体粗细 | bold，normal，100-900 | 加粗是 700 或者 bold 不加粗 是 normal 或者 400，数字不跟单位 |
| font-style | 字体样式 | normal，italic | 倾斜是 italic 不倾斜 是 normal（常用） |
| font | 连写形式 | 按规定顺序书写，字号字体是必须 |
<style>
/* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
div {
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahe';
/* 复合属性：简写的方式 节约代码*/
/* 顺序：font-style font-weight font-size/line-height font-family */
font: italic 700 16px 'Microsoft yahe';
}
</style>
- 必须保留
font-size和font-family属性，否则 font 属性将不起作用
5 CSS文本属性
CSS 文本属性可以设置文本的 外观，比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等
| 属性 | 表示 | 属性值 | 说明 |
|---|---|---|---|
| color | 文本颜色 | red、#ccc、rgb(100%,0%,0%) | 16进制最常用 |
| text-align | 文本对齐 | left、right、center | 设定文字水平的对齐方式 |
| text-indent | 文本缩进 | 2em，em是一个字大小 | 段落首行缩进 |
| ext-decoration | 文本修饰 | none、underline、overline | 添加下划线 underline 取消下划线 none |
| line-height | 行高 | 30px | 控制行与行之间的距离，文字垂直居中 |
6 CSS复合选择器
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器
6.1 后代选择器
可以选择父元素里面的子元素
.class h3 {
color:red;
font-size:16px;
}
- .class 和 h3 中间用空格隔开
- .class 是父级，h2 是子级，最终选择的是h3
6.2 子选择器
简单理解就是选亲儿子元素
.class>h3 {
color:red;
font-size:14px;
}
- h3必须是.class的亲儿子，其孙子、重孙之类都不归他管
6.3 并集选择器
可以选择多组标签，同时为它们定义相同的样式
/*选择 ul 和 div 标签元素 */
ul,div {
样式声明
}
- 并集选择器通常用于集体声明
6.4 伪类选择器
- 用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
- 伪类选择器书写最大的特点是用冒号表示，比如
:hover、:first-child - 伪类选择器很多，比如有链接伪类、结构伪类，这里先记录常用的链接伪类选择器
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 鼠标移动到链接上 */
a:active /* 选定的链接 */
记忆法
love hate 爱上了讨厌
a :hover {
/*鼠标经过的时候，变成了红色*/
color:red;
}
:focus伪类选择器
用于选取获得焦点的表单元素
input : focus {
background-color:yellow;
}
6.5 复合选择器小结
| 选择器 | 作用 | 特征 | 使用情况 | 用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 少 | 符号是> .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 选择不同状态的链接 | 链接相关 | 少 | 重点记住 a{} 和 a:hover |
| :focus选择器 | 选择获得光标的表单 | 表单相关 | 少 | input:focus |
6.6 权重计算
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
7 CSS元素显示模式
| 元素模式 | 常见元素 | 元素排列 | 设置宽高 | 默认宽度 | 包含 | 注意 |
|---|---|---|---|---|---|---|
| 块级元素 | h标签，div，p，ul，li | 独占一行 | 可以 | 父容器的100% | 可以包含任何标签 | p、h标签内不能再放块级元素 |
| 行内元素 | <a>、<em>、<i>、<span> | 一行多个 | 不可以 | 内容的宽度 | 容纳文本或其他行内元素 | a标签可以放块级元素 |
| 行内块元素 | <img />、<input />、<td> | 一行多个 | 可以 | 内容的宽度 |
模式转换：
- 转换为块元素：display: block
- 转换为行内元素：display: inline
- 转换为行内块：display: inline-block
一个小技巧：单行文字垂直居中的代码
让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中
8 CSS背景
给页面元素添加背景样式
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
| 属性 | 作用 | 属性值 | 说明 |
|---|---|---|---|
| background-color | 背景颜色 | 16进制 | 默认值 transparent |
| background-image | 背景图片 | none或url | url不需要加引号 |
| background-repeat | 是否平铺 | repeat/ no-repeat /repeat-x/repeat-y | 默认平铺repeat |
| background-position | 背景位置 | 方位名词 或者 精确单位 | 全写，写一个值 |
| background-attachment | 背景附着 | scroll(背景滚动) /fixed(背景固定) | |
| 背景色半透明 | 颜色透明 | background : rgba(0,0,0,.3);后面必须是四个值 |
特别注意：background-position
- 参数都是方位名词，则两个值前后顺序无关，只指定一个方位名词，则第二个值默认居中对齐
- 参数是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标，只指定一个数值，是 x 坐标，另一个默认垂直居中
- 参数是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标
背景简写：
background: transparent url(image.jpg) repeat-y scroll center top
body {
height: 3000px;
background-color: #ccc;
background-image: url(images/sms.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background : rgba(0,0,0,0.3);
/*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/
background: #ccc url(images/sms.jpg) no-repeat fixed center top;
}