第七十一,CSS颜色与度量单位
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颜色与度量单位的更多相关文章
- 第 14 章 CSS 颜色与度量单位
学习要点: 1.颜色表方案 2.度量单位 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等. 一.颜色表方案 颜色的表现形式主要有 ...
- 第七十六节,css颜色和透明度,盒子阴影和轮廓,光标样式
css颜色和透明度,盒子阴影和轮廓,光标样式 学习要点: 1.颜色和透明度 2.盒子阴影和轮廓 3.光标样式 一.颜色和透明度 颜色我们之前其实已经用的很多了,比如字体颜色.背景颜色.边框颜色.但除了 ...
- 【CSS进阶】CSS 颜色体系详解
说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...
- CSS颜色代码
颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...
- CSS 颜色代码大全
CSS颜色: 转载:http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html
- CSS颜色代码 颜色值 颜色名字大全(转载)
CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...
- CSS颜色代码大全
CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...
- (转)CSS颜色及<a>标签超链接颜色改变
CSS颜色大全 <a>标签超链接颜色改变 A:hover {BACKGROUND-COLOR: #ffccff; COLOR: #0080ff} (hover表示鼠 ...
- CSS颜色代码 颜色值 颜色名字大全
颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...
随机推荐
- 前两篇转载别人的精彩文章,自己也总结一下python split的用法吧!
前言:前两篇转载别人的精彩文章,自己也总结一下吧! 最近又开始用起py,是为什么呢? 自己要做一个文本相似度匹配程序,大致思路就是两个文档,一个是试题,一个是材料,我将试题按每题分割出来,再将每题的内 ...
- Threejs基础学习【修改版】
一. Three.js官网及使用Three.js必备的三个条件 1.Three.js 官网 https://threejs.org/ 2.使用Three.js必备的三个条件(To actually b ...
- GZIP压缩、解压缩工具类
GZIP压缩.解压缩工具类: public class GZIPUtiles { public static String compress(String str) throws IOExceptio ...
- Java学习日志(20170111)
今日新知识点: 1.关键字volatile sychronized是同步锁,这个之前接触过,在类/方法或代码块前加该修饰词,即可实现线程同步: volatile也是一个修饰符,被volatile修饰的 ...
- 【转】http://www.cnblogs.com/yuzukwok/p/3884377.html
来自:http://www.cnblogs.com/yuzukwok/p/3884377.html An Introduction to Xamarin.Forms 来源:http://develop ...
- 绿色版的mysql安装配置方式
解压下载好的压缩包 copy 一份my-default.ini改名字为my.ini为mysql的配置文件 打开my.ini 修改配置文件 默认的原版文件为 # For advice on how to ...
- Elasticsearch相关配置(二)
一.关于elasticsearch的基本概念 term 索引词,在elasticsearch中索引词(term)是一个能够被索引的精确值.foo,Foo Foo几个单词是不相同的索引词.索引词(ter ...
- Windows 多用户远程访问 Ubuntu 14.04桌面
使用X2Go实现多用户远程访问 Ubuntu 14.04桌面:VNC也可以,但是每次连接VNC就回新创建一个Seession,想要在下次远程登录的时候返回上次活动,需要记住开启的线程,这种繁琐的操作不 ...
- jquery 操作listbox 左右相互选择
实现左右两个listbox的相互选择功能 代码如下: function ListBox_Move(listfrom, listto) { var size = $j("#" + l ...
- VB调用WebService(SOA2.0接口)(直接Post方式)并解析返回的XML
SOA 2.0接口 Function GetDepartmentCode(reqDeptCode) Dim soaRequestXML : soaRequestXML = "" D ...