CSS规则有两个主要部分组成：选择器，一条或多条声明
选择器通常是需要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性是希望设置的样式属性。每个属性有一个值。属性和值之间用冒号分开。
CSS选择器
CSS选择器是一种模式，用于选择要添加样式的元素。
参考 http://www.w3school.com.cn/cssref/css_selectors.asp
CSS属性
参考 http://www.w3school.com.cn/cssref/index.asp
HTML中使用CSS样式表的三种方式
第一种 元素内嵌样式 使用全局属性 style
<body> <a href="http://apress.com" style="background-color:grey; color:while"> 使用内嵌样式</a> </body>
第二种 文档内嵌样式 使用 style元素定义文档内嵌样式 通常放置在<head>部分
<head> <style type="text/css"> a { background-color:grey; color:white; } </style> </head> <body> <a href="http://apress.com">使用文档内嵌样式</a> </body>
第三种 外部样式表 使用<link>元素 或者 @import url("CSS文件路径")
a { background-color:grey; color:white; } 以上内容保存在sytles.css文件中 ------------------ <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <!-- 使用 link元素 --> </head> <body> <a href="http://apress.com">使用外部样式表</a> </body> ------------------ <head> <style type="text/css"> @import url("styles.css") </style> <!-- 使用 @import url() --> </head> <body> <a href="http://apress.com">使用外部样式表</a> </body>
使用 link 方式和 @import url() 方式的区别：
-- 两者的加载机制不同，link 属于 XHTML 优先加载 CSS 文件到 HTML 页面；@import url() 属于 CSS2.1，先加载 HTML 结构后加载 CSS 文件，在网速慢的情况下会出现一开始没有 CSS 样式，闪烁一下后出现样式后的页面。
-- 当使用 JS 控制 dom 去改变样式的时候，只能使用 link 方式，因为 @import 不是 dom 可以控制的。
-- link 除了可以加载 CSS 文件外，还能定义 RSS，定义 rel 链接属性，@import 只能加载 CSS 文件