当前位置:首页 > css相关 > 正文内容

三剑客实战之Css入门基础知识[css控制颜色]

css中,控制指定颜色是通过使用预定义的颜色名称,或 RGB、HEX、HSL、RGBA、HSLA 值,在 CSS 中,可以使用颜色名称来指定颜色,CSS/HTML 支持 140 种标准颜色名。

CSS 文本颜色

下面是简单设置文本的颜色。代码演示:(关键词:color:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:Tomato;">Hello World</h3>

<p style="color:DodgerBlue;">welcome to www.uuucd.cn!</p>

<p style="color:MediumSeaGreen;">这是一段带颜色的字体.</p>

</body>
</html>

结果显示为:

Hello World

welcome to www.uuucd.cn!


这是一段带颜色的字体.



CSS 背景色

下面是为 HTML 元素设置背景色。代码演示:(关键词:background-color:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Orange;">Hello World,欢迎您!</h1>

<p style="background-color:Tomato;">
这里是一段有背景颜色的字体哦……
</p>

</body>
</html>

结果显示为

QQ20220105142630.jpg


CSS 颜色名

在 CSS 中,可以使用颜色名称来指定颜色,比如:Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray。分别的颜色 如下:


QQ20220105141402.jpg


CSS 边框颜色

下面是设置边框的颜色:(关键词:border: solid


<!DOCTYPE html>
<html>
<body>

<h1 style="border: 2px solid Tomato;">Hello 这里是一个标题</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello 我的边框是有颜色的</h1>

<h1 style="border: 2px solid Violet;">Hello 我的边框颜色是粉红的哦</h1>

</body>
</html>


结果显示为:

QQ截图20220105143210.jpg


RGBA 值

关键词:background-color:rgba

演示代码:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

<p>您可通过使用 RGBA 颜色值来生成透明色。</p>

</body>
</html>


RGBA 颜色值是具有 alpha 通道的 RGB 颜色值的扩展 - 它指定了颜色的不透明度。

RGBA 颜色值指定为:

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字:

请通过混合以下 RGBA 值来进行实验,如图所示:

QQ截图20220105143939.webp


CSS RGB 颜色

RGB 值 

关键词:background-color:rgb(0, 0, 0);

代码演示:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>
<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>
<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>
<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1>

<p>在 HTML 中,您可使用 RGB 值规定颜色。</p>

</body>
</html>


在 CSS 中,可以使用下面的公式将颜色指定为 RGB 值:

rgb(red, green, blue)

每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

例如,rgb(255, 0, 0) 显示为红色,因为红色设置为最大值(255),其他设置为 0。

要显示黑色,请将所有颜色参数设置为 0,如下所示:rgb(0, 0, 0)。

要显示白色,请将所有颜色参数设置为 255,如下所示:rgb(255, 255, 255)。


CSS HEX 颜色

HEX 值

关键词:background-color:

代码演示:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

<p>在 HTML 中,您可以使用十六进制值规定颜色。</p>

</body>
</html>


在 CSS 中,可以使用以下格式的十六进制值指定颜色:

#rrggbb

其中 rr(红色)、gg(绿色)和 bb(蓝色)是介于 00 和 ff 之间的十六进制值(与十进制 0-255 相同)。

例如,#ff0000 显示为红色,因为红色设置为最大值(ff),其他设置为最小值(00)。

通常为所有 3 个光源使用相等的值来定义灰色阴影。

无标题.jpg

无标题.jpg


CSS HSL 颜色

HSL 值

关键词:background-color:hsl

代码演示:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

<p>在 HTML 中,您可以使用 HSL 值来设置颜色。</p>

</body>
</html>

在 CSS 中,可以使用色相、饱和度和明度(HSL)来指定颜色,格式如下:

hsla(hue, saturation, lightness)

色相(hue)是色轮上从 0 到 360 的度数。0 是红色,120 是绿色,240 是蓝色。

饱和度(saturation)是一个百分比值,0% 表示灰色阴影,而 100% 是全色。

亮度(lightness)也是百分比,0% 是黑色,50% 是既不明也不暗,100%是白色。

无标题.jpg

饱和度

0% 是完全灰色,您无法再看到颜色。

50% 是 50% 灰色,但是您仍然可以看到颜色。

100% 是纯色,没有灰色阴影

饱和度可以描述为颜色的强度。


亮度

颜色的明暗度可以描述为要赋予颜色多少光,其中 0% 表示不亮(黑色),50% 表示 50% 亮(既不暗也不亮),100% 表示全明(白)。

通常通过将色调和饱和度设置为 0 来定义灰色阴影,并将亮度从 0% 到 100% 进行调整可以得到更深/更浅的阴影。



HSLA 值

关键词:background-color:hsla

代码演示:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

<p>您可使用 HSLA 颜色值生成透明色。</p>

</body>
</html>


HSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了颜色的不透明度。

HSLA 颜色值指定为:

hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字:

无标题.jpg






扫描二维码推送至手机访问。

版权声明:本文由uuucd.cn发布,如需转载请注明出处。

本文链接:https://www.uuucd.cn/css/50.html

标签: css相关

相关文章

利用css隐藏元素的5种方法之[Display属性简介]

利用css隐藏元素的5种方法之[Display属性简介]

用 CSS 隐藏页面元素有许多种方法。但是每个方法之前是存在着细微的不同,这些不同决定了在一个特定的场合下使用哪一个方法。你可以将 将 visibility 设为 hidden、将 display 设为 none、opacity 设为 0、...

Css 及 Html5之初学者基础教程[前端语言基础]

Css 及 Html5之初学者基础教程[前端语言基础]

前端语言基础:HTML5 & CSS(一) HTML5:超文本标记语言1) :基本概念Ω是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )Ö这些标签以<标签名称>的形式出现,用于标记...

三剑客实战之Css入门基础知识一[语法基础之选择器]

三剑客实战之Css入门基础知识一[语法基础之选择器]

CSS 语法CSS 规则集(rule-set)由选择器和声明块组成:选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。多条 CSS 声明用分号分隔,声...

三剑客实战之Css入门基础知识[CSS 背景属性定义]

三剑客实战之Css入门基础知识[CSS 背景属性定义]

CSS 背景属性:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position background-color...

 三剑客实战之Css入门基础知识[css边框属性教程一]

三剑客实战之Css入门基础知识[css边框属性教程一]

CSS 边框属性关键词:borderborder 属性允许您指定元素边框的颜色和宽度以及样式。CSS 边框样式关键词:border-style border-style 属性作用于指定显示的边框外观类型。可以设置一到四个值(用于上...

三剑客实战之Css入门基础知识[css边框属性教程二]

三剑客实战之Css入门基础知识[css边框属性教程二]

CSS 圆角边框关键词:border-radius 用于向元素添加圆角边框关键代码及举例:p { border: 3px; solid red;/*普通边框*/ } p ...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。