<!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 值和描述。