1.CSS笔记：简介、语法规则

本系列内容由ZouStrong整理收录

整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com

一. CSS历史

• 1996年 CSS1.0
  
• 1998年 CSS2.0
  
• 2001年 CSS3.0（分为不同的模块，陆续推出）
  
• 2007年 CSS2.1（目前为止（2015/05/05），仍然是支持最完善的版本）
  
• ......

HTML原本被设计为用于定义文档内容和结构，通过使用 <h1>、<p>、<table> 这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息，同时文档布局完全由浏览器来决定，那个时候HTML并不关心外观，它只是一种简洁的小型标记机制

但是，对于网页样式多样性的需求不断增加，导致当时两种主要的浏览器（Netscape 和 IE）不断地将新的HTML标签和属性（比如<font>、<big>等）添加到HTML规范中，他们大多仅仅是负责表现页面样式， 突然之间，原本用于描述结构的语言开始描述外在表现了

一时间网页内容看上不是那么单调了，但是从此开始，创建文档结构清晰、独立于表现层、且具有良好语义的网页变得越来越困难

• 页面没有语义，可用性降低（对于盲人、对于语音浏览器）
  
• 对于搜索引擎优化不利（搜索引擎就是最活跃的盲人用户）
  
• 页面可读性差，不易于维护

为了解决这个问题，万维网联盟（W3C，一个非营利的标准化联盟——Web标准的“制造者”），肩负起了HTML标准化的使命，并在HTML 4.0 之外创造出了CSS（HTML和CSS并不是编程语言，而是用来标记内容和为内容提供样式的一种机制）

CSS定义了如何显示HTML元素。通过仅仅编辑一个简单的 CSS 文档（样式表），就能够同时改变站点中几乎所有页面的布局和外观，大大简化了工作，并且易于修改和维护

CSS的出现解决了内容与表现分离的问题，即

• HTML用来定义一个文档的结构（内容）
  
• CSS用来定义一个文档的表现
  
• JS用来定义一个文档的行为

二. CSS定义

CSS即层叠样式表（Cascading Style Sheet）,定义了如何显示HTML元素

CSS不需要编译，直接由浏览器解释执行

CSS文件的后缀名为.css

三. CSS使用

使用CSS有以下4种方式：

1. 内联样式（行内样式）——不推荐使用

通过html元素的style属性来添加样式，使用分号分隔多个声明

<p style="padding:10px;color:red">段落内容<p>

2. 嵌入样式（页面样式）

通过<style>标签（位于head元素内）来添加样式（可选的media属性，指定媒体类型）

<style type="text/css">
	p {padding:10px;color:red;}
</style>

3. 外部样式（链接样式）——真正的内容与表现分离

通过<link>标签（位于head元素内，自闭合元素）来添加外部CSS文件

<link href="a.css" type="text/css"  rel="stylesheet" media="all" />

外部样式表中只能出现CSS规则和CSS注释

当指定了媒体类型(media)之后，只有符合条件的媒体类型才会加载此样式表（具体内容在媒体查询一节详述）

4. @import规则——不推荐使用

该规则位于style元素内部或者外部样式表中，并且必须出现在其他所有CSS规则之前

@import  url(../test.css);
@import  url(../test.css) screen ;

小结：方式3和4的区别

首先，外部样式使用的是html的标签<link>（是html级别的），<link>标签除了引入样式表之外，还有其他作用， （是CSS级别的），为了使用它，必须包含在style元素或者CSS文件内，且要位于任何规则之前

<link>标签可以引入候选样式表，

其次，<link>引入的样式会同html页面同时加载， ，所以会使页面闪烁（出现无样式的页面，后恢复）

注：当浏览器遇到style元素或者link元素时，便停止对html的解析，转而解析（包括下载）CSS代码，解析完毕后，转而继续解析html文档，所以要把样式表放在前面，先渲染CSS

最后，@import规则会在外部样式表中再次引入其它样式表，会对服务器产生过多http请求，加重服务器负担（这也是不建议使用的根本原因）

四. CSS编码

必须采用UTF-8的编码格式来书写和保存CSS文件

如果不能保证文件格式是UTF-8，那么就必须在CSS文件的最顶部书写如下规则（不是最顶部的话，会失效）

