CSS笔记（一）CSS规则

　　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">

CSS笔记（一）CSS规则

相关推荐