本日我们将连续讲解php全栈之路的第二个根本部分css。
今天主要讲解CSS根本、语法规范及CSS的运用办法。
我们来回忆下html，css和javascript的关系。
html相称人体的骨架，css相称于人的外不雅观、而javascript相称于人的行动、动作。
我们已经通过前面的文章学习了网页的骨架制作。那么接着我们来学习网页外不雅观的制作CSS。
什么是CSS？
CSS 指层叠样式表 (Cascading Style Sheets) 紧张用来掌握HTML文档显示的样子，比如颜色字体位置间距等。
官方表述：CSS是用于（增强）掌握网页样式并许可将样式信息与网页内容分离的一种标记性措辞。CSS 不须要编译,可以直接由浏览器实行(属于浏览器阐明型措辞)。
HTML 标签原来被设计为用于定义文档内容。通过利用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。
同时文档布局由浏览器来完成，而不该用任何的格式化标签。
由于当时紧张有两种紧张的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为理解决这个问题，万维网同盟（W3C），这个非营利的标准化同盟，肩负起了 HTML 标准化的义务，并在 HTML 4.0 之外创造出样式（Style）。
所有的主流浏览器均支持层叠样式表。
CSS历史
CSS 最早被发起是在1994年；最早被浏览器支持是1996年；1996年 W3C 正式推出了CSS1；1998年 W3C 正式推出了CSS2；CSS2.1 是 W3C 现在正在推举利用的；CSS3 现在还处于开拓中；CSS 3 在包含了所有 CSS 2 所支持的根本上更有所改进，以是不必担心兼容问题。CSS 支持多种设备，例如手机、电视、打印机、幻灯片等。但是 CSS 在浏览器上得到了更好的推广。
如何运用CSS？
在HTML中利用CSS有三种方法：
1、外部样式表（CSS写在一个单独的.css文件中）
用法：在head标签中加入link引入css文件
你可以先建立外部样式表文件.css，然后利用 HTML 的 link 工具。或者利用 @import 来引入。示例代码：
<head>
<!-- Use link elements --> <link rel=\公众stylesheet\公众 href=\"大众core.css\"大众> <!-- Use @imports -->
<style> @import url(\"大众more.css\"大众); </style>
</head>
把稳：在实际开拓中，推举利用 HTML 的 link 工具来引入。
2、内部样式表（写在HTML页面中的<style>标签）Embedding a Style Block
你可以在你的 HTML 文档的<head>标记里插入一个<style>块工具。示例代码：
<head>
<style type=\"大众text/css\"大众>
body{
background: #0f0;
}
</style>
</head>
3、内联样式（直接写在HTML标签上利用style设置样式）Inline Styles
内联定义即是在工具的标记内利用工具的 style 属性定义适用其的样式表属性。示例代码：
<h1 style=\公众color:#f00;font-size:150px\"大众>这里是样式</h1>
实际运用中，如果把所有样式都写在标签上，就会导致大量的标签样式，不随意马虎掩护，推举利用前两种。
选择器权重
权重紧张分为 4 个等级：
第一等：代表内联样式，如: style=\"大众\公众，权值为1000第二等：代表ID选择器，如：#content，权值为100第三等：代表类，伪类和属性选择器，如.content，权值为10第四等：代表类型选择器和伪元素选择器，如div p，权值为1权重这部分理解即可。等学完在看这个权重就十分明白了！
优先级
CSS优先级遵照如下法则：
选择器都有一个权值，权值越大越优先；当权值相等时，后涌现的样式表设置要优于先涌现的样式表设置；创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；继续的 CSS 样式不如后来指定的 CSS 样式；在同一组属性设置中标有!important规则的优先级最大优先级这部分理解即可。
CSS层叠先容
多重样式将层叠为一个
样式表许可以多种办法规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。乃至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会利用哪个样式呢？
一样平常而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，个中数字 4 拥有最高的优先权。
1、浏览器缺省设置
2、外部样式表
3、内部样式表（位于 <head> 标签内部）
4、内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权（和之前的权重差不多），这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS的层叠有点类似PS的图层观点。实际上我们为每一个html的元素定义样式的时候，可以有多种多样的定义。详细利用哪一种定义的样式呢？这就要看优先权，或者CSS的权重了。哪个权重打算值高，就利用哪种样式。
还有一个便是层的观点，CSS中可以将不同的样式放置在不同的层之间，正面看有点像我们看到的图片，而利用2D旋转的话。可以看到CSS实际是有多个层次的，详细你的样式在哪个层也可以进行定义。
就像我们看到图片的觉得，如果从上面看，是看不赴任别，如果横过来看，实在可以看到CSS是有层次的。
CSS语法
CSS是由一条一条规则组成的，每条规则的格式为
选择器{
属性1：值1；
属性2：值2；
……
}注：学习CSS紧张学习的是CSS的声明
selector {property: value;}
css手册先容
在技能职员开拓的时候开拓职员不可能记住所有技能信息的，就须要用手册来查找干系的信息。
手册网址：http://css.doyoe.com/
CSS选择符
CSS选择符包括五种选择符（元素选择符、关系选择符、属性选择符、伪类选择符、伪工具选择符）
A元素选择符包括四类
1、通配选择符
2、类型选择符E
3、ID选择符
4、类选择符
元素选择符---通配选择符
用法：
{
color: #f00;
}
选定所有工具。
通配选择符(Universal Selector)
常日不建议利用通配选择符，由于它会遍历并命中文档中所有的元素，出于性能考虑，需酌情利用。
注：要养成查看兼容性的习气，由于不同的浏览器拥有不同的版本，那么对CSS的兼容也是不同的
元素选择符---类型选择符
你要操作标签的名字
a{
color: #f00;
}
li{
Color:blue;
}
以文档措辞(HTML)标签工具类型作为选择符。
类型选择符(Type Selector)
元素选择符---id选择符
为标签起一个名字id属性，在上篇文章讲解过id属性，
用法：比如<h1 id=”h1_1”></h1>
运用方法#id名字
#h1_1{
Color:blue;
}
也可以在id选择符前面加标签的限定符，限定这个ID必须是前面的类型
比如：
h1#h1_1{
Color:blue;
}
元素选择符---类选择符
常日我们在页面中会给我们用的标签进行分类，关键字class。
如在页面中加入class属性进行分类
<a class=”class11 big”>
:把稳在class属性中可以添加多个类名，中间用空格间隔
<h1 class=”class11”>
<li class=”class11”>
相称于我们定义以上三种为一类选择符。然后在CSS中进行运用.（英文点）
在类选择符中.（英文点）的意思是选中class= 。后面名字的所有标签。
.class11{
Color:red;
}
.big{
Font-size:30px;
}
在实际运用中会大量利用类选择符，目的便是为了通过CSS来掌握标签的样式。
关系选择符
关系选择符，是通过<html>页面中各种标签（元素）的关系来确定选择器所选定的内容
个中关系选择符包括包含选择符（E F）、子选择符（E>F）、相邻选择符（E+F）、兄弟选择符（E~F）
究竟什么是html关系呢？
我们将html的标签以构造的形式来画一个图就能明白了。
从上图可以看出来。html标签是head和body标签的父标签，而body是html标签的子标签。这样就比较好理解关系选择符了。结合下面的讲解，在理解上面的图。我们就很随意马虎的理解CSS的关系选择器了。
关系选择符---包含选择符(E F)
语法：
E F { sRules }
解释：
选择所有被E元素包含的F元素。与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...而子选择符，仅仅会选中自己的儿子后代。
示例：
可以看到，.demo这个选择器是一个类选择器，而它这次选择的并不是类选择器，而是类选择器所包含的所有 div元向来命中。赤色的部分便是命中的元素了。不单单包括儿子，还包括孙子、重孙子的辈分都包括了！
关系选择符---子选择符(E>F)
语法：
E>F { sRules }
解释：
选择所有作为E元素的子元素F。与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。
关系选择符---相邻选择符(E+F)
语法：
E+F { sRules }
解释：
选择紧贴在E元素之后F元素。
与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素！
而不包括自己。
关系选择符---兄弟选择符(E~F)
语法：
E~F { sRules }
解释：
选择E元素后面的所有兄弟元素F。
与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不逼迫是紧邻的元素！
而不包括自己。
.
本日我们一起理解了CSS根本、语法规范及CSS的运用办法。
还理解了CSS的一些选择器。来日诰日我们连续。
（注：本内容属于原创，未经容许严禁抄袭。内容真实性已考证，图片来源于网络，图片如有侵权请联系作者删除）
