web技术第六弹 页面样式表CSS综述

       前面简单聊了聊HTML(5)的一些情况，这一弹开始聊CSS(3)样式表。我们先不进入细节，先从逻辑上，对整个样式表的功能和学习思路进行一次梳理。学习的时候，不管是HTML或是CSS，又或是JS，都有大量的标签名、属性值、方法名等等，这些东西不要死记硬背，理清思路，了解他们的逻辑关系，对这些东西有印象即可。需要开发的时候，用baidu（google正常情况下用不了没办法）网络速查一下具体的即可，开发多了，常用的也就顺手记住了。
        ​样式表CSS的发展，经历了从CSS1到2.1，然后到现在正在蓬勃发展的CSS3时代，主要是取决于各类浏览器的支持进展。 CSS3标准，采用的是将所有的需求分模块定义的。不同的浏览器，都会在开发中逐步实现对这些模块的特性逐步予以支持。​目前绝大部分新的浏览器都支持CSS3，但是IE则是从IE9还是才逐步支持，目前在国内还有大量的windows xp+IE8的用户，尤其以政企客户为主，所以在开发这一类web应用的时候，还是要根据具体情况，对不支持CSS3特性的浏览器，做特定的处理。
        首先，再次强调语义优先---在决定做CSS样式之前，对HTML文档再次审视，是否在没有样式表的情况下，浏览器也能有符合语义区块的简单显示。语义优先的重要性，在于结构的清晰程度，浏览器搜索引擎的更加有效率的内容抓取，以及文档在不同情况下是否能完整表述。
CSS（3） 样式表的功能总体分类
1、对HTML结构进行页面布局，相关区块的定位和显示方式。例如浮动，分列显示
        我们知道，标准文档流中块级元素是从上到下，行内元素是从左往右显示的。我们可以把每个元素，当成一个含有内容的矩形盒子，没有样式表的页面就会把这些盒子按照浏览器默认的样式在页面上按照标准文档流的规则显示。在CSS中，盒子类型就是块级的。针对块级元素盒子，需要用float浮动属性，来让他摆脱标准文档流实现并排显示，从而实现多列布局。这使得布局变得复杂，在处理表格、列表等元素多列显示的时候需要书写更多的CSS属性；而在CSS2.1至CSS3，又逐步规范了内联盒子、内联表格、内联列表等新的盒子模型，让多列布局更容易实现。
        特定的盒子都可以从文档流中提取出来，用定位的三种方式CSS定义，来产生位置绝对偏移、相对偏移​、绝对固定的效果，从而实现在页面上位置的不同变化。
2、HTML中具体元素的样式美化，例如文本样式、边框和背景
        这里包含了字体和文本的样式属性；列表、表单和表格的样式属性；图片、多媒体元素的样式属性；以及边框和背景的属性。CSS3增加了大量的新属性，以前必须借助大量美工作图才能实现的特效，例如文字、边框阴影，圆角、背景渐变等特效可以直接在样式表里定义实现，甚至可以采用样式表直接画出图形！
3、动态样式需求，例如鼠标事件产生后样式的改变，下拉式菜单等
        最典型的应用如下拉菜单、点击菜单栏等显示效果，现在可以直接由CSS定义来实现。借助于强大的伪类/伪元素，可以完成很多本来需要用JS书写相应事件代码才能完成的的页面效果。
4、 元素的变形和动画
​        这是CSS3极力加强的一些功能属性，利用样式表，即可完成元素的2D和3D变形，不同元素之间的图形过渡，并创建动画，不再需要美工做图片处理，JS代码，也不再需要内嵌FLASH。
​        在这里基础上，我们还需要学习的另外一块，是所谓的响应式布局。和这个相对，一个静态布局，是一个宽度固定的页面，在PC上显示是很合适的，但是如果在移动端（手机和平板端）打开的时候，就会变得非常的小，使得阅读很困难。而响应式的流式弹性布局，无需针对移动端做单独的开发，当浏览器检测到屏幕的时候，会根据实际大小进行重新的布局和伸缩。这里的显示媒体检测、图像自动伸缩和布局改变的技术，也是样式表予以定义的。
HTML如何和CSS进行关联​
​         CSS（3）样式表是一个后缀为css的文本文件，用记事本就可以打开。而HTML文档中，也可以直接写样式。有三种方式：
        1、单独的CSS文件，在HTML文档的head头部分中用link元素予以外部引用。这也是最常见的情况，浏览器会下载引用的CSS文件并应用于HTML中的元素。浏览器只下载一次，然后就存放在浏览器缓存中，每次直接调用。
        2、在HTML的head​头部分中，在style标签之间，直接写CSS代码并应用。在页面开发的时候，为了方便起见，经常采用这个方式。一般在最后，还是会把这段CSS代码单独移除来并存为单独的样式表，然后用外部引用的方式引用。
       3、在HTML的具体元素里，用通用属性sytle=""的方式，直接在引号里面写样式。这种方式一般仅用于调试阶段，是最不建议的方式，将表现和结构混在一起写的文档，是很容易造成含义混乱的。​
​ 样式表里的基本结构
       打开css样式文件，可以看到里面是一组一组的属性定义。其基本格式是这样的：

[元素选择器1],​[元素选择器2]{
属性1:属性值；
属性2:属性值；
}

​        元素选择器，就是采用一些规则，从页面里面找到我们要定义样式属性的元素标签的方法。有标签名选择器、类/ID选择器、上下文选择器和属性定义选择器，以及伪类/伪元素选择器五类。
       属性，注意这里指的是样式属性而不是标签本身的属性。不同的元素标签，对应不同的样式属性。
       属性值，有文本值类、数值型（包括绝对数值和百分比单位），和针对颜色定义的颜色定义值。
​ 下面几弹，会按照这个基本逻辑脉络，来谈谈样式表的一些细节。