07-颜色属性


我是段落

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>07-颜色属性</title>

    <style>

        p{

            /*color: red;*/

            /*color: rgb(255,0,0);*/

            /*color: rgba(255,0,0,1);*/

            color: #FF0000;

            color: #F00;

            /*color: rgba(255,0,0,0.2);*/

            color: #ffee00;

            color: #fe0;

            color: #769abb;

        }

    </style>

</head>

<body>

<!--

1.在CSS中如何通过color属性来修改文字颜色

格式: color: 值;

取值:

1.1英文单词

一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达

1.2rgb

rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)

格式: rgb(0,0,0)

那么这个格式中的

第一个数字就是用来设置三原色的光源元件红色显示的亮度

第二个数字就是用来设置三原色的光源元件绿色显示的亮度

第三个数字就是用来设置三原色的光源元件蓝色显示的亮度

这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮

红色: rgb(255,0,0);

绿色: rgb(0,255,0);

蓝色: rgb(0,0,255);

黑色: rgb(0,0,0);

白色: rgb(255,255,255);

在前端开发中其实并不常用黑色

只要让红色/绿色/蓝色的值都一样就是灰色

而且如果这三个值越小那么就越偏黑色, 越大就越偏白色

例如: color: rgb(200,200,200);

1.3rgba

rgba中的rgb和前面讲解的一样, 只不过多了一个a

那么这个a呢代表透明度, 取值是0-1, 取值越小就越透明

例如: color: rgba(255,0,0,0.2);

1.4十六进制

在前端开发中通过十六进制来表示颜色, 其实本质就是RGB

十六进制中是通过每两位表示一个颜色

例如: #FFEE00 FF表示R EE表示G 00表示B

什么是十六进制?

十六进制和十进制一样都是一种计数的方式

在十进制中取值范围0-9, 逢十进一

在十六进制中取值范围0-F, 逢十六进一

9

a  10

b  11

c  12

d  13

e  14

f  15

10  16

11  17

12  18

十六进制和十进制转换的公式

用十六进制的第一位*16 + 十六进制的第二位 = 十进制

15 == 1*16 + 5 = 21

12 == 1*16 + 2 = 18

FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255

00 == 0*16 + 0 = 0

1.5十六进制缩写

在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位

例如:

#FFEE00 == #FE0

注意点:

1.如果当前颜色对应的两位数字不一样, 那么就不能简写

#123456;

2.如果两位相同的数字不是属于同一个颜色的, 也不能简写

#122334

-->

<p>我是段落</p>

</body>

</html>

H5 颜色属性的更多相关文章

  1. 熟悉css/css3颜色属性

    颜色属性无处不在.字体要用颜色,背景可以有颜色,粒子特效更是离不开颜色.本文参考了一些资料简单总结下以备日后查阅. css中颜色的定义方式: 十六进制色 RGB & RGBA HSL & ...

  2. Android5.0常用颜色属性说明

    在使用Eclipse的时代,我们很少去在style文件给整个应用或者Activity去设定颜色,那是因为即使设置也不会提升用户的视觉效果.但是材料设计号称让没有设计功底的人也能做出漂亮的App,那我们 ...

  3. 闲记 单元格与单元格之间的边 ///字体属性都是font开头，除了颜色属性 ///文本属性都是text开的，除了设置行高。

    这两天一直在做网页没有什么太大的问题,期间也考了一场试,对答案的时候老师讲了一些小知识,因此来记录一下. 单元格与单元格之间的边距(cellspaling) list-type-image可以使用图像 ...

  4. css颜色属性及设置颜色的地方

    css颜色属性 在css中用color属性规定文本的颜色. 默认值是not specified 有继承性,在javascript中语法是object.style.color="#FF0000 ...

  5. H5新增属性classList

    H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...

  6. django admin后台显示H5颜色选项卡

    一般使用django后台,特别是有颜色的字段的时候避免手动输入一大推的颜色,可以使用h5颜色选项卡,这样用户就直接可以通过选项卡来选择自己所需的颜色.这个时候可以通过后台admin form来进行定制 ...

  7. 这些Android系统样式中的颜色属性你知道吗？

    Android 系统样式中的颜色属性 推荐阅读看完后彻底搞清楚Android中的 Attr . Style .Theme 几个常用的颜色属性 先放上一张经典的图片,图片来自网络. 这张图在网上很是流传 ...

  8. 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

    前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...

  9. bootstrap 按钮颜色属性

    bootstrap 按钮颜色属性有几种

随机推荐

  1. mssql sqlserver 取消数值四舍五入的方法分享

    摘要: 下文讲述使用round sql函数,对数值型数据进行舍入操作 实验环境:sqlserver 2008 转自: http://www.maomao365.com/?p=6454 最近接到用户需求 ...

  2. C#编辑EXE使用的appSettings节点的Config文件

    /// <summary> /// 保存配置文件的设定 /// </summary> /// <param name="Key"></pa ...

  3. c/c++ 用普利姆（prim）算法构造最小生成树

    c/c++ 用普利姆(prim)算法构造最小生成树 最小生成树(Minimum Cost Spanning Tree)的概念: ​ 假设要在n个城市之间建立公路,则连通n个城市只需要n-1条线路.这时 ...

  4. 【Git学习一】Git 初始化

    在开始Git之旅之前,我们需要设置一下Git的配置变量. 1.告诉Git当前用户的姓名和邮件地址,配置用户名和邮件地址将在版本库提交时用到. 例子: ------------------------- ...

  5. SAP 维护视图创建与修改

    维护视图创建与修改 维护视图创建 T-CODE:SE54 维护ABAP数据字典 维护已生产的对象 注意:当维护视图修改后,需要删除已生成的对象,重新创建已生成的对象,否则无法显示,这个小窍门我花了半天 ...

  6. #010 全年级C语言开始统一刷题了，能否坚持下去？

    不知道这是咋回事吧,这个系统挺不好使得,出现了一个又一个的问题. 使用过程中做题的那个系统自己就崩了,刷新后那道题得了零分. 前面的几道题难度系数也不小,对于我这个新手来说,但是这个系统太坑了.他明码 ...

  7. python3编写网络爬虫14-动态渲染页面爬取

    一.动态渲染页面爬取 上节课我们了解了Ajax分析和抓取方式,这其实也是JavaScript动态渲染页面的一种情形,通过直接分析Ajax,借助requests和urllib实现数据爬取 但是javaS ...

  8. UVA1616-Caravan Robbers(二分)

    Problem UVA1616-Caravan Robbers Accept: 96  Submit: 946Time Limit: 3000 mSec Problem Description Lon ...

  9. [CQOI2018]九连环

    嘟嘟嘟 对于这种找规律的题,我向来是不会的. 通过大佬们的各种打表找规律.神奇dp等方法,我们得到了答案就是\(\lfloor \frac{2 ^ {n + 1}}{3} \rfloor\). 高精是 ...

  10. 三、Oracle 查询+where条件

    一.查询1.distinct:查询去除重复的行,是所有的列都重复才满足条件2.列别名:as或者空格 select name as 姓名 from student3.查询字段可以做数学运算,也可以做字符 ...