【CSS】CSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )

韩曙亮

发布于 2023-03-30 19:14:22

2.8K0

发布于 2023-03-30 19:14:22

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、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>

运行效果 :