第4章节 CSS的单位.ppt

第4章 CSS的单位 CSS的单位是所有CSS属性的基础。CSS单位用于修 饰属性值，CSS常用的单位主要有颜色单位和长度单位。例 如设置文字的大小就需要使用长度单位，如像素和em等。 设置文字的颜色就需要应用颜色单位，如#333333等。 本章内容包括： 学习颜色单位的各种表示方法 学习长度单位的各种表示方法 4.1 颜色单位 很多人认为，颜色应该属于CSS某写属性的值，而非 单位。但是在CSS标准里，CSS的颜色被归类为单位。CSS 设置颜色可以使用颜色名称、RGB数值、RGB百分比和颜 色十六进制。 4.1.1 颜色名称 使用颜色的名称来表示颜色是最直接命名方法。其中， 有十六种颜色是规范的，主流的浏览器都能识别这十六种颜 色。在表4.1中列出了规范的十六色名称。 4.1.2 百分比颜色 在使用百分比颜色前，首先要了解RGB颜色。RGB色 彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、 蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到 各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的 颜色，这个标准几乎包括了人类视力所能感知的所有颜色， 是目前运用最广的颜色系统之一。例（4-1） 注：不使用小数值，23.4%（错） 4.1.3 数字颜色 使用数字颜色和百分比颜色设置的方法是类似的。不 同之处是数字颜色的数值取值范围是从0到255。使用数字 颜色设置RGB颜色，就是设置R、G、B三个颜色的数值。 注：颜色数值只允许整数 4.1.4 十六进制颜色 在之前的章节中，曾经使用如下的设置颜色数值的方 法：例（4-2） 使用三个数字或者字母表示十六进制颜色称为短十六进制。 例如#ff0000表示为#f00。只有当三对数字都能被简写时， 十六进制颜色才能用短十六进制来简写。 4.2 长度单位 长度单位在CSS中极其重要，要设置页面元素的宽高 或者设置边距补白等属性都需要使用长度单位。长度单位分 为绝对单位和相对单位。 4.2.1 绝对单位 绝对单位通常是在现实中量度长度的物理单位。在网 页中可以使用的绝对长度单位有英寸（in）、厘米（cm） 、毫米（mm）和磅（pt）。表4.5列出了这四种单位的转换 关系。 注：在网页设计中，极少使用绝对单位。每个用户的显示器不同，浏览器也不同，很难使用绝对单位去定义网页元素的大小。 4.2.2 相对单位 为了兼容不同的浏览器和显示器分辨率，应使用相对 单位。相对单位能适应不同的浏览器和屏幕分辨率，在网页 设计中，通常使用相对单位。常用的相对单位有px和em。 1．px像素单位，被视为图像的最小点，在网页中使用最多。例4-3 2．em一个文字的大小为12px，那么这 个字的大小就是1em。例4-4 4.3 常见面试题 问题1：Dreamweaver的拾色器只有有限的颜色，如何知道更多一种颜色十六进制表示？ 问题2：为何要使用相对单位设置长度？ 4.4 小结 本章讲解了CSS技术中常用到的单位，包括颜色单位和长度 单位。设置颜色单位有颜色名称、百分比颜色、数字颜色和 十六进制颜色的方法。 本章的重点是理解并合理运用CSS的单位。 本章的难点是理解CSS单位的不同设置方法之间的差异。 下一章将讲解如何使用CSS样式来控制文本的外观样式。