@charset "utf-8";   
/＊强制文件使用UTF-8编码，分号是必须的＊／

注：即使能够保证文件格式是UTF-8，也总应该写上这条规则，因为如果不写的话，浏览器查看源代码时，中文注释就是乱码了

五. CSS语法

• 一个CSS文件，由很多CSS规则构成
  
• 一条CSS规则，由选择器和声明块构成
  
• 一个声明块可以包含多条声明，每条声明以分号分隔
  
• 一条CSS声明，由很多属性和值构成，属性和值以冒号分隔

具体示例如下

div {width:120px;height:120px;}

每条声明必须以分号结束，以告知浏览器正确解析不同的声明（最后一条声明的分号可选，但应该总是加上，方便以后扩展）

浏览器会忽略样式表中多余的空白符，因此可以保持适当的缩进，增加代码可读性

六. CSS注释

除了CSS规则外，CSS文件里就只能写CSS注释了

CSS注释只有一种格式，那就是

/*注释内容，不可嵌套，没有//这种单行注释！*/

7. 大小写

涉及到CSS的大部分内容都是不区分大小写的，例如大部分选择器，所有属性和属性值

div {margin:10px;}  /*都一样*/
DIV {MARGIN:10PX;}
Div {Margin:10Px;}

但是，属性选择器中的属性值是区分大小写的

div[class="abc"] {}  /*不一样*/
div[class="Abc"] {}

八. CSS规则（7个）

除了更加具体的样式规则外（后续详细介绍），还有以下几种特殊的规则

1. !important

该规则用于提升样式的权重

p {color:#F80 !important;}
p {color:#F70;}        /*最终显示为#F80*／

该规则在IE6下有支持性问题，!important并不覆盖在同一条样式中的同一规则（并不是IE6不支持!important）

p {color:red !important;color:blue;} /*只有IE6下为蓝色*／ 

解决方法：

p {color:red !important;}
p {color:blue;}

2. @import（CSS3有改动）

在嵌入样式或外部样式中使用，用于引入外部样式表及和声明媒体类型和媒体查询条件

@import url("a.css");
@import url(a.css);
@import "a.css";

该规则必须出现在所有规则的前面，且分号是必须的

@import url(a.css) screen;
@import url(a.css) screen and (min-width:800px);

3. @charset

在外部样式中使用，指定该样式表使用的字符编码

@charset "utf-8";  /*分号是必须的*/

4. @media（CSS3有改动）

指定样式表的媒体类型和媒体查询条件（详见后）

IE6~8只支持媒体类型，不支持媒体查询条件

5. @page

设置页面容器的板式、方向、边空等（打印相关，暂不涉及）

6. @font-face （CSS3新增）

指定嵌入html的字体，嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端系统所没有安装的字体

通常使用.ttf(TrueType)和.otf(OpenType)两种字体格式

@font-face{
　　font-family:YH;
　　src:url(demo/mysh.ttf);
}

7. @keyframes （CSS3新增）

定义动画名称和效果，定义的动画名称被animation-name所使用

简单的动画可以直接使用关键字from和to，即从一种状态到另一种状态

@keyframes mydemo {
　　from {width:200px;}
　　to {width:100px;}
}

复杂动画可以使用百分比去设置任意时间段的样式

@keyframes mydemo {
　　from {width:200px;}
　　10% { width:180px;}
　　50% { width:140px;}
　　to {width:100px;}
}

也可以不适用关键字，直接使用0%和100%(0%不能写成0)

@keyframes mydemo {
　　0% {width:200px;}
　　10% { width:180px;}
　　50% { width:140px;}
　　100% {width:100px;}
}

需要注意的是：

• 自定义动画名称区分大小写，且不能使用CSS属性及属性值相同的名字
  
• 现阶段仍要书写私有属性如 @-webkit-keyframes demo {}

九. CSS工具合集

无论做什么，工具都能起到很大的辅助作用，他们有的可以帮助我们书写CSS，有的可以帮助我们查看和调试CSS，有的可以使浏览器支持原生并不支持的CSS特性....

• Emmet插件（书写）
  
• Chrome控制台（调试）
  
• FireBug插件（调试）
  
• Web Developer插件（调试）