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

发布时间：2023年12月29日
<!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 样式的解析：

  1. body: 修改整个页面的样式。在这里设置了背景颜色为银色，文本颜色为白色，内边距为20px，并指定了字体为Arial、Verdana和sans-serif。

  2. h1: 修改标题元素的样式。在这里设置了背景颜色为白色，透明度为50%，文本颜色为#64655A（深灰色），并继承了整个页面的内边距。

  3. p: 修改段落元素的样式。在这里设置了内边距为5px，外边距为0px。

  4. .zero,?.one,?.two, …,?.fourteen: 这些是自定义的类名，用于选择具有不同背景颜色的段落元素。每个类名对应了一个特定的颜色。例如，.zero?类名的段落具有红色背景，.seven?类名的段落具有绿色背景。

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

  1. 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?属性指定了具体的样式类名。
  1. 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?样式定义了段落元素的内边距和外边距。
  1. 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 值和描述。

文章来源:https://blog.csdn.net/weixin_66547608/article/details/135297803
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章