5、CSS——三种样式和样式优先级、CSS中颜色设置方式、标签选择器和基本选择器的优先级

news2025/8/7 7:47:55

目录

一、行内样式

二、内部样式 

三、外部样式 

1、创建外部样式步骤

2、引入外部样式的两种方式

2.1  第一种

2.2  第二种

3、style标签内的注释符号 

四、样式优先级 

五、CSS中颜色设置方式

1、使用颜色的英文单词

2、使用十六进制表示法 

3、使用rgb()表示法 

4、使用rgba()表示法 

六、标签选择器

1、为什么需要标签选择器?

 2、标签选择器

3、class选择器：内选择器 

4、id选择器 

七、基本选择器的优先级 

一、行内样式

行内样式：在标签内使用style属性设置样式

        style属性值中可以设置多个不同的样式

                style的属性值称为声明：属性:属性值;

行内样式的弊端：

（1）样式与内容混合在一起，没有实现分离；

（2）很多相同标签的样式相同，样式代码会重复写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>行内样式</title>
	</head>
	<body>
		<h2 style="color: red;font-size: 100px; text-align: center;">登高</h2>
		<p style="color: green;text-align: center;">风急天高猿啸哀，渚清沙白鸟飞回。</p>
		<p style="color: green;text-align: center;">无边落木萧萧下，不尽长江滚滚来。</p>
		<p style="color: green;text-align: center;">万里悲秋常作客，百年多病独登台。</p>
		<p style="color: green;text-align: center;">艰难苦恨繁霜鬓，潦倒新停浊酒杯。</p>
	</body>
</html>

二、内部样式 

