学习记录 --【零基础CSS学习】15.单位的介绍及应用-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>em单位</title>
	<style type="text/css">
		div{
			font-size: 15px;
		}

		h4{
			background: red;
			width: 300px;
			height: 30px;
		}
		p{
			background: green;
			font-size: 20px;
			width: 20em;
		}
	</style>
</head>
<body>
	<div>
		<h4>我爱学习</h4>
		<p>好好学习天天向上</p>
	</div>
</body>
</html>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rem单位</title>
	<style type="text/css">
		html{
			font-size: 15px;
		}
		div{
			font-size: 30px;
		}

		h4{
			background: red;
			width: 300px;
			height: 30px;
		}
		p{
			font-size: 2rem;
			background: green;
			width: 20rem;
		}
	</style>
</head>
<body>
	<div>
		我要学习去
		<h4>我要打游戏</h4>
		<p>不你要学习</p>
	</div>
</body>
</html>

二、百分比单位

1.百分比单位是以父元素作为参考，是父元素的百分比

2.当父元素改变时，使用%作为单位的子元素也会跟着改变

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百分比单位</title>
	<style type="text/css">
		div{
			background: green;width: 600px;height: 300px;font-size: 20px;
		}
		h4{
			background: red;width: 50%;height: 50%;font-size: 200%;
		}
	</style>
</head>
<body>
	<div>
		<span style="font-size: 40px;">学而时习之</span>
		<h4>不亦乐乎</h4>
	</div>
</body>
</html>

三、颜色表示方法

1. 颜色名称

（1）html和css规范中定义了147种可用的颜色名

（2）颜色名称用的少

2. 16进制颜色值

（1）#rrggbb，rr（红色），gg（绿色），bb（蓝色）

（2）16进制整数规定颜色成分，所有的值必须介于00与ff之间

3. rgb颜色值

（1）通过定义三种（红，黄，蓝）颜色的强度来定义颜色

（2）所有值必须介于0~255之间

（3）rgb(红,绿,蓝)

4. rgba颜色值

（1）在rgb颜色值基础上增加了透明度

（2）a:alpha，表示透明度，取值介于0~1之间

（3）rgba(红,绿,蓝，透明度)

例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>颜色名和16进制颜色值</title>
	<style type="text/css">
		div{
			/*color: red;*/
			/*color: #ff0000;*/ /*红色*/
			/*color: #00ff00;*/ /*绿色*/
			/*color: #0000ff;*/ /*蓝色*/
            /*color: rgb(255,0,0);*/
			color: rgba(255,0,0,0.5);
		}
	</style>
</head>
<body>
	<div>我想打游戏</div>
</body>
</html>