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. SQL Server 缓存清除与内存释放

    Sql Server系统内存管理在没有配置内存最大值,很多时候我们会发现运行SqlServer的系统内存往往居高不下.这是由于他对于内存使用的策略是有多少闲置的内存就占用多少,直到内存使用虑达到系统峰 ...

  2. iOS 键盘上方增加工具栏

    UIToolbar *keyboardDoneButtonView = [[UIToolbar alloc] init]; [keyboardDoneButtonView sizeToFit]; UI ...

  3. Jmeter 登入、新增、查询、修改、删除，动态传参。

    1.设置HTTP Request Defaults    请求默认值,这样之后每次请求同一个域名端口的时候后都不用输入协议.域名.端口号. 2.输入[登入]的接口号. 3.设置HTTP header  ...

  4. Sublime Text 2 配置PHP调试环境(在windows环境下)

    1:PHP安装,配置环境变量 PHP安装略过- 2:下载Sublime Text 2 下载地址:http://www.sublimetext.com/2 ,选择自己合适的版本 3:点击 sublime ...

  5. C# -- 索引器、枚举类型

    C# -- 索引器.枚举类型 索引器允许类或结构的实例就像数组一样进行索引. 无需显式指定类型或实例成员,即可设置或检索索引值. 索引器类似于属性,不同之处在于它们的访问器需要使用参数. 1. 索引器 ...

  6. Linux 小知识翻译 - 「NTP」

    这周聊聊「NTP」. 上次,聊了「时区」,也就是时间相关的话题. NTP是「Network Time Protocol」的简称,是为了将网络中计算机的时钟同步到正确时间的协议. PC内部的时钟是相当不 ...

  7. java 开发注意事项

    开发过程中的一些经验总结,不定时更新 1, 在开发接口的时候,尽量一个接口一个功能,不要多个功能共用一个接口,以免后期需求更改时修改接口困难, 使逻辑复杂

  8. GMM算法的matlab程序（初步）

    GMM算法的matlab程序 在https://www.cnblogs.com/kailugaji/p/9648508.html文章中已经介绍了GMM算法,现在用matlab程序实现它. 作者:凯鲁嘎 ...

  9. qianduan

    head.html <style type="text/css"> #header { height: 70px; line-height: 60px; backgro ...

  10. .Net环境下调用ProtoBuf

    一.什么是ProtoBuf protocolbuffer(以下简称PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.它是一种类似于xml.json等类似作用的交互格式.由于它是一种 ...