Css介绍
分析一个典型CSS的语句：
p { COLOR:#FF0000 ; BACKGROUND:#FFFFFF }
-
其中"p"我们称为"选择符"(selectors)，指明我们要给"p"定义样式；
-
样式声明写在一对大括号"{}"中；
-
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
-
"#FF0000"和"#FFFFFF"是属性的值(value)。
1. 基本语法规范
1.1. 选择符
任何HTML元素（如：<p>）都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如：P { text-indent: 3em }当中的选择符是P。
1.1.1. 群选择符
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔：
P , td , li { font-size : 12px ; }
1.1.1. 类选择符
单一个选择符能有不同的CLASS(类)，因而允许同一元素有不同样式。例如，元素P用不同的颜色显示代码 :
p.a { color: #191970 }
p.b { color: #4b0082 }
以上的例子建立了两个类，a和b，供HTML的p元素使用。CLASS属性是用于在HTML中以指明元素的类，例如，
<P CLASS=a>每个选择符只允许有一个类。</p>
<P CLASS=b>每个选择符只允许有一个类。</p>
类的声明也可以无须相关的元素:
.note { font-size: small }
在这个例子，名为note的类可以被用于任何元素。
一个良好的习惯是在命名类的时候，根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small，但如果网页制作者决定改变这个类的样式，使得它不再是小字体的话，那么这个名字就变得毫无意义了。
1.1.1. ID 选择符
ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用，因为他具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如，ID选择符可以指定如下:
#svp94O { text-indent: 3em }
这点可以参考HTML中的ID属性:
<P ID=svp94O>文本缩进3em</P>
1.1.1. 关联选择符
关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大。例如，以下的上下文选择符是.note .cn
.note .cn { background: yellow }
.cn 必须在.note 中才有效。
<table class="note">
<tr>
<td class="cn">测试</td>
</tr>
</table>
1.2. 属性
一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。
例如：
p { COLOR:#FF0000 ; BACKGROUND:#FFFFFF }
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔。
1.3. 值
声明的值是一个属性接受的指定。例如，属性颜色能接受值red。
例如：
p { COLOR: red ; BACKGROUND:#FFFFFF }
"red"和"#FFFFFF"是属性的值(value)。
1.4. 伪类和伪元素
伪类和伪元素是特殊的类和元素，能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素（即同类元素的集合）。伪元素指元素的一部分，例如段落的第一个字母。
伪类或伪元素规则的形式如下：
选择符:伪类 { 属性: 值 } 或 选择符:伪元素 { 属性: 值 }
伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用，如下:
选择符.类: 伪类 { 属性: 值 } 或 选择符.类: 伪元素 { 属性: 值 }
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
2. CSS属性列表
|
属性名称 |
属性含义 |
属性值 |
|
字体属性（Font） font-family font-style font-variant font-weight font-size |
使用什么字体 字体是否斜体 是否用小体大写 字体的粗细 字体的大小 |
所有的字体 Normal、italic、oblique Normal、small-caps Normal、bold、bolder、lithter等 Absolute-size、relative-size、length、percentage等 |
|
颜色和背景属性 Color Background-color Background-image Background-repeat Background-attachment Background-position |
定义前景色 定义背景色 定义背景图案 重复方式 设置滚动 初始位置 |
颜色 颜色 路径 Repeat-x、repeat-y、no-repeat Scroll、Fixed Percentage、length、top、left、right、bottom等 |
|
文本属性 Word-spacing Letter-spacing Text-decoration Vertical-align Text-transform Text-align Text-indent Line-height |
单词之间的间距 字母之间的间距 文字的装饰样式 垂直方向的位置 文本转换 对齐方式 首行的缩进方式 文本的行高 |
同上 None|underline|overline|line-through|blink Baseline|sub|super|top|text-top|middle|bottom|text-bottom|Capitalize|uppercase| lowercase|none Left|right|center|justify <length>|<percentage> Normal|<number>|<length>|<percentage> |
|
边距属性 Margin-top Margin-right Margin-bottom Margin-left |
顶端边距 右侧边距 底端边距 左侧边距 |
Length|percentage|auto 同上 同上 同上 |
|
填充距属性 Padding-top Padding-right Padding-bottom Padding-left |
顶端填充距 右侧填充距 底端填充距 左侧填充距 |
Length|percentage 同上 同上 同上 |
|
边框属性 Border-top-width Border-right-width Border-bottom-width Border-left-width Border-width Border-color Border-style Border-top Border-right Border-bottom Border-left Width Height Float Clear |
顶端边框宽度 右侧边框宽度 底端边框宽度 左侧边框宽度 一次定义宽度 设置边框颜色 设置边框样式 一次定义顶端 一次定义右侧 一次定义底端 一次定义左侧 定义宽度属性 定义高度属性 文字环绕 哪一边环绕 |
Thin|medium|thick|length 同上 同上 同上 同上 Color None|dotted|dash|solid等 Border-top-width|color等 同上 同上 同上 Length|percentage|auto Length|auto Left|right|none Left|right|none|both |
|
分级属性 Display White-space List-style-type List-style-image List-style-position List-style |
定义是否显示 怎样处理空白 加项目编号 加图案 第二行起始位置 一次定义列表 |
Block、inline、list-item、none Normal、pre、nowrap Disc、circle、square等 <url>|none Inside、outside <keyword>|<position>|<url> |
|
鼠标（Cursor）属性 |
自动 定位“十”字 默认指针 手形 移动 箭头朝右方 箭头朝右上方 箭头朝左上方 箭头朝上方 箭头朝右下方 箭头朝左下方 箭头朝下方 箭头朝左方 文本“I”形 等待 帮助 |
Auto Crosshair Default Hand Move e-resize Ne-resize Nw-resize n-resize Se-resize Sw-resize s-resize w-resize Text Wait Help |
