目录
CSS 链接
不同的链接可以有不同的样式。
链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
实例
a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
常见的链接样式
根据上述链接的颜色变化的例子，看它是在什么状态。
让我们通过一些其他常见的方式转到链接样式：
文本修饰
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;}
更多实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:Georgia, serif;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>将鼠标移至链接上改变样式.</p>
<p><b><a class="one" href="/css/" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/css/" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/css/" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/css/" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="/css/" target="_blank">这个链接改变文字修饰</a></b></p>
</body>
</html>
这个例子演示了如何为超链接添加其他样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/css/" target="_blank">这是一个链接</a>
</body>
</html>
这个例子演示了一个更高级的例子，我们结合若干CSS属性显示为方框。
CSS 列表
CSS 列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
列表
在 HTML中，有两种类型的列表：
- 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
- 有序列表 ol - 列表项的标记有数字或字母
使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。
无序列表如下所示:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
有序列表如下所示:
- Coffee
- Tea
- Coca Cola
- Coffee
- Tea
- Coca Cola
不同的列表项标记
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;}一些值是无序列表，以及有些是有序列表。
作为列表项标记的图像
要指定列表项标记的图像，使用列表样式图像属性：
实例
ul { list-style-image: url('sqpurple.gif'); }上面的例子在所有浏览器中显示并不相同，IE 和 Opera 显示图像标记比火狐，Chrome 和 Safari更高一点点。
如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下
浏览器兼容性解决方案
同样在所有的浏览器，下面的例子会显示的图像标记：
实例
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
如果上述值丢失一个，其余仍在指定的顺序，就没关系。
更多实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:disc;}
ul.c {list-style-type:square;}
ol.d {list-style-type:armenian;}
ol.e {list-style-type:cjk-ideographic;}
ol.f {list-style-type:decimal;}
ol.g {list-style-type:decimal-leading-zero;}
ol.h {list-style-type:georgian;}
ol.i {list-style-type:hebrew;}
ol.j {list-style-type:hiragana;}
ol.k {list-style-type:hiragana-iroha;}
ol.l {list-style-type:katakana;}
ol.m {list-style-type:katakana-iroha;}
ol.n {list-style-type:lower-alpha;}
ol.o {list-style-type:lower-greek;}
ol.p {list-style-type:lower-latin;}
ol.q {list-style-type:lower-roman;}
ol.r {list-style-type:upper-alpha;}
ol.s {list-style-type:upper-latin;}
ol.t {list-style-type:upper-roman;}
ol.u {list-style-type:none;}
ol.v {list-style-type:inherit;}
</style>
</head>
<body>
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Disc type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="c">
<li>Square type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="f">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="g">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="h">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="i">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="j">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="k">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="l">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="m">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="n">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="o">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="p">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="q">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="r">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="s">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="t">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="u">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="v">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
这个例子演示了所有不同的 CSS 列表项标记。
移除默认设置
list-style-type:none 属性可以用于移除小标记。默认情况下列表 <ul> 或 <ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:
实例
ul { list-style-type: none; margin: 0; padding: 0; }所有的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; }
更多实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
这个例子演示了如何创建一个个性的表格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
caption {caption-side:bottom;}
</style>
</head>
<body>
<table border="1">
<caption>Table 1.1 Customers</caption>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
</table>
<p><b>注意:</b>如果 !DOCTYPE 指定 IE 8 支持 caption-side 属性 .</p>
</body>
</html>
这个例子演示了如何定位表格标题。
CSS 盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
元素的宽度和高度
重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。
下面的例子中的元素的总宽度为 450px：
实例
div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; }让我们自己算算：
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px
试想一下，你只有 250 像素的空间。让我们设置总宽度为 250 像素的元素:
实例
div { width: 220px; padding: 10px; border: 5px solid gray; margin: 0; }最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
