css学习

1. CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
--------------------------------------------------------------------------------
2. 是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
--------------------------------------------------------------------------------
3.值的不同写法和单位
除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
p { color: #ff0000; }为了节约字节，我们可以使用 CSS 的缩写形式：
p { color: #f00; }我们还可以通过两种方法使用 RGB 值：
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。
--------------------------------------------------------------------------------
4. 记得写引号
提示：如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
注意：不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
--------------------------------------------------------------------------------
5. 派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
strong {
color: red;
}

h2 {
color: red;
}

h2 strong {
color: blue;
}下面是它施加影响的 HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
--------------------------------------------------------------------------------
6. id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
例如：
#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
--------------------------------------------------------------------------------
7. id 选择器和派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落

注：一个选择器，多种用法
尽管被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次
--------------------------------------------------------------------------------
8. 单独的选择器
div#sidebar {
border: 1px dotted #000;
padding: 10px;
}
只作用于id=#sidebar的div，其他元素没有用
--------------------------------------------------------------------------------
9. 类选择器
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
--------------------------------------------------------------------------------
10. 属性选择器
下面的例子为带有 title 属性的所有元素设置样式：
[title]
{
color:red;
}
--------------------------------------------------------------------------------
11. 属性和值选择器
下面的例子为 title="W3School" 的所有元素设置样式：
[title=W3School]
{
border:5px solid blue;
}
--------------------------------------------------------------------------------
12. 属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：
[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
[lang|=en] { color:red; }
例如：<p lang="en-us">Hi!</p>注意必须是en后面有连字符

13. 设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}

input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
--------------------------------------------------------------------------------
13. 多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {
color: red;
text-align: left;
font-size: 8pt;
}而内部样式表拥有针对 h3 选择器的两个属性：

h3 {
text-align: right;
font-size: 20pt;
}假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

color: red;
text-align: right;
font-size: 20pt;即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
--------------------------------------------------------------------------------