CSS样式（链接、列表、表格、轮廓）学习笔记

仅仅是自己对着W3CSchool整理的一些 CSS 基础知识点，敲一遍加深下印象也方便以后复习。

CSS链接

设置链接的样式

链接样式可用属性：color.font-family,background等

链接可以根据其状态来设置样式

链接的状态

a:link-普通的、未被访问的链接

a:visited-用户已访问的链接

a:hover-鼠标指针位于链接的上方

a:active-链接被点击的时刻

例如：

a:link{color: #FF0000;}

a:visited{color:#00FF00;}

a:hover{color:#FF00FF;}

a:active{color:#0000FF;}

设置不同状态样式的次序

a:hover必须位于a:link之后和a:visited之后

a:actived必须位于a:hover之后

常见的链接样式

文本修饰（使用text-decoration属性控制下划线）

例如：alink{text-decoration:none}

背景色

例如：a:link{background: #B2FF99;}

CSS列表

CSS列表属性允许放置、改变、列表项标志，或者使用图像作为列表项标志
从某种意义上来讲，不是描述性的文本的任何内容都可以认为是列表

列表类型

无序列表：通常标志为圆点

有序列表：通常标志为数字、字母

使用属性list-style-type改变列表的标志

例如:ul{list-type-type:square;}

列表项的图像

对各标志使用图像，利用list-style-image属性

例如：ul li{list-style-image:url(a.jpg)

列表标志位置

CSS2.1可以确定标志出现在列表项内容之外还是内容内部

利用list-style-position完成

简写列表样式

例如：li{list-style: url(a.jpg) square inside}

CSS表格

表格边框

使用border属性设置

例如:table,th,td{border:1px solid blue;}

该例中表格具有双线条边框，由于table,th,td元素都有独立的边框

折叠边框

使用border-collapse属性设置，将表格边框折叠为单一边框

例如：table{border-collapse:collapse;}

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

表格宽度和高度

使用width和height属性

例如:table{width:100%;}

Th{height:50px'}

表格文本对齐

使用Text-align设置水平对齐

例如:td{text-align:right;}

使用vertical-align设置垂直对齐

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

表格内边距

使用padding属性设置

例如：td{padding:15px;}

表格颜色

边框颜色

例如：table,td,th{border:1px solid green;}

格子颜色

例如：th{background-color:green;color:white;}

CSS轮廓

只有在规定了！DOCTYPE时，IE8以上版本才支持该属性

在元素周围画线

例如：p{outline:#00ff00 dotted thick;}

设置轮廓颜色

例如：p{outline-color:#00ff00;}

设置轮廓样式

例如：p{outlint-style:dotted;}

样式包括dotted,dashed,solid,double,groove,ridge,inset,outset

设置轮廓宽度

例如:p{outlint-width:thin;}