链接样式
链接可以使用任何CSS属性(背景,字体,文本等)来设置样式。
还可以根据链接处于什么状态来设置不同的样式。
链接共有四个状态:
a:link:正常未访问的链接
a:visited:已访问过的链接
a:hover:用户将鼠标放在链接上时。
a:active:链接被点击时
在多个链接状态下设置样式时:
a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后
列表
CSS可以为列表设置不同的列表项标记,添加背景颜色
list-style-type
设置列表项标记的类型
有序列表
list-style-type常用值:
none:无标记
deicmal:标记是数字,默认值
upper-roman:标记是阿拉伯数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母
#无序列表
list-style-type常用值:
none:默认值
disc:实心圆,默认值
circle:空心圆
square:实心方块
list-style-opsition
设置列表项标志的位置,它一共有3个值
inside:列表项目标记环绕在文本以内,且环绕文本根据标记对齐。
outside:默认值,保持标记位于文本左侧,列表项目标记放置文本以外,且环绕文本不根据标记对齐。
inherit:从父元素继承
list-style-image
将图像设置为列表项标志
语法:
list-style-image:URL
后面吗可跟图像地址。也可以是none:默认值,无图像标记或inherit:雄父元素继承
list style
列表的样式属性可以连写。通常先写type——opsition——image的顺序连写
例:
list-style:square inside url("sqpurple.gif");
表格
使用CSS可以使HTML表格更美观
表格边框
使用border属性可以给border加上边框。
table, th, td
{
border: 1px solid black;
}
折叠边框
在上面例子中,因为th与td有独立的边框属性,就导致上面例子的表格是个双边框表格。要想创建一个单边框表格就要使用border-collapse属性。
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度与高度
如果将表格宽度用像素表示,那么将会显示一个固定宽度的表格。浏览器页面放大或缩小时,表格的大小不变。这时就不方便我们查看,所以为了方便查看,可以将width的值改为百分比。那么无论浏览器窗口是放大还是缩小,表格都会随之放大缩小。
width表示宽度,height表示高度
表格文字对齐
使用text-align属性。他有三个值是:left,right,center
另外背景填充使用padding,背景颜色用background-color