day4-css样式：列表、表格、背景、超链接

一、列表

可以与day1的博客的dl（自定义列表defined list）一起理解
列表分为有序列表ol和无序列表ul
下面是两个列表的共同属性：list-style-type的取值：

html文件：

	<!-- 无序列表和有序列表 -->
<ul>
	<li>coffe</li>
    <li>tea</li>
    <li>juice</li>

</ul>

<ol>
	<li>篮球</li>
	<li>足球</li>
	<li>兵乓球</li>
</ol>

css文件：

ul{
	list-style-type: circle;
	list-style-position: inside;
}

ol{
	list-style-type: lower-latin;
	list-style-position: outside;
}

可以看到属性list-style-position的取值有inside、outside两种，其中outside是默认值
inside表示列表项目标记放在文本内容中，而outside表示列表项目标记放在文本内容外，如下：
显示的方框内的内容属于文本

二、表格在这里插入图片描述

html文件：

<!-- 表格 -->

<table>
	<tr>
		<th>饮料</th>
		<th>运动</th>
		<th>颜色</th>
	</tr>
	<tr>
		<td>coffe</td>
		<td>篮球</td>
		<td>red</td>
	</tr>
	<tr>
		<td>tea</td>
		<td>足球</td>
		<td>green</td>
	</tr>
	<tr>
		<td>juice</td>
		<td>兵乓球</td>
		<td>blue</td>
	</tr>
	<tr>
		<td>juice</td>
		<td>兵乓球</td>
		<td>blue</td>
	</tr>
	<tr>
		<td>juice</td>
		<td>兵乓球</td>
		<td>blue</td>
	</tr>
	<tr>
		<td>juice</td>
		<td>兵乓球</td>
		<td>blue</td>
	</tr>


</table>

css文件：

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

tr:nth-child(odd){/*选择odd表示奇数列，选择even表示偶数列*/
	background-color: #EAF2D3;
}
th{
	color: white;
	background-color: green;
}

三、背景

提示：背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。
html文件：

<!-- 背景 -->
<div class="bg"></div>

css文件：

.bg{
	height: 100px;
	width: 100px;
	background-color: #000;
	background-repeat: repeat-y;

}

background-repeat表示背景重复方式属性

repeat-x：表示当背景图片不够大时在水平方向进行重复填充
repeat-y：表示当背景图片不够大时在垂直方向进行重复填充
repeat：表示当背景图片不够大时同时在水平方向和垂直方向进行重复填充（默认值）
no-repeat：表示不进行重复填充，背景图片只显示一次
inherit：表示继承父元素的背景重复方式属性的取值

四、超链接

超链接的属性link、visited、hover、active做定义时顺序有要求，根据Love&Hate进行记忆顺序为：link、visited、hover、active

html文件：

<!-- 超链接 -->
<a href="#" class="first">1234567890</a><br/>

css文件：

/*未访问时*/
a:link{
	text-decoration: none;
	color: #09f;
}


/*已访问*/
a:visited{
	text-decoration: none;
	color: #930;
}

/*鼠标移到超链接上*/
a:hover{
	text-decoration: underline;
	color: #03c;
}

/*激活链接*/
a:active{
	text-decoration: none;
	color: #03c;
}