html5--6-13 CSS3中的颜色表示方式

学习要点

  • 掌握选择器的优先级问题
  • 掌握CSS3中新增的颜色表示方式

选择器的优先级问题

  • 原则上:元素选择器<类选择器< ID选择器<行内样式
  • 谁指向精确谁的优先级高
  • 并列的话谁在后边谁优先级高

CSS2时代的颜色表示方法

关于颜色的小知识

颜色是通过对红、绿和蓝光的组合来显示的。早期的电脑只支持最多 256 种颜色时,但是现在大多数电脑都能显示数百万种颜色。

    1. 颜色名称
      • 优点:方便快捷而且特定颜色比较准确
      • 缺点:表示颜色数量有限,英文不好的不容易记住,不支持透明度的表示
    2. 十六进制方式
      • 优点:表示颜色种类多,使用较方便
      • 缺点:不支持透明颜色。
    3. RGB方式 三原色配色方式
      • 优点:表示颜色种类多,使用较方便
      • 缺点:不支持透明颜色

CSS3新增的颜色表示方法

    1. RGBA方式三原色配色方式
      • 在RGB模式上新增了Alpha透明度。
    2. HSL模式
      • 语法:HSL(H,S,L),HSL分别表示色调,饱和度,亮度
        • H:0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
        • S:(饱和度)。取值为:0.0% - 100.0%
        • L:(亮度)。取值为:0.0% - 100.0%
    3. HSLA模式
      • HSL模式上新增了Alpha透明度。

html5--6-13 CSS3中的颜色表示方式的更多相关文章

  1. html5--6-14 CSS3中的颜色表示方式

    html5--6-14 CSS3中的颜色表示方式 实例 每个参数 (red.green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100% ...

  2. css3中的颜色

    1颜色.color:rgba(R,G,B,A) R,G,B是分别代笔红,绿,蓝值是在0到255之间的数也可以是0.0% - 100.0%,A代表的是透明度0到1之间. 2.渐变.background- ...

  3. CSS3中的变形与动画(二)

    CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可 ...

  4. html5 css3中的一些笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title> ...

  5. HTML5 Canvas 中的颜色、样式和阴影的属性和方法

    颜色.样式和阴影的属性与方法 fillStyle                设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle         设置或返回用于笔触的颜色.渐变或模式 ...

  6. css3中的变形(transform)、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  7. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  8. CSS3中渐变gradient详解

    这几天看了一本HTML5的书,里面对于页面的背景使用了大量的渐变效果,因此在这里写一些关于渐变Gradient的东西. CSS3中的Gradient有两种,分别是线性渐变(linear-gradien ...

  9. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

随机推荐

  1. 16.1116 NOIP 考前模拟(信心题)

    分火腿 (hdogs.pas/.c/.cpp) 时间限制:1s:内存限制 64MB 题目描述: 小月言要过四岁生日了,她的妈妈为她准备了n根火腿,她想将这些火腿均分给m位小朋友,所以她可能需要切火腿. ...

  2. 【2017YYHS WC】

    因为本葳蕤分数太低去不了WC,只能同去WC的各位大爷一起训练一波,就称作是YYHS WC吧,其实就是WC难度的多校 day1:早上8:30考的试,下午1:00去吃中饭 T1:考场打得暴力结果矩阵乘法后 ...

  3. CodeForces 379D 暴力 枚举

    D. New Year Letter time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  4. AC日记——美元汇率 洛谷 P1988

    题目背景 此处省略maxint+1个数 题目描述 在以后的若干天里戴维将学习美元与德国马克的汇率.编写程序帮助戴维何时应买或卖马克或美元,使他从100美元开始,最后能获得最高可能的价值. 输入输出格式 ...

  5. 某考试 T1 function

    (数据范围 n<=10^9 ,T<=10 ) 首先,我来证明一下 Σμ(d) * σ(i/d)^2 = σ(i^2) 相信做过约数个数和的童鞋都可以完成从右式推到左式,那么我现在就说一下怎 ...

  6. seo优化入门教程:认识搜索引擎

    对于从来没有学过seo或者零基础的人来说,搜索引擎可能都不太了解.所以我们先来认识搜索引擎有哪些,同时为什么我们要学习搜索引擎优化. 从目前全球的一个搜索引擎来说的话,他的分支是非常多的,甚至可以讲, ...

  7. 【hql】spring data jpa中 @Query使用hql查询 问题

    spring data jpa中 @Query使用hql查询 问题 使用hql查询, 1.from后面跟的是实体类 不是数据表名 2.字段应该用实体类中的字段 而不是数据表中的属性 实体如下 hql使 ...

  8. 步步为营(十六)搜索(二)BFS 广度优先搜索

    上一篇讲了DFS,那么与之相应的就是BFS.也就是 宽度优先遍历,又称广度优先搜索算法. 首先,让我们回顾一下什么是"深度": 更学术点的说法,能够看做"单位距离下,离起 ...

  9. OpenWrt inittab

    OpenWrt 启动时会执行 rc.d/ 下的脚本. 这篇文章 介绍了启动脚本里的规则. K50dropbear -> ../init.d/dropbear K85odhcpd -> .. ...

  10. [网页游戏开发]进一步了解Morn UI及工作流

    Morn UI工作流 Morn Builder不仅仅是对Flash IDE的改进,传统的开发协作是以fla为基础,由于fla是二进制文件,在以svn等版本控制软件协作下,合并过程中会出现各种各样的问题 ...