1. 引入CSS样式表
要书写css款式，那css款式书写的地位在哪呢？1.1 行内式（内联款式）
概念：
称行内款式、行间款式.
是通过标签的style属性来设置元素的款式
- 其根本语法格局如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>实际上任何HTML标签都领有style属性，用来设置行内式。
- 案例：
<div style="color: red; font-size: 12px;">青春不常在，放松谈恋爱</div>留神：
- style其实就是标签的属性
- 款式属性和值两头是
: - 多组属性值之间用
;隔开。 - 只能管制以后的标签和以及嵌套在其中的字标签，造成代码冗余
毛病：
- 没有实现款式和构造相拆散
1.2 外部样式表（内嵌样式表）
概念：
称内嵌式
是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
- 其根本语法格局如下：
<head><style type="text/CSS"> 选择器（抉择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; }</style></head><style> div { color: red; font-size: 12px; }</style>留神：
- style标签个别位于head标签中，当然实践上他能够放在HTML文档的任何中央。
- type="text/css" 在html5中能够省略。
- 只能管制以后的页面
毛病：
没有彻底拆散
1.3 内部样式表（外链式）
概念：
称链入式
是将所有的款式放在一个或多个以.CSS为扩展名的内部样式表文件中，
通过link标签将内部样式表文件链接到HTML文档中
- 其根本语法格局如下：
<head> <link rel="stylesheet" type="text/css" href="css文件门路"></head>留神：
- link 是个单标签
- link标签须要放在head头部标签中，并且指定link标签的三个属性
| 属性 | 作用 |
|---|---|
| rel | 定义以后文档与被链接文档之间的关系，在这里须要指定为“stylesheet”，示意被链接的文档是一个样式表文件。 |
| type | 定义所链接文档的类型，在这里须要指定为“text/CSS”，示意链接的内部文件为CSS样式表。咱们都能够省略 |
| href | 定义所链接内部样式表文件的URL，能够是相对路径，也能够是绝对路径。 |
1.4 三种样式表总结（地位）
| 样式表 | 长处 | 毛病 | 应用状况 | 管制范畴 |
|---|---|---|---|---|
| 行内样式表 | 书写不便，权重高 | 没有实现款式和构造相拆散 | 较少 | 管制一个标签（少） |
| 外部样式表 | 局部构造和款式相拆散 | 没有彻底拆散 | 较多 | 管制一个页面（中） |
| 内部样式表 | 齐全实现构造和款式相拆散 | 须要引入 | 最多，强烈推荐 | 管制整个站点（多） |
2. CSS根底选择器
2.1 标签选择器
概念：
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定对立的CSS款式。
- 语法：
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 作用：
标签选择器 能够把某一类标签全副抉择进去 比方所有的div标签 和 所有的 span标签
长处：
是能疾速为页面中同类型的标签对立款式
毛病：
不能设计差异化款式。
2.2 类选择器
类选择器应用“.”（英文点号）进行标识，前面紧跟类名.
语法：
类名选择器
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 标签
<p class='类名'></p>长处：
- 能够为元素对象定义独自或雷同的款式。 能够抉择一个或者多个标签
留神
- 类选择器应用“.”（英文点号）进行标识，前面紧跟类名(自定义，咱们本人命名的)
- 长名称或词组能够应用中横线来为选择器命名。
- 不要纯数字、中文等命名， 尽量应用英文字母来示意。
命名是咱们艰深约定的，然而没有规定必须用这些罕用的命名。
2.3 类选择器非凡用法- 多类名
咱们能够给标签指定多个类名，从而达到更多的抉择目标。
留神：
- 各个类名两头用空格隔开。
- 多类名选择器在前期布局比较复杂的状况下，还是较多应用的。
<div class="pink fontWeight font20">亚瑟</div><div class="font20">刘备</div><div class="font14 pink">安其拉</div><div class="font14">貂蝉</div>2.4 id选择器
id选择器应用#进行标识，前面紧跟id名
其根本语法格局如下：
id选择器#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签
<p id="id名"></p>
- 元素的id值是惟一的，只能对应于文档中某一个具体的元素。
- 用法根本和类选择器雷同。
id选择器和类选择器区别
- W3C标准规定，在同一个页面内，不容许有雷同名字的id对象呈现，然而容许雷同名字的class。
id选择器和类选择器最大的不同在于 应用次数上。
总结
- 类选择器咱们在批改款式中，用的最多。
- id选择器个别用于页面唯一性的元素身上，和javascript 搭配应用。
2.5 通配符选择器
概念
通配符抉择器用
*号示意， * 就是 抉择所有的标签 他是所有选择器中作用范畴最广的，能匹配页面中所有的元素。- 其根本语法格局如下：
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }例如上面的代码，应用通配符选择器定义CSS款式，革除所有HTML标记的默认边距。
* { margin: 0; /* 定义外边距*/ padding: 0; /* 定义内边距*/}- 留神：会匹配页面所有的元素，升高页面响应速度，不倡议轻易应用
2.6 根底选择器总结
| 选择器 | 作用 | 毛病 | 应用状况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 能够选出所有雷同的标签，比方p | 不能差异化抉择 | 较多 | p { color：red;} |
| 类选择器 | 能够选出1个或者多个标签 | 能够依据需要抉择 | 十分多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能应用一次 | 不举荐应用 | #nav {color: red;} |
| 通配符选择器 | 抉择所有的标签 | 抉择的太多，有局部不须要 | 不举荐应用 | * {color: red;} |
根底选择器咱们一共学了4个， 每个都有本人的价值， 可能再某个中央都能用到。然而如果说，肯定要找个最罕用的，那么，必定是类选择器。
2.7 团队约定
选择器
- 尽量少用通用选择器
* - 尽量少用 ID 选择器
- 不应用无具体语义定义的标签选择器 div span
3.font字体
3.1 font-size:大小
作用：
font-size属性用于设置字号
p { font-size:20px; }单位：
- 能够应用绝对长度单位，也能够应用相对长度单位。
- 绝对长度单位比拟罕用，举荐应用像素单位px，相对长度单位应用较少。
留神：
- 根本用px了，其余单位很少应用
- 谷歌浏览器默认的文字大小为16px
- 然而不同浏览器可能默认显示的字号大小不统一，咱们尽量给一个明确值大小，不要默认大小。个别给body指定整个页面文字的大小
3.2 font-family:字体
作用：
font-family属性用于设置哪一种字体。
p{ font-family:"微软雅黑";}- 网页中罕用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑
- 能够同时指定多个字体，两头以逗号隔开，示意如果浏览器不反对第一个字体，则会尝试下一个，直到找到适合的字体， 如果都没有，则以咱们电脑默认的字体为准。
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}罕用技巧：
1. 各种字体之间必须应用英文状态下的逗号隔开。2. 中文字体须要加英文状态下的引号，英文字体个别不须要加引号。当须要设置英文字体时，英文字体名必须位于中文字体名之前。3. 如果字体名中蕴含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。4. 尽量应用零碎默认字体，保障在任何用户的浏览器中都能正确显示。CSS Unicode字体
为什么应用 Unicode字体
- 在 CSS 中设置字体名称，间接写中文是能够的。然而在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的谬误。
- xp 零碎不反对 相似微软雅黑的中文。
解决：
- 计划一： 你能够应用英文来代替。 比方
font-family:"Microsoft Yahei"。 计划二： 在 CSS 间接应用 Unicode 编码来写字体名称能够防止这些谬误。应用 Unicode 写中文字体名称，浏览器是能够正确的解析的。
font-family: "\5FAE\8F6F\96C5\9ED1"; 示意设置字体为“微软雅黑”。
- 计划一： 你能够应用英文来代替。 比方
| 字体名称 | 英文名称 | 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:字体粗细
在html中如何将字体加粗咱们能够用标签来实现
- 应用 b 和 strong 标签是文本加粗。
- 能够应用CSS 来实现，然而CSS 是没有语义的。
| 属性值 | 形容 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold 咱们重点记住这句话 |
提倡：
咱们平时更喜爱用数字来示意加粗和不加粗。
3.4 font-style:字体格调
在html中如何将字体歪斜咱们能够用标签来实现
- 字体歪斜除了用 i 和 em 标签，
- 能够应用CSS 来实现，然而CSS 是没有语义的
font-style属性用于定义字体格调，如设置斜体、歪斜或失常字体，其可用属性值如下：
| 属性 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示规范的字体款式 font-style: normal; |
| italic | 浏览器会显示斜体的字体款式。 |
小技巧：
平时咱们很少给文字加斜体，反而喜爱给斜体标签（em，i）改为一般模式。3.5 font:综合设置字体款式 (重点)
font属性用于对字体款式进行综合设置
- 根本语法格局如下：
选择器 { font: font-style font-weight font-size/line-height font-family;}留神：
- 应用font属性时，必须按下面语法格局中的程序书写，不能更换程序，各个属性以空格隔开。
- 其中不须要设置的属性能够省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。
3.6 font总结
| 属性 | 示意 | 留神点 |
|---|---|---|
| font-size | 字号 | 咱们通常用的单位是px 像素，肯定要跟上单位 |
| font-family | 字体 | 理论工作中依照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
| font-style | 字体款式 | 记住歪斜是 italic 不歪斜 是 normal 工作中咱们最罕用 normal |
| font | 字体连写 | 1. 字体连写是有程序的 不能随便换地位 2. 其中字号 和 字体 必须同时呈现 |
4. CSS外观属性
4.1 color:文本色彩
作用：
color属性用于定义文本的色彩，
- 其取值形式有如下3种：
| 示意示意 | 属性值 |
|---|---|
| 预约义的色彩值 | red，green，blue，还有咱们的御用色 pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
留神
咱们理论工作中， 用 16进制的写法是最多的，而且咱们更喜爱简写形式比方 #f00 代表红色
4.2 text-align:文本程度对齐形式
作用：
text-align属性用于设置文本内容的程度对齐，相当于html中的align对齐属性
- 其可用属性值如下：
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
留神：
是让盒子外面的内容程度居中， 而不是让盒子居中对齐
4.3 line-height:行间距
作用：
line-height属性用于设置行间距，就是行与行之间的间隔，即字符的垂直间距，个别称为行高。
单位：
- line-height罕用的属性值单位有三种，别离为像素px，相对值em和百分比%，理论工作中应用最多的是像素px
- 技巧：
个别状况下，行距比字号大7.8像素左右就能够了。line-height: 24px;4.4 text-indent:首行缩进
作用：
text-indent属性用于设置首行文本的缩进，
属性值
- 其属性值可为不同单位的数值、em字符宽度的倍数、或绝对于浏览器窗口宽度的百分比%，容许应用负值,
- 倡议应用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
p { /*行间距*/ line-height: 25px; /*首行缩进2个字 em 1个em 就是1个字的大小*/ text-indent: 2em; }4.5 text-decoration 文本的装璜
text-decoration 通常咱们用于给链接批改装璜成果
| 值 | 形容 |
|---|---|
| none | 默认。定义规范的文本。 勾销下划线（最罕用） |
| underline | 定义文本下的一条线。下划线 也是咱们链接自带的（罕用） |
| overline | 定义文本上的一条线。（不必） |
| line-through | 定义穿过文本下的一条线。（不罕用） |
4.6 CSS外观属性总结
| 属性 | 示意 | 留神点 |
|---|---|---|
| color | 色彩 | 咱们通常用 十六进制 比方 而且是简写模式 #fff |
| line-height | 行高 | 管制行与行之间的间隔 |
| text-align | 程度对齐 | 能够设定文字水平的对齐形式 |
| text-indent | 首行缩进 | 通常咱们用于段落首行缩进2个字的间隔 text-indent: 2em; |
| text-decoration | 文本润饰 | 记住 增加 下划线 underline 勾销下划线 none |
5. CSS复合选择器
指标
了解
- 了解css复合选择器别离的利用场景
利用
- 应用后辈选择器给元素增加款式
- 应用并集选择器给元素增加款式
- 应用伪类选择器
为什么要学习css复合选择器
CSS选择器分为 根底选择器 和 复合选择器 ，然而根底选择器不能满足咱们理论开发中，疾速高效的抉择标签。
- 目标是为了能够抉择更精确更精密的指标元素标签。
- 复合选择器是由两个或多个根底选择器，通过不同的形式组合而成的
5.1 后辈选择器（重点）
概念：
后辈选择器又称为蕴含选择器
作用：
用来抉择元素或元素组的子孙后代
- 其写法就是把外层标签写在后面，内层标签写在前面，两头用空格分隔，先写父亲爷爷，在写儿子孙子。
父级 子级{属性:属性值;属性:属性值;}- 语法：
.class h3{color:red;font-size:16px;}- 当标签产生嵌套时，内层标签就成为外层标签的后辈。
- 子孙后代都能够这么抉择。 或者说，它能抉择任何蕴含在内 的标签。
5.2 子元素选择器
作用：
子元素选择器只能抉择作为某元素子元素(亲儿子)的元素。
- 其写法就是把父级标签写在后面，子级标签写在前面，两头跟一个
>进行连贯 - 语法：
.class>h3{color:red;font-size:14px;}5.3 交加选择器
条件
交加选择器由两个选择器形成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
- 语法：
h3.class{color:red;font-size:16px;}- 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
记忆技巧：
交加选择器 是 并且的意思。 即...又...的意思
比方： p.one 抉择的是： 类名为 .one 的 段落标签。 用的相对来说比拟少，不太倡议应用。
5.4 并集选择器（重点）
利用：
- 如果某些选择器定义的雷同款式，就能够利用并集选择器，能够让代码更简洁。
- 并集选择器（CSS选择器分组）是各个选择器通过
,连贯而成的，通常用于个体申明。 - 语法：
.class,h3{color:red;font-size:16px;}- 任何模式的选择器（包含标签选择器、class类选择器id选择器等），都能够作为并集选择器的一部分。
记忆技巧：
并集选择器通常用于个体申明 ，逗号隔开的，所有选择器都会执行前面款式，逗号能够了解为 和的意思。
比方 .one, p , #test {color: #F00;} 示意 .one 和 p 和 #test 这三个选择器都会执行色彩为红色。 通常用于个体申明。 5.5 链接伪类选择器（重点）
伪类选择器：
为了和咱们方才学的类选择器相区别
类选择器是一个点 比方 .demo {}
而咱们的伪类 用 2个点 就是 冒号 比方 :link{}
作用：
用于向某些选择器增加非凡的成果。比方给链接增加特殊效果， 比方能够抉择 第1个，第n个元素。
因为伪类选择器很多，比方链接伪类，构造伪类等等。咱们这里先给大家解说链接伪类选择器。
- a:link / 未拜访的链接 /
- a:visited / 已拜访的链接 /
- a:hover / 鼠标挪动到链接上 /
- a:active / 选定的链接 /
留神
- 写的时候，他们的程序尽量不要颠倒 依照 lvha 的程序。否则可能引起谬误。
记忆法
- love hate 爱上了厌恶
- lv 包包 十分 hao
- 因为叫链接伪类，所以都是 利用交加选择器 a:link a:hover
- 因为a链接浏览器具备默认款式，所以咱们理论工作中都须要给链接独自指定款式。
- 理论工作开发中，咱们很少写全四个状态，个别咱们写法如下：
a { /* a是标签选择器 所有的链接 */ font-weight: 700; font-size: 16px; color: gray;}a:hover { /* :hover 是链接伪类选择器 鼠标通过 */ color: red; /* 鼠标通过的时候，由原来的 灰色 变成了红色 */}5.6 复合选择器总结
| 选择器 | 作用 | 特色 | 应用状况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后辈选择器 | 用来抉择元素后辈 | 是抉择所有的子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 抉择 最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
| 交加选择器 | 抉择两个标签交加的局部 | 既是 又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 抉择某些雷同款式的选择器 | 能够用于个体申明 | 较多 | 符号是逗号 .nav, .header |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 理论开发的写法 |
6. 标签显示模式（display）重点
指标：
了解
- 标签的三种显示模式
- 三种显示模式的特点以及区别
- 了解三种显示模式的互相转化
利用
- 实现三种显示模式的互相转化
6.1 什么是标签显示模式
什么是标签的显示模式？
标签以什么形式进行显示，比方div 本人占一行， 比方span 一行能够放很多个
作用：
咱们网页的标签十分多，再不同中央会用到不同类型的标签，以便更好的实现咱们的网页。
标签的类型(分类)
HTML标签个别分为块标签和行内标签两种类型，它们也称块元素和行内元素。
6.2 块级元素(block-level)
- 例：
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。- 块级元素的特点
（1）比拟王道，本人独占一行
（2）高度，宽度、外边距以及内边距都能够管制。
（3）宽度默认是容器（父级宽度）的100%
（4）是一个容器及盒子，外面能够放行内或者块级元素。
留神：
- 只有 文字才 能组成段落 因而 p 外面不能放块级元素，特地是 p 不能放div
- 同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，外面不能放其余块级元素。
6.3 行内元素(inline-level)
- 例：
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。有的中央也成内联元素- 行内元素的特点：
（1）相邻行内元素在一行上，一行能够显示多个。
（2）高、宽间接设置是有效的。
（3）默认宽度就是它自身内容的宽度。
（4）行内元素只能包容文本或则其余行内元素。
留神：
- 链接外面不能再放链接。
- 非凡状况a外面能够放块级元素，然而给a转换一下块级模式最平安。
6.4 行内块元素（inline-block）
- 例：
在行内元素中有几个非凡的标签——<img />、<input />、<td>，能够对它们设置宽高和对齐属性，有些材料可能会称它们为行内块元素。行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,然而之间会有空白缝隙。一行能够显示多个
（2）默认宽度就是它自身内容的宽度。
（3）高度，行高、外边距以及内边距都能够管制。
6.5 三种模式总结区别
| 元素模式 | 元素排列 | 设置款式 | 默认宽度 | 蕴含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 能够设置宽度高度 | 容器的100% | 容器级能够蕴含任何标签 |
| 行内元素 | 一行能够放多个行内元素 | 不能够间接设置宽度高度 | 它自身内容的宽度 | 包容文本或则其余行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 能够设置宽度和高度 | 它自身内容的宽度 |
6.6 标签显示模式转换 display
- 块转行内：display:inline;
- 行内转块：display:block;
- 块、行内元素转换为行内块： display: inline-block;
7. 行高那些事（line-height）
指标
了解
- 能说出 行高 和 高度 三种关系
- 能简略了解为什么行低等于高度单行文字会垂直居中
利用
- 应用行高实现单行文字垂直居中
- 能会测量行高
7.1 行高测量
行高的测量方法：
7.2 单行文本垂直居中
行高咱们利用最多的一个中央是： 能够让单行文本在盒子中垂直居中对齐。
文字的行低等于盒子的高度。
行高 = 上间隔 + 内容高度 + 下间隔
上间隔和下间隔总是相等的，因而文字看上去是垂直居中的。
行高和高度的三种关系
- 如果 行高 等 高度 文字会 垂直居中
- 如果行高 大于 高度 文字会 偏下
- 如果行高小于高度 文字会 偏上
8. CSS 背景(background)
指标
了解
- 背景的作用
- css背景图片和插入图片的区别
利用
- 通过css背景属性，给页面元素增加背景款式
- 能设置不同的背景图片地位
8.1 背景色彩(color)
语法：
background-color:色彩值; 默认的值是 transparent 通明的
8.2 背景图片(image)
- 语法：
background-image : none | url (url) | 参数 | 作用 |
|---|---|
| none | 无背景图（默认的） |
| url | 应用相对或绝对地址指定背景图像 |
background-image : url(images/demo.png);- 小技巧： 咱们提倡 背景图片前面的地址，url不要加引号。
8.3 背景平铺（repeat）
- 语法：
background-repeat : repeat | no-repeat | repeat-x | repeat-y | 参数 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺（默认的） |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向平铺 |
8.4 背景地位(position) 重点
- 语法：
background-position : length || lengthbackground-position : position || position | 参数 | 值 |
|---|---|
| length | 百分数 / 由浮点数字和单位标识符组成的长度值 |
| position | top / center / bottom / left / center / right 方位名词 |
留神：
- 必须先指定background-image属性
- position 前面是x坐标和y坐标。 能够应用方位名词或者 准确单位。
- 如果指定两个值，两个值都是方位名字，则两个值前后程序无关，比方left top和top left成果统一
- 如果只指定了一个方位名词，另一个值默认居中对齐。
- 如果position 前面是准确坐标， 那么第一个，必定是 x 第二的肯定是y
- 如果只指定一个数值,那该数值肯定是x坐标，另一个默认垂直居中
- 如果指定的两个值是 准确单位和方位名字混合应用，则第一个值是x坐标，第二个值是y坐标
理论工作用的最多的，就是背景图片居中对齐了。
8.5 背景附着
- 背景附着就是解释背景是滚动的还是固定的
语法：
background-attachment : scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随对象内容滚动 |
| fixed | 背景图像固定 |
8.6 背景简写
- background：属性的值的书写程序官网并没有强制规范的。为了可读性，倡议大家如下写：
- background: 背景色彩 背景图片地址 背景平铺 背景滚动 背景地位;
- 语法：
background: transparent url(image.jpg) repeat-y scroll center top ;8.7 背景通明(CSS3)
- 语法：
background: rgba(0, 0, 0, 0.3);- 最初一个参数是alpha 透明度 取值范畴 0~1之间
- 咱们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3);
- 留神： 背景半透明是指盒子背景半透明， 盒子外面的内容不受影响
- 因为是CSS3 ，所以 低于 ie9 的版本是不反对的。
8.8 背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景色彩 | 预约义的色彩值/十六进制/RGB代码 |
| background-image | 背景图片 | url(图片门路) |
| background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景地位 | length/position 别离是x 和 y坐标， 切记 如果有 准确数值单位，则必须依照先X 后Y 的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简略 | 背景色彩 背景图片地址 背景平铺 背景滚动 背景地位; 他们没有程序 |
| 背景通明 | 让盒子半透明 | background: rgba(0,0,0,0.3); 前面必须是 4个值 |
9. CSS 三大个性
指标：
了解
- 能说出css款式抵触采取的准则
- 能说出那些常见的款式会有继承
利用
- 能写出CSS优先级的算法
- 能会计算常见选择器的叠加值
9.1 CSS层叠性
概念：
所谓层叠性是指多种CSS款式的叠加。
是浏览器解决抵触的一个能力,如果一个属性通过两个雷同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
准则：
- 款式抵触，遵循的准则是就近准则。 那个款式离着构造近，就执行那个款式。
- 款式不抵触，不会层叠
9.2 CSS继承性
概念：
子标签会继承父标签的某些款式，如文本色彩和字号。
想要设置一个可继承的属性，只需将它利用于父元素即可。
留神：
- 失当地应用继承能够简化代码，升高CSS款式的复杂性。比方有很多子级孩子都须要某个款式，能够给父级指定一个，这些孩子继承过去就好了。
- 子元素能够继承父元素的款式（text-，font-，line-这些元素结尾的能够继承，以及color属性）
9.3 CSS优先级（重点）
概念：
定义CSS款式时，经常出现两个或更多规定利用在同一元素上，此时，
- 选择器雷同，则执行层叠性
- 选择器不同，就会呈现优先级的问题。
1). 权重计算公式
对于CSS权重，咱们须要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内款式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
- 值从左到右，右面的最大，一级大于一级，数位之间没有进制，级别之间不可超过。
- 对于CSS权重，咱们须要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
2). 权重叠加
咱们常常用交加选择器，后辈选择器等，是有多个根底选择器组合而成，那么此时，就会呈现权重叠加。
就是一个简略的加法计算
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
留神：
- 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的状况。
3). 继承的权重是0
这个不难，然而疏忽很容易绕晕。其实，咱们批改款式，肯定要看该标签有没有被选中。
1） 如果选中了，那么以下面的公式来计权重。谁大听谁的。
2） 如果没有选中，那么权重是0，因为继承的权重为0。
10. CSS正文
CSS正文规定：
/* 须要正文的内容 */ 进行正文的，即在须要正文的内容前应用 "/*" 标记开始正文，在内容的结尾应用 "*/"完结。例如：
p { /* 所有的字体是14像素大小*/ font-size: 14px; }