【CSS】CSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )
文章目录
- 一、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>
运行效果 :
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 【CSS】CSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )
本文地址： https://pptw.com/jishu/852.html