重点部分：
样式分为：内联样式、外部样式、内部样式三种
1、元素选择器：直接用标签的形式
2、ID 选择器：#+id
3、类选择器：class，用.+类
4、父子选择器：例（ul li）
5、通配选择器：ul*
6、子元素选择器：ul>li(锁定ul下的li标签)
7、相邻兄弟选择器：例（#item1+li[选中#item1下面的一个li标签]）
代码部分：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户头像设计</title>
<style>
#box1{
height: 50px;
border: dashed 1px;
clear: both;
}
span{
width: 50px;
height: 50px;
border-radius: 50%;
background: #000000;
text-align: center;
line-height: 50px;
color: #FFFFFF;
display: block;
margin: 0px;
float: left;
}
#c2{
width: 50px;
height: 50px;
border-radius: 50%;
background: blueviolet;
text-align: center;
line-height: 50px;
margin: 0px;
float: left;
}
div .c3{
width: 50px;
height: 50px;
border-radius: 50%;
background: #DC143C;
text-align: center;
line-height: 50px;
margin: 0px;
float: left;
}
div>.c4:before{
width: 50px;
height: 50px;
border-radius: 50%;
background: #A52A2A;
text-align: center;
line-height: 50px;
margin: 0px;
float: left;
content:'4';
}
div>.c4+.c5:before{
width: 50px;
height: 50px;
border-radius: 50%;
background: #FFA500;
text-align: center;
line-height: 50px;
margin: 0px;
float: left;
content:'5';}
span*:before{
width: 50px;
height: 50px;
border-radius: 50%;
background: #000000;
text-align: center;
line-height: 50px;
color: #FFFFFF;
display: block;
margin:0px;
float: left;
}
div[class="both7"]:before
{
width: 50px;
height: 50px;
border-radius: 50%;
background: darkcyan;
text-align: center;
line-height: 50px;
color: #FFFFFF;
float: left;
content: '7';
}
#box3{
float: left;
width: 200px;
height: 300px;
}
.p1,.p3{
color: red;
}
.p2{
color: #008B8B;
}
p:last-child{
color: red;
}
p{
}
div p:only-child{
color: #FFA500;
}
.div3 p:only-of-type{
color: #8A2BE2;
}
</style>
</head>
<body>
<div iD="box1">
<span>1</span><!--用元素选择器的方法-->
<div ID="c2">2</div><!--用类选择器的方法-->
<div class="c3">3</div><!--用父子选择器的办法-->
<div class="c4"></div><!--子选择器方式，此处使用了伪类选择器-->
<div class="c5"></div><!--用相邻兄弟选择器方法-->
<span id="box2">6</span><!--使用统配选择器方法-->
<div class="both7"></div><!--使用指定单词选择器方法-->
</div>
<div id="box3">
<p class="p1">这是第一行代码，变红</p>
<div><p>这是第二行代码，变绿</p></div>
<p class="p3">跟第一行一起变红</p>
<p class="p4">跟第二行代码一起变绿</p>
<div class="div3">
<p class="p5">变紫色</p>
<strong class="p7">跟第一行一样变红</strong>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
-
手抄部分：
