`
Virgo_S
  • 浏览: 1151178 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

3、CSS的color颜色

    博客分类:
  • CSS
阅读更多
css可以处理16,777,216颜色,可以使用名字、rgb值或十六进制代码。
red红色
等同于
rgb(255,0,0)
等同于
rgb(100%,0%,0%)
等同于
#ff0000
等同于
#f00

有17个预先确定的颜色,它们是:
  aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
  olive, orange, purple, red, silver, teal, white, and yellow.
  transparent 也是一个正确的值。

  rgb的三个值都是从0到255,0是最低级,255是最高级,这些值同样可以是百分比。

  我们通常使用10进制即0-9,但hexadecimal使用16进制,即0到f。

  十六进制三或六个数字长度前面带上#字符,三个长度是六个的压缩形式,比如#f00是ff0000的压缩,#c96是#cc9966。三位数很好理解,像rgb,第一个是红色,第二个是绿色,第三个蓝色。但六位数给于更多的颜色控制。

color和background-color

  颜色可以使用color和background-color,是美国英语中"color"不是"colour"。
  蓝色背景,黄色文字:
h1 {
    color: yellow;
    background-color: blue;
}

这些颜色可能比较粗糙,你可以使用另外的色度:
body {
    font-size: 0.8em;
    color: navy;
}
h1 {
    color: #ffc;
    background-color: #009;
}

你可以看到h1已经变成黄色和蓝色。
color和background-color可以使用在绝大部分html元素,包括body。

分享到:
评论

相关推荐

    全面了解CSS内置颜色(color)值

    在实际应用中,你可以将这些颜色值应用于CSS中的`color`和`background-color`属性,来改变元素的文本颜色和背景颜色。例如: ```css h1 { color: yellow; /* 文本颜色为黄色 */ background-color: blue; /* 背景...

    CSS背景颜色例子

    CSS3引入了`background-blend-mode`属性,允许你控制不同背景颜色或图像之间的混合效果。例如: ```css div { background-color: red; background-image: linear-gradient(blue, green); background-blend-mode:...

    css+html+css颜色对照表

    颜色混合(color blending)也是CSS2.0的一个亮点,允许元素之间进行颜色的混合处理。 在实际应用中,CSS2.0的盒模型(Box Model)概念对于布局至关重要。它定义了一个元素的总尺寸,包括边框(border)、内填充...

    postcss-color-function:PostCSS插件将W3C CSS颜色功能转换为更兼容CSS

    postcss颜色功能 插件可将CSS颜色功能从“颜色模块级别4”规范的编辑器草案转换为更兼容CSS。 不推荐使用 :warning: color()更改为color-mod() 。 参见 。 有一个实现。 :warning: color-mod()已从删除。 安装 ...

    css背景颜色透明背景图片切换效果

    在提供的压缩包文件中,可能包含了HTML(index2.html、index3.html、index.html)、CSS(css目录)、图片(images目录)和JavaScript(js目录)文件,用于实现上述的背景颜色透明和图片切换效果。通过分析这些文件,...

    css颜色代码大全

    CSS 颜色代码大全 CSS 颜色代码大全是指在 CSS 中使用的颜色代码大全,用于定义网页中的颜色样式。本大全收录了多种常用的颜色代码,包括基本颜色、暖色系、冷色系等,每种颜色代码都对应着一个十六进制代码,方便...

    HTML5 CSS3颜色选取器代码.zip

    CSS3则扩展了颜色的表示方式,除了传统的RGB、RGBA、HSL、HSLA,还引入了更直观的十六进制(#RRGGBB)和颜色关键词(如red、pink等)。此外,CSS3还支持透明度,使得颜色混合和层叠效果更加丰富。例如,我们可以这样...

    前端开源库-normalize-css-color

    3. **兼容性处理**:考虑到不同浏览器对颜色解析的差异,`normalize-css-color`会处理一些非标准的颜色表示,确保在所有主流浏览器中都能正常工作。 4. **API友好**:库提供了简洁的API接口,开发者可以通过简单的...

    swift-CSS3ColorsSwift提供一个包含CSS3颜色命名的UIColor扩展

    let crimsonColor = UIColor.css3Color(named: "crimson") ``` 这个库可能还提供了其他便利的方法,如根据十六进制颜色代码创建`UIColor`,或者允许用户自定义颜色名称和值的映射。这大大增强了Swift在处理颜色时的...

    css color theme

    3. 品牌一致性:如果你的网站代表某个品牌,颜色应与品牌的标识和形象一致。颜色能够强化品牌形象,因此选择品牌色作为主色调是很常见的做法。 4. 交互反馈:通过改变颜色来提示用户交互状态,如按钮的 hover 效果...

    css颜色搭配大全

    3. 单色调搭配:通过改变同一颜色的明度或饱和度来创建层次感,既保持一致,又能产生变化。 4. 分裂互补色搭配:选择一个颜色的互补色(色轮上相对的两种颜色)的邻色,如蓝色与橙黄和黄绿,平衡又富有活力。 5. ...

    CSS3红橙黄绿不同颜色按钮

    本主题聚焦于“CSS3红橙黄绿不同颜色按钮”的实现,旨在教你如何利用CSS3的特性创建四种不同颜色——红色、橙色、黄色和绿色的按钮,提升网页界面的视觉吸引力。 首先,我们需要理解CSS3的基本结构。一个CSS3样式...

    css颜色对照表

    ### CSS颜色对照表详解 #### 一、引言 在Web开发中,色彩的应用对于网站的整体视觉效果至关重要。CSS(层叠样式表)为开发者提供了丰富的颜色定义方式,包括十六进制颜色值、RGB/RGBA颜色值、HSL/HSLA颜色值以及...

    15种CSS3渐变颜色色板配色代码

    在CSS3中,渐变颜色色板是一种强大的设计工具,它允许开发者创建平滑过渡的颜色效果,从而为网站和应用程序增添视觉吸引力。本资源提供了15种不同的渐变颜色色板,利用CSS3的`gradient`属性实现。下面将详细阐述CSS3...

    CSS或HTML 颜色汇总

    - CSS中,`color`属性用于设置文本颜色,而`background-color`用于设置背景颜色。 - 使用`linear-gradient`和`radial-gradient`可以创建渐变效果。 - HTML5新增了`<canvas>`元素,允许通过JavaScript动态绘制颜色...

    6种CSS3平滑过渡的渐变背景颜色

    在本文中,我们将深入探讨如何使用CSS3来创建平滑过渡的渐变背景颜色效果,主要涉及CSS3的圆形渐变和线性渐变。这些技术不仅为网站设计增加了视觉吸引力,还能提升用户体验,使页面元素在状态变化时更加平滑自然。 ...

    前端开源库-css-color-converter

    **前端开源库-css-color-converter** 是一个专为前端开发者设计的工具,它允许开发者将CSS颜色值在不同的表示形式之间进行转换。这个库对于处理和理解颜色在不同上下文中的表现至关重要,尤其是在处理用户界面设计和...

    ColorMe可视化CSS颜色函数

    【ColorMe可视化CSS颜色函数】是一个专注于帮助开发者更直观地理解和使用CSS颜色函数的工具,由Tyler Gaw创建。这个项目采用JavaScript技术实现,主要服务于那些希望深入理解CSS颜色处理并提升设计感的前端开发者。...

    微信小程序colorUI组件库的通用css

    `icon.css` 和 `main.css` 是ColorUI组件库中的核心CSS文件,它们分别包含了图标样式和主要的样式规则。引入这两个文件到你的微信小程序项目中,可以为你的应用提供一套统一的视觉风格。 1. **icon.css**: 这个文件...

Global site tag (gtag.js) - Google Analytics