CSS入门教程——颜色

Posted feelang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS入门教程——颜色相关的知识,希望对你有一定的参考价值。

CSS 中常见的定义颜色的方法有:

  • 直接使用颜色名称
  • RGB 值
  • 16 进制值

例如,下面 5 种写法都表示红色:

  • red
  • rgb(255, 0, 0)
  • rgb(100%, 0%, 0%)
  • #ff0000
  • #f00

CSS 内置了一些颜色名称,比如 aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpuleredsilvertealwhiteyellow 以及 transparent

注意,除了 whiteblack,其他颜色在网站设计中并不常用,因为一个设计精美的网站一般会定义一套符合品牌调性的颜色组合。

RGB 是三个取值范围为 [0, 255] 的值,其中 0 表示最小值,255 表示最大值。当然,这三个值也可以用百分比来表示。

16进制值是一个用 16 进制表示的数值。它以 # 开头,支持六位和三位:

  • 三位值有等价的六位值,例如 #ff0000 等于 #f00#cc9966 等于 #c96
  • 三位值更简洁一些,三个数值分别代表 RGB
  • 六位精度更高,比如 #fc3846 就无法用三位值来表达

CSS3 还支持 HSL 颜色,后面高阶教程中会详细讲解

颜色和背景色

颜色有两种,colorbackground-color

例如,一个黄底蓝字的 <h1> 标题:

h1 
    color: yellow;
    background-color: blue;

这个颜色可能有些刺眼,我们用 16 进制色值稍作调整:

body 
    font-size: 14px;
    color: navy;


h1 
    color: #ffc;
    background-color: #009;

colorbackground-color 可作用于大部分 html 元素,如果作用于 body 之上,会修改页面内的所有颜色。

以上是关于CSS入门教程——颜色的主要内容,如果未能解决你的问题,请参考以下文章

CSS的三种表示颜色的方法

----颜色版----

使用查询更改滚动百分比的 CSS

纯css实现进度条百分比效果

css 设置div 高度无效

CSS入门教程——颜色