上篇文章，我们讲解了php全栈之路最基础的部分html。
今天我们将继续讲解php全栈之路的第二个基础部分css。
今天主要讲解CSS基础、语法规范及CSS的应用方式。
我们来回忆下html，css和javascript的关系。
html相当人体的骨架，css相当于人的外观、而javascript相当于人的行动、动作。
我们已经通过前面的文章学习了网页的骨架制作。那么接着我们来学习网页外观的制作CSS。
什么是CSS？
CSS 指层叠样式表 (Cascading Style Sheets) 主要用来控制HTML文档显示的样子，比如颜色字体位置间距等。
官方表述：CSS是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。
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 来引入。示例代码：
注意：在实际开发中，推荐使用 HTML 的 link 对象来引入。
2、内部样式表(写在HTML页面中的
你可以在你的 HTML 文档的
标记里插入一个3、内联样式(直接写在HTML标签上使用style设置样式)Inline Styles
内联定义即是在对象的标记内使用对象的 style 属性定义适用其的样式表属性。示例代码：
这里是样式
实际应用中，如果把所有样式都写在标签上，就会导致大量的标签样式，不容易维护，推荐使用前两种。
选择器权重
权重主要分为 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、内部样式表(位于
标签内部)4、内联样式(在 HTML 元素内部)
因此，内联样式(在 HTML 元素内部)拥有最高的优先权(和之前的权重差不多)，这意味着它将优先于以下的样式声明：
标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明(缺省值)。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属性，
用法：比如
应用方法#id名字
#h1_1{
Color:blue;
}
也可以在id选择符前面加标签的限定符，限定这个ID必须是前面的类型
比如：
h1#h1_1{
Color:blue;
}
元素选择符---类选择符
通常我们在页面中会给我们用的标签进行分类，关键字class。
如在页面中加入class属性进行分类
:注意在class属性中可以添加多个类名，中间用空格间隔
相当于我们定义以上三种为一类选择符。然后在CSS中进行应用.(英文点)
在类选择符中.(英文点)的意思是选中class= 。后面名字的所有标签。
.class11{
Color:red;
}
.big{
Font-size:30px;
}
在实际应用中会大量使用类选择符，目的就是为了通过CSS来控制标签的样式。
关系选择符
关系选择符，是通过页面中各种标签(元素)的关系来确定选择器所选定的内容
其中关系选择符包括包含选择符(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的一些选择器。明天我们继续。
(注：本内容属于原创，未经许可严禁抄袭。内容真实性已考证，图片来源于网络，图片如有侵权请联系作者删除)
2963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
