html5--6-13 CSS3中的颜色表示方式
html5--6-13 CSS3中的颜色表示方式
学习要点
- 掌握选择器的优先级问题
- 掌握CSS3中新增的颜色表示方式
选择器的优先级问题
- 原则上:元素选择器<类选择器< ID选择器<行内样式
- 谁指向精确谁的优先级高
- 并列的话谁在后边谁优先级高
CSS2时代的颜色表示方法
关于颜色的小知识
颜色是通过对红、绿和蓝光的组合来显示的。早期的电脑只支持最多 256 种颜色时,但是现在大多数电脑都能显示数百万种颜色。
- 颜色名称
- 优点:方便快捷而且特定颜色比较准确
- 缺点:表示颜色数量有限,英文不好的不容易记住,不支持透明度的表示
- 十六进制方式
- 优点:表示颜色种类多,使用较方便
- 缺点:不支持透明颜色。
- RGB方式 三原色配色方式
- 优点:表示颜色种类多,使用较方便
- 缺点:不支持透明颜色。
CSS3新增的颜色表示方法
- RGBA方式三原色配色方式
- 在RGB模式上新增了Alpha透明度。
- HSL模式
- 语法:HSL(H,S,L),HSL分别表示色调,饱和度,亮度
- H:0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
- S:(饱和度)。取值为:0.0% - 100.0%
- L:(亮度)。取值为:0.0% - 100.0%
- HSLA模式
- HSL模式上新增了Alpha透明度。
html5--6-13 CSS3中的颜色表示方式的更多相关文章
- html5--6-14 CSS3中的颜色表示方式
html5--6-14 CSS3中的颜色表示方式 实例 每个参数 (red.green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100% ...
- css3中的颜色
1颜色.color:rgba(R,G,B,A) R,G,B是分别代笔红,绿,蓝值是在0到255之间的数也可以是0.0% - 100.0%,A代表的是透明度0到1之间. 2.渐变.background- ...
- CSS3中的变形与动画(二)
CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可 ...
- html5 css3中的一些笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title> ...
- HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
- css3中的变形(transform)、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- CSS3中渐变gradient详解
这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradien ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
随机推荐
- 16.1116 NOIP 考前模拟(信心题)
分火腿 (hdogs.pas/.c/.cpp) 时间限制:1s:内存限制 64MB 题目描述: 小月言要过四岁生日了,她的妈妈为她准备了n根火腿,她想将这些火腿均分给m位小朋友,所以她可能需要切火腿. ...
- 【2017YYHS WC】
因为本葳蕤分数太低去不了WC,只能同去WC的各位大爷一起训练一波,就称作是YYHS WC吧,其实就是WC难度的多校 day1:早上8:30考的试,下午1:00去吃中饭 T1:考场打得暴力结果矩阵乘法后 ...
- CodeForces 379D 暴力 枚举
D. New Year Letter time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- AC日记——美元汇率 洛谷 P1988
题目背景 此处省略maxint+1个数 题目描述 在以后的若干天里戴维将学习美元与德国马克的汇率.编写程序帮助戴维何时应买或卖马克或美元,使他从100美元开始,最后能获得最高可能的价值. 输入输出格式 ...
- 某考试 T1 function
(数据范围 n<=10^9 ,T<=10 ) 首先,我来证明一下 Σμ(d) * σ(i/d)^2 = σ(i^2) 相信做过约数个数和的童鞋都可以完成从右式推到左式,那么我现在就说一下怎 ...
- seo优化入门教程:认识搜索引擎
对于从来没有学过seo或者零基础的人来说,搜索引擎可能都不太了解.所以我们先来认识搜索引擎有哪些,同时为什么我们要学习搜索引擎优化. 从目前全球的一个搜索引擎来说的话,他的分支是非常多的,甚至可以讲, ...
- 【hql】spring data jpa中 @Query使用hql查询 问题
spring data jpa中 @Query使用hql查询 问题 使用hql查询, 1.from后面跟的是实体类 不是数据表名 2.字段应该用实体类中的字段 而不是数据表中的属性 实体如下 hql使 ...
- 步步为营(十六)搜索(二)BFS 广度优先搜索
上一篇讲了DFS,那么与之相应的就是BFS.也就是 宽度优先遍历,又称广度优先搜索算法. 首先,让我们回顾一下什么是"深度": 更学术点的说法,能够看做"单位距离下,离起 ...
- OpenWrt inittab
OpenWrt 启动时会执行 rc.d/ 下的脚本. 这篇文章 介绍了启动脚本里的规则. K50dropbear -> ../init.d/dropbear K85odhcpd -> .. ...
- [网页游戏开发]进一步了解Morn UI及工作流
Morn UI工作流 Morn Builder不仅仅是对Flash IDE的改进,传统的开发协作是以fla为基础,由于fla是二进制文件,在以svn等版本控制软件协作下,合并过程中会出现各种各样的问题 ...