CSS颜色表示的几种方式
在CSS中颜色有很多表示方式,今天列出一些常见的颜色表示方式及它们的用法。
①color:blue;
第一种,调用颜色属性,将颜色的英文输入在冒号后,以分号结束。
这种方法直接了当,但是能表示的颜色的种类很少。
②color:#000000;
第二种,‘#’号开头,每位数字可为:0、1、2、3、4、5、6、7、8、
9、a、b、c、d、e、f。前1,2位表示红色,3,4位表示绿色,5,6
位表示蓝色。与RGB颜色表示法的思路类似,用红绿蓝三原色组合为
各种颜色,种类繁多。
③color:rgb(0,0,0);
第三种,RGB表示法。有两种值:数值,所有值都是0—255;百分值
,所有值为0%—100%。他们的共同特点是第一个值表示红色,第二个
值表示绿色,第三个值表示蓝色。通过组合,能够表示各种颜色。
④color:rgba(0,0,0,0.5);
第四种,RGBA表示法。它是RGB表示法的升级版,新添了透明属性。
前三个属性值和RGB表示法相同,第四个属性值的值域为0——1可
以精确到小数点后两位。
⑤color:hsl(0,100%,100%);
第五种,HSL表示法。它的含义:H表示色调,该值的值域为0——
360,0和360表示红色,120表示绿色,240表示蓝色。S表示饱和度
,值域为0%——100%。L表示亮度,值域为0%——100%。
⑥color:hsla(0,100%,100%,0.5);
第六种,HSLA表示法。是HSL表示法的加强版,增加了透明度的属性
值,值域为0—1。
CSS颜色表示的几种方式的更多相关文章
- css 实现换肤几种方式
说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.可供选择的换肤 对于只提供几种主题方案,让用户来选择的,一般就简单粗暴的写多套主题 一个全局class控制样式切换 ...
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- css清除浮动的两种方式(clearfix和clear)
最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...
- css清除浮动的几种方式,哪种最合适?
细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...
- HTML/css清除浮动的几种方式
浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...
- 关于css垂直水平居中的几种方式
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...
- 实现CSS等分布局的4种方式
× 目录 [1]float [2]inline-block [3]table[4]flex 前面的话 等分布局是指子元素平均分配父元素宽度的布局方式,本文将介绍实现等分布局的4种方式 思路一: flo ...
- CSS清除浮动的几种方式
浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...
- css清除浮动的3种方式
前言: 当不给父元素设置宽高时,父元素的宽高会被子元素的内容撑开.但当子元素设置浮动属性(float) 后, 子元素会溢出到父元素外,父元素的宽高也不会被撑开,这称之为“高度塌陷”.可以理解为使用浮动 ...
随机推荐
- 高阶函数HOF和高阶组件HOC(Higher Order Func/Comp)
一.什么是高阶函数(组件),作用是什么? 子类使用父类的方法可以通过继承的方式实现,那无关联组件通信(redux).父类使用子类方法(反向继承)呢 为了解决类(函数)功能交叉/功能复用等问题,通过传入 ...
- 1073 多选题常见计分法 (20分)C语言
批改多选题是比较麻烦的事情,有很多不同的计分方法.有一种最常见的计分方法是:如果考生选择了部分正确选项,并且没有选择任何错误选项,则得到 50% 分数:如果考生选择了任何一个错误的选项,则不能得分.本 ...
- 你确定你了解什么是linux系统?
1.什么是linux发行版 就Linux的本质来说,它只是操作系统的核心,负责控制硬件.管理文件系统.程序进程等,并不给用户提供各种工具和应用软件.所谓工欲善其事,被必先利其器,一套在优秀的操作系统核 ...
- 使用Rancher Server部署本地多节点K8S集群
当我第一次开始我的Kubernetes之旅时,我一直在寻找一种设置本地部署环境的方式.很多人常常会使用minikube或microk8s,这两者非常适合新手在单节点集群环境下进行操作.但当我已经了解了 ...
- 简单了解linux内核
linux内核是单块结构Linux能动态的按需装载或卸载模块Linux内核线程以一种十分受限制的方式来周期性地执行几个内核函数,因为linux内核线程不能执行用户程序,因此,她们并不代表基本的可执行上 ...
- zabbix 4.04 安装文档 - 基于CentOS 7.6
1 安装前准备: 1.1 安装JDK 卸载openjdk # rpm -qa | grep java # yum remove java-1.8.0-openjdk # yum remove ...
- 【转】20个简化开发任务的 JavaScript库
原文出处: codegeekz 译文出处: oschina 所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 J ...
- PTA - 拓扑排序
一个项目由若干个任务组成,任务之间有先后依赖顺序.项目经理需要设置一系列里程碑,在每个里程碑节点处检查任务的完成情况,并启动后续的任务.现给定一个项目中各个任务之间的关系,请你计算出这个项目的最早完工 ...
- Java入门 - 高级教程 - 04.序列化
原文地址:http://www.work100.net/training/java-serialization.html 更多教程:光束云 - 免费课程 序列化 序号 文内章节 视频 1 概述 2 序 ...
- SpringSecurity 自定义表单登录
SpringSecurity 自定义表单登录 本篇主要讲解 在SpringSecurity中 如何 自定义表单登录 , SpringSecurity默认提供了一个表单登录,但是实际项目里肯定无法使用的 ...