CSS基础内容总结（三）

CSS 链接

---

不同的链接可以有不同的样式。

---

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

实例

a:link {color:#FF0000;}      /* 未访问链接*/ 
a:visited {color:#00FF00;}  /* visited link */ 
a:hover {color:#FF00FF;}  /* mouse over link */ 
a:active {color:#0000FF;}  /* selected link */

尝试一下 »

当设置为若干链路状态的样式，也有一些顺序规则：

• a:hover 必须跟在 a:link 和 a:visited后面
• a:active 必须跟在 a:hover后面

提示：在本站的CSS参考手册中，我们对CSS:link 选择器做了详细的介绍。

---

常见的链接样式

根据上述链接的颜色变化的例子，看它是在什么状态。

让我们通过一些其他常见的方式转到链接样式：

文本修饰

text-decoration 属性主要用于删除链接中的下划线：

实例

a:link {text-decoration:none;} 
a:visited {text-decoration:none;} 
a:hover {text-decoration:underline;} 
a:active {text-decoration:underline;}

尝试一下 »

背景颜色

背景颜色属性指定链接背景色：

实例

a:link {background-color:#B2FF99;} 
a:visited {background-color:#FFFF85;} 
a:hover {background-color:#FF704D;} 
a:active {background-color:#FF704D;}

尝试一下 »

CSS 列表

---

CSS列表属性作用如下：

• 设置不同的列表项标记为有序列表
• 设置不同的列表项标记为无序列表
• 设置列表项标记为图像

---

列表

在HTML中，有两种类型的HTML列表：

• 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

---

不同的列表项标记

list-style-type属性指定列表项标记的类型是：

实例

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

尝试一下 »

一些值是无序列表，以及有些是有序列表。

下列是对list-style-type属性的常见属性值的描述：

• none：不使用项目符号
• disc：实心圆
• circle：空心圆
• square：实心方块
• decimal：阿拉伯数字 
• lower-alpha：小写英文字母 
• upper-alpha：大写英文字母 
• lower-roman：小写罗马数字 
• upper-roman：大写罗马数字

---

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

实例

ul
{
list-style-image: url('sqpurple.gif');
}

尝试一下 »

上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。

提示：利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。

如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

浏览器兼容性解决方案

同样在所有的浏览器，下面的例子会显示的图像标记：

实例

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
ul li {
  background-image: url(sqpurple.gif);
  background-repeat: no-repeat;
  background-position: 0px 5px; 
  padding-left: 14px; 
}

尝试一下 »

例子解释：

• ul:
  • 设置列表样式类型为没有列表项标记
  • 设置填充和边距0px（浏览器兼容性）
• ul中所有li:
  • 设置图像的URL，并设置它只显示一次（无重复）
  • 您需要的定位图像位置（左0px和上下5px）
  • 用padding-left属性把文本置于列表中

---

列表 -缩写属性

在单个属性中可以指定所有的列表属性。这就是所谓的缩写属性。

为列表使用缩写属性，列表样式属性设置如下：

实例

ul {
  list-style: square url("sqpurple.gif");
}

尝试一下 »

如果使用缩写属性值的顺序是：

• list-style-type
• list-style-position (有关说明，请参见下面的CSS属性表)
• list-style-image

如果上述值丢失一个，其余仍在指定的顺序，就没关系。

---

更多实例

所有不同的列表项标记
这个例子演示了所有不同的CSS列表项标记。

---

所有的CSS列表属性

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

---

More Examples

添加不同样式的超链接 
这个例子演示了如何为超链接添加其他样式。

高级 - 创建链接框 
这个例子演示了一个更高级的例子，我们结合若干CSS属性显示为方框。

CSS 列表

---

CSS列表属性作用如下：

• 设置不同的列表项标记为有序列表
• 设置不同的列表项标记为无序列表
• 设置列表项标记为图像

---

列表

在HTML中，有两种类型的HTML列表：

• 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

---

不同的列表项标记

list-style-type属性指定列表项标记的类型是：

实例

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

尝试一下 »

一些值是无序列表，以及有些是有序列表。

下列是对list-style-type属性的常见属性值的描述：

• none：不使用项目符号
• disc：实心圆
• circle：空心圆
• square：实心方块
• decimal：阿拉伯数字 
• lower-alpha：小写英文字母 
• upper-alpha：大写英文字母 
• lower-roman：小写罗马数字 
• upper-roman：大写罗马数字

---

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

实例

ul
{
list-style-image: url('sqpurple.gif');
}

尝试一下 »

上面的例子在所有浏览器中显示并不相同，IE和Opera显示图像标记比火狐，Chrome和Safari更高一点点。

提示：利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。

如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

浏览器兼容性解决方案

同样在所有的浏览器，下面的例子会显示的图像标记：

实例

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
ul li {
  background-image: url(sqpurple.gif);
  background-repeat: no-repeat;
  background-position: 0px 5px; 
  padding-left: 14px; 
}

尝试一下 »

例子解释：

• ul:
  • 设置列表样式类型为没有列表项标记
  • 设置填充和边距0px（浏览器兼容性）
• ul中所有li:
  • 设置图像的URL，并设置它只显示一次（无重复）
  • 您需要的定位图像位置（左0px和上下5px）
  • 用padding-left属性把文本置于列表中

---

列表 -缩写属性

在单个属性中可以指定所有的列表属性。这就是所谓的缩写属性。

为列表使用缩写属性，列表样式属性设置如下：

实例

ul {
  list-style: square url("sqpurple.gif");
}

尝试一下 »

如果使用缩写属性值的顺序是：

• list-style-type
• list-style-position (有关说明，请参见下面的CSS属性表)
• list-style-image

如果上述值丢失一个，其余仍在指定的顺序，就没关系。

---

更多实例

所有不同的列表项标记
这个例子演示了所有不同的CSS列表项标记。

---

所有的CSS列表属性

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

 

CSS 表格

---

使用CSS可以大大提高HTML表格的外观。

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy
North/South	Simon Crowther	UK
Paris spécialités	Marie Bertrand	France
The Big Cheese	Liz Nixon	USA
Vaffeljernet	Palle Ibsen	Denmark

---

表格边框

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

实例

table, th, td 
{ 
border: 1px solid black; 
}

尝试一下 »

请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框，使用 border-collapse属性。

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

实例

table 
{ 
border-collapse:collapse; 
} 
table,th, td 
{ 
border: 1px solid black; 
}

尝试一下 »

 

---

表格宽度和高度

Width和height属性定义表格的宽度和高度。

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

实例

table 
{ 
width:100%; 
} 
th 
{ 
height:50px; 
}

尝试一下 »

 

---

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，像左，右，或中心：

实例

td 
{ 
text-align:right; 
}

尝试一下 »

垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

实例

td 
{ 
height:50px; 
vertical-align:bottom; 
}

尝试一下 »

 

---

表格填充

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：

实例

td 
{ 
padding:15px; 
}

尝试一下 »

 

---

表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色：

实例

table, td, th 
{ 
border:1px solid green; 
} 
th 
{ 
background-color:green; 
color:white; 
}

尝试一下 »

 

---

更多实例

制作一个个性表格 
这个例子演示了如何创建一个个性的表格。

设置表格标题的位置 
这个例子演示了如何定位表格标题。

指定表格的宽度和高度 

这个例子演示了如何指定表格的高度与宽度。