CSS之路（上）
一、概述
CSS
全名：Cascading Style Sheets -> 层叠样式表
定义：CSS成为层叠样式表，它主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能（如字体、颜色、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。
理解CSS:设想元素周围有一个盒子
理解CSS工作原理的关键在于能够设想每个HTNL元素的周围都有一个看不见的盒子。
HTML、CSS与JS三者的关系
HTML：页面结构，负责从语义的角度搭建页面结构。
CSS：页面样式表现，负责从审美的角度美化页面。
JavaScript：交互行为，负责从交互的角度提升用户体验
HTML中应用CSS的四种常用的方式：
1.文档内样式：style属性
<p style="color:red">This is tag of paragraph</p>
2.行内样式：head标签中添加style标签
<style type="text/css"> p { color:green; /*设置字体颜色*/ }</style>
3.外部样式：外联样式link -> 推荐方式（可复用性高）
<link rel="stylesheet" href="css/main.css">
<link>
在HTML文档中，<link>元素可用来告诉浏览器在何处寻找用于定义页面样式的CSS文件。它是一个空元素（即他不需要结束标签），而且位于<head>元素中，她应该使用一下三个特性：
href：该特性表明CSS文件的路劲（通常位于CSS或styles文件夹中）。
type：该特性表明页面所链接文档的类型。它的值应该是text/css。
rel:该特性表明HTML页面与被链接文件的关系。当链接到一个CSS文件时，该特性的值应该为stylesheet。
一个HTML页面可以使用多个CSS样式表，这时页面就需要为所使用的每个CSS文件添加一个<Link>元素。
4.导入样式：@import -> 不推荐使用的方式，会导致css不能并行下载，并且要求导入样式的书写必须在所有的css规则书写之前。
<style type="text/css"> /*将某一个css文件的样式直接导入到当前位置*/
@import url(css/main.css);
p { color:green; /*设置字体颜色*/
background-color:silver;
}
</style>
二、语法和选择器
补充内容：（块级元素和内联元素）
块级元素：有些元素在浏览器窗口中显示时总是另起一行。这些元素被称为块级元素。<h1>,<p>,<ul>、<div>以及<li>等。
内联元素：有些元素在显示时总是与它的邻近元素出现在同一行内，这些元素被称为内联元素。<a>,<b>,<em>,<span>以及<img>等。
将文本和元素集中在一个块级元素中
<div>元素允许你将一组元素集中到一个块级元素内。
将文本和元素集中在一个内联元素中
<span>元素就像是<div>元素的内联版本。它用来：
（1)在没有其他合适元素的情况下包含一段文本并将其与周围的文本区别开。
（2）包含若干个内联元素。
使用<span>元素最常见的原因就是可以利用CSS来控制<span>元素中的内容的外观。一条
css将样式规则与HTML元素相关联的方式来工作。这些规则用来控制指定元素中的内容如何显示。一条CSS规则包含两个：一个选择器和一条声明。css声明位于花括号中，而且每条声明都由两部分组成：属性和值，两者由冒号隔开。可在一条声明内指定多个属性，各属性之间用分号隔开。
1
2
p{
font-family:Arial;}
p:为选择器
font-family:Arial;：为声明
font-family：为属性
Arial：为值
选择器表明要应用规则的元素，同一条规则可以应用在多个元素上，前提是需要将这些元素名用逗号隔开。
声明用于表明应该如何显示选择器指明的元素。声明分为两个部分（属性和值）并以冒号作为分隔符。
属性表明你想要改变元素的哪些方面。例如颜色、字体、宽度、高度和边框。
值 用来指定想要在所选属性上应用的设置。例如，如果要指定一个颜色属性，那么这个属性的值就是你希望这些元素中的文本所呈现的颜色。
常用的选择器：
选择器1
选择器2
1）通配符选择器
通配符选择器使用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素，如下面的css代码，它使用通配符选择器定义css样式，清楚所有HTML标记的默认边距：
*{
margin: 0;/* 定义外边距 */ padding: 0;/* 定义内边距 */
}
ps: 通配符的穿透力很强，其优先级高于继承的样式，会覆盖继承的样式，一般情况下都不会使用。
（2）标签选择器
通过变签名来选择一类标签，例如我们将所有的p标签都设置成为红色字体：
p
{
color: red;
}
（3）ID选择器
HTML标签都有公共ID属性，而且整个页面唯一。ID选择器使用“#”号进行标识，后面紧跟ID名字。
#contentBody
{
color: blue; font-weight: bold;
}
ID选择器命名规范：
只允许出现字母（大小写均可，严格区分）、下划线、数字。
只允许以字母开头。
命名没有长度限制，不过不建议过长。
不允许出现标签名。
ps: ID选择器的优先级非常高，所以确定在整个页面内唯一出现时，才开一使用，否则因为优先级问题在后续维护中不能很好进行修改和更新。
（4）类选择器
类选择器可以对HTML标签中class属性进行选择，其选择符是"."，例如：
.demo
{
color: green;
}
ID选择器与class选择器的区别：
1.相同的class属性值，可以在HTML中出现多次，ID属性值在页面中则只能出现一次。
2.一个class的属性可以有多个值，也就是说一个标签可以有多个类。
（5）复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，具体如下：
① 标签指定式选择器
标签指定式选择器有两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如：h3.special, p#one等等。
1
② 后代选择器
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就曾为外层标记的后代。
2
③ 并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class累选择器、id选择器等等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的css样式。
3
④ 子元素选择器
子元素选择器是让css选择器只能选择儿子辈的元素，例如：h1>strong { color : red; }
解读为：选择器 h1 > strong 可以理解为“选择作为h1元素子元素的所有strong元素”，尖括号和选择器之间可以有空格也可以没有，没有限制。
4
（6）属性选择器
5
/* 选择所有的文本框标签 */
input[type="textbox"]
{
color:red;
}
/* 选择包含aside类的所有div标签 */
div[class~="aside"]
{
background-color: green;
}
/* 选择拥有id和class属性的p标签 */
p[id][class]{
line-height: 30px;
}
CSS伪类与伪元素
状态是动态变化的，当一个元素到达一个特定状态时，它可能得到一个样式，当状态改变时，又失去这个样式。
它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
（1）CSS伪类
:link -> 该伪类将应用于未被访问过的链接，IE6不兼容。一般不用此伪类，直接使用a标签。
:hover -> 该伪类将应用于有鼠标指针悬停于其上的元素，在IE6只能应用于a标签，IE7+所有元素都兼容。
:active -> 该伪类将应用于被激活的元素，例如被点击的链接、被按下的按钮登等。
:visited -> 该伪类将应用于已经被访问过的链接。
:focus -> 该伪类将应用于拥有键盘输入焦点的元素。
（2）CSS伪元素
伪元素是控制内容，例如 :
:first-line与:first-letter，这两个伪元素只能用于块级元素。前者用于选择第一行，后者用于选择第一个字符。
p.artcle:first-line
{
color:red;
}p.artcle:first-letter
{
color:green;
}
:first-child伪元素选择属于第一个子元素的元素。
span:first-child
{
vertical-align: middle;
}
:before与:after伪元素则可以设置元素之前和之后的内容，并且配合content设置相关内容。
#demo:after,#demo:before
{
content:"--"; display: block;
}
CSS层叠性和继承性
（1）层叠性
所谓层叠性是指多种css样式的叠加，例如，当使用内嵌css样式表定义p标记字号大小为12像素，链入式定义p标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。
（2）继承性
所谓继承性是指写css样式表时，子标记会继承父标记的某些样式，例如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。
恰当地使用继承可以简化代码，降低css样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中的所有文本。
ps： 并不是所有的css属性都可以继承，例如下面的属性就不具有继承性：
边框、外边距、内边距、背景、定位、元素宽高属性等。
所有盒子相关的属性都不能继承。
CSS选择器优先级
CSS的级联和继承：
如果有两个或者更多的规则应用在同一个元素上，那么理解这些规则的优先级关系是非常重要的。
在HTML和css中很有可能同一个html元素同时被多条css的规则选中，同时每一条css规则都尝试对同一个HTML元素的同一个样式属性进行赋值，这个时候浏览器就需要有一套算法来决定哪一条规则，它对这同一个html元素的同一个css样式属性的这个赋值，哪一个赋值将会胜出，即哪一个规则的赋值最终是会生效的，那么这样的一套算法我们就称之为CSS的级联算法（Cascading算法）
级联算法的步骤：
规则的选择器特指度：Specificity—定义是这个规则的选择器，它在选择这个目标元素的时候，它表达上的明确程度。——如何计算？——在这个CSS里面它认为这个ID选择器的这个明确程度会大于这个class选择器，那么class的明确度会高于这个Type选择器。
ID>Class>Type 每一个选择器的这个特指度，他的计算，它是包含三个分量的值叫 I-C-T，这个里面I分量的值指的是它的这个ID选择器的中间包含ID选择器的个数。C分量的值是它包含的class选择器的个数加上属性选择器的个数再加上这个伪类选择器的个数，而T分量的定义是这个选择器中包含Type选择器的个数加上伪元素选择器的个数。这些就一起构成了特指度的三个分量值，那么两个规则的这个选择器的特指度，在比较的时候，它就会首先比较I分量的值，I分量值大的就会直接胜出，那么当I分量值相同时，她才会比较C分量的值，同理只有当C分量值相同时才会比较T分量的值。
规则顺序：Order，在特指度相同的情况下后出现的规则它的优先级会高，会胜出。
对于相同特指度的CSS规则，css在浏览器在判断的时候，它就会直接用后出现的或者说后加载到浏览器中的这条规则，去覆盖先出现，先加载的css规则。
优先级概览
定义css样式时，经常出现两个或多个规则应用在同一元素上，这时就会出现优先级的问题。
内联样式最大->内联样式的优先级最高；
ID选择器优先级仅次于内联样式；
类选择器优先级次于ID选择器；
标签选择器最低；
继承样式权重为0
在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，也就是说，子元素定义的样式会覆盖继承来的样式。
行内样式权重最高
应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提到的选择器都大的优先级。
权重相同则就近原则
权重相同时，CSS遵循就近原则，即靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最高。
所有都相同时，声明靠后的优先级最大。
!important命令最大优先级
CSS定义了一个!important命令，该命令被赋予最大的优先级，也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
综述：
（1）行内样式>页内样式>外部引用样式>浏览器默认样式
（2）important>内联>ID>伪类/类/属性选择>标签>伪对象>通配符>继承
