当前位置:首页 > 前端技术 > CSS颜色--基本样式

CSS颜色--基本样式

2022年11月06日 14:15:46前端技术15

CSS样式

1.指定颜色的几种方式

颜色名称 {
color:green;
} //(预定义/跨浏览器的颜色名称)

RGB {
color:rgb(0,0,0);
} //即是代表红、绿、蓝,以这三种颜色拼出的

RGBA {
color:rgba(0,0,0,0.5);
} //前面三位 rgb 和上面一样,最后一位代表了透明度,这里是 0.5 的透明度

十六进制 {
color:#ff0000;
}

HSL色彩{
color: hsl(120,65%,75%);
}

HSLA颜色{
color: hsla(120,65%,75%,0.3);
}

HSL色彩       
IE9, Firefox, Chrome, Safari,和Opera 10+.支持HSL颜色值。
HSL代表色相,饱和度和亮度 - 使用色彩圆柱坐标表示。
HSL颜色值指定:HSL(色调,饱和度,明度)。
色相是在色轮上的程度(从0到360)-0(或360)是红色的,120是绿色的,240是蓝色的。
饱和度是一个百分比值;0%意味着灰色和100%的阴影,是全彩。
亮度也是一个百分点;0%是黑色的,100%是白色的。
HSLA颜色    IE9, Firefox3+, Chrome, Safari,和Opera10+.支持.
HSLA的颜色值是一个带有alpha通道的HSL颜色值的延伸 - 指定对象的透明度。
指定HSLA颜色值:HSLA(色调,饱和度,亮度,α)
α是Alpha参数定义的不透明度。
Alpha参数是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数。
预定义/跨浏览器的颜色名称    147颜色名称定义在HTML和CSS的颜色规格(17个标准色加上130多个其他)。下表列出了所有这些,连同其十六进制值。

2.color 规定文本的颜色

color

3.opacity 设置元素颜色的透明度,它会进行继承。

如果只是让背景有透明度,而不想让它里面的其它元素进行继承,可使用 background:rgba();或者background-color:rgba();

所有主流浏览器都支持opacity属性。.**注意:**IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=50)

opacity:0; 隐藏一个元素,完全不显示,但是会占空间,只是看不到。

opacity:1; 显示一个元素。

注意: 如果页面中想将背景变为透明,而里面的内容不受影响,最好使用rgba,因为opacity会继承到内容中去。

作者:专注Python二十年
来源链接:https://blog.csdn.net/pig_html/article/details/111742821

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

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


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

标签: css
分享给朋友:

“CSS颜色--基本样式” 的相关文章

HTML标签属性与CSS样式

HTML标签属性与CSS样式

HTML基础 定义:超文本标记语言 Hypetext Markup Language 特点: • 不需要编译,直接由浏览器执行 • 是一个文本文件 • 必须用htm或html作文件后缀 • 对大小写不敏感,HTML或html都可以 HT...

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

什么是HTML和CSS

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

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

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

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

  【实验题目】HTML&CSS实验(5) 【实验目的】学习颜色、字体、文本格式化和盒模型的样式定义。                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流...

CSS文字样式

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

如何使用JS来改变CSS样式

如何使用JS来改变CSS样式 方法: document.getElementById("xx").style.xxx中的所有属性是什么 盒子标签和属性对照 CSS语法(不区分大小写)...

内联式css样式,直接写在现有的HTML标签中

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> &l...

CSS元素类型

CSS元素类型

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

遇见未知的CSS

遇见未知的CSS

摘录自《CSS核心技术详解》 1.1 CSS中你可能会疑问的几个问题 1.1.1 在CSS中为什么要有层叠 在CSS中可能会有多个样式表同时影响同一个元素的某个属性,设计这个功能的主要原因有两个,解决模块化和作者、用户、用户代理样式冲突。 模块化...

发表评论

访客

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