HTML+CSS基础——CSS颜色控制（RGB值、十六进制编码、颜色名称）

最新推荐文章于 2024-07-21 09:00:00 发布

张謹礧

最新推荐文章于 2024-07-21 09:00:00 发布

阅读量619

点赞数 12

分类专栏： HTML+CSS基础——标签文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_66547608/article/details/135297803

版权

HTML+CSS基础——标签专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<title>Color</title>
		<style type="text/css">
			body{
				backgroud-color:silver;
				color:white;
				padding:20px;
				font-family:Arial,Verdana,sans-serif;}
			h1{
				backgroud-color:#ffffff;
				backgroud-color:hsla(0,100%,100%,0.5);
				color:#64655A;
				padding:inherit;}
			p{
				padding:5px;
				margin:0px;}

			p.zero{
				background-color:rgb(238,62,128);}
			p.one{
				background-color:rgb(244,90,139);}
			p.two{
				background-color:rgb(243,106,152);}
			p.three{
				background-color:rgb(244,123,166);}
			p.four{
				background-color:rgb(235,140,178);}
			p.five{
				background-color:rgb(246,159,192);}
			p.six{
				background-color:rgb(245,176,204);}
			p.seven{
				background-color:rgb(0,187,136);}
			p.eight{
				background-color:rgb(140,202,242);}
			p.nine{
				background-color:rgb(114,193,240);}
			p.ten{
				background-color:rgb(84,182,237);}
			p.eleven{
				background-color:rgb(48,170,233);}
			p.twelve{
				background-color:rgb(0,160,230);}
			p.thirteen{
				background-color:rgb(0,149,226);}
			p.fourteen{
				background-color:rgb(0,136,221);}
		</style>
	</head>
	<body>
		<h1>PH Scale</h1>
		<p class="fourteen">14.0 VERY ALKALIEN</p>
		<p class="thirteen">13.0</p>
		<p class="twelve">12.0</p>
		<p class="eleven">11.0</p>
		<p class="ten">10.0</p>
		<p class="nine">9.0</p>
		<p class="eight">8.0</p>
		<p class="seven">7.0  NEUTRAL</p>
		<p class="six">6.0</p>
		<p class="five">5.0</p>
		<p class="four">4.0</p>
		<p class="three">3.0</p>
		<p class="two">2.0</p>
		<p class="one">1.0</p>
		<p class="zero">0.0  VERY ACID</p>
	</body>
</html>

这段代码是一个简单的 HTML 文件，它定义了一个具有不同颜色背景的 pH 度量表。pH 值是用于表示溶液酸碱性的指标，范围从 0 到 14。在这个代码中，p 标签的类名对应于不同 pH 值的背景颜色。例如，p 类名为 “zero” 的段落具有非常酸性的背景颜色（红色），而 p 类名为 “seven” 的段落具有中性的背景颜色（绿色）。

这段代码中的 CSS 样式定义了一些属性，用于修改 HTML 元素的外观。下面是对这段代码中的主要 CSS 样式的解析：

body: 修改整个页面的样式。在这里设置了背景颜色为银色，文本颜色为白色，内边距为20px，并指定了字体为Arial、Verdana和sans-serif。
h1: 修改标题元素的样式。在这里设置了背景颜色为白色，透明度为50%，文本颜色为#64655A（深灰色），并继承了整个页面的内边距。
p: 修改段落元素的样式。在这里设置了内边距为5px，外边距为0px。
.zero, .one, .two, …, .fourteen: 这些是自定义的类名，用于选择具有不同背景颜色的段落元素。每个类名对应了一个特定的颜色。例如，.zero 类名的段落具有红色背景，.seven 类名的段落具有绿色背景。

通过这些 CSS 样式，可以创建一个漂亮的 pH 度量表，使不同 pH 值的段落元素呈现出不同的背景颜色。

HTML 结构：

<!DOCTYPE html>
<html>
	<head>
		<title>Color</title>
		<style type="text/css">
			...
		</style>
	</head>
	<body>
		<h1>PH Scale</h1>
		<p class="fourteen">14.0 VERY ALKALIEN</p>
		<p class="thirteen">13.0</p>
		<p class="twelve">12.0</p>
		<p class="eleven">11.0</p>
		<p class="ten">10.0</p>
		<p class="nine">9.0</p>
		<p class="eight">8.0</p>
		<p class="seven">7.0  NEUTRAL</p>
		<p class="six">6.0</p>
		<p class="five">5.0</p>
		<p class="four">4.0</p>
		<p class="three">3.0</p>
		<p class="two">2.0</p>
		<p class="one">1.0</p>
		<p class="zero">0.0  VERY ACID</p>
	</body>
</html>

<html> 元素是整个 HTML 文档的根元素。
<head> 元素中包含了该页面的标题和样式定义。
<title> 元素定义了浏览器标题栏中显示的文本。
<style> 元素内部定义了 CSS 样式。
<body> 元素包含了页面的主体内容。
<h1> 元素用于显示标题内容。
<p> 元素用于显示段落内容，并通过 class 属性指定了具体的样式类名。

CSS 样式：

<style type="text/css">
	body{
		backgroud-color:silver;
		color:white;
		padding:20px;
		font-family:Arial,Verdana,sans-serif;
	}
	h1{
		backgroud-color:#ffffff;
		backgroud-color:hsla(0,100%,100%,0.5);
		color:#64655A;
		padding:inherit;
	}
	p{
		padding:5px;
		margin:0px;
	}
	...
</style>

body 样式定义了整个页面的背景颜色、文本颜色、内边距和字体。
h1 样式定义了标题的背景颜色、文本颜色和内边距。
p 样式定义了段落元素的内边距和外边距。

pH度量表：

<h1>PH Scale</h1>
<p class="fourteen">14.0 VERY ALKALIEN</p>
<p class="thirteen">13.0</p>
<p class="twelve">12.0</p>
<p class="eleven">11.0</p>
<p class="ten">10.0</p>
<p class="nine">9.0</p>
<p class="eight">8.0</p>
<p class="seven">7.0 NEUTRAL</p>
<p class="six">6.0</p>
<p class="five">5.0</p>
<p class="four">4.0</p>
<p class="three">3.0</p>
<p class="two">2.0</p>
<p class="one">1.0</p>
<p class="zero">0.0 VERY ACID</p>

这部分代码展示了一个 pH 度量表，每个段落元素都具有特定的类名，用于指定不同背景颜色的样式类。每个段落元素显示了相应的 pH 值和描述。

张謹礧

关注

12
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS基础——CSS颜色控制（RGB值、十六进制编码、颜色名称）

这段代码是一个简单的 HTML 文件，它定义了一个具有不同颜色背景的 pH 度量表。pH 值是用于表示溶液酸碱性的指标，范围从 0 到 14。在这个代码中，p 标签的类名对应于不同 pH 值的背景颜色。例如，p 类名为 “zero” 的段落具有非常酸性的背景颜色（红色），而 p 类名为 “seven” 的段落具有中性的背景颜色（绿色）。
复制链接

扫一扫