标签：
1、css代码结构
选择器 {
属性:值;
属性:值;
} // 一组（属性:值）被称为 声明 ，花括号又包含多组 声明
// 当值出现为0时，后面不需要加px单位，因为0就是0
例如：
p{ text-align: center; color: black; font-family: arial; margin: 0; padding: 0; }
2、类名的第一个字符不能使用数字，因为在Mozilla或Firefox中不起作用，考虑到兼容性。
如果有多个分组，可以用逗号将需要分组的选择器分开，被分组的选择器可以共享相同的声明。
例如：
h1,h2,h3,h4,h5,h6{ color: blue; }
3、HTML元素可以基于它们的类被选择［也相当于一对一的关系］
例如：
td.fancy { color: #f60; background: #666; }
在上面的例子中，类名为fancy的表格单元将带有#666的背景颜色和#f60的字体颜色。
<td class="fancy">我的样式会改变</td>
<p class="fancy">我虽然有fancy标注，但我的样式没改变</p>
这是由于我书写的这条规则的效果被限制于被标注为fancy的表格单元（即用td元素来选择fangcy类）。
4、属性选择器有4种常见类型：
（1）属性选择器，例子中 将带有title 属性的所有元素设置样式
[title]{ color: blue; }
<h1 title="Hello">我的样式被改变了</h1>
<h2>我的样式没改变，因为我没加属性<h2>
(2)属性和值选择器，例子中 将带有title="Hello"的所有元素设置样式
[title=Hello]{ color: blue; }
<h1 title="Hello">我的样式被改变了</h1>
<h2 title="World">我的样式没改变，即使我加了属性<h2>
(3)属性和值选择器－多个值， 例子中适用于由空格分隔的属性值
[title~=hello]{ color: blue; }
<h1 title="Hello World">我的样式被改变了</h1>
<h2 title="World Hello">我的样式被改变了</h2>
<h3 title="World">我的样式没改变，因为我的属性名不对应<h3>
例子中适合由连字符分隔的属性值
[title|=en]{ color: blue; }
<h1 title="en">我的样式被改变了</h1>
<h2 title="en-us">我的样式被改变了</h2>
<h3 title="us">我的样式没改变，因为我的属性名不对应</h3>
(4)设置表单的样式 例子中适用于不带class或id的表单设置样式时特别有用
input[type="text"]{ display: block; width: 150px; margin-bottom: 10px; background-color: blue; font-family: Verdana, Arial; } input[type="button"]{ display: block; width: 120px; margin-left: 35px; font-family: Verdana, Arial; }
<input type="text" name="Name" value="mini_wyy" size="20">
<input type="button" value="Button"
5、外部样式表
页面使用<link>标签链接到样式表，<link>标签在（文档的）头部
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
标签：
原文地址：http://www.cnblogs.com/wuyongyu/p/5209347.html
