结构
语法结构
- 两种方法使用 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">
