CSS : color and unit
Color:
CSS中定义颜色使用十六进制(hex)表示法为红,绿,蓝的颜色值结合。可以是最低值是0(十六进制00)到最高值是
255(十六进制FF)。3个双位数字的十六进制值写法,以#符号开始部分颜色表示。甚至还可以用颜色名称来直接表示一些
常见的颜色(yellow,pink,blue...)。
部分颜色表示示例:
eg:
<html> <head> <meta charset="utf-8"> <title>color</title> </head> <body> <p style="background-color:#FFFF00"> 16进制表示 </p> <p style="background-color:rgb(255,255,0)"> RGB表示 </p> <p style="background-color:yellow"> 颜色名称表示 </p>
结果显示:
Unit:
CSS有几个不同的单位用于表示长度,其中较为常见的便是px和fr:
Px:
px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。
eg:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>px</title> 6 <style> 7 h1 {font-size: 50px;} 8 h2 {font-size: 30px;} 9 </style> 10 </head> 11 <body> 12 <h1>标题1</h1> 13 <h2>标题2</h2> 14 </body> 15 </html>
结果显示:
fr:
fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。
(通常用在布局上)
eg:
1 <div id="grid"> 2 <div id="title">Site Logo</div> 3 <div id="score">Slogan</div> 4 <div id="stats">User Zone</div> 5 <div id="message">Message</div> 6 </div>
1 #grid { 2 display: grid; 3 width: 100%; 4 grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr); 5 } 6 #title { 7 background-color: lime; 8 } 9 #score { 10 background-color: yellow; 11 } 12 #stats { 13 background-color: lime; 14 } 15 #message { 16 background-color: orange; 17 } 18 div { 19 height: 80px; 20 line-height: 80px; 21 text-align: center; 22 }
结果显示: