数字

颜色——命名颜色

在Css2.1中规范定义了17个颜色名。包括html4.0中定义的16个颜色及外加一个橙色;
<h1 style="color=aqua">aqua</h1>
<h1 style="color=fuchsia">fuchsia</h1>
<h1 style="color=lime">lime</h1>
<h1 style="color=olive">olive</h1>
<h1 style="color=red">red</h1>
<h1 style="color=white">white</h1>
<h1 style="color=black">black</h1>
<h1 style="color=gray">gray</h1>
<h1 style="color=maroon">maroon</h1>
<h1 style="color=orange">orange</h1>
<h1 style="color=silver">silver</h1>
<h1 style="color=yellow">yellow</h1>
<h1 style="color=blue">blue</h1>
<h1 style="color=green">green</h1>
<h1 style="color=navy">navy</h1>
<h1 style="color=pruple">pruple</h1>
<h1 style="color=teal">teal</h1>
当然网页上不只有这些颜色组成。Web浏览器能识别多达140多个颜色名。包括上面我们提到的。具体就不介绍了;

颜色——RGB颜色

计算机通过组合不同的红色、绿色、蓝色创建新的颜色,这种组合成为RGB颜色;
使用百分数记法指定白色和黑色:
    rgb(%,%,%);
    rgb(%,%,%);
使用整数三元组记法:
    rgb(,,);
    rgb(,,);
如果当用户输入的值为小数且值是在可取范围之内的。都会以"四舍五入"的方式精确到最接近范围的边界。如果一个值大于100%或者小于0%。都会被默认的调整回到100%或者0%;
p spanOne{color:rgb(%,%,%);}/*100%,100%,100%*/
p spanTwo{color:rgb(%,-%,-%);}/*0%,0%,0%*/
p spanThree{color:rgb(,,);}/*13,35,255*/

颜色——16进制RGB颜色

工作原理:将三个介于00~FF的16进制数连起来。就能设置一种颜色。记法的一般语法是#AABBCC。且三个数之间没有空格、逗号及其他分隔符。
h1{color:rgb(,,) ;} 等价于 h1{color:#FFFFFF ;}
而
h1{colol:reb(,,);}    等价于 h1{color:#}

颜色——等忦颜色表

颜色——Web安全色

%或者0是一个安全值。
如果使用RGB百分数,要让所有的3个值都要么是0%或者是一个能被20整除的数
eg:
    rgb(%,%,%);
如果使用0~255范围的RGB值那么所有的3个值都要么是0或者是一个能被51整除的数
eg:
    rgb(,,);

长度单位

英寸(in)、厘米(cm) 、毫米(mm)、点(pt)、派卡(pica);

长度单位——相对长度单位

相对长度单位共有3种:em、ex和px
 
ps:本章内容只是自己根据阅读CSS权威指南做出的一点小知识积累。可能不太详细,如若有大神阅读本文章尽量对我的文章做出点评。让我知道还有哪些不足之处加以改正

Web前端新人笔记之CSS值和单位的更多相关文章

  1. Web前端新人笔记之CSS字体

    本章内容是阅读CSS权威指南的一个小积累和随笔.新人必看,老鸟也可查看并指出不足指出以便后人阅读更好地理解.O(∩_∩)O谢谢!!!设置字体属性时样式变的最常见的用途之一:不过,尽管字体选择很重要,但 ...

  2. Web前端新人笔记之CSS结构和层叠

    上一篇文章介绍了如何利用CSS选择器为元素应用各种丰富的样式,每个合法的文档都会生成一个结构树,了解这一点,就能根据元素的祖先.属性.兄弟等元素穿件选择器选择元素. 本篇文章将讨论3中机制之间的关系: ...

  3. Web前端新人笔记之文本属性

    前一段时间因工作时间减缓了更新笔记的时间.我也不知道有没有会观看并且能不能帮到一些初学者,这只是我的一些小随笔而已.当然我也希望的的每一篇随笔都可以帮到更多的想要学习前端开发的初学者们,更希望你们也可 ...

  4. Web前端新人笔记之jquery选择符

    jquery利用了CSS选择符的能力,让我们能够在DOM中快捷而轻松的获取元素或元素集合.本章将介绍以下内容: 1.网页中的元素结构: 2.如何通过CSS选择符在页面中查找元素: 3.扩展jquery ...

  5. Web前端新人笔记之height、min-height的区别

     浏览器参照基准:Firefox, Chrome, Safari, Opera, IE: * IE6不支持CSS min-height属性.最小高度的定义:1. 元素拥有默认高度:2. 当内容超出元素 ...

  6. Web前端新人笔记之了解Jquery

    与javaScript相比,Jquery更简洁.浏览器的兼容性更强,语法更灵活,对xpath的支持更强大.一个$符就可以遍历文档中各级元素.例:在页面上有一个无序列表,我们需要将所有列表项中的文本内容 ...

  7. Web前端新人笔记之HeightCharts基础

    通常情况下,Highcharts包含标题(Title).坐标轴(Axis).数据列(Series).数据提示框(Tooltip).图例(Legend).版权信息(Credits)等,高级的还包括导出功 ...

  8. Web前端新人笔记之jquery入门

    本章将为大家介绍以下几点内容: 1.jquery的主要特点: 2.建立jquery的编码环境: 3.简单jquery脚本示例: 4.选择jquery而不是纯javaScript的理由: 5.常用的jq ...

  9. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

随机推荐

  1. hdu 5464 Clarke and problem dp

    Clarke and problem Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php ...

  2. ios开发——实用技术OC篇&地图与定位

    地图与定位 11.1 iOS定位服务 11.2 iOS地图 11.3 Web地图 1 iOS定位服务 iOS中有三个定位服务组件: Wifi定位,通过查询一个Wifi路由器的地理位置的信息.比较省电, ...

  3. Validation

    Validation A simple but powerful Validation Engine, in a Laravel-esque style. Its Validation Rules a ...

  4. Android View的绘制机制流程深入详解(一)

    本系列文章主要着重深入介绍Android View的绘制机制及流程,第一篇主要介绍并分析LayoutInflater的原理, 从而理解setContentView的加载原理.对于LayoutInfla ...

  5. docker on Mac

    贡献一篇: 云主机可以选择操作系统镜像快速创建主机,这比虚拟机更便捷了,我们本地也可以这么做了,因为有了 Docker 这个东西.它依赖于 LXC(Linux Container),能从网络上获得配置 ...

  6. Linux系统常见的压缩命令

    *.Z compress 程序压缩的文件: //在当前的Linux主流版本中都已经默认没有支持该压缩命令了,因为gzip命令已经取代了compress命令了 *.gz gzip 程序压缩的文件: *. ...

  7. PHP免费API调用,使用(CURL)

    <?phpclass GetApiModel{//获取第三方API //获取身份证信息 //返回json /*{ "errNum": 0, "retMsg" ...

  8. [引]LINQ to XML 类概述

    本文转自:http://msdn.microsoft.com/zh-cn/library/bb387023.aspx 本主题提供 System.Xml.Linq 命名空间中 LINQ to XML 类 ...

  9. 【Objective-C】4-空指针和野指针

    一.什么是空指针和野指针 1.空指针 1> 没有存储任何内存地址的指针就称为空指针(NULL指针) 2> 空指针就是被赋值为0的指针,在没有被具体初始化之前,其值为0. 下面两个都是空指针 ...

  10. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...