CSS简介

原名：层叠样式表 (Cascading Style Sheets)
作用：如何显示 HTML 元素
存储位置：常存储在样式表中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
目的：解决内容与表现分离的问题

同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
其中4具有最高的权限

语法：选择器+多个声明

ct_css_selector.gif

颜色属性值的不同表达方式：

p { color: red; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }  
<!-- 当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号-->

当属性值是多个单词时，即单词间有空格时，给值加上双引号。
p {font-family: "sans serif";}
当多个分类器的属性和值一样时：

  color: green;
  }```

##继承
`body {
     font-family: Verdana, sans-serif;
     }`
根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。
如果不想p继承，可以另外加上
`p  {  font-family: Times, "Times New Roman", serif; }`

##派生选择器

strong {
color: red;
}

h2 {
color: red;
}

h2 strong {
color: blue;
}

这样的结果：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

##id 选择器
id 选择器以 "#" 来定义。

red {color:red;}

green {color:green;}

 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

现代布局中，id 选择器常常用于建立派生选择器。
```#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }```
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落(<p>)
>即使被标注为 sidebar 的元素只能在文档中出现一次，这个 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;
}

与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。


##类选择器
`.center {text-align: center}`
所有拥有 center 类的 HTML 元素均为居中。
例如：

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

#####和 id 一样，class 也可被用作派生选择器：

.fancy td {
color: #f60;
background: #666;
}

类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文（名为 fancy 的更大的元素可能是一个表格或者一个 div）
#####元素也可以基于它们的类而被选择：
`td.fancy {
    color: #f60;
    background: #666;
    }`
`<td class="fancy">`
这个效果被限制于被标注为 fancy 的表格单元（即使用 td 元素来选择 fancy 类）。

CSS学习笔记（一）--基本知识