CSS颜色与度量单位

学习要点:
1.颜色表方案
2.度量单位

本章主要探讨HTML5中CSS颜色和度量单位等问题,包括颜色的选取方式、相对长度和绝对长度等。

 

一.颜色表方案 1
颜色的表现形式主要有三种方式:颜色名称、十六进制代码和十进制代码。

解释:这是将一个段落内的文字设置为红色,采用的是英文颜色名称。问题是,其他各种颜色我们将如何设置? 

英文颜色名称方案 2

p {
color: red;
} <p>这是一段文本</p>

在古老的HTML4时,颜色名称只有16种。

    颜色名称               十六进制代码               十进制代码                 含义

          black                 #000000                   0,0,0                       黑色

          silver                      #c0c0c0                    192,192,192            银灰色

           gra                    #808080               128,128,128            灰色

          white                #ffffff                 255,255,255             白色

          maroon              #800000                128,0,0                 栗色

           red                 #ff0000                255,0,0                 红色

          purple                #800080                   128,0,128                紫色

         fuchsia                #ff00ff                 255,0,255                紫红

          green                 #008000                0,128,0                   绿色

           lime                   #00ff00                 0,255,0               闪光绿

          olive                   #808000                   128,128,0               橄榄色

          yellow                    #ffff00                   255,255,0               黄色

           nav                   #000080                   0,0,128                  海军蓝

           blue                  #0000ff                 0,0,255                   蓝色

           teal                   #008080               0,128,128               水鸭色

           aqua                 #00ffff                   0,255,255               浅绿色

 

当然,目前颜色名称远远不止这些,可以搜索更多的HTML颜色表或CSS颜色表查阅。 这里提供一些页面如下:
http://xh.5156edu.com/page/z1015m9220j18754.html
http://finle.me/colors.html
http://www.w3school.com.cn/tags/html_ref_colornames.asp

在上面的表格中,我们也罗列出对应的十六进制和十进制颜色表示方法。使用方法如下: 

红色的十六进制方案 3

p {
color: #ff0000;
} <p>这是一段文本</p>

 十进制表示方法就比较多样化,有四种方案: 4

           函数                         说明                                      示例

       rgb(r,g,b)                用RGB模型表示颜色                             rgb(0,128,128)

      rgba(r,g,b,a)             同上,a表示透明度0~1之间                   rgba(0,128,128,0.5)

        hsl(h,s,l)                    用HSL模型(色相、饱和度和透明度)来表示颜色      hsl(120,100%,30%)

      hsla(h,s,l,a)              同上,a表示透明度0~1之间              hsla(120,100%,30%,0.5)

.a{
color: rgb(112, 128, 114);
}
.b{
color: rgba(0, 128, 128, 0.5);
}
.c{
color: hsl(120, 100%, 30%);
}
.d{
color: hsla(120, 100%, 30%, 0.5);
} <p class="a">这是一段文本</p>
<p class="b">这是一段文本</p>
<p class="c">这是一段文本</p>
<p class="d">这是一段文本</p>

目前又有一个疑问,这些值从哪里获取。除了颜色表之外,想要微调自己的颜色值。我们可以使用photoshop等平面设计软件的调色板获取相应的值。

二.度量单位 5
在CSS长度设置中,我们经常需要使用到度量单位,即以什么样的单位设计我们的字体或边框长度。而在CSS中长度单位又分为绝对长度和相对长度。绝对长度指的是现实世界的度量单位,CSS支持五种绝对长度单位。

绝对长度单位 6

                 单位标识符                       说明

                     in                               英寸

                     cm                              厘米

                     mm                             毫米

                     pt                               磅

                     pc                              pica

相对长度指的是依托其他类型的单位,也是五种。

相对长度单位 7

                 单位标识符                                 说明

                     em                               与元素字号挂钩

                     ex                            与元素字体的“x高度”挂钩

                    rem                               与根元素的字号挂钩

                     px                                像素,与分辨率挂钩

                     %                                    相对另一值的百分比

下面我们使用一些常用的单位作为演示,而不做演示的基本用不到了。

em相对单位 8

解释:em是相对单位,与字号大小挂钩,会根据字体大小改变自己的大小,灵活性很高。 

p {
margin:;
padding:;
background: silver;
font-size: 15px;
height: 2em;
} <p>这是一段文本</p>

