CSS是层叠式样式表(Cascading Style Sheets)的缩写,定义了如何显示HTML元素。
- CSS规则由两个主要的部分构成:选择器 + 一条或多条声明。
- 每条声明由一个属性和一个值构成。
selector { property1: value1; property2: value2; }
- 选择器的分组
h1,h2,h3,h4,h5,h6 { color: green; }
- 继承
子元素从父元素继承属性。但可以单独定义子元素的规则来摆脱父元素的规则。
body { font-family: Verdana, sans-serif; } p { font-family: Times, "Times New Roman", serif; }
- 派生选择器
strong { color: red; } h2 { color: red; } h2 strong { color: blue; }
- id选择器
id选择器可以为特定id的HTML元素指定特定的样式。
id选择器以“#”来定义。
#red {color:red;} #green {color:green;}
<p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p>
- id派生选择器
只有在指定id内的元素会得到特殊的处理。
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; } #sidebar h2 { font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; }
- 类选择器
类选择器以一个点号显示。
.center { text-align: center }
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
- 类派生选择器
❶ 在下边的例子中,funk类的内部的表格单元会以灰色背景显示橙色文字(funk可能是一个表格或div)。
.funk td { color: #f60; background: #666; }
❷ 在下边的例子中,funk类的表格单元将会以灰色背景显示橙色文字。
td.funk { color: #f60; background: #666; }
<td class="fancy">