颜色与单位

    • 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. lnmp源码搭建

      Nginx工作原理 这里需要结合Apache的工作,对PHP文件处理过程的区别 1:Nginx是通过php-fpm这个服务来处理php文件        2:Apache是通过libphp5.so ...

  2. sklearn—无监督最近邻

    无监督最近邻 NearestNeighbors (最近邻)实现了 unsupervised nearest neighbors learning(无监督的最近邻学习). 它为三种不同的最近邻算法提供统 ...

  3. MySql 使用递归函数时遇到的级联删除问题

    以下两段SQL的写法看似相同,结果效果却是不同的 写法A: DELETE OM_ORGANIZATION, OM_POSITION FROM OM_ORGANIZATION LEFT JOIN OM_ ...

  4. Python基本语法_文件操作_读写函数详解

    目录 目录 软件环境 file文件对象 open文件操作 读文件 read读取所有文件内容 readline获取一行内容 readlines读取所有文件内容 readreadlinereadlines ...

  5. shims-vue.d.ts 解析

    TypeScript的文档看起来比较让人匪夷所思 TS是从2012年就开始的项目,那时ES6的模块化还没有成为继定标准,所以今天来看TS中一些名词让人匪夷所思,其实都是历史遗留问题 比如namespa ...

  6. js监听当前页面再次加载

    document.addEventListener("visibilitychange", function () { if (!document.hidden) { //处于当前 ...

  7. HTML学习之==>CSS

    一.CSS选择器 id选择器 class选择器 标签选择器 标签层级选择器 class层级选择器 id层级选择器 id组合选择器 class组合选择器 属性选择器 <!DOCTYPE html& ...

  8. django的url的name参数的意义及view中reverse

    Templates的链接地址都是根据urlpatterns定义的地址,拼凑成地址字符串,很难看,而且Templates里拼凑成的地址,随着页面的增加而不断增加,一旦在urlpatterns里的某个地址 ...

  9. laravel 5.6 使用RabbitMQ作为消息中间件

    1.Composer安装laravel-queue-rabbitmqcomposer require vladimir-yuldashev/laravel-queue-rabbitmq2.在confi ...

  10. Pytorch搭建卷积神经网络用于MNIST分类

    import torch from torch.utils.data import DataLoader from torchvision import datasets from torchvisi ...