<html>
<head>
<title>Color</title>
<style type ="text/css">
body{
background-colro:silver;
colir:white;
padding:20px;
font-family:Arial, Verdana, sans-serif;}
h1{
background-color: #ffffff;
background-color: hsla(0, 100%saturation, 100%lightness, 0.5alpha);
color:#64645A;
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(245,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(140,202,242);
}
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 ALKALINE</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</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 ACIO</p>
</body>
</html>
效果如上图所示,html+css3 PH值范围,通过这个页面来演示使用CSS指定颜色各种方式
并且源码中利用了一个margin属性减小段落之间的间隙们还用了padding属性设置盒子边缘与文本之间的间距。