ch14 -- 单位和值

单位和值

颜色值

网页中的颜色设置有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种。

1. 英文命令颜色

   p{
       color:red;
   }
   

2. RGB 颜色

   <!--由 R(red) 、G(green) 、B(blue) 三种颜色的比例来配色-->
   <!--每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数-->
   p1{
       color:rgb(133,45,200);
   }
   p2{
       color:rgb(20%,33%,25%);
   }
   

3. 十六进制颜色

   <!--这种颜色设置方法的原理其实也是 RGB 设置，其每一项的值由 0-255 变成了十六进制 00-ff-->
   p{
       color:#00ffff;
   }
   

   配色表如下图：
   

长度值

长度单位比较常用到 px(像素) 、em 、% (百分比) ，这三种单位都是相对单位。

1. 像素
   像素指的是显示器上的小点（CSS 规范中假设“90像素=1英寸”）。实际情况下，浏览器会根据显示器的实际像素值调整显示效果。一般情况下选择使用像素（px）作为单位。
2. em
   em 表示本元素给定字体的 font-size 值。如果元素的 font-size 为 10px ，那么 1em = 14px。
   示例如下：

   <!--实现段落首行缩进 24px ，两个字的大小-->
   p{
       font-size:12px;
       text-indent:2em;
   }
   

   特殊情况：当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。

   <!--html-->
   <p>
       以这个<span>例子</span>为例。
   </p>
   

   <!--css-->
   <!--这里 1em = 14px ，结果 span 中的字体“例子”字体大小就为 0.8em = 0.8 * 14px = 11.2px-->
   p{
       font-size:14px;
   }
   span{
       font-size:0.8em;
   }
   

3. 百分比

   <!--设置行高（行间距）为字体的 130%-->
   p{
       font-size:12px;
       line-height:130%;
   }