CSS教程:网页颜色的几种表示

2016-02-19 23:39 7 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)    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,第一个是红色,第二个是绿色,第三个蓝色。但六位数给于更多的颜色控制。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

  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。

来源:http://www.tulaoshi.com/n/20160219/1630334.html

延伸阅读
标签: Web开发
译自:Playing Around with CSS3 Colors 中文:玩转CSS3色彩 传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。 CSS3 带来了一些新的处理颜色的方法,比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是,现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器...
标签: excel
Excel制作颜色表示负值图标   如图所示为某城市的月平均气温数据,需要用其制作一个条形图。 Office教程 Excel制作颜色表示负值图标 1、选择数据区域中的某个单元格,在功能区中选择插入选项卡,在图表组中单击条形图→簇状条形图。 2、双击图表中的数据系列,弹出设置数据系列格式对话框,选择填充。在右侧...
标签: Web开发
通过上一章的学习,读者了解到了CSS强大的表现控制功能,特别是在布局方面有很大的优势。相对于代码条理混乱、样式杂糅在结构中的表格布局,CSS将带来全新的布局方法,让网页设计师更轻松、更自由。本章通过多个示例展示CSS布局网页的方法,并对CSS的盒模型作详细阐述。相信读者在深入理解盒模型后,布局网页、定位CSS网页元素将更加自如。 ...
标签: Web开发
CSS功能的强大在webjx.com中早已经展现很多,而有关CSS基本的排版控制虽然已有详细的使用说明和参考教程,但还有许多丰富的CSS排版能力,是很少能查到的。今天的这些实例,为您提供了很多想象和拓展的空间。 h3.reflect_1 { color: #333333; border-bottom: 6px solid #DDDDDD; line-height: .2em; margin: 0; padding:0 0 0 10px; font-si...
标签: Web开发
在div+css布局中,一般都这样来整体构架的: div id="header"/div div id="center"/div div id="footer"/div 而对于header部分,肯定要显示网站标题,除了显示网站标题外,还可能要显示其他比较重要的对象,比如网站的导航栏: div id="header" div id="title"这里是网站的标题/div div...

经验教程

623

收藏

68
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部