标签：内容 开头 :link color 部分 head 状态 bottom 长度
最近用到了CSS，刚好学学。CSS（Cascading Style Sheet）中文名层叠样式表，用于为html文档添加样式控制，也是一种计算机语言。
一、CSS语法
a)CSS规则由选择器和声明组成，构造为selector{declaration1;declaration2}，多个声明之间用分号隔开。declaration又包含属性property和值value两部分。结构为property:value。
b) 不同的property的value有不太能够的写法，比如color:#ff000;color:rgb(255,255,255);width:12px;width:98%;font-family:"Calibr"等等。
c) CSS中使用空格不会影响工作效果，而且CSS对大小写不敏感，但涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
d) 可以对选择器分组，然后使用相同的声明，比如
table,div,h1{
color:red;
}
二、选择器
常用的选择器有派生选择器、ID选择器、类选择器、属性选择器等。
a) 派生选择器
能够依据元素的上下文关系来定义样式，所以也叫上下文选择器。比如要让li列表中的strong元素变为斜体字：
li strong {
font-style: italic;
font-weight: normal;
}
<ol>
<li><strong>我是斜体字</strong></li>
<li>我是正常的字体。</li>
</ol>
让h2中的strong颜色为blue
h2 {
color: red;
}
h2 strong {
color: blue;
}
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
h2 strong会覆盖h2的样式定义
b)ID选择器
用于为标有特定ID的html元素指定样式。
#red {color:red;}
<p id="red">这个段落是红色。</p>
ID属性在html中不能重复，否则只有最后渲染的那个生效。
ID选择器也用于建立派生选择器，扩展派生选择器的使用场合。
c) 类选择器
用点号开头，且类名的第一个元素不能是数字，基本使用为：
.center {text-align: center}
<h1 class="center">
类选择器可作用于所有标记的元素。
类选择器也可以可派生选择器配合使用：
.fancy td {
color: orange;
}
这样写时，类名为fancy的更大的元素内部的表格单元都会显示橙色文字。
td.fancy {
color: orange;
}
而这样时，所有类名为fancy的单元格都将是橙色文字。
d)属性选择器
用于对带有指定属性的HTML元素设置样式。比如为带有title属性的所有元素设置样式：
<h2 title="Hello world">Hello world</h2>
<a title="hello" href="http://hello.com">hello</a>
[title]
{
color:red;
}
还有属性和值选择器，比如
[title=hello]选择title=hello的元素
[title~=hello]选择title包含hello的元素
[title|=hello]选择title以hello开头的元素
e)伪类
伪类用于为选择器添加特殊的效果，比如要控制超链接的状态：
a:link {color: #FF0000}/* 未访问的链接 */
a:visited {color: #00FF00}/* 已访问的链接 */
a:hover {color: #FF00FF}/* 鼠标移动到链接上 */
a:active {color: #0000FF}/* 选定的链接 */
伪类与CSS还可以配合使用：
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">css</a>
三、框模型(Box Model)
a)CSS中的元素采用框模型来定义内容(element)、内边距(padding)、外边距(margin)、边框(border)等。
b) padding属性控制元素边框与内容之间的空白区域，margin则设置元素边框外侧的空白区域。
如果直接写padding:10px或margin:10px，则四条边框都会生效，也可以使用*-top\*-right\*-bottom\*-left来分别设置，简写时为{padding\margin：1px,1px,1px,1px}，这是按照上右下左的顺时针顺序设置了对应的边距。
c)CSS的长度单位分为相对长度单位和绝对长度单位，相对长度单位有em(字体高度)\ex（字体x的高度）\px（像素）\%（百分比），绝对长度单位有in（英寸）\cm\mm\pt（point1点=72分之1英寸）\pc（Picas，1px=12点）。为边距使用%时，是相对父元素的width计算的。
标签：内容 开头 :link color 部分 head 状态 bottom 长度
原文地址：http://www.cnblogs.com/zhixin9001/p/7612946.html
