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. postgre中类似oracle的sql%rowcount用法

    get diagnostics cnt := row_count; 现在有两个表tab1和tab2,两个表的格式相同,tab1中有1000条数据,tab2中0条数据 创建测试功能函数 create o ...

  2. 如何让PHP程序自动执行(后台)

    如何让php程序自动执行,这个就需要用到一个函数了: int ignore_user_abort ( [bool setting] )  定义和用法 ignore_user_abort() 函数设置与 ...

  3. 第六章 第一个Linux驱动程序： 统计单词个数

    一.编写Linux驱动程序的步骤 第1 步:建立Linux 驱动骨架(装载和卸载Linux 驱动) 骨架部分主要是Linux驱动的初始化和退出函数,代码如下: #include <linux/m ...

  4. 线程--继承Thread

    首先继承Thread类,然后重写Thread类的run()方法. Thread类的子类的对象调用start()方法,然后虚拟机就会调用该线程的run()方法. 当程序执行到start()方法时,线程启 ...

  5. Linux for Python教程01

    目录 1. Linux和操作系统 1.1. 什么是操作系统 1.2. 现有操作系统 1.3. Linux用户目录 1.4. Linux文件权限 2. Linux命令 2.1 文件管理相关 (1).ls ...

  6. 数据结构【查找】—平衡二叉树AVL

    /*自己看了半天也没看懂代码,下次再补充说明*/ 解释: 平衡二叉树(Self-Balancing Binary Search Tree 或Height-Balanced Binary Search ...

  7. Fetch请求后台的数据

    <style> #btn{ width: 50px; height: 50px; background-color: red; } #output{ width: 100px; heigh ...

  8. NGINX Load Balancing - HTTP Load Balancer

    This chapter describes how to use NGINX and NGINX Plus as a load balancer. Overview Load balancing a ...

  9. vue源码分析—模板解析

    福建省啦剑飞傻了剑飞撒到了看风景啊撒:

  10. Visual Studio Code 支持TensorFlow配置支持

    首先选择解释器 选择TensorFlow版本的conda版本 (当然你如果是通过python单独安装的TensorFlow也可以) 编辑器输入代码,进行测试 import tensorflow as ...