共计 3186 个字符，预计需要花费 8 分钟才能阅读完成。
CSS 根底 CSS(cascading style sheet) 汉译为层叠样式表, 是用于管制网页款式
WEB 规范中的体现规范语言, 在网页中次要对网页信息的显示进行管制。
目前举荐遵循的是 W3C 公布的 CSS3.0 版本；
用来体现 HTML 或者 XHTML 等款式文件的计算机语言。
1998 年 5 月 21 日由 w3C 正式推出的 css2.0HTML + CSS 补救 html 语言的有余
缩减页面代码，进步访问速度;
代码缩小，页面文件就会小，占用网络带宽就少，客户端关上速度就快，用户体验就会更好
构造清晰，有利于 seo 优化
有利于搜索引擎优化
缩短改版工夫
对网站的重构有很好的反对 CSS 语法 CSS 语法由两局部组成：选择符、申明。申明包含：属性和属性值
选择符 {属性: 属性值 ; 属性: 属性值}选择符阐明：CSS 选择符（选择器）选择符示意要定义款式的对象 (标签名字)，能够是元素自身，也能够是一类元素或者制订名称的元素, 简略来说就是给对应的元素起个名称。
1）每个 CSS 款式由两局部组成，即选择符和申明，申明又分为属性和属性值；
2）属性必须放在花括号中，属性与属性值用冒号连贯。
3）每条申明用分号完结。
4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序, 用空格隔开。
5）在书写款式过程中，空格、换行等操作不影响属性显示。CSS 样式表 1: 外部样式表语法：
<style type=”text/css”>
css 语句
</style>
注：应用 style 标记创立款式时，最好将该标记写在 <head></head>;2: 内部款式 (1) 语法：<link rel=”stylesheet” type=”text/css” href=” 指标文件的门路及文件名全称 ” />阐明：应用 link 元素导入内部样式表时，需将该元素写在文档头部，即 <head> 与 </head> 之间。
rel：用于定义文档关联，示意关联样式表；
type：定义文档类型；
(2)、导入内部样式表
<style type=”text/css”>
@import url(“ 指标文件的门路及文件名全称 ”);
</style>
阐明：@和 import 之间没有空格 url 和小括号之间也没有空格；括号外部加引号，必须结尾以分号完结；link @import 区别差异 1：老祖宗的差异：link 属于 XHTML 标签，而 @import 齐全是 CSS 提供的一种形式。link 标签除了能够加载 CSS 外，还能够做很多其它的事件，比方定义 RSS，定义 rel 连贯属性等，@import 就只能加载 CSS。差异 2：加载程序的差异：当一个页面被加载的时候（就是被浏览者浏览的时候），link 援用的 CSS 会同时被加载，而 @import 援用的 CSS 会等到页面全副被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有款式。差异 3：兼容性的差异。：@import 是 CSS2.1 提出的，所以老的浏览器不反对，@import 只在 IE5 以上的能力辨认，而 link 标签无此问题。差异 4：应用 dom 管制款式时的差异：当应用 javascript 管制 dom 去扭转款式的时候，只能应用 link 标签，因为 @import 不是 dom 能够管制的.3: 内联样式表 < 标签 style=” 属性 1: 值 1; 属性 2: 值 2; ……”></ 标签 >
CSS 样式表的权重关系 1）内联样式表的优先级别最高
2）外部样式表与内部样式表的优先级和书写的程序无关，后书写的优先级别高。
3）同在一个样式表中的优先级和书写的程序也无关，后书写的优先级别高。(被笼罩的只是雷同属性的款式)CSS 选择符 CSS 根本选择符：类型选择符、id 选择符、class 选择符(类选择符)Css 选择符分类：类型选择符（标记选择器）
类选择符（class 选择符）
ID 选择符（id 选择器）
伪类选择器
通配符（*）设置全局属性
群组选择符（汇合选择器）
蕴含选择符（后辈选择器）
属性选择符
伪对象选择符类型选择符类型选择符是依据 html 语言中的标记来间接定义语法：标签名称 {属性：属性值；}
a)类型选择符就是以文档对象 html 中的标签作为选择符，即应用构造中元素名称作为选择符。例如 body、div、p,img,em,strong,span…… 等。
b)所有的页面元素都能够作为选择符; 用法：
（1）如果想扭转某个元素的默认款式时，能够应用类型选择符；（如：扭转一个 p 段落款式）
（2）当对立文档某个元素的显示成果时，能够应用类型选择符；（如：扭转文档所有 p 段落款式）类（class）选择符
编辑语法：.class 名 {属性：属性值;} 用法：class 选择符更适宜定义一类款式；
(1)当咱们应用类选择符时，应先为每个元素定义一个类名称，
(2)类选择符的语法格局：
如：<div class=”top”></div>
.top{属性: 属性值;}ID 选择符语法：< 标签 id=“名”></ 标签 >
id 名{属性：属性值;}
（1）能够给每个元素应用 id 选择符，但 id 是元素的惟一标识符，不可呈现反复的 id 名；
如：<div id=”top”></div>
（2）id 选择符的语法格局是“#”加上自定义的 id 名
如：#box{width:300px; height:300px;}
（3）起名时要取英文名，不能用关键字：(所有的标记和属性都是关键字)
如：div 标记
（4）一个 id 名称只能在文档中呈现一次，因为 id 是惟一的
（5）最大的用途：创立网页的外围构造。(唯一性、起名字不能应用关键字) 伪类选择器 a:link {color: red;} / 未拜访的链接状态 /
a:visited {color: green;} / 已拜访的链接状态 /
a:hover {color: blue;} / 鼠标滑过链接状态 /
a:active {color: yellow;} /* 鼠标按上来时的状态 /
阐明：
1）当这 4 个超链接伪类选择符联结应用时，应留神他们的程序，失常程序为：
a，a:link,a:visited,a:hover,a:active, 谬误的程序有时会使超链接的款式生效；
2）为了简化代码，能够把伪类选择符中雷同 的申明提出来放在 a 选择符中；
例如：a{color:red;} a:hover{color:green;}
示意超链接的三种状态都雷同，只有鼠标划过变动色彩通配符语法：*{属性：属性值;}
阐明：通配选择符的写法是“*”，其含意就是所有标签；
示意该款式实用所有网页元素；
用法：罕用来重置款式。
例：*{margin:0;padding:0;}群组选择符语法：选择符 1，……，选择符 5 {属性：属性值;}
阐明：当有多个选择符利用雷同的款式时，能够将选择符用“，”分隔的形式，合并为一组。
实例：.top, #nav, p{width:100px;}蕴含选择器（后辈选择器）语法：选择符 1(父) 选择符 2（后辈）{属性：属性值;}
选择符父级 选择符子级 {属性：属性值;}
阐明：选择符 1 和选择符 2 用空格隔开，含意就是选择符 1 中蕴含的所有选择符 2;
实例：div ul li{height:200px;}选择符权重 css 中用四位数字示意权重，
权重的表达方式如：0，0，0，0；
权重规定：HTML 标签 (类型选择符) 的权重是 1，class 的权重是 10，id 的权重是 100。
类型选择符的权重为 0001
class 选择符的权重为 0010
id 选择符的权重为 0100
属性选择符的权重为 0010
伪类选择符的权重为 0010
伪元素（对象）选择符的权重为 0001
蕴含选择符的权重：为蕴含选择符的权重之和
内联款式的权重为 1000
继承款式的权重为 0000
群组汇合选择符权重为他自身
注：如果权重雷同时，则执行后写的款式；css 层叠性 css 层叠指的是款式的优先级，当产生抵触时以优先级高的为准。
- 开发者款式 > 读者款式 > 浏览器款式（除非应用!important 标记）
- id 选择符 >（伪）类选择符 > 元素选择符
- 权重雷同时取前面定义的款式
