选择器
选择器的作用
选择器就是根据不同需求把不同的标签选出来,然后针对性性的进行样式设定
通过选择器,我们还可以实现各种复杂的指定,同时也能大量减少样式表的代码书写量,最终书写出来的样式表也会变得简洁明了。
即把某个标签选择出来
示例代码:
选择器分类
选择器分为基础选择器和复合选择器两大类。
基础选择器
基础选择器就是由单个选择器构成
基础选择器又可以分为 标签选择器、类选择器、id选择器和通配选择器
标签选择器
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
语法格式:
标签名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
p{
color: red;
}
div{
color: yellow;
}
</style>
</head>
<body>
<p>第一个标签</p>
<p>第二个标签</p>
<div>第三个标签</div>
<div>第四个标签</div>
</body>
</html>
< style >写在< head >标签里,直接引用标签名加大括号。 是对所用使用相同标签的内容进行样式设定。如图:
作用
标签选择器可以把某一类标签全部选择出来,比如所有的
标签。
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式,只能选择全部的当前标签。
类选择器
为了能够针对某个特定的标签进行设计,而不是全部同名标签进行设定,就可以用类选择器。类选择器可以差异化选择不同的标签,单独选一个或某几个标签。
语法格式:
.类名{
属性1:属性值1;
…
}
注意是 一个点**.**加类名
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
.red{
color:red;
}
</style>
</head>
<body>
<p class="red">第一个标签</p>
<p>第二个标签</p>
<div class="red">第三个标签</div>
<div>第四个标签</div>
</body>
</html>
输出结果:
就是在head内用样式点定义,在标签内用结构类class调用,可以一个或多个标签调用,这是开发时最常用的方法。
点后面的名字可以任意取,但是不能和标签名相同
注意事项:
①类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义).
②可以理解为给这个标签起了一个名字,
③长名称或词组可以使用中横线来为选择器命名。
④不要使用纯数字、中文等命名,尽量使用英文字母来表示
⑤命名要有意义,尽量使别人-眼就知道这个类名的目的。
类选择器 多类名
我们可以给一个标签指定多个类名 ,从而达到更多的选择目的。就是一个标签有多个名字. 每个类名必须用空格分开
格式:
<div class="red box">第一个是红色</div>
<div class="green box">第二个是绿色</div>
类名之间必须用空格隔开
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
.box{
width: 100px;
height: 100px;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="red box">第一个是红色</div>
<div class="green box">第二个是绿色</div>
<div class="red box">第三个是红色</div>
<div class="green box">第三个是绿色</div>
</body>
</html>
样式结果:
此时可以直接在box里面修改所有方格的长宽高属性。
(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2)这些标签都可以调用这个公共的类然后再调用自己独有的类.
(3)从而节省CSS代码,统-修改企非常方便.
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器, CS中id选择器以**"#"**来定义。
语法格式:
#id名{
属性1;属性值1;
…
}
调用直接在标签内调用。
注意是先用#id名定义样式,再在标签内调用
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
#pink{
color: pink;
}
</style>
</head>
<body>
<div id="pink">这是一个用id选择器设定的标签</div>
</body>
</html>
输出结果:
id选择器只能调用一次,其他标签不能调用已经被调用的id,而类选择器是可用被多次调用的。
通配选择器
通配选择器表示选取页面内的所有标签,包括body,head,等等;
不需要调用通配选择器,自动讲所有元素标签使用样式。
语法格式:
- *{
属性:属性值;
…
}
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>这是一个标签</div>
<div>这是二个标签</div>
<div>这是三个标签</div>
<div>这是四个标签</div>
</body>
</html>
输出结果: