第四章 值和单位 之 WEB安全色

前言

第四章主要讲了网页开发中的 长度单位以及表示颜色的值,重点应该关注的是em和px的区别,但是感觉熟知这个知识点已经很久了,所以姑且先不去梳理,倒是这章提到的WEB安全色有点吸引眼球,很久以前就见过这个概念,一直没去搞懂,所以今天就来粗浅的研究研究!

一.什么是WEB安全色

所谓"WEB安全"颜色是指,在256色计算机系统上总能避免抖动的颜色。

WEB安全色可以表示为RGB值的20% ,51的倍数(十六进制表示为33)。

采用十六进制记法,使用值00,33,66,99,CC,FF 的三元组都认为是WEB安全的!

 概念说的很清楚,采用十六进制表示颜色时,由00,33,66,99,CC,FF中的任意3个元素组成的颜色都是WEB安全,使用RGB表示时,转换成对应的 十机制 或 相对于 255的百分比即可。

二.存在WEB安全色的原因

   WEB安全色的"安全"和网页的 安全、免授恶意攻击 并没有半毛钱关系,这里的”安全“二字是指,某个颜色在页面上显示的效果是稳定的,一致的,基本 不受操作系统或客户端代理的不同而导致效果的不同!

   不同的平台(Mac、PC等)有不同的调色板,不同的浏览器也有自己的调色板。这就意味着对于一幅图,显示在Mac上的Web浏览器中的图像,与它在PC上相同浏览器中显示的效果可能差别很大。

选择特定的颜色时,浏览器会尽量使用本身所用的调色板中最接近的颜色。如果浏览器中没有所选的颜色,就会通过抖动或者混合自身的颜色来尝试重新产生该颜色。

  WEB安全色产生的原因正是为了解决同一颜色在不同平台绘制时产生的差异,通过00、33、66、99、CC和FF组成的颜色在所有浏览器中都能找到类似的颜色,因此这些颜色可以”安全“的应用于所有的Web应用中,而不需担心不同应用程序之间的产生色彩差异!

WEB 安全色 有 28 - 40  = 216 种(也可以这么算 6*6*6),减去的那40种,是因为那40种颜色在Macintosh和Windows里显示的效果不一样,所以作为系统的保留颜色,而不作为安全色。

可以在这里看看216种web 安全色:http://www.bootcss.com/p/websafecolors/

三.使用场景和必要

WEB安全色的概念挺好的,解决不同平台上的差异,但是这似乎也限制了开发人员所能使用的色彩的总数。在网上查询呢下大家的看法,支持使用WEB安全色 和 认为可以忽略 的人都挺多的。

认为可以忽略的原因是:

  • 现在大多数常用的操作系统显示的颜色数已经远远大于256种,可以不必局限在网页安全色的范围内

认为有必要的原因是:

  • 并不是所有的操作系统都能显示大于256种的颜色。
  • 不同的显示器在颜色的显示上还存在偏差,也可能是不同的显示器的颜色校准没有做好,也可能收观看角度、光环境的影响等等
  • 应该避免一切的不安全因素,打造更加专业的产品

  在使用上还是见人见智,还是得考虑实际的应用场景,毕竟每个企业对产品的要求和层次都不一样;

  在我个人看到,还是偏向于 使用WEB安全色,否则 WEB安全色的存在就没必要了,毕竟还存在一些 非主流的少数派,而尽量的遵循规则会减少很多麻烦!在将来几乎不存在这样的差异的时候再摒弃那些规则也不迟!

参考文献:

http://www.cnblogs.com/cocowool/archive/2012/12/15/2819910.html

http://baike.baidu.com/view/1529041.htm

时间: 2024-10-20 01:46:34

第四章 值和单位 之 WEB安全色的相关文章

《CSS权威指南(第三版)》---第四章 值和单位

本章主要讲解的是一些属性声明用的值: CSS中的值主要有数字,百分数,颜色, 1.颜色: rgb(100%,100%,100%)  OR  rgb(255,255,255) OR #FF0000 WEB安全颜色:指的是值是20%,51,0x33的倍数. 2.长度单位:单位有in cm  mm  pt pc 其中:1in = 2.54cm 1cm = 0.394in  1in = 72pt 1pc = 12pt 相对长度单位:em,ex,px 3.URL 4.关键字:none  inherit 除

