css里面颜色表示方法，颜色与度量单位
css里面颜色表示方法，颜色与度量单位<!DOCTYPE html> <html> <head> <title>css颜色与度量单位</title> <style> p{ color: red; } </style> </head> <body> <p>第一段落</p> </body> </html>我们给p标签设置红颜色，这里有三种写法:新建一个文件index3.html2.十六进制代码3.十进制代码下面分别举例说明：
在css样式中，我们经常会给文字设置颜色。给div设置背景颜色。今天就来具体讲一讲css的颜色。
一、颜色设置
css中颜色的表示形式主要有三种方式：
1.颜色名称
2.十六进制代码
3.十进制代码
下面分别举例说明：
新建一个文件index3.html
<!DOCTYPE html>
<html>
<head>
<title>css颜色与度量单位</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>第一段落</p>
</body>
</html>
我们给p标签设置红颜色，这里有三种写法:
第一种就是颜色名称，直接写red。
p{
color: red;
}
第二种十六进制
p{
color:#ff0000;
}
第三种十进制
p{
color: rgb(255 0 0);
}
这三种方式都是等效的，效果一样。
关键问题是我们怎么知道这些颜色的取值是多少呢？比如十六进制的#ff0000代表红色，我怎么才能知道这个就是代表红色呢？
https://www.sojson.com/web/panel.html这网址可以解决这个问题。我们可以在这个网页中用鼠标来选取自己想要的颜色。具体看图
#开头的是十六进制，rgb是十进制。我们经常使用的是十六进制表示法。
二、度量单位
有些时候我们还需要设置字体的大小，div的宽度高度等等，那么就需要度量单位。
在css中长度单位分为绝对长度和相对长度。绝对长度指的是现实世界的度量单位，css支持五种绝对长度单位。
绝对长度单位
|
单位标识符 |
说明 |
|
in |
英寸 |
|
cm |
厘米 |
|
mm |
毫米 |
|
pt |
磅 |
|
pc |
pica |
相对长度指的是依托其他类型的单位，也是五种。
相对长度单位
|
单位标识符 |
说明 |
|
em |
与元素字号挂钩 |
|
ex |
与元素的字体的“x高度”挂钩 |
|
rem |
与根元素的字号挂钩 |
|
px |
像素，与分辨率挂钩 |
|
% |
相对另一值的百分比 |
如何正确理解绝对长度和相对长度呢，这里举个例子，让你能更加直观的理解什么绝对长度和相对长度。
例：小明身高170cm，小蔡比小明高5cm。
这个例子中，明确表示身高为170cm这个就是绝对长度单位，而小蔡的身高是相对小明来说的，小蔡比小明高5cm，那么也就是170cm 5cm=175cm。如果不告诉你小明的身高，那小蔡的身高也就无法计算得出。
下面进行代码演示：
<!DOCTYPE html>
<html>
<head>
<title>css颜色与度量单位</title>
<style>
p{
background: silver;
font-size: 15px;
height: 2em;
}
</style>
</head>
<body>
<p>第一段落</p>
</body>
</html>
我们设置p标签的背景颜色为银灰色，字体大小为15px，高度为2em。这里的2em就是相对单位。与字号大小挂钩，会根据字体大小改变自己的大小，灵活性很高。
px是相对单位，但是拥有绝对特性。因为它和分辨率挂钩，分辨率和我们的电脑有关系。如下图：
上图中是我电脑的分辨率，它最大就是1920*1080，没办法再大了，因为这个原因，导致px虽然是相对单位，但是拥有绝对特性。导致它其实就变成了一个绝对单位，自然灵活性没有em高，但是使用难度比较低，所以我们习惯使用它。
%百分比，这个长度单位比较好理解，就是挂钩它所在的区块的宽度。而font-size则是继承到的原始大小的百分比。
<!DOCTYPE html>
<html>
<head>
<title>css颜色与度量单位</title>
<style>
p{
background: silver;
font-size: 200%;
height: 2em;
}
</style>
</head>
<body>
<p>第一段落</p>
</body>
</html>
页面效果：
好了今天的内容到这里就结束了，希望想要学习编程的同学们一定要勤加练习，毕竟只有动手实践才能更快地学会编程。光看是学不会的。
