当前位置:首页 > 前端技术 > CSS中的颜色介绍

CSS中的颜色介绍

2022年09月17日 10:15:27前端技术6

本节我们来讲一下颜色,因为我们后面学习 CSS 样式时,会经常用到颜色,颜色也是网页中必不可少的一个元素。例如我们可以给某个字体设置颜色,给元素的边框设置颜色,设置元素的背景颜色等。要想一个网页好看,肯定是需要给它添加一些色彩的。

颜色值

颜色是通过对红、绿和蓝光的组合来显示的。我们一般会通过下面三种方式来规定 CSS 中的颜色:

  • 颜色名称
  • 十六进制颜色值
  • RGB 颜色

颜色名称

HTML 和 CSS 颜色规范中定义了 147 种颜色名,其中有 17 种标准颜色,加上 130 种其他颜色。

例如 red 红色、green 绿色、blue 蓝色等,因为颜色名太多了,这里就不一一给大家列出来啦。我们主要讲一下如何设置颜色。

示例:

例如通过颜色名,将字体颜色设置为红色:

color:red;

或者将元素的背景颜色设置为粉色:

background-color: pink;

使用的使用很简单,直接在 CSS 属性后面接颜色名即可,不需要加别的修饰符。

十六进制颜色值

十六进制颜色值就是通过十六进制来表示颜色,十六进制颜色的规定为:#RRGGBB。其中 RR 是红色、GG 绿色、BB 蓝色,十六进制整数规定了颜色的成。所有值必须介于 0-9 与 A-F 之间。

十六进制值使用三个双位数来编写,并且要以 # 号开头。例如 #000000 黑色、#FF0000 红色、#00FF00 绿色、#0000FF 蓝色。

而当双位数相同时(一二位相同、三四位相同、五六位相同),可以缩写,例如 #000000 可以缩写为 #000#FF0000 可以缩写为 F00 等。但是像 #101010 这种就不能缩写。

示例:

例如分别将字体颜色设置为红色、绿色、蓝色:

color:#FF0000;
color:#00FF00;
color:#0000FF;

上述代码也可以简写成:

color:#F00;
color:#0F0;
color:#00F;

RGB 颜色

RGB 颜色值是通过 rgb(red, green, blue) 来规定的,三个参数分别定义红、绿、蓝的强度,参数值可以是介于 0 与 255之间的整数,或者是 0% 到 100% 的百分比。

例如 rgb(255,0,0) 表示红色、 rgb(0,0,255) 表示蓝色等。

示例:

例如将背景颜色设置为红色、绿色、蓝色:

background-color:rgb(255,0,0);
background-color:rgb(0,255,0);
background-color:rgb(0,0,255);

总结

上述就是我们所讲的三种规定 CSS 中颜色的方法啦,可以设置使用的颜色有很多,但我们不可能将这些颜色值全部记住,所以其实只需要搞清楚颜色值是怎么使用的就可以啦。

像我们平时工作中,一般会由设计师将网页设计好,然后将设计图给我们,我们在制作网页的时候,就只需要通过颜色吸取器吸一下设计图中的颜色,然后就知道是什么颜色啦。

作者:大前小白
来源链接:https://blog.csdn.net/weixin_45195200/article/details/108441525

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42412.html

标签: css
分享给朋友:

“CSS中的颜色介绍” 的相关文章

HTML的一些常用的标签和部分css知识

HTML的一些常用的标签和部分css知识

一.form标签的注意事项 form为表单标签,属性有action和method。 action为表单提交的路径,method为表单 的提交方式。表单有九种提交请求,常用 的有两种,今天就介绍常用的两种请求get和 post。 1.get请求...

scrapy css选择器提取a标签内href属性值

 示例Html: <div class='abc'> <a href='https://blog.csdn.net/weixin_41767339'> Hello word! </a> </div&...

html标签属性大全(囊括CSS、CSS3、H5、XML等)

转载:https://www.w3school.com.cn/tags/tag_html.asp 作者:zhzhsgg 来源链接:https://blog.csdn.net/zhzhsgg/article/details/1130...

HTML标签自带属性 和 CSS 常用属性区分

**前言:**相信很多人在开发时都遇到过这样一个问题,当我们需要用一个属性去修饰某个标签时,常常会分不清楚其到底是标签自带的属性(HTML属性)还是 CSS 里的属性,因此这篇博文记录的就是一些常用的 HTML 和 CSS 属性,方便查阅的同时,也希望和...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

span标签垂直居中显示的正确方法

span标签居中显示的正确方法 方法一: <span style="text-align: center">水平居中</span> <span style="line-height:值为span的高度">垂直居中...

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

修改颜色,线条形状,粗细等... CSS代码: .zh_hr{ border:3px solid rgba(255, 255, 255, 0.50); margin-bottom: 2px; margin-top: 2px }...

发表评论

访客

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