W3school学习日记7

CSS链接

CSS链接可以根据链接的状态来设置不同的样式。color, font-family, background，text-align，padding等都可以作为属性。

1
2
3
4
5
6
7
a:link {color:#FF0000;
text-decoration :none；
font-weight：bold;
font-size:14px;}/* 未被访问的链接;除去链接的下划线；字体粗细和大小*/
a:visited {color:#00FF00;background-color:#B2FF99;}/* 已被访问的链接；链接背景色设置 */
a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}/* 正在被点击的链接 */

CSS列表

CSS列表可以放置、改变列表项标志，或者将图像作为列表项标志。

1
2
3
4
5
6
ul {list-style-type : square}/*列表项标志类型：disc，circle，square，none（无序列表）；*/
ol {list-style-type: decimal}/*decimal,lower-roman,upper-roman,lower-alpha,upper-alpha(有序列表)*/
ul {list-style-image: url('/i/eg_arrow.gif')}/*列表图像*/
ul {list-style-position: inside}/*列表标志位置：inside，outside*/
/*我们也可以用一个属性来声明以上设置属性*/
li {list-style : url(example.gif) square inside}

CSS表格

CSS表格可以设置表格标题，表格边框，表格边距，表格文本等属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
caption{caption-side: bottom;}/*表格标题位置*/
table{
  border-collapse: collapse; /*双线条边框折叠为单一边框*/
  border-spacing:10px 50px;/*单元格之间的距离（水平，垂直）*/
  empty-cells: hide;/*不显示空单元格*/
  }
table,th, td{border: 1px solid black;}/*设置表格边框*/
table{width: 100%; height: 300px;}/*表格高度宽度设置*/
td{
  text-align: right;
  vertical-align: bottom;
  }/*表格文本对齐方式*/
th{
  background-color: green; 
  color: white;
  padding: 15px;
  }/*表头背景颜色，文本颜色，内边距*/

CSS轮廓

CSS轮廓可以规定轮廓的样式、颜色、宽度等。

1
2
3
4
5
6
7
p{
  border: red solid thin;/*轮廓边框*/
  outline-color: #00ff00;/*轮廓颜色*/
  outline-style: solid;/*轮廓样式*/
  outline-width: thin;/*轮廓宽度*/
  outline:#00ff00 dotted thick;/*设置所有轮廓属性*/
  }