结构

语法结构

• 两种方法使用 RGB 值

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); } 
// 当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。

• 如果值为若干单词，则要给值加引号

p {font-family: "sans serif";}

• 选择器的分组：用逗号分开

h1,h2,h3,h4,h5,h6 { color: green; }

继承及其问题

• 子元素从父元素继承属性

body {
     font-family: Verdana, sans-serif;
 }

不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样

派生选择器 | 上下文选择器

依据元素位置的上下文关系定义样式

• 后代选择器（descendant selector）又称为包含选择器

h1 em {color:red;}

• 子元素选择器（Child selectors）

h1 > strong {color:red;}

• 相邻兄弟选择器（Adjacent sibling selector）

h1 + p {margin-top:50px;}
li + li {font-weight:bold;} // 除了第一个li

属性选择器

对带有指定属性的 HTML 元素设置样式
注意：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。

[title] { color:red; } // 属性选择器
[title=W3School] { border:5px solid blue; } //属性和值选择器
[title~=hello] { color:red; } // 包含空格分隔的值 hello world
[lang|=en] { color:red; } // 包含连字符分隔的值 en-us

• 选择器参考手册

创建CSS

• 外部样式表

<link rel="stylesheet" type="text/css" href="mystyle.css" />

• 内部样式表

<style type="text/css">
    hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("images/back40.gif");}
</style>

• 内联样式

<p style="color: sienna; margin-left: 20px">