CSS基本样式讲解

1.背景纯色和背景图像

background-color

background-image

background-repeatbackground-positioinbackground-attachment

CSS3:background-sizebackground-originbackground-clip

2.文本

p{　　
　　width:300px;
text-shadow:100px20px1px#ff0000;
　　text-wrap:normal;
}

3.字体字体系列、大小、加粗、风格和变形

p{
font-size:20px;
font-family:fantasy;
}
@font-face{
font-family:myfont;
src:url();
}
div{
font-family:myfont;
}

4.链接

a:linka:visiteda:hovera:active

5.列表允许你放置、改变列表标志或者将图像作为列表项标志

list-stylelist-style-imagelist-style-positionlist-style-type

6.表格

#tb,tr,th,td{
border:1pxsolidblue;
text-align:center;
background:aqua;

}
#tb{
width:400px;
height:400px;
border-collapse:collapse;
}

#tb{
border-collapse:collapse;
width:500px;
}
#tbth,#tbtd{
border:1pxsolidred;
padding:5px;
}
#tbth{
text-align:left;
background-color:aqua;
color:white;
}
#tbtr.alttd{
color:black;
background-color:aquamarine;
}

<tableid="tb">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小王</td>
<td>20</td>
<td>男</td>
</tr>
<trclass="alt">
<td>小王</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>小王</td>
<td>20</td>
<td>男</td>
</tr>
<trclass="alt">
<td>小王</td>
<td>20</td>
<td>男</td>
</tr>
</table>

7.轮廓用来突出元素的作用

outlineoutline-coloroutline-styleoutline-width

p{
outline-width:5px;
outline-color:blue;
outline-style:double;
}