当前位置:   article > 正文

3.4 CSS取值与单位

3.4 CSS取值与单位

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颜色的简单应用 :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CSS颜色的简单应用</title>
  6. <style>
  7. /* 设置字体颜色为红色 */
  8. .red {
  9. color: #FF0000
  10. }
  11. /* 设置字体颜色为蓝色 */
  12. .blue {
  13. color: rgb(0,0,255)
  14. }
  15. /* 设置字体颜色为橙色 */
  16. .orange {
  17. color: orange
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <h3>CSS颜色的简单应用</h3>
  23. <hr />
  24. <p class="red">
  25. 该段落字体将设置为红色
  26. </p>
  27. <p class="blue">
  28. 该段落字体将设置为蓝色
  29. </p>
  30. <p class="orange">
  31. 该段落字体将设置为橙色
  32. </p>
  33. </body>
  34. </html>

运行结果: 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/329376
推荐阅读
相关标签
  

闽ICP备14008679号