样式与长度颜色
一 概念
# 样式与长度颜色
#### 1、基本样式
```html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
```
#### 2、长度
* px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
* mm：毫米
* cm：厘米
* in：英寸
* pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
* em：相当长度，通常1em=16px，应用于流式布局
#### 3、颜色
* rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
* rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
* hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
* hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
* #AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc
###### v_test：熟悉所有的长度单位与颜色表示方式
二 代码示范
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>长度及颜色单位</title>
<style type="text/css">
body {
background-color: yellowgreen;
}
div {
/*长度单位*/
/*px in pt mm cm em rem vw vh*/
width: 100px;
/*width: 720pt; 10in*/
/*width: 100mm; 10cm*/
/*width: 10em; 通常160px 10rem*/
/*width: 50vw; 50% view width*/
height: 100px;
/*颜色单位*/
/*单词 rgb() rgba() #六个十六进制位 hsl()*/
/*background-color: cyan;*/
/*background-color: rgb(255, 0, 0);*/
/*background-color: rgba(255, 0, 0, 0);*/
/*满足AABBCC形式可以简写为abc*/
background-color: #a0c
}
</style>
</head>
<body>
<div></div>
</body>
</html>
