颜色与单位

    • 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. leetcode-mid-backtracking-17. Letter Combinations of a Phone Number

    mycode  68.26% class Solution(object): def letterCombinations(self, digits): """ :typ ...

  2. Jest 里面需要注意的几个小细节

    概述 最近学 jest ,有一些细节记录下来,供以后开发时参考,相信对其他人也有用. import 提升 ES6 的 import 会自动提升到文档前面,所以下面的 import 会提升到前面. le ...

  3. vs2010 setup 打包 安装 BAT批处理实现自动安装软件功能

    CLS@echo offECHO.ECHO 安装 Diskeeper 7.0.428ECHO 请稍等...start /wait %systemdrive%\install\Applications\ ...

  4. Python学习之==>函数

    一.函数是什么: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需要调用函数名就行. 二.函数的作用: 1.简化代码 2.提高代码的复用性 3.代码可扩展 三.定义函数: ...

  5. 为终端配置proxy

    转自:https://my.oschina.net/u/818848/blog/677225?p=1 做开发的同学,应该都会经常接触终端,有些时候我们在终端会做一些网络操作,比如下载gradle包等, ...

  6. postman杂记

    接到测试任务,测试6个接口 rap2 上的接口比较多,整体导出内容太多 就一个接口一个接口的,复制到了postman上 rap2部分接口,开发没有备注简介内容:通知开发备注下 对接口的理解,还是靠功能 ...

  7. cocos2dx基础篇(20) 扩展动作CCGridAction

    [3.x]     (1)去掉"CC" [CCGridAction] CCGridAction有两个子类:CCGrid3DAction.CCTiledGrid3DAction.而我 ...

  8. 第六周总结&第四次实验报告

    实验四 类的继承 一. 实验目的 (1) 掌握类的继承方法: (2) 变量的继承和覆盖,方法的继承.重载和覆盖实现: 二. 实验内容 三.实验过程 实验代码 package Shiyan4; publ ...

  9. [转帖]SQL 里面的 case when 的用法

    SQL之case when then else end用法介绍 https://www.2cto.com/database/201804/740772.html 要培训了 看到有case when 之 ...

  10. springboot无法找到mapper😵

    今天在学习springboot的过程中遇到mapper无法找到的问题,困扰了很久