css的五种属性值----在路上(21)
在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)的更多相关文章
- css详解position五种属性用法及其含义
position(定位) position - 作为css属性三巨头(position.display.float)之一,它的作用是用来决定元素在文档中的定位方式.其属性值有五种,分别是 - stat ...
- CSS的五种定位方式
CSS中一共有五种定位: position:static:默认值 position:absolute:绝对定位 position:relative:相对对定位 position:fixed:固定定位 ...
- CSS的五种基本选择器
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. ㈠什么是选择器? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/co ...
- [TimLinux] JavaScript 获取设置在CSS类中的属性值
1. 设置属性值 // 常用方式 var myEl = document.getElementById('idMyEl'); myEl.style.display = "none" ...
- css中的position属性值的探究
css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...
- Spring AOP propagation七种属性值
<!-- 配置事务通知 --> <tx:advice id="advice" transaction-manager="transactionManag ...
- css中background-size的属性值
length 设置背景图像的高度和宽度. 第一个值设置宽度,第二个值设置高度. 如果只设置一个值,则第二个值会被设置为 "auto". percentage 以父元素的百分比来设置 ...
- css 中calc无效属性值问题
width:calc(50%-20px); 这样书写是无效的因为calc中计算的两个因子同运算符号之间必须存在空格:
- JQuery中根据属性或属性值获得元素(6种情况获取方法)
根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元 ...
随机推荐
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- .NET 对接JAVA 使用Modulus,Exponent RSA 加密
最近有一个工作是需要把数据用RSA发送给Java 虽然一开始标准公钥 net和Java RSA填充的一些算法不一样 但是后来这个坑也补的差不多了 具体可以参考 http://www.cnblogs. ...
- ExtJS 4.2 业务开发(三)数据添加和修改
接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...
- CoreCRM 开发实录——开始之新项目的技术选择
2016年11月,接受了一个工作,是对"悟空CRM"进行一些修补.这是一个不错的 CRM,开源,并提供一个 SaaS 的服务.正好微软的 .NET Core 和 ASP.NET C ...
- 一起学微软Power BI系列-使用技巧(3)Power BI安卓手机版安装与体验
Power BI有手机版,目前支持安卓,苹果和WP,不过没有WP手机,苹果在国内还不能用,要FQ和用就不测试了.安卓的我也也是费了九牛二虎之力才把app下载下来,把方法分享给大家. FQ太麻烦,所以建 ...
- .NET平台开源项目速览(14)最快的对象映射组件Tiny Mapper
好久没有写文章,工作甚忙,但每日还是关注.NET领域的开源项目.五一休息,放松了一下之后,今天就给大家介绍一个轻量级的对象映射工具Tiny Mapper:号称是.NET平台最快的对象映射组件.那就一起 ...
- HTML+CSS 项目总结
在过去的大概一个月的学习,基本掌握了HTML+CSS的用法和特性. 这个星期老师给我们布置了一个PC端的实战项目,并且要求在3-4天内完成,我不惜废寝忘食,在紧迫的时间内大致地完成了,但是有些效果不能 ...
- VB.NET设置控件和窗体的显示级别
前言:在用VB.NET开发射频检测系统ADS时,当激活已存在的目标MDI子窗体时,被其他子窗体遮住了,导致目标MDI子窗体不能显示. 这个问题怎么解决呢?网上看到一篇帖子VB.NET设置控件和窗体的显 ...
- Linux虚拟化学习笔记<一>
关于虚拟化,原理的东西是非常复杂的,要想完全理解,没有足够的耐心是不不能完全学透这部分内容的.那下面我主要以资源汇总的形式把一些资料罗列出来,帮助大家快速理解虚拟化,快速使用和配置. 为什么要虚拟化: ...
- BZOJ 4199: [Noi2015]品酒大会 [后缀数组 带权并查集]
4199: [Noi2015]品酒大会 UOJ:http://uoj.ac/problem/131 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品 ...