樣式與長度顏色
樣式與長度顏色
1、基本樣式
<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
<!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>
樣式與長度顏色