在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. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  2. .NET 对接JAVA 使用Modulus,Exponent RSA 加密

    最近有一个工作是需要把数据用RSA发送给Java 虽然一开始标准公钥 net和Java  RSA填充的一些算法不一样 但是后来这个坑也补的差不多了 具体可以参考 http://www.cnblogs. ...

  3. ExtJS 4.2 业务开发(三)数据添加和修改

    接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...

  4. CoreCRM 开发实录——开始之新项目的技术选择

    2016年11月,接受了一个工作,是对"悟空CRM"进行一些修补.这是一个不错的 CRM,开源,并提供一个 SaaS 的服务.正好微软的 .NET Core 和 ASP.NET C ...

  5. 一起学微软Power BI系列-使用技巧(3)Power BI安卓手机版安装与体验

    Power BI有手机版,目前支持安卓,苹果和WP,不过没有WP手机,苹果在国内还不能用,要FQ和用就不测试了.安卓的我也也是费了九牛二虎之力才把app下载下来,把方法分享给大家. FQ太麻烦,所以建 ...

  6. .NET平台开源项目速览(14)最快的对象映射组件Tiny Mapper

    好久没有写文章,工作甚忙,但每日还是关注.NET领域的开源项目.五一休息,放松了一下之后,今天就给大家介绍一个轻量级的对象映射工具Tiny Mapper:号称是.NET平台最快的对象映射组件.那就一起 ...

  7. HTML+CSS 项目总结

    在过去的大概一个月的学习,基本掌握了HTML+CSS的用法和特性. 这个星期老师给我们布置了一个PC端的实战项目,并且要求在3-4天内完成,我不惜废寝忘食,在紧迫的时间内大致地完成了,但是有些效果不能 ...

  8. VB.NET设置控件和窗体的显示级别

    前言:在用VB.NET开发射频检测系统ADS时,当激活已存在的目标MDI子窗体时,被其他子窗体遮住了,导致目标MDI子窗体不能显示. 这个问题怎么解决呢?网上看到一篇帖子VB.NET设置控件和窗体的显 ...

  9. Linux虚拟化学习笔记<一>

    关于虚拟化,原理的东西是非常复杂的,要想完全理解,没有足够的耐心是不不能完全学透这部分内容的.那下面我主要以资源汇总的形式把一些资料罗列出来,帮助大家快速理解虚拟化,快速使用和配置. 为什么要虚拟化: ...

  10. BZOJ 4199: [Noi2015]品酒大会 [后缀数组 带权并查集]

    4199: [Noi2015]品酒大会 UOJ:http://uoj.ac/problem/131 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品 ...