HTML5(12)——颜色

整洁的桌面

前两天算是有一些事情要处理,没有来得及更新学习。今天我们来讲一下HTML中颜色的控制。

颜色的名称

在HTML中,要使用颜色的话,需要用他们的名称来引用。HTML支持大概140种标准颜色,可以看链接:Color Names Supported by All Browsers

颜色名称

网页背景颜色

前面我们在HTML5(5)——属性一文中简要提到过style属性,而在HTML5(8)——样式
一文中详细介绍了style的各个property的作用,这里我们用它来控制网页背景颜色,文本颜色等。语法大概如下:

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

文本颜色

同背景颜色一样设置,其中一些不同。style中属性不同,这里就是color属性,值就是颜色名称。

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

边框颜色

这里就使用borderproperty,而它的值包括粗细,填充,颜色,你可以使用自己想要的值。

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

颜色值

在HTML中,颜色可以用几种类型的值来描述:RGB, HEX, HSL, RGBA 和HSLA。


RGB

rgb(red,green,blue),每一种参数都是颜色的密度值,范围在0-255之间。例如,rgb(0,0,0)是黑色,rgb(255,255,255)是白色。不同的灰度,是3种颜色相同的情况下的改变。


image.png

HEX

这是用16进制来表示RGB的三种颜色,也是三种值,范围都在00-ff之间。同样灰度也是用相同的三种颜色的值大小,来表示。


HSL

这种颜色的是通过色调,饱和度和亮度,来表示某种颜色。
hsl(hue, saturation, lightness)。色调的值在0-360之间。0是红色,120是绿色,240是蓝色。饱和度是百分数表示的,0%表示灰色,100%是颜色本身。亮度也是百分数,0%是黑色,50%是适中,100%是白色。灰度是色调和饱和度都为0值,而通过亮度的调节来改变。

RGBA和HSLA

这两者都是在RGB和HSL的基础上,增加了第四个参数,透明度(alpha)。透明度的范围在0.0-1.0之间。0.0是全透明,而1.0是不透明。


推荐阅读更多精彩内容

  • 画笔工具:快捷键:B 主要用于以绘制图像,以手工直接绘制;可设置不透明度,以半透明的方式绘图,调整其不透明度的设置...
    枫叶appiosg阅读 1,301评论 0 6
  • 由于less官方没有给出杂项函数的中文详解,所以整理一下分享出来 color 解析颜色,将代表颜色的字符串转换为颜...
    Xuguangxing阅读 2,267评论 0 2
  • 接下来我们看Base文件夹下的UIKIt文件夹的内容。 1.UIColor+YYAdd 这里看了这个类,里面有许多...
    充满活力的早晨阅读 970评论 0 0
  • 1.网页乱码的问题是如何产生的?怎么解决? 一:乱码产生的原因是:当我们保存文件时会把我们写入的文字使用编辑器默认...
    freddy阅读 35评论 0 0
  • 风象APP V1.0技术补充说明文档手册 目录 1. 文档综述​5 1.1. 版本修订记录​5 1.2. PRD输...
    冯夏平阅读 355评论 0 4