web—第四章css&第五章

web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个css文件很多东西都可以在css里面而且修改的话非常方便,但是我还是有一些问题,就是老师叫我们做注册表的时候:年月日我真不相信是用下拉列表一个一个打上去的,我一开始想用时间轴但是太难啦,老师也没说. 随着时间过得很快国庆节也要来临了,这几天老师似乎有点急但是又怕教不好我们所以课程会有点紧张,但是我觉得还是很好跟上

Web前端新人笔记之CSS值和单位

数字 颜色——命名颜色 在Css2.1中规范定义了17个颜色名.包括html4.0中定义的16个颜色及外加一个橙色: <h1 style="color=aqua">aqua</h1> <h1 style="color=fuchsia">fuchsia</h1> <h1 style="color=lime">lime</h1> <h1 style="color=

web(六)css的基本语法、取值与单位

css语法包含如下部分: 选择器:用于选择需要添加样式的元素. 属性(property):样式的属性名称,例如color代表颜色. 取值与单位:属性对应的值以及单位. 语法规则:css的某些固定语法. 注释:用户对css的程序描述,不执行. css的基本语法规则 忽略大小写(但在定义类选择器时识别大小写),建议使用小写. 多重声明:使用多个属性以及取值同时渲染一组标签. 1 p { 2 text-align: center; 3 color: black; 4 font-family: aria

Python基础教程(第十四章 网络编程)

本文内容全部出自<Python基础教程>第二版,在此分享自己的学习之路. ______欢迎转载:http://www.cnblogs.com/Marlowes/p/5538341.html______ Created on Marlowes 本章将会给读者展示一些例子,这些例子会使用多种Python的方法编写一个将网络(比如因特网)作为重要组成部分的程序.Python是一个很强大的网络编程工具,这么说有很多原因,首先,Python内有很多针对常见网络协议的库,在库顶部可以获得抽象层,这样就可以

【读书笔记】第四章 瞬时响应:网站的高性能架构

第四章 瞬时响应:网站的高性能架构 4.1 网站性能测试 4.1.1 不同视角下的网站性能 1.用户角度:网站响应速度快还是慢2.开发人员:关注系统本身及其子系统的性能,响应时间,吞吐量,并发能力,稳定性等指标.3.运维人员:关注基础设施和资源利用率,比如贷款能力,服务器配置,数据中心网络架构等. 4.1.2 性能测试指标 1.响应时间 下表是一些常用的系统操作所需要的响应时间 2.并发数:系统能够同时处理的请求数目3.吞吐量:单位时间内,系统处理的请求数量(注意与并发数区分).TPS(每秒事务

第四章、数据库应用系统功能设计与实施

第四章.数据库应用系统功能设计与实施 了解软件体系结构及设计过程 了解DBMS总体设计 了解DBMS功能概要设计 了解DBMS功能详细设计 了解DBMS安全架构设计 了解DBMS实施的过程及内容 DBAS功能设计包括应用软件设中数据库事务设计和应用程序设计. 功能设计过程一般被划分为总体设计.概要设计和详细设计.而具体到数据库事务设计部分,又可以分成事务概要设计和事务详细设计. 完成系统设计工作之后,进入系统实现与部署阶段. 1.软件体系结构及设计过程 1.1.软件体系结构 软件体系结构又称为软

第四章 复合类型

第四章  复合类型 4.1  数组 4.1.1  数组简介 数组(array)是一种数据格式,能够存储多个同类型的值. 声明数组的通用格式如下: typeName arrayName[arraySize]; 表达式arraySize指定数组的元素数目,它只能是以下三种情况之一: 1)        整型常数(如10,枚举值也可以): 2)        const值 3)        常量表达式(如8 * sizeof(int)) 注意:使用数组要注意下标的正确.编译器不会检查使用的下标是否有

C Primer Plus (第四章总结)

1.定义字符串可以直接在头文件下定义,如: #include <stdio.h> #define hello  "hello world!" 2.sizeof() 和 strlen() sizeof运算符是以字节为单位给出数据的大小,strlen()是以字符为单位给出长度. <string.h>包含许多与字符串相关的函数的原型,包括strlen() sizeof运算符提供的数据比肉眼直观的要大多一位,因为他把用来标志字符串的不可见的空字符也计算在内. 定义常量最