web前端入门到实战:css中颜色

颜色

如果我们相给页面设置颜色可以采用多种方法进行设置:

一、命名颜色

假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了,就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。

命名颜色的关键字有限,css定义了17个标准色:浅绿色,黑色,蓝色,紫红色,灰色,橙色,绿色,石灰,栗色,海军,橄榄,紫,红,银,蓝绿色,白色和黄色。

有的时候也许使用其他颜色值,并不在标准颜色之内的颜色也可以使用,它之所以能起作用,原因是大多数的web浏览器能识别多达140个颜色,包括前面说的17种颜色。

(二)、RGB指定颜色

计算机通过组合不同的红色、蓝色、绿色分量来创造颜色。这种组合通常被称为RGB颜色。可以直接访问这些颜色,通过调整红、绿、蓝分量来最大限度的控制颜色。所有浏览器都支持 RGB 颜色值。

RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是整数三元组表示法:参数介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

百分数记法:分别指定白色和黑色,值将指定为:

rgb(100%,100%,100%)
rgb(0%,0%,0%)

整数三元组记法,相同的颜色表示如下

rgb(255,255,255)
rgb(0,0,0)
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

在百分数记法中也可以使用分数,假设如果向指定某一颜色的红色分量为25.5%,绿色分量为40%,蓝色分量为98.2%,如果用户代理忽略小数点,就会把这些值取整为与之最接近的整数。当然整数取值法只能使用整数。如下所示:

h2{color:rgb(25.5%,40%,98.2%)} 转换为 h2{color:rgb(26%,40%,98%)}

无论哪种记法,如果值落在可取范围之外,都会变动到最接近的范围边界。当一个值大于100%或是小于0%都会默认的调整到100%或0%(这是可取的最大和最小值)

h2{color:rgb(200%,-40%,0%)} 转换为 h2{color:rgb(100%,0%,0%)}

h2{color:rgb(42,500,-20)} 转换为h2{color:rgb(42,255,0)}

假设有一个颜色为rgb(25%,37.5%,60%),将其转换为整数记法,百分数乘以255,就会得到63.75、95.625、153。再将这些值取整为最接近的整数,记得到了rgb(64,96,153)。

(三)、十六进制RGB颜色

所有浏览器都支持十六进制颜色值。

十六进制颜色是这样规定的:#RRGGBB,其中的 RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。大写小写都可以。

如果组成十六进制的三组数各自都是成对的,还允许一种简写方法,这种写法一般都是#RGB

如 h2{color:#FFF}=h2{color:#FFFFFF}

浏览器会取一位,并将其复制成两位。因此#FF0000等价于#F00。

(四)、RGBA颜色值

RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha)。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

(五)、HSL 颜色

HSL 颜色值得到以下浏览器的支持:IE9+、Firefox、Chrome、Safari 以及 Opera 10+。

HSL 指的是 hue(色调)、saturation(饱和度)、lightness(亮度) - 表示颜色柱面坐标表示法。

HSL 颜色值是这样规定的:hsl(hue, saturation, lightness)。

