How to show color in CSS
转至:https://blog.csdn.net/CallMeQiuqiuqiu/article/details/54743459
http://www.w3school.com.cn/cssref/css_colors_legal.asp
在CSS中怎样修改文字颜色呢?
1.通过英文单词来赋值
2.通过rgb赋值
3.通过rgba赋值
4.通过十六进制赋值
5.HSL 颜色
6.HSLA 颜色
格式如下:
color:值;
几种常见的取值方式:
1.通过英文单词来赋值
red(红色)等等,这些在W3Cschool可以找到,但是英文单词能够表达的颜色是有限制的,并不是所有的颜色都能够通过英文单词来表达。
2.通过rgb赋值
rgb也就是三原色,r(red),g(green),b(blue)
格式:rgb(,,)其中每一个数字分别显示r,g,b的亮度,这其中每一个数字的取值都是0-255,0代表不发光,255代表发光,取值越大,该颜色越亮。
例如:rgb(255,0,0)代表红色。rgb(0,255,0)代表绿色,rgb(0,0,0)代表黑色,rgb(255,255,255)代表白色
其实在前端开发中并不常用黑色,反而偏偏常用灰色。因为黑色太刺眼了。
当红色和蓝色值是一样的时候就是灰色,三个值越小越偏黑色,三个值越大越偏白色。
3.通过rgba赋值
其中a代表透明度,其取值为 0-1,1代表不透明,0代表透明。
4.通过十六进制赋值
原理其实就是rgb
#FF0000,其中FF就是r也就是255,,00就是0
5.HSL 颜色
HSL 颜色值得到以下浏览器的支持:IE9+、Firefox、Chrome、Safari 以及 Opera 10+。
HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。
HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。
Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。
6.HSLA 颜色
HSLA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。
HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。
How to show color in CSS的更多相关文章
- [HTML] Change an HTML5 input's placeholder color with CSS
We will look at what CSS selectors to use to change an HTML5 inputs placeholder color. This can diff ...
- CSS : color and unit
Color: CSS中定义颜色使用十六进制(hex)表示法为红,绿,蓝的颜色值结合.可以是最低值是0(十六进制00)到最高值是 255(十六进制FF).3个双位数字的十六进制值写法,以#符号开始部分颜 ...
- CSS COLOR
CSS COLOR Color Review We've completed our extensive tour of the colors in CSS! Let's review the key ...
- CSS 文本字体颜色设置方法(CSS color)
CSS 文本字体颜色设置方法(CSS color) 一.认识CSS 颜色(CSS color) 这里要介绍的是网页设置颜色包含有哪些:网页颜色规定规范. 1.常用颜色地方包含:字体颜色.超链接颜色.网 ...
- HTML&CSS日常知识点总结
HTML 标签 meta 标签永远位于文档的头部,即head元素内部 可提供有关页面的元信息,如针对搜索引擎和更新频度的描述和关键词 charset 这个属性规定在外部脚本文件中使用的字符编码 如果外 ...
- jQuery代码节选(css)
CSS 1.css<p class="p1">1</p> $("p").css("color");获取css属性值$ ...
- 常用[js,css,jquery,html]
目录: 一.javascript事件和属性 二.jquery事件和方法 三.js 四.css 五.html 六.js操作cookies 七.插件 javascript事件和属性 事件 onblur ...
- CSS 概念 & 作用
http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html 式样定义 如何显示 HTML内容 通常存储在式样表中 作用 : 解 ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
随机推荐
- 20165206第4次实验《Android程序设计》实验报告
20165206第4次实验<Android程序设计>实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:韩啸 学号:20165206 指导教师:娄嘉鹏 实验日期:2 ...
- Php7有哪些新特性:
PHP7在PHP5的基础上又做了一次质的提升,当然改变很多,我这里以我的总结简单说下,主要发生了下面这些更改: 移除了一些旧的特性 ZEND引擎升级到Zend Engine 3,也就是所谓的PHP N ...
- Linux下Nginx安装/启动/重启/停止
Nginx是高性能的web服务器也是非常好用反向代理服务器,可以实现负载均衡,动静分离等策略,在linux下用的非常多.下面是下载地址 http://nginx.org/en/download.h ...
- java.lang.NullPointerException at java.lang.ProcessBuilder.start(Unknown Source) at org.apache.hadoop.util.Shell.runCommand(Shell.java:482)
1:问题出现的原因,部署好的hadoop-2.6.4进行window10操作hadoop api出现的错误,具体错误是我向hdfs上传文件,还好点,之前解决过,这里不叙述,这里说一下从hdfs下载文件 ...
- python全栈开发day86-CRM增删改查 分页
知识点梳理: 1.分页器保存搜索条件 2.ORM批量插入数据bulk_create 批量创建model实例,在用bulk_create 一次插入数据库 3.自定义不同表的不同字段ModelForm错误 ...
- python全栈开发day85-查:数据表 数据头 增加列 展示多对多字段 反向解析编辑和删除按钮的url
直接上代码: # spark/service/sites.py from django.conf.urls import url from django.shortcuts import HttpRe ...
- centos6.5上安装redis3.2.1遇见的坑
解决方法: 安装gcc即可解决 解决方法: make MALLOC=libc 原因分析: 说关于分配器allocator, 如果有MALLOC 这个 环境变量, 会有用这个环境变量的 去建立Redi ...
- Thinkphp3.1 php 链接SqlServer
ThinkPHP链接 M("lk_employeeInfo","Null/表前缀","sqlsrv://账号:密码@服务器:端口/数据库") ...
- Codeforces 980F Cactus to Tree 仙人掌 Tarjan 树形dp 单调队列
原文链接https://www.cnblogs.com/zhouzhendong/p/CF980F.html 题目传送门 - CF980F 题意 给定一个 $n$ 个节点 $m$ 条长为 $1$ 的边 ...
- Java中随机数生成的问题
[生成随机数序列] 我们只能利用Math.random()方法只能生成一个在[0,1)之间的double类型浮点数. 但如果我们想要生成[min, max]之间的随机整数时该怎么办呢? 此时可以用: ...