颜色与单位

    • 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. 服务器端-W3Chool：服务器脚本教程

    ylbtech-服务器端-W3Chool:服务器脚本教程 1.返回顶部 1. 服务器脚本教程 从左侧的菜单选择你需要的教程! SQL SQL 是用于访问和处理数据库的标准的计算机语言. 在本教程中,您 ...

  2. 【漏洞复现】永恒之蓝 ms17-010 漏洞利用 攻击手法

    日期:2018-07-21 21:09:16 介绍:永恒之蓝利用的 ms17-010 漏洞,拿 Shell.查看文件.获取密码. 0x01.实验环境 攻击机 系统:macOS Sierra 10.12 ...

  3. WinFrom控件双向绑定

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. cocos2dx基础篇(8) 开关按钮CCControlSwitch

    [3.x] (1)去掉 “CC” (2)对象类 CCObject 改为 Ref (3)标签类 LabelTTF 改为 Label (4)CCControlEvent 改为强枚举 Control::Ev ...

  5. Linux 系统安装 python

    Centos 7 Centos 7 安装 python3 (不要卸载python2 因为yum 要用) https://phoenixnap.com/kb/how-to-install-python- ...

  6. js if 判断的使用

    !DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

  7. Android的Monkey和MonkeyRunner

    本文部分解释性语段摘自网络百科或其它BLOG,语句内容网络随处可见,也不知道谁是初始原创,便不再署名出处,如有雷同,还请见谅. Monkey 什么是Monkey Monkey是Android中的一个命 ...

  8. 在搭建Maven项目时导入elasticsearch架包时遇到的问题

    <!-- 使用elasticsearch 需要导入两个包,从网上复制的可能因为有特殊字符报 cvc-complex-type.2.3: Element 'dependency' cannot h ...

  9. java基础笔记）（5）

    xml文件:树形存储格式:通过相同的xml文件实现不同的软件.不同的操作系统.不同的平台之间的信息通讯: 声明xml文件: <?xml version="1.0" encod ...

  10. 洛谷 P5663 加工零件 & [NOIP2019普及组] （奇偶最短路）

    传送门 解题思路 很容易想到用最短路来解决这一道问题(题解法),因为两个点之间可以互相无限走,所以如果到某个点的最短路是x,那么x+2,x+4也一定能够达到. 但是如何保证这是正确的呢?比如说到某个点 ...