CSS学习笔记（1）
CSS 指层叠样式表 (Cascading Style Sheets)
1、层叠次序
问：当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
- 内联样式（在 HTML 元素内部）
- 内部样式表（位于 <head> 标签内部）
- 外部样式表
- 浏览器缺省设置
外部样式表 使用 <link> 标签链接到样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表 当单个文档需要特殊的样式时，就应该使用内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式 在相关的标签内使用样式（style）属性
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重样式 涉及到层叠次序
2、可以通过两种方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); } 百分比时，即使当值为 0 时也要写百分比符号
p { color: rgb(100%,0%,0%); } 百分比时，即使当值为 0 时也要写百分比符号
3、CSS 对大小写不敏感。不过如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
4、
h1,h2,h3,h4,h5,h6 {
color: green;
}
5、派生选择器
li strong {
font-style: italic;
font-weight: normal;
} 列表中的 strong 元素变为斜体字，而不是通常的粗体字
6、id 选择器 经常和 派生选择器联用
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em; em表示一个汉字距离
}
7、类选择器 也可被用作派生选择器
.fancy td {
color: #f60;
background: #666;
} 表示类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
元素下的类选择器
td.fancy {
color: green;
background: #666;
}
只有表单中的td元素下使用class="fancy"，才会出现效果。这个效果被限制于被标注为 fancy 的表格单元。
任何其他被标注为 fancy 的元素不会受这条规则的影响。
p.no2 {
background-color: gray;
padding: 20px;
}
<p class="no2">这个段落设置了内边距。</p>
8、属性选择器
①为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
②为 title="element" 的所有元素设置样式：
[title=element]
{
border:5px solid blue;
}
③
[title~=hello] {
color:red;
} 选择 titile 属性包含单词 "hello
" 的元素设置其样式
④以 "hi" 开头的，适用于由连字符分隔的属性值：
[title|=hi] {
color:red;
}
应用 <span title="hi-hello">连字符分隔的属性值</span>
⑤设置表单中的属性样式
input[type=text]{
background-color: yellow;
}
⑥
a[target]
{
background-color:yellow;
} 为带有 target 属性的 <a> 元素设置样式：
a[target=_blank]
{
background-color:yellow;
} 为 target="_blank" 的 <a> 元素设置样式：
[class^="test"]
{
background:#ffff00;
} 设置 class 属性值以 "test" 开头的所有元素的背景色
div[class^="test"]
{
background:#ffff00;
} 设置 class 属性值以 "test" 开头的所有 div 元素的背景色
[class$="test"]
{
background:#ffff00;
} 设置 class 属性值以 "test" 结尾的所有元素的背景色
div[class$="test"]
{
background:#ffff00;
} 设置 class 属性值以 "test" 结尾的所有 div 元素的背景色
[class*="test"]
{
background:#ffff00;
} 设置 class 属性值包含 "test" 的所有元素的背景色
div[class*="test"]
{
background:#ffff00;
} 设置 class 属性值包含 "test" 的所有 div 元素的背景色
