HTML&CSS基础-颜色的单位表示方法

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>颜色的单位表示方法</title>

        <style type="text/css">

            /**

             *     颜色单位:

             *         在CSS可以直接使用颜色的单词来表示不同的颜色，如:

             *             红色:red

             *             蓝色:blue

             *             绿色:green

             *             黄色:yellow

             *             深粉红色:deeppink

             *             ......

             *

             *         也可以使用RGB值来表示不同的颜色:

             *             所谓的RGB值指的是通过Red，Green，Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色。

             *             语法:

             *                 rgb(红色的浓度，绿色的浓度，蓝色的浓度);

             *                     颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有。

             *                     浓度也可以采用一个百分数来表述，需要一个0%-100%之间的数字，使用百分数最终也会转换为0-255这之间的数，0%表示0，100%表示255.

             *

             *         也可以使用十六进制的rgb值来表示颜色:

             *             原理和上边的RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色，每一组表示一个颜色:

             *                 第一组表示红色的浓度，范围00-ff

             *                 第二组表示绿色的浓度，范围00-ff

             *                 第三组表示蓝色的浓度，范围00-ff

             *

             *             语法:

             *                 #红色绿色蓝色

             *                     00表示没有，相当于rgb中的0

             *                     ff表示最大，相当于rgb中的255

             *                 红色:

             *                     #ff0000,像这样两位两位重复的颜色可以简写为f00

             *                 绿色:

             *                     #00ff00,像这样两位两位重复的颜色可以简写为0f0

             *                 蓝色:

             *                     #0000ff，像这样两位两位重复的颜色可以简写为00f

             *

             *                 注意:

             *                     上面可以简写是因为两位两位重复的颜色，类似于"aabbcd"这样的就没法简写，因为最后一组并不重复哟~

             */

            .hello {

                width: 200px;

                height: 200px;

                background-color: rgb(172, 30, 1);

            }

            .world {

                width: 200px;

                height: 200px;

                background-color: rgb(100%, 100%, 50%);

            }

            .good{

                width: 200px;

                height: 200px;

                background-color: #abc;

            }

        </style>

    </head>

    <body>

        <div class="hello"></div>

        <div class="world"></div>

        <div class="good"></div>

    </body>

</html>

二.浏览器打开以上代码渲染结果

 

数据库入门理论知识介绍以及编译安装MySql的更多相关文章

  1. ElasticSearch实战系列四: ElasticSearch理论知识介绍

    前言 在前几篇关于ElasticSearch的文章中,简单的讲了下有关ElasticSearch的一些使用,这篇文章讲一下有关 ElasticSearch的一些理论知识以及自己的一些见解. 虽然本人是 ...

  2. 源码编译安装 MySQL 5.5.x 实践

    1.安装cmakeMySQL从5.5版本开始,通过./configure进行编译配置方式已经被取消,取而代之的是cmake工具.因此,我们首先要在系统中源码编译安装cmake工具. # wget ht ...

  3. CentOS 编译安装 mysql

    1.前期准备 1.1 环境说明: 操作系统: CentOS release 6.4 (Final) [查看命令 cat /etc/redhat-release ] mysql : mysql-5.6. ...

  4. Linux CentOS6.5下编译安装MySQL 5.6.16【给力详细教程】

    一.编译安装MySQL前的准备工作 安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-devel perl 安装cmake,从http://www.cmake ...

  5. Linux编译安装Mysql步骤

    一. Centos 用 wget 下载需要的软件,保存到目录/home/zwl/MySql/下 wget http://dev.mysql.com/get/Downloads/MySQL-5.5/my ...

  6. CentOS下编译安装MySQL 5.6.21

    一.编译安装MySQL前的准备工作 安装编译源码所需的工具和库 yum install gcc gcc-c++ ncurses-devel perl 安装cmake:http://www.cnblog ...

  7. 源码编译安装 MySQL 5.5.x 实践(转)

    1.安装cmakeMySQL从5.5版本开始,通过./configure进行编译配置方式已经被取消,取而代之的是cmake工具.因此,我们首先要在系统中源码编译安装cmake工具. # wget ht ...

  8. Linux 环境编译安装mysql (源码安装包)

    标注: Linux需要先配置网络yum源,确定yum能在线安装软件包,方便测试过程中安装部分依赖包.配置163网易提示的网络yum源参考博客  http://www.cnblogs.com/zoulo ...

  9. Linux(CentOS6.5)下编译安装MySQL Community Server 5.7.12

      组件 官方网站 直接下载地址 备注 mysql http://dev.mysql.com/downloads/mysql/ http://mirrors.sohu.com/mysql/MySQL- ...

随机推荐

  1. layui使用记录

    一.layui表格渲染 如果后台返回的实力类里面包含另一个实体类,那么需要使用如下方式取出相应的值 var tableResult = table.render({ elem: '#' + Serve ...

  2. github更新，发布地址，燃尽图，总结

    github地址:https://github.com/Lingchaoyang 网盘发布地址:http://pan.baidu.com/s/1qXgHiyC 燃尽图: 团队得分(100分制): 杨灵 ...

  3. 【转】单片机HEX文件完全解读

    转:http://www.eefocus.com/craftor/blog/10-07/193051_8ce59.html Craftor原创,首发于与非网,转载请保留此处. HEX文件,是Intel ...

  4. jQuery（六）

    $下常用方法 $().xxx:只能给jq对象用 $.xxx不仅可以给jq用也可以给原生js用,叫做工具方法 $.type() <script> $(function(){ var a= n ...

  5. Jmeter常见问题及场景应用

    Jmeter作为工具来讲,已经是一个相对比较牛掰的工具,除了它能够支持那么多协议以及方法之外,更在与它的前置处理以及后置处理.同步监控的人性化.当然,所有的工具.框架都是作为业务的支撑,如果不能满足我 ...

  6. Jfrog Artifactory jenkins 流水线使用docker的方式培训[暂未成功]

    1. 创建jenkins的流水线 2. 创建artifactory的镜像仓库 3. 创建generic的仓库上传需要的 war包还有tar包. 4. 修改pipeline的 脚本 主要修改的地方. 修 ...

  7. vue render function & dataset

    vue render function & dataset https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In ...

  8. python之Oracle操作(cx_Oracle)

    python可通过使用cx_Oracle模块对Oracle数据库进行操作.首先,需要下载cx_Oracle模块,下载地址:https://pypi.python.org/pypi/cx_Oracle/ ...

  9. BZOJ1791[Ioi2008]Island 岛屿 ——基环森林直径和+单调队列优化DP+树形DP

    题目描述 你将要游览一个有N个岛屿的公园.从每一个岛i出发,只建造一座桥.桥的长度以Li表示.公园内总共有N座桥.尽管每座桥由一个岛连到另一个岛,但每座桥均可以双向行走.同时,每一对这样的岛屿,都有一 ...

  10. 【Linux】Centos6.8下一键安装Lamp环境

    [下载地址] 以下三种都是快捷安装环境的工具,都提供相应的脚本,原理都相同,一个会了其他的也就都会了,我用的比较多的会是lnmp和oneinstack,最近在用的都是oneinstack,挺好用的. ...