CSS学习之链接,列表,表格,盒子模型,边框
CSS链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
链接顺序:
a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
a:active 必须在 a:hover之后。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
a:link {color:#000000;} /* 未访问链接,黑色*/
a:visited {color:#00FF00;} /* 已访问链接,绿色*/
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 洋红色*/
a:active {color:#0000FF;} /* 鼠标点击时 蓝色*/
</style>
</head>
<body>
<p><b><a href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p>
</body>
</html>
text-decoration 属性主要用于删除链接中的下划线,对文本进行修饰
<style>
/*text-decoration 属性主要用于删除链接中的下划线：*/
a:link {text-decoration:none;} /* 未访问链接*/
a:visited {text-decoration:none;} /* 已访问链接*/
a:hover {text-decoration:underline;} /* 鼠标移动到链接上*/
a:active {text-decoration:underline;} /* 鼠标点击时*/
</style>
</head>
<body>
<p><b><a href="http://www.baidu.com" target="_blank">百度主页</a></b></p>
</body>
加入背景颜色修饰:
<style>
a:link {background-color:#B2FF99;} /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;} /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;} /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="http://www.baidu.com" target="_blank">百度主页</a></b></p>
</body>
CSS链接框
<style>
a:link,a:visited
{
display:block; /*display 属性规定元素应该生成的框的类型,block代表此元素将显示为块级元素，此元素前后会带有换行符。*/
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;/*padding 简写属性在一个声明中设置所有内边距属性。此例表示四边边距都是4px*/
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">这是一个链接</a>
</body>
CSS列表
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
列表:默认列表和加入list-style-type属性列表进行对比
在HTML中，有两种类型的列表：
无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS列表</title>
<style>
ul.a {list-style-type:circle;}
ol.b {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>无序列表实例:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
list-style-image属性:
<style>
ul
{
list-style-image:url('sqpurple.gif');
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
列表简写属性:list-style
<style>
ul
{
list-style:square url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
CSS表格
表格边框(在html学习中都有详细的代码,只是加了style属性,后续将不再赘述)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css表格</title>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：不然向上述例子会产生双边框现象.
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
表格宽度和高度
Width和height属性定义表格的宽度和高度。
下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
<style>
table,td,th
{
border:1px solid black;
}
table
{
width:100%;
}
th
{
height:50px;
}
</style>
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心：
<style>
table,td,th
{
border:1px solid black;
}
td
{
text-align:right;
}
</style>
垂直对齐
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
<style>
table, td, th
{
border:1px solid black;
}
td
{
height:50px;
vertical-align:top;
}
</style>
表格填充
如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性：
实例为上下左右均距边框15px
<style>
table, td, th
{
border:1px solid black;
}
td
{
padding:15px;
}
</style>
表格颜色
下面的例子指定边框的颜色，和th元素的文本和背景颜色
<style>
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
</style>
表格标题位置
<style>
table,th,td
{
border:1px solid black;
}
caption {caption-side:top;}
</style>
</head>
<body>
<table>
<caption>Table 1.1 Customers</caption>
CSS"盒子模型"
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
计算公式
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
</body>
</html>
CSS边框
border-style属性用来定义边框的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS边框</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>
</html>
边框宽度
可以使用border-width属性为边框指定宽度.为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
注意:“border-width” 属性 如果单独使用则不起作用。要先使用 “border-style” 属性来设置边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS边框宽度</title>
<style>
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:0.1em;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
</body>
</html>
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
您还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
<style>
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>
<p class="one">实线红色边框</p>
<p class="two">实线绿色边框</p>
</body>
设置不同的边框
<style>
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>两个不同的边界样式。</p>
</body>
border-style属性的1-4个值:
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
简写属性,在一个属性中设置几种特征
<style>
p
{
border:5px solid red;
}
</style>
CSS边框属性汇总
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。