css(一)

1、background-image：用于设置背景图片

2、background-repeat：背景重复，即所谓的平铺

3、background-position和background-attachment组合可以达到一些特定的效果，如：
body{background-image:url(images/guobiting03.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:top;}可以让背景图片始终停留在可视区的顶部

4、background 简写属性在一个声明中设置所有的背景属性。
可以按顺序设置如下属性：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
  如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif'); 也是允许的。
  通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。

5、text-decoration
如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。

6、规定段落中的文本不进行换行：
p
  {
  white-space: nowrap
  }(更多white-space属性的知识参见w3school中css文本)
 

7、p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}
您也许已经注意到了，上面的例子中使用了单引号。只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号：
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
'New York', serif;">...</p>
 

8、您可以为一个边框定义多个样式，例如：
p.aside {border-style: solid dotted dashed double;}
上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。
我们又看到了这里的值采用了 top-right-bottom-left 的顺序，讨论用多个值设置不同内边距时也见过这个顺序。

这两种方法是等价的：
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
 

9、<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>
 

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}
 

10、(1)使用滚动条来显示元素内溢出的内容
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
(2)隐藏溢出元素中溢出的内容
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: hidden
}
(3)设置浏览器来自动地处理溢出
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: auto
}
(4)设置元素的形状
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
(5)垂直排列图像(http://www.w3school.com.cn/tiy/t.asp?f=csse_vertical-align)
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
(6)Z-index(http://www.w3school.com.cn/css/css_positioning.asp)

11、(1)我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：(http://www.w3school.com.cn/css/css_selector_class.asp)
.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}
(2)通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：
.important.urgent {background:silver;}
不出所料，这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：
<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>


12、根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~="important"] {color: red;}

13、<style type="text/css">
input:focus
{
background-color:yellow;
}
</style>


<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>


14、锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
伪类与 CSS 类(http://www.w3school.com.cn/css/css_pseudo_classes.asp)

参考：http://www.w3school.com.cn/css/css_background.asp
http://www.w3school.com.cn/css/pr_background.asp