1、标签选择器
<head>
<style>
p {
color: blue;
}
</style>
<head>
<body>
<p>你来打我呀~</p>
</body>
作用:标签选择器可以把某一类标签全部选择出来,比如:所有的p标签。
优点:能快速为页面中同类型的标签统一设置样式。
缺点:不能设计差异化样式。
2、类选择器(口诀:样式点定义,结构类(class)调用)
<head>
<style>
.red {
color: yellow;
}
</style>
<head>
<body>
<p class = "red">你来打我呀~</p>
</body>
作用:如果想要差异化选择不同的标签,单独选一个或者多个标签,可以使用类标签。
注意:
1、类选择器使用"."来进行标识,后面紧跟类名(自定义)。
2、命名要有意义,尽量使用别人能看懂的类名。
3、不要使用纯数字、中文等命名,尽量使用英文字母来表示。
3、类选择器-多类名(多个类名中间必须用空格分开)
<head>
<style>
.yellow {
wight: 35px;
height: 25px;
}
.red {
color: red;
}
.blue {
color: blue;
}
</style>
<head>
<body>
<div class="yellow red">话不多说</div>
<div class="yellow blue">请叫我大帅哥</div>
</body>
作用:
1、把一些标签元素相同的样式(共同的部分)放到一个类里面。
2、这个些标签可以调用公共的类,然后再调用自己独有的类。
3、节省css代码,统一修改也非常方便。
4、ID选择器(口诀:样式“#”定义,结构id调用)
<head>
<style>
#red {
color: red;
}
#blue {
color: blue;
}
</style>
<head>
<body>
<div id="red">话不多说</div>
<div id="blue">请叫我大帅哥</div>
</body>
注意:
1、id选择器和类选择器最大的不同在于使用次数。
2、只能调用一次,别人切勿使用。
5、通配符选择器(样式“*”定义,表示选取页面中所有的标签)
<head>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<head>
<body>
<div>话不多说</div>
<div>请叫我大帅哥</div>
</body>
注意:
1、通配符选择器不需要调用,自动就给所有的元素使用样式。
2、特殊情况才使用,用来清除所有元素标签的内外边距。
优先级:ID选择器>类选择器>标签选择器