3.4 CSS取值与单位

最新推荐文章于 2024-10-25 17:02:44 发布

超级小狗

最新推荐文章于 2024-10-25 17:02:44 发布

阅读量530

点赞数 4

分类专栏： HTML5网页前端设计文章标签： css 前端 html5

本文链接：https://blog.csdn.net/zeyeqianli/article/details/137087613

版权

HTML5网页前端设计专栏收录该内容

13 篇文章 1 订阅

订阅专栏

3.4.1 数字

数字取值是在CSS2中规定的，有三种取值形式如表3-3所示。

3.4.2 长度

长度取值<length>是在CSS2中规定的，表示方法为数值接长度单位。可用于描述文本、图像或其他各类元素的尺寸。

长度取值的单位可分为相对长度单位和绝对长度单位。相对单位的长度不是固定的，是根据参照物换算出实际长度，又可分为文本相对长度单位和视口相对长度单位。绝对长度单位的取值是固定的，例如厘米、毫米等，该取值不根据浏览器或容器的大小发生改变。

3.4.3 角度

角度取值<angle>是在CSS3中规定的，可用于描述元素变形时旋转的角度。

3.4.4 时间

时间取值<time>是在CSS3中规定的，可用于描述元素变形时旋转的角度。

3.4.5 文本

文本常见有三种取值形式，如表所示。

3.4.6 颜色

CSS颜色可以用于设置HTML元素的背景颜色、边框颜色、字体颜色等。本节主要介绍了网页中颜色显示的原理—RGB色彩模式，和三种常用的颜色表示方式。

1. RGB色彩模式

RBG色彩模式是一种基于光学原理的颜色标准规范，也是目前运用最广泛的工业界颜色标准之一。颜色是通过对红、绿、蓝光的强弱程度不同组合叠加显示出来的，而RGB三个字母正来自于红（Red）、绿（Green）、蓝（Blue）三个英文单词首字母组合而成，代表了这三种颜色光线叠加在一起形成的各式各样的色彩。

目前的显示器大多是采用了RGB色彩模式，是通过屏幕上的红、绿、蓝三色的发光极的亮度组合出不同的色彩。因此网页上的任何一种颜色都可以由一组RGB值来表示。

RGB色彩模式规定了红、绿、蓝三种光的亮度值均用整数表示，其范围是[0, 255] 共有256级，其中0为最暗，255为最亮。因此红、绿、蓝三种颜色通道的取值能组合出256X256X256=16,777,216种不同的颜色。目前主流浏览器能支持其中大约16000多种色彩。

2. 常见颜色表示方式

在CSS中常用的颜色表示方式有：

使用RGB颜色的方式：例如rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等；
RGB的十六进制表示法：例如#000000表示黑色、#FFFFFF表示白色等；
直接使用英文单词名称：例如red表示红色、blue表示蓝色等。

CSS颜色的简单应用 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS颜色的简单应用</title>
        <style>
		    /* 设置字体颜色为红色 */
            .red {
                color: #FF0000
            }
			/* 设置字体颜色为蓝色 */
            .blue {
                color: rgb(0,0,255)
            }
			/* 设置字体颜色为橙色 */
            .orange {
                color: orange
            } 
        </style>
    </head>
    <body>
        <h3>CSS颜色的简单应用</h3>
        <hr />
        <p class="red">
            该段落字体将设置为红色
        </p>

        <p class="blue">
            该段落字体将设置为蓝色
        </p>

        <p class="orange">
            该段落字体将设置为橙色
        </p>
    </body>
</html>

运行结果：