颜色与单位

    • Web安全色有216中其中色彩有210中,非色彩6中

前景色与背景色

  • 前景色就是设置字体的颜色
  • 背景色就是为指定元素设置背景色 - 浏览器默认背景色的颜色为透明色

颜色的命名

1.使用单词方式定义颜色 - 目前主流浏览器识别147种预定义颜色

  • 问题:可选的颜色数量有限
  • 不同浏览器中存在色差问题

2.使用RGB方式定义颜色 - 称为三原色(就是不能再分解的三种基本颜色)

  • RGB - red(红色)、green(绿色)、blue(蓝色)
  • 使用方法:
  • 1.函数式RGB颜色 - rgb(红色, 绿色, 蓝色)
  • 每个颜色的值范围 - 0 ~ 255
  • 2.十六进制RGB颜色 - #红色绿色蓝色
  • 每个颜色具有两位
  • 每个颜色的值范围 - 00 ~ ff
  • 数字是 - 0 ~ 9 字母是 - a ~ f
  • 如果每个颜色的两位相同的话则可以省略其中一个

示例代码:

<style>

        h1{

            color: rgb(0,154,192);

            background-color: #00ffff;

        }

    </style>

</head>

<body>

<h1>一花一世界</h1>

</body>

透明度

  • 透明度 - 默认值为1.0 (完全不透明)
  • 取值范围是 - 0 ~ 1.0
  • 语法 - opacity: 0.5;
  • 设置透明度还有第二种方式:
  • rgba() - 其中a表示透明度

示例代码:

/* 以下是透明度的两种用法 */

opacity: 0.5;

background-color: rgba(223,0,220,0.5);

单位

  • 单位分为相对值和绝对值
  • 像素值(px) - 与电脑分辨率有关分辨率越大单位像素值就相对越小

示例代码:

    <style>

        div{

            /* 使用百分值是相对于父级元素的 */

            width: 120%;

            height: 200px;

            background-color: #cccccc;

        }

    </style>

</head>

<body>

<div></div>

</body>

图片分析:

HTML与CSS中的颜色与单位个人分享的更多相关文章

  1. CSS中的颜色问题

    css颜色: CSS 颜色 颜色是通过对红.绿和蓝光的组合来显示的 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十 ...

  2. 在 CSS 中表示颜色的hex code方法和rgb方法

    hexadecimal code(十六进制编码),简写为 hex code. 我们通常使用 decimals,也就是十进制数字,它对每一位数字使用符号0到9来表示.Hexadecimals (或 he ...

  3. css中的单位和css中的颜色表示方法

    css中颜色的表示方式: 图片来源http://www.w3school.com.cn

  4. 3.css中的颜色

    css中颜色的设置形式主要有三种方式:颜色名称.十六进制代码和十进制代码. 在古老的 HTML4 时,颜色名称只有 16 种. 颜色名称 十六进制代码 十进制代码 含义  black  #000000 ...

  5. CSS中常用的字体单位：px、em、rem和%的区别

    在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: ...

  6. CSS中表示大小的单位

    以下是DIVCSS5为大家总结网页中常见html单位介绍,在css+div布局中长度单位介绍篇. 其实css中的长度单位一共有8个,分别是px,em,pt,ex,pc,in,mm,cm: px:像素( ...

  7. CSS中的颜色、长度、角度、时间

    一.颜色的表示方法 颜色是通过对红.绿和蓝光的组合来显示的. 1.颜色名 1 <!DOCTYPE html> 2 <html lang="en"> 3 &l ...

  8. CSS中强悍的相对单位之em(em-and-elastic-layouts)学习小记

    使用相对单位em注意点 1.浏览器默认字体是16px,即1em = 16px,根元素设置如下 html{ font-size: 100%; /* WinIE text resize correctio ...

  9. css中的颜色

    我常用的是win10里面的自带的3D画图工具里面的颜色表 CSS 设置颜色的几种方式: 1.颜色名 2.rgb值 3十六进制表示 4. HSL color values CSS3 adds numer ...

随机推荐

  1. 树状数组的理解（前缀和 and 差分）

    二更—— 有神仙反映数星星那个题外链炸了,我决定把图给你们粘一下,汉语翻译的话在一本通提高篇的树状数组那一章里有,同时也修改了一些汉语语法的错误 这段时间学了线段树组,当神仙们都在学kmp和hash的 ...

  2. 用JS实现快速排序

    "快速排序"的思想很简单,整个排序过程只需要三步: (1)在数据集之中,选择一个元素作为"基准"(pivot). (2)所有小于"基准"的元 ...

  3. FTP协议的两种工作模式简单解析！

    转载自百度百科:http://baike.baidu.com/link?url=KaBZmDM4IZ2v56MyoOnpjqKr0gADv_BRbgjlscYdyvh3-zDwINOHNPSi9Jlp ...

  4. MySQL 常用报错注入原理分析

    简介 这段时间学习SQL盲注中的报错注入,发现语句就是那么两句,但是一直不知道报错原因,所以看着别人的帖子学习一番,小本本记下来 (1) count() , rand() , group by 1.报 ...

  5. Selenium学习之==>18种定位方式的使用

    Selenium的定位方式一共有18种,单数8种,复数8种,最后两种是前面这16种的底层封装 单数形式8种 # 1.id定位 al = driver.find_element_by_id('i1') ...

  6. N个小时学SAP ABAP

    接触SAP已将近3年了,期间ABAP资料也看了不少,都是东看一点.西看一点的,也没做个笔记之类的,很明显效果不是很好.今天突然间领悟到了一点:不能再这样漫无目的的学习了,应该一本书一本书的看,否则就太 ...

  7. 【计算机视觉】HDR之tone mapping简介

    tone Mapping原是摄影学中的一个术语,因为打印相片所能表现的亮度范围不足以表现现实世界中的亮度域,而如果简单的将真实世界的整个亮度域线性压缩到照片所能表现的亮度域内,则会在明暗两端同时丢失很 ...

  8. Go语言入门篇-高级数据类型

    一.数组类型 二.切片类型 切片的更多操作方法 示例: 三.字典类型 四.通道类型 示例: 通道的更多种类 示例: 五.函数 示例: 六.结构体和方法 示例: 七.接口 八.指针 示例: mooc

  9. python+selenium模拟键盘输入

    from selenium.webdriver.common.keys import Keys #键盘导入类 --------------------------------------------- ...

  10. [Git] 023 Re：从零开始的 rebase 命令

    1. 开门见山 我新建了一个本地仓库,并进行了一些操作 当前情况 查看(直观但不明了) 上图的第二条 "log" 命令详见 [Git] 024 log 命令的补充 的 " ...