仅仅是自己对着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;}
- 文本修饰(使用text-decoration属性控制下划线)
- 设置链接的样式
- 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;}
- 使用Text-align设置水平对齐
- 表格内边距
- 使用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;}
- CSS链接