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. 前两篇转载别人的精彩文章,自己也总结一下python split的用法吧!

    前言:前两篇转载别人的精彩文章,自己也总结一下吧! 最近又开始用起py,是为什么呢? 自己要做一个文本相似度匹配程序,大致思路就是两个文档,一个是试题,一个是材料,我将试题按每题分割出来,再将每题的内 ...

  2. Threejs基础学习【修改版】

    一. Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://threejs.org/ 2.使用Three.js必备的三个条件(To actually b ...

  3. GZIP压缩、解压缩工具类

    GZIP压缩.解压缩工具类: public class GZIPUtiles { public static String compress(String str) throws IOExceptio ...

  4. Java学习日志(20170111)

    今日新知识点: 1.关键字volatile sychronized是同步锁,这个之前接触过,在类/方法或代码块前加该修饰词,即可实现线程同步: volatile也是一个修饰符,被volatile修饰的 ...

  5. 【转】http://www.cnblogs.com/yuzukwok/p/3884377.html

    来自:http://www.cnblogs.com/yuzukwok/p/3884377.html An Introduction to Xamarin.Forms 来源:http://develop ...

  6. 绿色版的mysql安装配置方式

    解压下载好的压缩包 copy 一份my-default.ini改名字为my.ini为mysql的配置文件 打开my.ini 修改配置文件 默认的原版文件为 # For advice on how to ...

  7. Elasticsearch相关配置(二)

    一.关于elasticsearch的基本概念 term 索引词,在elasticsearch中索引词(term)是一个能够被索引的精确值.foo,Foo Foo几个单词是不相同的索引词.索引词(ter ...

  8. Windows 多用户远程访问 Ubuntu 14.04桌面

    使用X2Go实现多用户远程访问 Ubuntu 14.04桌面:VNC也可以,但是每次连接VNC就回新创建一个Seession,想要在下次远程登录的时候返回上次活动,需要记住开启的线程,这种繁琐的操作不 ...

  9. jquery 操作listbox 左右相互选择

    实现左右两个listbox的相互选择功能 代码如下: function ListBox_Move(listfrom, listto) { var size = $j("#" + l ...

  10. VB调用WebService(SOA2.0接口)(直接Post方式)并解析返回的XML

    SOA 2.0接口 Function GetDepartmentCode(reqDeptCode) Dim soaRequestXML : soaRequestXML = "" D ...