内部样式：在网页的head标签内写一个style标签，在style标签内编写样式，使用标签来确定样式设置的对象，然后再写样式代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内部样式</title>
		<style>
			/*h2、p等其他标签，表示你要给谁设置样式*/
			/*color：red;称之为声明，color称之为属性名，冒号（：）后面的称之为属性值*/
			h2{
				color: red;
				text-align: center;
				font-size: 100px;
			}
			
			p{
				color: green;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<h2>悯农</h2>
		<p>春种一粒粟</p>
		<p>秋收万颗子</p>
		<p>四海无闲田</p>
		<p>农民犹饿死</p>
	</body>
</html>

三、外部样式 

当多个网页需要用到相同的样式时；可通过设置外部样式进行引用

1、创建外部样式步骤

在项目中创建个CSS文件夹，在CSS文件夹中创建CSS文件；

不需要写style标签，直接写要设置的样式。 

2、引入外部样式的两种方式

2.1  第一种

在head标签内创建style标签，通过

@import url("文件地址");

引入

2.2  第二种

 在head标签内创建style标签，通过link标签获取

<link rel="stylesheet" type="text/css" href="文件地址"/>

h2{
	color: red;
	font-size: 100px;
	text-align: center;
}

p{
	color: green;
	text-align: center;
}
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部样式</title>
		<style>
			@import url("css/Mystyle.css");
		</style>
	</head>
	<body>
		<h2>宿洞霄宫</h2>
		<p>秋山不可尽，秋思亦无垠。</p>
		<p>碧涧流红叶，青林点白云。</p>
		<p>凉阴一鸟下，落日乱蝉分。</p>
		<p>此夜芭蕉雨，何人枕上闻。</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>外部样式</title>
		<link rel="stylesheet" type="text/css" href="css/Mystyle.css"/>
	</head>
	<body>
		<h2>宿洞霄宫</h2>
		<p>秋山不可尽，秋思亦无垠。</p>
		<p>碧涧流红叶，青林点白云。</p>
		<p>凉阴一鸟下，落日乱蝉分。</p>
		<p>此夜芭蕉雨，何人枕上闻。</p>
	</body>
</html>

3、style标签内的注释符号 

style标签内的注释：/*注释*/

四、样式优先级 

p{
	color: blue;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式优先级</title>
		<style>
			p{
				color: green;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<p style="color: red;">样式优先级</p>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式优先级</title>
		<style>
			p{
				color: green;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<p>样式优先级</p>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式优先级</title>
		
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
		
		<style>
			p{
				color: green;
			}
		</style>
	</head>
	<body>
		<p>样式优先级</p>
	</body>
</html>

 

 样式优先级：就近原则，哪种样式离得近，显示哪种样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>样式优先级</title>
		
		<style>
			p{
				color: green !important;
			}
		</style>
		
		<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
	</head>
	<body>
		<p style="color: red;">样式优先级</p>
	</body>
</html>

无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。

五、CSS中颜色设置方式

1、使用颜色的英文单词

表示颜色的种类比较少

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色设置方式一</title>
		
		<style>
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>设置颜色</p>
	</body>
</html>

2、使用十六进制表示法 

最常用的颜色表示法

在#后面写6个十六进制数字

十六进制数字有0 1 2 3 4 5 6 7 8 9 A B C D E F

六个十六进制数如果两两相同，可以简写成三个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色设置方式二</title>
		
		<style>
			p{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<p>颜色设置方式二：十六进制表示法</p>
	</body>
</html>

3、使用rgb()表示法 

rgb(数字1，数字2，数字3)，每一个数字的范围0-255

数字1：红色

数字2：绿色

数字3：蓝色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色设置方式三</title>
		<style>
			p{
				color: rgb(0,0,255);
			}
		</style>
	</head>
	<body>
		<p>颜色设置方式三:rgb()表示法</p>
	</body>
</html>

4、使用rgba()表示法 

rgb(数字1，数字2，数字3，数字4)，前面三个数字表示颜色，范围0-255；最后一个数字表示透明度，范围（0-1）之间的小数

数字1：红色

数字2：绿色

数字3：蓝色

数字4：透明度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>颜色设置方式三</title>
		
		<style>
			p{
				color: rgba(255,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<p>颜色设置方式四:rgba()表示法</p>
	</body>
</html>

六、标签选择器

1、为什么需要标签选择器?

因为要个某个标签中的内容设置样式；首先需要找到这个内容所在的标签。

 2、标签选择器

根据标签的名称来找，也就是所谓的标签选择器，使用标签选择器会将网页中所有相同点的标签设置相同的样式

3、class选择器：内选择器 

根据类选择器来找，在标签中可以通过class属性来选择样式 

类选择器使用（.）开头，其他的样式声明不变

类选择器可以被不同的标签重复使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			.h2color{
				color: red;
			}
			.pcolor{
				color: green;
			}
		</style>
	</head>
	<body>
		<h2 class="h2color">无题·重帏深下莫愁堂</h2>
		<p class="pcolor">重帏深下莫愁堂，卧后清宵细细长。</p>
		<p class="pcolor">神女生涯原是梦，小姑居处本无郎。</p>
		<p class="pcolor">风波不信菱枝弱，月露谁教桂叶香。</p>
		<p class="pcolor">直道相思了无益，未妨惆怅是清狂。</p>
	</body>
</html>

4、id选择器 

在标签中可以使用id属性来选择样式，id选择器使用（#）开头，其他的样式声明不变，

id选择器具有唯一性，只被一个标签使用，且只能使用一次，尤其是在js中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#red{
				color: red;
			}
			
			#green{
				color: green;
			}
			
			#yellow{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<h2 id="red">逍遥叹</h2>
		<p id="green">岁月难得沉默</p>
		<p id="yellow">秋风厌倦漂泊</p>
		<p>夕阳赖着不走</p>
		<p>挂在墙头舍不得我</p>
	</body>
</html>

七、基本选择器的优先级 

行内样式>id选择器>class选择器>标签选择器

当基本选择器共存时，会实现样式中的其他声明。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器的优先级</title>
		<style>
			p{
				color: red;
			}
			
			.green{
				color: green;
				background-color: aliceblue;
			}
			#blue{
				color: blue;
			}
			
		</style>
	</head>
	<body>
		<p class="green" id="blue">基本选择器的优先级</p>
	</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/15647.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Redis分区/分片详解

Redis分区/分片详解

分区/分片详解 分区是分割数据到多个Redis实例的处理过程&#xff0c;因此每个实例只保存key的一个子集。 如果只使用一个redis实例时&#xff0c;其中保存了服务器中全部的缓存数据&#xff0c;这样会有很大风险&#xff0c;如果单台redis服务宕机了将会影响到整个服务。解决的…
阅读更多...
easyExcel不同版本按照模板导出

easyExcel不同版本按照模板导出

Java解析、生成Excel比较有名的框架有Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存&#xff0c;poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题&#xff0c;但POI还是有一些缺陷&#xff0c;比如07版Excel解压缩以及解压后存储都是在内存中完成的…
阅读更多...
力扣(LeetCode)7. 整数反转(C++)

力扣(LeetCode)7. 整数反转(C++)

模拟 整数反转&#xff0c;需要一个中间变量 ansansans &#xff0c; 循环存入 xxx 的最低位 x%10x\%10x%10&#xff0c; 然后 xx/10x x/10xx/10 &#xff0c;得到 xxx 新的最低位 。如果进入新的循环&#xff0c;ans10ans\times 10ans10 &#xff0c;让上一次的 ansansans 十…
阅读更多...
Makefile 基础（一） —— 自定义变量、预定义变量、自动变量

Makefile 基础（一） —— 自定义变量、预定义变量、自动变量

目录 一、自定义变量 1、定义变量 2、使用变量 3、修改变量的值 二、预定义变量 三、自动变量 一、自定义变量 1、定义变量 变量定义有两种方式&#xff0c;一种会在使用的时候递归展开&#xff0c;一种是直接赋值。两种定义方式如下&#xff1a; 递归展开&#xff1a…
阅读更多...
Servlet的基本使用

Servlet的基本使用

目录 一、Servlet是什么 二、Servlet的基本使用 1、创建项目 2、引入依赖 3、创建目录 4、编写代码 5、打包程序 6、部署程序 7、验证程序 三、优化部署方式 1、安装Smart Tomcat 2、使用Smart Tomcat 四、使用Servlet时常见的错误 1、404 2、405 3、500 4、…
阅读更多...
Linux文件目录之查看篇【cat、more、less、head、tail、＞、＞＞】【简直不要太详细】

Linux文件目录之查看篇【cat、more、less、head、tail、＞、＞＞】【简直不要太详细】

目录cat 查看文件内容morelessecho&#xff1a;将输入内容到控制台>指令和>>指令&#xff1a; >输出重定向 &#xff0c;>>追加head:tailcat 查看文件内容 cat【选项】 【要查看的文件】 -n 显示行号 注意&#xff1a;cat只能浏览文件&#xff0c;并不能修…
阅读更多...
第二章--应用层

第二章--应用层

2.1应用层协议原理 研发网络应用程序的核心是写出能够运行在不同的端系统和同构网络彼此通信的程序&#xff0c;将应用软件限制在端系统&#xff0c;从而促进大量的网络应用程序的迅速研发和部署。 2.1.1网络应用程序体系结构 应用程序的体系不同于网络的体系结构&#xff0c…
阅读更多...
实验（二）：单片机数据区传送程序设计

实验（二）：单片机数据区传送程序设计

一、实验目的与任务 实验目的&#xff1a; 1. 掌握单片机C语言程序设计和调试方法&#xff1b; 2. 了解单片机RAM中的数据操作。 任务&#xff1a; 1.根据要求编写程序&#xff0c;并写出原理性注释&#xff1b; 2. 检查程序运行的结果&#xff0c;分析一下是否正确&#xff1…
阅读更多...
leetcode 42.接雨水，leetcode 503. 下一个更大元素Ⅱ

leetcode 42.接雨水，leetcode 503. 下一个更大元素Ⅱ

“即使到不了远方&#xff0c;心中也要有远方的模样。” 文章目录1.leetcode 503. 下一个更大元素Ⅱ1.1 详细思路及步骤1.2 java版代码示例2.leetcode 42.接雨水2.1 详细思路及步骤2.2 java版代码示例1.leetcode 503. 下一个更大元素Ⅱ 1.1 详细思路及步骤 这题基本上和昨天总结…
阅读更多...
GoWeb从无到有(读取配置文件、gin、gorm)

GoWeb从无到有(读取配置文件、gin、gorm)

GoWeb从无到有 – 读取配置文件、gin、gorm 创建go项目&#xff0c;结构如下 1. golang读取配置文件 引入包 go get -u gopkg.in/ini.v1在main.go的同级目录创建config文件夹&#xff0c;在文件夹中创建配置文件 config.ini # 项目配置 [app] Port8010 # mysql配置 [mysql] …
阅读更多...
C++初阶 Stack和Queue的介绍和使用

C++初阶 Stack和Queue的介绍和使用

作者&#xff1a;小萌新 专栏&#xff1a;C初阶 作者简介&#xff1a;大二学生 希望能和大家一起进步 本篇博客介绍&#xff1a;本篇博客会简单的介绍STL中的栈和队列 本章目标 复习下栈这种数据结构特点知道怎么使用STL中的栈复习下队列这种数据结构的特点知道怎么使用STL中…
阅读更多...
多功能螯合剂FAPI-04-NH2,FAPI04-氨基,含有DOTA配体显示出良好的药代动力学

多功能螯合剂FAPI-04-NH2,FAPI04-氨基,含有DOTA配体显示出良好的药代动力学

NH2-FAPI-04产品描述&#xff1a; FAPI是FAP的特异性抑制剂。在这些FAPI中&#xff0c;含有DOTA配体(FAPI-04)的[68Ga]Ga-DOTA-FAPI-04 PET/CT能显示出良好的体内药代动力学&#xff0c;导致快速kidney​清除和注射后10分钟至3小时的低背景活性。不久之后&#xff0c;[68Ga]Ga-…
阅读更多...
Mybatis+Mybatis-plus+SpringBoot整合(完整版)

Mybatis+Mybatis-plus+SpringBoot整合(完整版)

文章目录一、Mybatis&#xff08;一&#xff09;Mybatis简介1、Mybatis历史2、Mybatis特性3、Mybatis下载4、和其它持久化层技术对比&#xff08;二&#xff09;搭建Mybatis1、MySQL不同版本的注意事项2、创建Maven工程1、引入依赖3、创建MyBatis的核心配置文件3.1、核心配置文…
阅读更多...
SpringMVC学习笔记

SpringMVC学习笔记

目录 SpringMVC 为什么出现了SpringMVC? 什么是SpringMVC? 简单使用 SpringMVC工作流程 设置bean加载控制 在服务器启动时加载SpringConfig 后台接受五种类型参数传递 REST风格 描述 RESTful入门 新建以下目录 实体类 控制器 统一异常处理 新建Code类用于记…
阅读更多...
c#反序列化json

c#反序列化json

语句&#xff1a;JsonConvert.DeserializeObject(json); json字符串&#xff1a; [ { "id": "130000", "cityList": [ { "cityList": [ { …
阅读更多...
Linux root用户忘记密码的恢复方法

Linux root用户忘记密码的恢复方法

日常运维工作中可能会遇到服务器忘记root密码的问题&#xff0c;本次以红帽8为例&#xff0c;讲解在忘记root密码后如何绕过密码登录然后重新设置密码的办法 目录 准备工作 问题复现 启动并进入引导 进入修复模式 修改用户密码文件 重置密码 准备工作 下载与系统匹配的…
阅读更多...
Python编程 元组的创建

Python编程 元组的创建

作者简介&#xff1a;一名在校计算机学生、每天分享Python的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.元组知识点 二.元组(tuple) 1.元组介绍(掌握) 2.元组创建(掌握) 3.…
阅读更多...
第十四届蓝桥杯校模拟赛-编程大题详解+代码（二）

第十四届蓝桥杯校模拟赛-编程大题详解+代码（二）

前言&#xff1a;这几天有不少小伙伴催促我尽快更新后五道编程题题解&#xff0c;然鄙人实在水平有限&#xff0c;实事求是&#xff0c;能力不足&#xff0c;不堪众望。思索良久&#xff0c;第九题有解题思路且已完成部分解题&#xff0c;但未完全完成&#xff0c;第十题尚未有…
阅读更多...
python 数据挖掘与机器学习核心技术

python 数据挖掘与机器学习核心技术

近年来&#xff0c;Python编程语言受到越来越多科研人员的喜爱&#xff0c;在多个编程语言排行榜中持续夺冠。同时&#xff0c;伴随着深度学习的快速发展&#xff0c;人工智能技术在各个领域中的应用越来越广泛。机器学习是人工智能的基础&#xff0c;因此&#xff0c;掌握常用…
阅读更多...
《FFmpeg Basics》中文版-11-格式之间转换

《FFmpeg Basics》中文版-11-格式之间转换

正文 ffmpeg工具的最常见用法是从一种音频或视频格式转换为另一种相关的格式。 格式参数在输出文件之前由-f选项设置&#xff0c;或者在输入文件之前也有原始输入&#xff0c;具体的可用格式信息在[显示帮助和功能]一章中列出来了。 多媒体格式介绍 文件格式 媒体格式是能够…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023