px相对单位,绝对特性 9 

解释:虽然px也是相对单位,但由于和分辨率挂钩,导致他其实就变成一个绝对单位了,自然灵活性没有em高,但是使用难度较低,且大量的开发者习惯性使用它。

p {
margin:;
padding:;
background: silver;
font-size: 15px;
height: 55px;
} <p>这是一段文本</p>

%百分比,百分比是根据父元素作为基准来判断的 10

解释:长度比较好理解,就是挂钩它所在区块的宽度。而font-size则是继承到的原始大小的百分比。

p {
margin:;
padding:;
background: silver;
font-size: 200%;
width: 50%;
} <p>这是一段文本</p>

第七十一,CSS颜色与度量单位的更多相关文章

  1. 第 14 章 CSS 颜色与度量单位

    学习要点: 1.颜色表方案 2.度量单位 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等. 一.颜色表方案 颜色的表现形式主要有 ...

  2. 第七十六节,css颜色和透明度,盒子阴影和轮廓,光标样式

    css颜色和透明度,盒子阴影和轮廓,光标样式 学习要点: 1.颜色和透明度 2.盒子阴影和轮廓 3.光标样式 一.颜色和透明度 颜色我们之前其实已经用的很多了,比如字体颜色.背景颜色.边框颜色.但除了 ...

  3. 【CSS进阶】CSS 颜色体系详解

    说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...

  4. CSS颜色代码

    颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...

  5. CSS 颜色代码大全

    CSS颜色: 转载:http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html

  6. CSS颜色代码 颜色值 颜色名字大全(转载)

    CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...

  7. CSS颜色代码大全

    CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...

  8. (转)CSS颜色及<a>标签超链接颜色改变

    CSS颜色大全 <a>标签超链接颜色改变 A:hover   {BACKGROUND-COLOR:   #ffccff;   COLOR:   #0080ff}     (hover表示鼠 ...

  9. CSS颜色代码 颜色值 颜色名字大全

    颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...

随机推荐

  1. 前端MVC学习笔记(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  2. selenium自动化过程中遇到的小问题(未完待续)

    1.chrome浏览器调用不起来 代码没出错的情况下,检查下chrome浏览器的版本与chromedriver.exe的版本是否匹配;下面的表格是根据网上及官网整理的chromedriver与chro ...

  3. Elasticsearch 5.0 磁盘空间节省策略的认识

    前言:本文是当时QQ群员讨论磁盘空间如何优化,我搜了下类似的文章,结合官方文档做了一些总结 参考文章1 参考文章2 如果你有疑问,可以联系我参与讨论,或者去原文查看. NOTE: 磁盘空间节省问题,是 ...

  4. WIN10使用管理员权限运行VS2013

    学习WCF时出现报错-- 其他信息: HTTP 无法注册 URL http://+:8083/User/.进程不具有此命名空间的访问权限(有关详细信息,请参见 http://go.microsoft. ...

  5. (四)python自带解释器(LDIE)的使用

    什么是IDE? Integrated Development Environment(集成开发环境) 打个不恰当的比方,如果说写代码是制作一件工艺品,那IDE就是机床.再打个不恰当的比方,PS就是图片 ...

  6. createElement、createTextNode、setAttribute使用方法

    createElement() 方法可创建元素节点. 示例:var placeholder = document.createElement("img"); createTextN ...

  7. SpringMVC @ResponseStatus 的用法

    @ResponseStatus 用于修饰一个类或者一个方法,修饰一个类的时候,一般修饰的是一个异常类,如下, 声明一个异常类在类上面加上ResponseStatus注解,就表明,在系统运行期间,抛出A ...

  8. oracle_sequence用法

    1.    About Sequences(关于序列) 序列是数据库对象一种.多个用户可以通过序列生成连续的数字以此来实现主键字段的自动.唯一增长,并且一个序列可为多列.多表同时使用.序列消除了串行化 ...

  9. Intellj idea 安装JUnit

    1.file-Settings-Plugins-Browse repositories-HTTP Proxy Settings将No proxy改成Auto-detect proxy settings ...

  10. CreateMutex()参数报错问题

    举例: hMutex = CreateMutex(NULL, FALSE,"screen"); 报错 error C2664:"CreateMutexW": 不 ...