目录
标签选择器
id选择器
类选择器
CSS的编写地点:
标签选择器
说明:标签选择器实际上就是HTML标签元素(可以是任何HTML元素),用来改变一个指定标签的样式
示例:
<style type="text/css">
p{
color: aqua;
background-color: pink;
}
span{
font-size: 50px;
text-decoration: underline;
}
div
{
font-style: initial;
font-weight: bold;
text-align: center;
}
</style>
id选择器
说明:当我们想要一些特定的HTML元素有一些效果时,我们就可以使用id选择器来进行
使用id选择器:
把id放在标签当中,并自己给它取个名字
<p id="p1" >
段落1
</p>
<p id="p2">
段落2
</p>
<p id="p3">
段落3
</p>
对相应HTML元素进行效果:
用#对应相应的id名
#p1{
color: green;
font-size: 50px;
}
#p2{
color: green;
text-decoration: underline;
}
#p3{
text-decoration: underline;
font-size: 50px;
}
缺点:如果想要其中两段效果相同,需要重复操作,也就是说,一个id选择器只能定义一个标签,可复用性差
效果:
类选择器
说明:最常用的选择器,可复用性很高,一个类选择器可以用在很多HTML标签上,使得这些标签得到一样的效果。
使用类:class
与id命名相似,自定义一个类名
<p class="c1" >
段落1
</p>
<p class="c2">
段落2
</p>
<p class="c1">
段落3
</p>
对对应的标签进行效果
.c1{
color:red ;
}
.c2{
text-decoration: underline;
}
效果:
CSS的编写地点:
①可以在html文件中用style标签
<style type="text/css">
在这里写你想要的效果
</style>
②可以在CSS文件夹中进行编写(推荐)
就是这个:
今天的分享到这里就结束啦~希望能帮到您!!