文章目录
- 一、CSS 选择器作用
- 二、CSS 选择器分类
- 三、标签选择器
- 1、简介
- 2、代码示例
- 四、类选择器
- 1、简介
- 2、类名规范
- 3、代码示例
- 4、div 与 span 标签
- ① span 标签
- ② div 标签
- 5、多类名选择器
一、CSS 选择器作用
CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置 style 样式 ;
h3 {
color: blue;
font-size:20px;
}
CSS 选择器 作用 : 在 HTML 文件 中 选择 符合特定规则的 标签 ;
二、CSS 选择器分类
CSS 选择器 主要分为 :
- 基础选择器
- 复合选择器
两种类型 ;
CSS 基础选择器 主要分为以下几类 :
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
三、标签选择器
1、简介
标签选择器 是 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签 , 都使用该 CSS 样式 ;
标签选择器 可以 将 HTML 中 某个类型的标签全部选择出来 , 并应用 CSS 样式 ;
标签选择器 优缺点 :
- 优点 : 可以 快速为 HTML 页面的 某个类型的标签统一样式风格 ;
- 缺点 : 不能进行差异化的样式风格设置 ;
标签选择器语法 :
HTML标签名 {
属性名称1:属性值1;
属性名称2:属性值2;
属性名称3:属性值3;
}
2、代码示例
代码示例 : 在下面的代码中 , HTML 如果引入了该 CSS 样式 , 则 所有的 h3 标签 中的 文字都设置成 蓝色 , 20 像素 大小 ;
h3 {
color: blue;
font-size:20px;
}
四、类选择器
1、简介
CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ;
CSS 类选择器 使用方式如下 :
- 首先 , 在标签中的 class 属性中设置类名 ;
<p class="name">标签内容</p>
- 然后 , 在 CSS 中使用 " .类名 " 作为 类选择器 , 选出设置指定类名的标签 ;
.name {
color: blue;
font-size:20px;
}
CSS 类选择器 优点 : 可以选择指定的若干标签 ;
2、类名规范
类名规范 :
- 多个单词组成的类名 , 推荐使用 - 隔开 ;
- 不要使用 纯数字 , 纯中文 作为类名 ;
3、代码示例
按照下图的颜色 , 将 Google 写出来 , 注意每个字母的颜色需要与图片中一致 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Google</title>
<base target="_blank"/>
<style>
.blue {
color: blue;
font-size: 80px;
}
.red {
color: red;
font-size: 80px;
}
.orange {
color: orange;
font-size: 80px;
}
.green {
color: green;
font-size: 80px;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
运行效果 :
4、div 与 span 标签
① span 标签
span 标签 如果 没有使用 br 换行 , 则 多个 span 标签会在同一行中 , 如上面的示例 ;
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
② div 标签
div 标签会自动换行 , 如果使用 div 标签展示上面的内容 , 效果如下 :
<div class="blue">G</div>
<div class="red">o</div>
<div class="orange">o</div>
<div class="blue">g</div>
<div class="green">l</div>
<div class="red">e</div>
5、多类名选择器
在上面的 HTML 代码的 CSS 样式中 , 每个 类选择器 下的样式中都设置了 font-size: 80px; 样式 , 该样式可以被抽取出来 , 作为一个新的类 ;
原代码 :
<style>
.blue {
color: blue;
font-size: 80px;
}
.red {
color: red;
font-size: 80px;
}
.orange {
color: orange;
font-size: 80px;
}
.green {
color: green;
font-size: 80px;
}
</style>
新代码 :
<style>
.fontsize80 {
font-size: 80px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
同时 , 在每个标签下 , 可以定义多个类 , 多个类名之间使用 空格隔开 ;
<span class="blue fontsize80">G</span>
完整代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Google</title>
<base target="_blank"/>
<style>
.fontsize80 {
font-size: 80px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<span class="blue fontsize80">G</span>
<span class="red fontsize80">o</span>
<span class="orange fontsize80">o</span>
<span class="blue fontsize80">g</span>
<span class="green fontsize80">l</span>
<span class="red fontsize80">e</span>
</body>
</html>
运行效果 :
