css可以处理16,777,216颜色,可以使用名字、rgb值或十六进制代码。
Example Source Code [www.52css.com]
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"。
蓝色背景,黄色文字:
Example Source Code [www.52css.com]
h1 {
color: yellow;
background-color: blue;
}
这些颜色可能比较粗糙,你可以使用另外的色度:
Example Source Code [www.52css.com]
body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
你可以看到h1已经变成黄色和蓝色。
color和background-color可以使用在绝大部分html元素,包括body。
发表评论
-
CSS教程17 CSS的优先级特性Specificity
2010-07-22 12:00 699如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规 ... -
CSS教程16 CSS的伪元素Pseudo Elements
2010-07-22 11:59 658伪元素吸附在选择上和pseudo classes伪类很像,像这 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 693At-rules分装不同的CSS规 ... -
CSS教程14 CSS网页布局Page Layout
2010-07-22 11:57 806使用CSS布局非常简单,如果你习惯使用tables布局,可能开 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 730操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程12 CSS的Background Images 背景图片
2010-07-22 11:56 916背景图片Background Images有许多属性可以操作。 ... -
CSS教程11 CSS的属性缩写
2010-07-22 11:55 632一些CSS属性允许使用一串值代替许多属性,值使用空格分开。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 589请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 427Grouping 分组 当许多选择器有同样属性时,可以使 ... -
CSS教程8 CSS的Class以及ID选择器
2010-07-22 11:52 634前面的学习我们仅仅使用HTML选择器(在HTML页面里为htm ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 689如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处 ... -
CSS教程6 CSS的Border边框
2010-07-22 11:48 592CSS Borders 边框 边框可以运用到body里的 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 593margin和padding用来隔开元素,margin是隔开元 ... -
CSS教程4 CSS的Text 文本
2010-07-22 11:44 686有一系列属性可以改变网页文字的大小和形状,概要如下: fon ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 700HTML有标签,CSS有选择器。选择器是给内部和外部样式里面的 ... -
CSS教程1CSS的应用
2010-07-22 11:37 653CSS教程 1、CSS的应用 一、In-line 行内 ...
相关推荐
全面了解CSS内置颜色(color)值全面了解CSS内置颜色(color)值
color-me-sass, css预处理器SASS的颜色库 ColorMeSass css预处理器Sass的颜色库。在这里有颜色,变量名称和文档的完整站点。用法###1. CSS Preprocessors无论我是还是 ,我都不打算详细介绍 css,Sass和 LESS 都很酷...
前端开源库-normalize-css-color规范化CSS颜色,将CSS颜色值的子集规范化为整数
ColorMe 可视化CSS颜色函数
css的颜色color的代码,制作网页很有用,便于查询
postcss颜色转换器插件可在它们之间转换HEX,RGB,HSL和关键字颜色(无需转换为关键字颜色格式)。 使用引擎盖下的。 支持Sass(SCSS)(需要或 )和CSS变量。安装$ npm install postcss-color-converter用法// ...
前端开源库-css-color-converterCSS颜色转换器,将CSS颜色从一种表示形式转换为另一种表示形式
postcss颜色功能 插件可将CSS颜色功能从“颜色模块级别4”规范的编辑器草案转换为更兼容CSS。 不推荐使用 :warning: color()更改为color-mod() 。 参见 。 有一个实现。 :warning: color-mod()已从删除。 安装 ...
文本的颜色 p strong{ color:black} /*权重为:1+1*/ strong.blue{ color:green;} /*权重为:1+10*/ .father strong{ color:yellow} /*权重为:10+1*/ p.father strong{ color:orange;} /*权重为:1+10+1*/ p.father ....
ColoeBlack是一个非常漂亮的Typra黑色主题,由NightYuxl经过了一点自定义,比如不同颜色的标题,行内代码高亮,漂亮的字体等。整个主题只有一个css文件,非常简单,你也可以再进行个性化的修改,不满足于Typora官方...
允许您遵循规范的过时版本(2019年11月5日)在CSS中使用gray()颜色函数。 :warning: gray()已从删除。 body { background-color : gray ( 100 ); color : gray ( 0 / 90 % ); } /* becomes */ body { ...
命名颜色 用于所有命名 CSS 颜色(bg、颜色、边框、svg 等)的实用程序类的 CSS 模块。安装npm install --save named-colors用法与 Rework/PostCSS 一起使用时效果很好(建议也将它与 uncss 一起使用): @import '...
}.top_UserLogin /* 顶部用户登录文字链接的CSS定义 */{color: #037FA8}/* ==top.asp中的CSS定义结束== *//* ==网页中部中的CSS定义开始== */.center_tdbgall /* 中部表格总背景颜色定义 */{background:#ffffff;...
CSS颜色css-color是CSS颜色模块级别4兼容CSS颜色值解析器。 其目标是解析CSS Color Module Level 4中定义的所有颜色值,并拒绝解析任何其他值。 这是为了确保与例如Web浏览器的完全一致性。 相比之下,大多数其他JS...
CSS颜色验证器 使用正则表达式进行CSS颜色验证 用法 在package.json中需要模块,如下所示: "css-color-validator" : "git://github.com/jnikles/css-color-validator.git#master" 它公开一个函数,返回true | ...
CSS颜色名称参考 提供基于SVG 1.0颜色关键字名称(http://www.w3.org/TR/SVG/types.html#ColorKeywords)的CSS颜色名称的参考。 您可以通过单击一个彩色图块将名称复制到剪贴板。 支持语言:English
引用所有可以按名称调用的css颜色的工具。 这个小工具可让您浏览所有具有名称值CSS颜色,然后只需单击圆形图块即可将其复制到剪贴板上。 支持语言:English (United States)
IE4+ 预命名颜色 如navajowhite goldenrod
HTML5 CSS3 Chart 多色的立体柱状图表插件附效果示例,可显示立体的柱状图表,可用不同的颜色标注不同的数据选项,可改变柱状图视图的大小,有大中小三种模式,一次可显示多组统计数据,单击右上角的选项可选择不同...