CSS : color and unit

时间:2024-01-19 13:25:32

Color:

 CSS中定义颜色使用十六进制(hex)表示法为红,绿,蓝的颜色值结合。可以是最低值是0(十六进制00)到最高值是

255(十六进制FF)。3个双位数字的十六进制值写法,以#符号开始部分颜色表示。甚至还可以用颜色名称来直接表示一些

常见的颜色(yellow,pink,blue...)。

  

  部分颜色表示示例:

       CSS : color and unit

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>

结果显示:

  CSS : color and unit


Unit:

  CSS有几个不同的单位用于表示长度,其中较为常见的便是px和fr:

Px:

  px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。

eg:

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>px</title>
<style>
h1 {font-size: 50px;}
h2 {font-size: 30px;}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
</body>
</html>

结果显示:

  CSS : color and unit

fr:

  fr 单位是一个自适应单位,fr单位被用于在一系列长度值中分配剩余空间,如果多个已指定了多个部分,则剩下的空间根据各自的数字按比例分配。

  (通常用在布局上)

eg:

 <div id="grid">
<div id="title">Site Logo</div>
<div id="score">Slogan</div>
<div id="stats">User Zone</div>
<div id="message">Message</div>
</div>
 #grid {
display: grid;
width: 100%;
grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
}
#title {
background-color: lime;
}
#score {
background-color: yellow;
}
#stats {
background-color: lime;
}
#message {
background-color: orange;
}
div {
height: 80px;
line-height: 80px;
text-align: center;
}

结果显示:

  CSS : color and unit