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

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

一、整数和实数

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

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

P{

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

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

P{

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

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

}

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

css的五种属性值----在路上(21)的更多相关文章

  1. css详解position五种属性用法及其含义

    position(定位) position - 作为css属性三巨头(position.display.float)之一,它的作用是用来决定元素在文档中的定位方式.其属性值有五种,分别是 - stat ...

  2. CSS的五种定位方式

    CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...

  3. CSS的五种基本选择器

    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. ㈠什么是选择器? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/co ...

  4. [TimLinux] JavaScript 获取设置在CSS类中的属性值

    1. 设置属性值 // 常用方式 var myEl = document.getElementById('idMyEl'); myEl.style.display = "none" ...

  5. css中的position属性值的探究

    css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...

  6. Spring AOP propagation七种属性值

    <!-- 配置事务通知 --> <tx:advice id="advice" transaction-manager="transactionManag ...

  7. css中background-size的属性值

    length 设置背景图像的高度和宽度. 第一个值设置宽度,第二个值设置高度. 如果只设置一个值,则第二个值会被设置为 "auto". percentage 以父元素的百分比来设置 ...

  8. css 中calc无效属性值问题

    width:calc(50%-20px); 这样书写是无效的因为calc中计算的两个因子同运算符号之间必须存在空格:

  9. JQuery中根据属性或属性值获得元素(6种情况获取方法)

    根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元 ...

随机推荐

  1. 转:聊聊mavenCenter和JCenter

    Gradle支持从maven中央仓库和JCenter上获取构件,那这两者有什么区别呢? maven中央仓库(http://repo1.maven.org/maven2/)是由Sonatype公司提供的 ...

  2. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  3. 《LoadRunner12七天速成宝典》签售会2016-12-17北京

    报名地址: http://www.after615.com/actives/s?id=3141&time=1480042829608&sign=9ac8e25e9ab3cf57f613 ...

  4. 用MongoDB分析合肥餐饮业

    看了<从数据角度解析福州美食>后难免心痒,动了要分析合肥餐饮业的念头,因此特地写了Node.js爬虫爬取了合肥的大众点评数据.分析数据库我并没有采用MySQL而是用的MongoDB,是因为 ...

  5. python 数据类型 ----字典

    字典由一对key:value 组成的 python中常用且重量级的数据类型 1. key , keys, values 字典由一对key:value 组成的 python中常用且重量级的数据类型 1. ...

  6. 【夯实PHP基础】PHP常用类和函数总结

    本文地址 代码提纲: 1. 字符串处理类及函数 2. 数组处理类及函数 3 .web处理类及函数 将常用的PHP的类和函数总结到这里,主要是 自己用过的,比较有感觉. 1. [字符串处理] 1)[ut ...

  7. 简单酷炫的canvas动画

    作为一个新人怀着激动而紧张的心情写了第一篇帖子还请大家多多支持,小弟在次拜谢. 驯鹿拉圣诞老人动画效果图如下 html如下: <div style="width:400px;heigh ...

  8. Android之Dedug--Circular dependencies cannot exist in AnimatorSet

    今日,在学习AnimatorSet时,使用play.with.after.before时,代码书写如下: ObjectAnimator animator1 = ObjectAnimator.ofFlo ...

  9. git多账号登录问题

    作者:白狼 出处:http://www.manks.top/git-multiply-accounts.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文 ...

  10. DBobjectsCompareScript(数据库对象比较).sql

    use master goIF EXISTS (SELECT * FROM sysobjects WHERE id = OBJECT_ID(N'[func_CompareDBobjectsReColu ...