`
123fly
  • 浏览: 12069 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

css合法颜色值

    博客分类:
  • css
阅读更多

CSS 颜色

可以用以下方法来规定 CSS 中的颜色:

1.十六进制色

2.RGB 颜色

3.RGBA 颜色

4.HSL 颜色

5.HSLA 颜色

6.预定义/跨浏览器颜色名

1.十六进制颜色

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

 

p
{
background-color:#0000ff;
}

 2.RGB 颜色

 

所有浏览器都支持 RGB 颜色值。RGB 颜色值是这样规定的:rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100%)。

 

p
{
background-color:rgb(255,0,0);
}

 3.RGBA 颜色

RGBA 颜色值得到以下浏览器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。

p
{
background-color:rgba(255,0,0,0.5);
}

 4.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% 是白色。

p
{
background-color:hsl(120,65%,75%);
}

 5.HSLA颜色

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

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

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

p
{
background-color:hsla(120,65%,75%,0.3);
}

 

 

分享到:
评论

相关推荐

    CSS 合法颜色值

    CSS支持多种方式来指定颜色,包括十六进制颜色、RGB颜色、RGBA颜色、HSL色彩以及HSLA颜色,以及预定义的颜色名称。 **1. 十六进制颜色** 十六进制颜色是最常见的颜色表示方式,其格式为`#RRGGBB`,其中`RR`代表红色...

    CSS层叠样式表技术参考手册

    ### CSS层叠样式表技术参考手册知识点概览 #### 1. CSS基础教程 - **1.1 CSS教程** - **目标与价值**:通过本教程的学习,开发者能够掌握CSS的基本概念及其如何用于... - **颜色模型**:介绍CSS中常用的颜色模型如RGB...

    判断颜色是否合法的正则表达式(详解)

    3位的颜色值是为了遵循CSS的简写规则,例如`#abc`等同于`#aabbcc`。 在实际应用中,如果需要将颜色值转换为十进制并存储在数据库中,需要注意颜色值的长度。对于6位的颜色值,转换过程相对直接。但是,对于3位的...

    CSS图片下载器

    在网页设计中,CSS常用来控制页面元素的样式,包括字体、颜色、布局,以及图像的显示方式。为了实现美观的界面,CSS经常引用外部图片,例如背景图片、图标等。 在不使用特定工具的情况下,手动查找并下载这些图片...

    精通CSS(英语版)

    - 属性和值:CSS属性和相对应的值的使用,如color、font-size。 - 声明块:被花括号包围的一组CSS规则。 2. 布局技术: - 盒模型:理解元素的margin、border、padding和content的布局方式。 - 定位:静态、相对...

    Web前端开发基础:CSS控制表单.ppt

    这个属性接受任何合法的颜色值。 例:这条规则把元素的背景设置为灰色: p {background-color: gray;} 2、背景图像 background-image 属性为元素设置背景图像。background-image 属性的默认值是 none,表示背景上...

    CSS试题教学内容.docx

    float是一个CSS属性,它用来设置元素的浮动方式,但center不是float的合法值。 20. 外部样式表文件不能由style方法导入。 外部样式表文件可以由link或import方法导入,但不能由style方法导入。 21. 标签的对齐...

    CSS3中各种颜色属性的使用教程

    另外,如果颜色值超出0到255的范围,浏览器会自动调整到最接近的合法值。 接着,HSL(Hue, Saturation, Lightness)和HSLA(Hue, Saturation, Lightness, Alpha)是另一种颜色表示方式,更注重颜色的感觉和相对关系...

    WEB编程技术_css.dtd.xsd.xml及报告封面的xml编写

    CSS可以控制字体、颜色、布局、以及不同设备上的显示方式。通过引入外部CSS文件,开发者可以实现页面样式的一致性,并便于维护和更新。 接下来,DTD是一种定义XML文档结构的规则集,它声明了文档元素和属性,确保...

    DIV+CSS布局大全

    - **颜色值定义**:解释如何在CSS中定义颜色值。 - **字体设置**:讲解如何通过CSS控制字体。 - **选择器**:介绍各种CSS选择器,包括群选择器、派生选择器、id选择器和类别选择器。 - **链接样式**:说明如何使用...

    div和CSS大全

    - **颜色值**:使用十六进制或预定义的颜色名称来指定颜色。 - **定义字体**:通过`font-family`属性指定字体。 - **群选择器**:同时选择多个元素。 - **派生选择器**:选择具有特定关系的元素。 - **ID选择器**:...

    jQuery+CSS3实现仪表盘表单验证效果

    在表单验证中,我们通常会监听`blur`事件(当元素失去焦点时触发)或`change`事件(当元素内容改变时触发),来检查用户输入是否合法。 3. **DOM操作**:jQuery提供了简洁的方法来操作DOM,如`val()`获取或设置元素...

    CssSprite雪碧图制作工具

    - **生成CSS**:工具会自动生成对应的CSS选择器和背景定位值,确保每个图标都能正确显示。 - **调整布局**:如果需要,可以手动调整图标的位置和顺序。 - **下载资源**:保存雪碧图和CSS文件,用于网页中引用。 ...

    Div+css布局大全学习手册

    - **颜色值**:介绍如何使用十六进制、RGB、RGBA等方式定义颜色。 - **定义字体**:如使用`font-family`, `font-size`, `font-weight`等属性控制字体。 - **选择器类型**:群选择器、派生选择器、ID选择器、类别选择...

Global site tag (gtag.js) - Google Analytics