Hue 是色盘上的度数(从 0 到 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色,而 100% 是全彩。Lightness 同样是百分比值;0% 是黑色,100% 是白色。

(六)、HSLA 颜色

HSLA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。

HSLA 颜色值是 HSL 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

HSLA 颜色值是这样规定的:hsla(hue, saturation, lightness, alpha),其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0(完全透明)与 1.0(完全不透明)的数字。

(七)、web安全颜色

web安全颜色是指,在256色计算机系统上可以避免抖动的颜色,保证网页颜色可以正确显示。web安全颜色可以表示为RGB值20%和51(相应的十六进制值为33)的倍数。另外,0%或0也是一个安全值。

  • 如果使用RGB百分数,要让所有这三个分量要么是0%,要么是能被20整除的数值,例如rgb(40%,100%,80%)或rgb(60%,0%,0%)。
  • 如果使用0~255范围的RGB值,则分量要么是0,要么是能被51整除的数,如rgb(0,204,153)或rgb(255,0,102)
  • 采用十六进制记法,使用值为00、33、66、99、CC和FF的三元组都认为是Web安全的。这种例子还有#669933、#00CC66和#FF00FF。这说明,web安全颜色的简写十六进制值是0、3、6、9、C和F。因此#693、#0C6、#F0F都是web安全颜色的例子。

原文地址:https://blog.51cto.com/14592820/2464785

时间: 2024-08-28 19:25:37

web前端入门到实战:css中颜色的相关文章

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

web前端入门到实战:CSS中的cursor属性

css中的cursor这个属性是用来设置光标形状的. 这个属性定义了鼠标指针放在一个元素边界范围内时所用的光标的形状. 默认值:auto 继承性:yes 出现版本:css2 JavaScript语法:object.style.cursor = 'pointer' 可以设置的值: | 值 | 描述 || url | 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. 浏览器支持情况: IE.FireFox.Chrome.Safari.

web前端入门到实战:CSS阴影效果的比较 drop-Shadow与box-Shadow

drop-shadow与box-shadow都是阴影效果(光晕效果)的css属性,二者最大的不同点在于:box-shadow只能制作矩形的阴影,而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影.底下是二个css属性的用法: .drop-shadow { -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7)); filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.

web前端入门到实战:css样式初始化

为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决. 1.最耗资源的,最简单的 * { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例(综合) body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button form,fieldset,input,textarea,p

web前端入门到实战:HTML、CSS、JavaScript分别实现什么功能?

学习Web前端开发基础技术需要掌握:HTML.CSS.JavaScript,那么这三个都是分别实现什么功能的呢?下面和小编一起来看看吧! 一.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 二.CSS样式是表现 就像网页的外衣,比如:标题字体.颜色变化.为标题加入背景图片.边框等. 所有这些用来改变内容外观的东西称之为表现. 三.JavaScript是用来实现网页上的特效效果 比如:鼠标滑过弹出下拉菜单.鼠标滑过表格的背景颜色改变.焦点新

web前端入门到实战:html的组成部分、DIV+CSS布局

HTML的组成部分 dtd部分:文档类型说明,声明版本.标准 header部分:给机器看的 body部分:给人看的 CSS控制div显示 <div> 是一个块级元素.这意味着它的内容自动地开始一个新行.实际上,换行是 <div> 固有的唯一格式表现.可以通过 <div> 的 class 或 id 应用额外的样式. 如下代码是CSS通过id设置每个div的宽高和背景色 <!doctype html> <html lang="en"&g

web前端入门到实战:CSS的文本格式化样式总汇

长度单位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 300px; height: 300px; background-color: red; } .box1{ font-size: 20px; /*em数值根据当前元

web前端入门到实战:编写CSS代码的8个策略,资深开发工程师总结

编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性. 我认为这主要是因为许多开发人员对组织CSS / HTML和JavaScript的策略缺乏深刻的理解. 在我和我们团队的观念中,编写可维护的前端代码非常重要.尽管我们有一些使用了多年的客户端,但要记住你永远不会是唯一一个工作于应用程序的人.仅仅因为你的一次性元素和配置对你有意义,并不意味着它们对下一个可能继承应用程序的人有意义. 为了防止这篇文章太长

web前端入门到实战:CSS实现平行四边形布局效果

如何实现下图所示的平行四边形布局效果? 一.skewX的局限 一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而实现平行四边形效果 HTML如下: <div class="input-x"> <input class="input" placeholder="您的姓名"> </div> CSS如下,形状的关键就是下面红色高亮

web前端入门到实战:CSS:scroll-snap滚动事件停止及元素位置检测

一.Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置.类似幻灯片广告效果就可以纯CSS实现. 而且CSS Scroll Snap的兼容性非常好,移动端几乎可以放心使用. 二.源自实际项目的scroll-snap场景 今天下午在实现一个功能需求的时候,正好遇到一个场景非常适合使用Scroll Snap来实现,滑动依次显示人物角色.于是就大胆使用了下,哇,好棒,无需