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. Linux内核学习期末总结（网课）

    标签(空格分隔): 20135321余佳源 余佳源(原创作品转载请注明出处) <Linux内核分析> MOOC课程http://mooc.study.163.com/course/USTC ...

  2. github第一次作业链接

    https://github.com/xuhuzi/test/blob/master/test1 https://github.com/xuhuzi/test/blob/master/test2 ht ...

  3. 嵌入式linux教程

    串口通信minicom $ sudo apt-get install minicom ///安装 # minicom –s //运行 //CTRL+A Z 弹出菜单       2.NFS网络文件配置 ...

  4. 11-Python3从入门到实战—基础之生成器和迭代器

    Python从入门到实战系列--目录 切片 Python提供切片(Slice)操作符用来获取列表.元组等数据中的部分元素:如,读取列表 list[m:n]:表示获取m-n区间的元素 list[m:n: ...

  5. shell脚本--continue、break

    shell中的continue和break和其他语言中的使用方法一模一样:continue用于跳过本次循环,break用于中断本层的循环 下面是使用例子: #!/bin/bash #文件名:test. ...

  6. [转帖]以Windows服务方式运行ASP.NET Core程序

    以Windows服务方式运行ASP.NET Core程序 原作者blog: https://www.cnblogs.com/guogangj/p/9198031.htmlaspnet的blog 需要持 ...

  7. GS环境里面 9999 常用密码的加密后的值

    1. Test6530 APTZ5s6vrw1dglqO/63osA== 2. aaaaaa zgnewZXGGoqcPGtNpXTSXQ== 3. cwpass 3Me34S0+zY4xEGUFtz ...

  8. centos7 搭建svn服务器

    1.安装svn服务器: yum install subversion 2.配置svn服务器: 建立svn版本库根目录及相关目录即svndata及密码权限命令svnpasswd: mkdir -p /a ...

  9. CENTOS7修改ip

    编辑网卡设置 vi /etc/sysconfig/network-scripts/ifcfg-ens33 编辑内容 vi /etc/sysconfig/network-scripts/ificg-en ...

  10. html DOM導航

    getElementByTagname()獲取所有相同標籤的節點列表,length表示節點的長度: lastchild表示最後一個子節點,firstchild表示第一個子節點,parentnode表示 ...