CSS层叠样式表摘要

[b]CSS 背景实例：[/b]

1.设置背景颜色:background-color;
2.设置文本的背景颜色：<span background-color="red">这是文本。</span>;
3.将图像设置为背景：background-image:url(…);
4.如何重复背景图像：background-repeat: repeat;
5.如何在垂直方向重复背景图像：background-repeat: repeat-y;
6.如何在水平方向重复背景图像：background-repeat: repeat-x;
7.如何仅显示一次背景图像：background-repeat: no-repeat;
8.如何放置背景图像： background-position:center;
9.如何使用%在页面上定位背景图像：background-position: 30% 20%;
10.如何使用像素在页面上定位背景图像：background-position: 50px 100px;
11.如何设置固定的背景图像：background-attachment:fixed；
12.所有背景属性在一个声明之中：background: #ff0000 url(…) no-repeat fixed center;

[b]CSS 文本实例：[/b]

1.设置文本颜色：<h1 color:red>…<h1>;
2.设置文本的背景颜色:<span background-color="red">这是文本。</span>;
3.规定字符间距:letter-spacing: 20px;
4.使用百分比设置行间距：line-height: 200%>；
5.使用像素值设置行间距：line-height: 20px>；
6.使用数值来设置行间距：line-height: 2；
7.对齐文本：h3 text-align: right>；
8.修饰文本：h1 text-decoration: overline/line-through/underline/blink(闪烁的文本)/none；
9.缩进文本：h1 text-indent: 1cm;
10.控制文本中的字母：text-transform: uppercase(大写)/lowercase(小写)/capitalize(每个单词首字母大写)；
11.在元素中禁止文本折行：white-space: nowrap/pre/normal；
12.增加单词间距：word-spacing: 30px；

[b]CSS 字体(font)实例：[/b]

1.设置文本的字体：font-family:Arial,Verdana,Sans-serif；
2.设置字体尺寸：font-size:20px;
3.设置字体风格：font-style:italic/oblique(斜体)/normal;
4.设置字体的异体：font-variant: normal/small-caps(所有字母大写)；
5.设置字体的粗细：font-weight：font-weight: bold；
6.所有字体属性在一个声明之内：font:italic bold 12px/30px arial,sans-serif;

[b]CSS 边框(border)实例[/b]

1.所有边框属性在一个声明之中：border: medium double rgb(250,0,255)；
2.设置四边框样式：border-style: dotted/dashed/solid/double/groove/ridge/inset/outset
3.设置每一边的不同边框：border-style: solid double groove inset(上右下左)
4.所有边框宽度属性在一个声明之中：border-width: 5px 10px 1px medium(上右下左)——使用border-width:时必须先使用 border-style:
5.设置四个边框的颜色：border-color:red black green blue(上右下左)——使用border-color:时必须先使用 border-style:
6.所有下边框属性在一个声明中：border-bottom:thick dotted red;
7.设置下边框的颜色：border-bottom-color:blue;
8.设置下边框的样式：border-bottom-style:solid;
9.设置下边框的宽度：border-bottom-width:thin/thick/10px;
10.所有左边框属性在一个声明之中：border-left:thick double red;
11.设置左边框的颜色：border-left-color: blue;
12.设置左边框的样式：border-left-style: solid;
13.设置左边框的宽度：border-left-width: thin/thick/10px;
14.所有右边框属性在一个声明之中：border-right:thick double red;
15.设置右边框的颜色：border-right-color: blue;
16.设置右边框的样式：border-right-style: solid;
17.设置右边框的宽度：border-right-width: thin/thick/10px;
18.所有上边框属性在一个声明之中：border-top:thick double red;
19.设置上边框的颜色：border-top-color: blue;
20.设置上边框的样式：border-top-style: solid;
21.设置上边框的宽度：border-top-width: thin/thick/10px;

[b]CSS 列表实例：[/b]

1.在无序列表中的不同类型的列表标记：list-style-type: disc/circle/square/none；
2.在有序列表中不同类型的列表项标记：list-style-type: decimal(数字)/lower-roman/upper-roman(罗马)/lower-alpha/upper-alpha(英文字母)；
3.将图像作为列表项标记：list-style-image: url(…)；
4.放置列表标记：list-style-position: inside/outside;
5.在一个声明中定义所有的列表属性：list-style: square outside url(…)；

[b]CSS 表格实例：[/b]

1.设置表格的布局：table-layout: automatic/fixed；
2.显示表格中的空单元：empty-cells: show；
3.合并表格边框：border-collapse: collapse/separate；(表格间距)；


[b]轮廓（Outlin） 实例：[/b]
1.在元素周围画线：outline:blue dotted thick;
2.设置轮廓的颜色：outline-color:red;
3.设置轮廓的样式：outline-style:double；
4.设置轮廓的宽度：outline-width:thin;

[b]CSS 尺寸 (Dimension) 实例：[/b]

1.使用像素值设置图像的高度：height: 30px；
2.使用百分比设置图像的高度：height: 50%；
3.使用像素值来设置元素的宽度：width: 200px；
4.使用百分比来设置元素的宽度：width: 50%；
5.设置元素的最大高度：max-height: 10px；
6.使用像素值来设置元素的最大宽度：max-width: 300px；
7.使用百分比来设置元素的最大宽度：max-width: 300px；
8.使用像素值来设置元素的最小高度：min-height: 100px；
9.使用像素值来设置元素的最小宽度：min-width: 300px；
10.使用百分比来设置元素的最小宽度：min-width: 50%；
11.使用百分比设置行间距：line-height: 90%；
12.使用像素值设置行间距：line-height:50px；
13.使用数值来设置行间距：line-height: 2；

[b]CSS 分类 (Classification) 实例：[/b]

1.如何把元素显示为内联元素：display: none(不显示)/inline(显示)；
2.如何把元素显示为块级元素：display: block；
3.浮动属性的简单应用：float:right；
4.将带有边框和边界的图像浮动于段落的右侧：float:right;border:1px dotted red;margin:0px 0px 15px 20px;
5.带标题的图像浮动于右侧：float:right；
6.使段落的首字母浮动于左侧：float:left;width:0.7em;font-size:400%;font-family:algerian,courier;line-height:80%;
7.创建水平菜单：
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
9.定位：相对定位：position:relative;left:-20px (左移20像素)
10.定位：绝对定位：position:absolute;left:100px;top:150px(定元素在页面的任何位置)
12.如何使元素不可见：visibility:hidden；
14.改变光标：cursor:auto/pointer/default/move/wait;
15.清除元素的侧面：clear:both;

[b]CSS 定位 (Positioning) 实例：[/b]

1.设置元素的形状：position:absolute;clip:rect(0px 50px 200px 0px)；
2.如何使用滚动条来显示元素内溢出的内容：overflow: scroll(在文本边上出现滚动条)；
3.如何隐藏溢出元素中溢出的内容：overflow: hidden；
4.如何设置浏览器来自动地处理溢出：overflow: auto；
5.垂直排列图象：vertical-align:text-top/text-bottom；
6.Z-index可被用于将在一个元素放置于另一元素之后：z-index:-1(-1理解为衬与文字下方)