颜色与单位

    • 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. ARM过程调用标准——APCS

    APCS(ARM Procedure Call Standard) 1.ARM寄存器 ARM核支持9种工作模式——User/System/Hyp+/SVC/Abort/Undefined/Monito ...

  2. 使用System.ComponentModel.DataAnnotations验证字段数据正确性

    在.NET MVC 中,当页面提交model到Action的时候,自动填充ModelState.使用ModelState.IsValid进行方便快捷的数据验证,其验证也是调用命名空间System.Co ...

  3. 各种sort排序总结

    冒泡排序 选择排序 插入排序

  4. serial redirection

    int setOption(int fd,int nSpeed, int nBits, char mode,char nEvent, int nStop) { struct termios newti ...

  5. 怎么用jira写bug

    工具/原料 有网的电脑 方法/步骤1: 打开公司给的访问JIRA的链接,输入公司给你注册的账号和密码,点击登录 方法/步骤2: 点击JIRA主菜单上的“创建”,进入编辑bug界面 方法/步骤3: 项目 ...

  6. Unity ZTest 深度测试 & ZWrite 深度写入

    初学Shader,一开始对于渲染队列,ZTest 和 ZWrite一头雾水,经过多方查阅和实验,有了一些自己的理解.发此文与初学Shader的朋友分享,也算是为自己做个笔记.不对或不足之处欢迎指正. ...

  7. RabbitMQ使用（下）

    RabbitMQ从信息接收者角度可以看做三种模式,一对一,一对多(此一对多并不是发布订阅,而是每条信息只有一个接收者)和发布订阅.其中一对一是简单队列模式,一对多是Worker模式,而发布订阅包括发布 ...

  8. LeetCode算法题-Rectangle Overlap（Java实现）

    这是悦乐书的第325次更新,第348篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第195题(顺位题号是836).矩形表示为数组[x1,y1,x2,y2],其中(x1,y ...

  9. vim加脚本注释和文本加密

    vim /etc/vimrc 一.李导版本 autocmd BufNewFile *.py,*.cc,*.sh,*.java exec ":call SetTitle()" fun ...

  10. 【Qt开发】foreach用法

    If you just want to iterate over all the items in a container in order, you can use Qt's foreach key ...