css的五种属性值----在路上（21）

在CSS中，每个属性的属性值都有一定的范围，并且不同类型的属性值有不同的值。对于一个属性，必须取得正确的属性值，才能被浏览器正确地解释，因此一定要弄清每种类型的属性值范围。在CSS中属性一般有以下几种类型：

整数和实数、长度值、百分比值、URL和颜色

一、整数和实数

在CSS中，整数可以包括正整数、负整数和零，不能有小数。如果整数或小数后面带有单位px，表示像素、px叫像素，这是目前来说使用最为广泛的一种单位，1像素也就是屏幕上的一个小方格，这个通常是看不出来的。由于显示器有多种不同的大小，它的每一个小方格大小是有所差异的，所以像素单位的标准也不都是一样的。

实数包括整数，而且可以有小数。CSS 3中，em用于给定字体的font-size值，例如，一个元素字体大小为12px，那么1em就是12px，如果该元素字体大小改为15px，则1em就是15px。简单来说，无论字体大小是多少，1em总是字体的大小值。em的值总是随着字体大小的变化而变化的。如：

Font-size：1.5em； /*设置字号为小数1.5em*/

}

二、长度值

长度值可以是正整数、负整数、零和小数的任一实数。下面代码定义了标签p宽度为100像素，外边距为0像素，边框为负数。

     p{

            width: 100px;

            margin: 0;

            border: -2px;

        }

注：很多属性可以使用负数的长度值，如果负数的长度值超出了CSS能容纳的限制，此长度值将被转变为可以支持的最接近的长度；如果某个属性不支持负数的长度，那么这个属性的声明将是无效的声明。

三、百分比值

百分比就是一个正整数加%，在CSS中百分比是一个相对值，依赖于参照的其他元素，例如：

    div{

            width: 50%;

            height: 50%;

        }

四、URL

在CSS中URL是一个字符串类型，它不分大小写，通常用来指定一个文件路径；通过URL指明背景图片文件所在的位置。

   div{

            background: url("img/img.jpg");

        }

五、颜色值

颜色在CSS中有多种表达方式，包括十六进制色、RGB颜色、RGBA颜色、HSL颜色，其中十六进制色最为常用。

CSS 3中可以直接用英文单词命名与之相应的颜色，这种方法优点是简单、直接、容易掌握。此处预设了16种颜色以及这16种颜色的衍生色，这16种颜色是CSS 3规范推荐的，而且一些主流的浏览器都能够识别它们。

当然，除了CSS预定义的颜色外，设计者为了使页面色彩更加丰富，还可以使用十六进制颜色和RGB颜色。十六进制颜色的基本格式为#RRGGBB。其中R表示红色，G表示绿色，B表示蓝色。而RR、GG、BB最大值为FF，表示十进制中的255，最小值为00，表示十进制中的0.例如，#FF0000表示红色，#00FF00表示绿色，#0000FF表示蓝色，#000000表示黑色，#FFFFFF表示白色，而其他颜色分别是通过红、绿、蓝三种基本色的结合而形成的。例如，#FFFF00表示黄色，#FF00FF表示紫红色。

如果要使用十进制表示颜色，则需要使用RGB颜色。十进制表示颜色，最大值为255，最小值为0.要使用RGB颜色，必须使用rgb（R，G，B），其中R、G、B分别表示红、绿、蓝的十进制，通过这三个值的变化结合，便可以形成不同的颜色。例如，rgb（255,0,0）表示红色，rgb（0,255,0）表示绿色，rgb（0,0,255）则表示蓝色。黑色表示为rbg（0,0,0），白色表示为rgb（255,255,255）。

CSS 3新增加了HSL颜色表现方式。HSL色彩模式是工业界的一种颜色标准，它通过对色调（H）、饱和度（S）、亮度（L）三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色。

RGBA也是CSS 3新增颜色模式，RGBA色彩模式是RGB色彩模式的扩展，在红、绿、蓝三原色的基础上增加了不透明度参数。

下面是使用十六进制色设定属性值的例子。

Background-color：#123456； /*设置背景颜色为十六进制颜色值*/

注：#112233可以简化写为#123；#ffffff可以简化为fff 但#121212就不可简化；

}

注：由于其他颜色表达方式不大常用，这里不再讲述。