codecamp

CSS的5种属性值

在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值。对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围。在CSS中属性一般有以下几种类型:整数和实数、长度值、百分比值、URL和颜色5种。


一、整数和实数

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


CSS整数和实数


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


P{

  Font-size:1.5em;             /*设置字号为小数1.5em*/

}


二、长度值

长度值可以是正整数、负整数、零和小数的任一实数。下面代码定义了DIV层宽度为500像素,外边距为0像素,边框为负数。


CSS长度值


注意:当长度为0时可以不带单位。


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


三、百分比值

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


CSS百分比值


这个例子中的div就是相对于body整个页面框架的,意味着宽度和高度是整个页面的50%。


四、URL

在CSS中URL是一个字符串类型,它不分大小写,通常用来指定一个文件路径。其中“/phpMyAdmin/themes/”表示图片所在路径,“dot.gif”表示文件名称。例如:


CSS URL


通过URL指明背景图片文件所在的位置。


五、颜色值

颜色在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色彩模式的扩展,在红、绿、蓝三原色的基础上增加了不透明度参数。


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


P{

Background-color:#0000FF;   /*设置背景颜色为十六进制颜色值*/

}


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



CSS 3的2种声明方式
CSS的继承和节点树
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }