当前位置:首页 > 前端技术 > 前端-基础篇-CSS-背景颜色的几种表示方法

前端-基础篇-CSS-背景颜色的几种表示方法

2022年09月16日 16:52:55前端技术6

一、背景颜色的几种表示方法

  1、用颜色英文单词表示

这种一般适用于基本颜色表示(比如红黄蓝绿)

background:red

  2、用(ps)取色器获取到的十六进制代码表示

1)可以利用ps软件拾取颜色获得图片中颜色的十六进制代码
前端-基础篇-CSS-背景颜色的几种表示方法 _ JavaClub全栈架构师技术笔记
2)将获取到的十六进制颜色代码写入背景颜色样式中

background:#bae5f5

  3、用(ps)取色器获取到(或色卡)的RGB表示

第2点的方法也可以获取到RGB数值,将RGB数值写入背景颜色样式中

background:rgb(186,229,245)

二、代码示例

可复制到编辑器保存为html格式,再用浏览器打开预览

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>颜色的几种代码表达方式</title>
		<style>
			#div1{width:200px;height:200px;background:red;}
			/*用颜色英文单词表示*/
			#div2{width:200px;height:200px;background:#bae5f5;}
			/*用(ps)取色器获取到的十六进制代码表示*/
			#div3{width:200px;height:200px;background:rgb(186,229,245);}
			/*用(ps)取色器获取到(或色卡)的RGB表示*/
	    </style>
	</head>
	<body>
		<div id="div1">第一种:颜色英文单词实现</div>       <!--第一种:颜色英文单词实现-->
		&nbsp;         <!--换行符-->
		<div id="div2">第二种:取色器十六进制代码实现</div>
		&nbsp;
		<div id="div3">第三种:RGB实现</div>
	</body>
</html>

作者:wifi612
来源链接:https://blog.csdn.net/wifi612/article/details/95977577

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

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


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

标签: css
分享给朋友:

“前端-基础篇-CSS-背景颜色的几种表示方法” 的相关文章

CSS a标签样式

a标签悬停时鼠标样式、下划线、颜色等 a { color: blue; cursor: pointer; /* 鼠标样式*/ } a:link { color: #06F; text-decoration: none; }...

如何使用纯 CSS 创建翻牌动画

如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。 作者:坚果 公众号:“大前端之旅” 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括F...

浏览器对css 伪类 hover的支持

浏览器对css 伪类 hover的支持

今天在调试的时候,发现用hover写的样式在火狐上可以,在ie上却不行,百度了下,原来我用的是ie的Quirks模式。 这是在http://www.w3help.org网站上查到的结果。 问题描述 IE6 IE7(Q) IE8(Q) 不支持 A 元素以外的其他元素的...

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

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

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

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的定义: 首先来说HTML,HTML中文称为超文本标记语言,从语义上来说,它只是一种是一种标识性的语言,并不是一种编程语言。所以在提及其作用时,只能从语义方面去想,而不能从样式上去想。它其中有许许多多的标签,...

CSS文字样式

notice:文字样式会被继承 一、常用的文字样式 1、设置文字的颜色    color:red; 2、设置文字的大小  font-size:30px; 3、设置文字的粗细,bold为加粗...

【HTML&CSS】常用标签以及编写格式

【HTML&CSS】常用标签以及编写格式

一、学习内容回顾 HTML Hyper Text Markup Language:超文本标记语言 超文本:不仅仅是纯文本,还包括字体效果和多媒体(图片/音频/视频) ML标记语言: <开始 属性=“xxx”>标签体 学习HTML主要学习...

CSS元素类型

CSS元素类型

前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素、行内元素和行内块元素。本文总结这三种显示方式的特征和区别。 1 写在前面 最近在整理cnblogs上页面的样式,默认右侧【随笔分类】中的标...

html常用标签以及css基本属性和选择器

html常用标签 一般格式为: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5...

发表评论

访客

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