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. 报错org.apache.hadoop.mapreduce.lib.input.FileSplit cannot be cast to org.apache.hadoop.mapred.FileSplit

    报错 java.lang.Exception: java.lang.ClassCastException: org.apache.hadoop.mapreduce.lib.input.FileSpli ...

  2. OAF--基础

    OAF是WEB界面,FORM是由JDK将FORM里面的东西插入到HTML UI里的: OAF由 Oracle Business Components for JAVA(BC4J)框架作为其模型部分,完 ...

  3. JS 代码中到底加不加分号

    背景 在写自动执行函数时 vm.$watch('datas', function() { console.log(vm.datas); }) (function () { console.log('t ...

  4. docker往阿里云推镜像和打包镜像

    向仓库推镜像 1. 登录到阿里云docker镜像站点,然后创建仓库. 2.要按照阿里云官方给定的仓库名称来使用,所以我们一般都要继续给准备要上传的镜像二次添加标签,如下所示: 3.在终端登录阿里云站点 ...

  5. Welcom to Swift

    1.第一个程序 import Foundation println(“hello world”) 2.常用数据类型 int/UInt/Double/Float/Bool/String/Array/Di ...

  6. HTTP1.0 、1.1

    网上有很多资料说明这个,但都很长的,觉得东西太多也记不住,就记点东西,权当笔记. HTTP 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一 ...

  7. npm方法

    1. 使用npm 下载全局包 npm install 包名字 -g 安装 npm uninstall 包名字 -g 卸载 2. 安装卸载本地的包 (在哪里执行命令就把包安装在哪个目录的node_mod ...

  8. UVA12569-Planning mobile robot on Tree (EASY Version)（BFS+状态压缩）

    Problem UVA12569-Planning mobile robot on Tree (EASY Version) Accept:138  Submit:686 Time Limit: 300 ...

  9. 静默安装Oracle12.2数据库

    实验环境: 操作系统:Redhat 6.4 64位 数  据 库:Oracle 12c R2   一. 安装前准备 1. 创建用户和组 [root@wjq ~]# groupadd -g 1000 o ...

  10. php实现斐波那契数列

    斐波那契数列: 1 1 2 3 5 8 13 21 34 55 … 概念: 前两个值都为1,该数列从第三位开始,每一位都是当前位前两位的和 规律公式为: Fn = F(n-1) + F(n+1) F: ...