[爱分享第20期]美化帖子技巧之颜色、表格代码！

颜色
颜色值
颜色名
颜色十六进制
常用颜色及效果
渐变颜色代码
表格代码及效果

颜色

十六进制色

所有浏览器都支持十六进制颜色值。
十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
举例说，#0000ff 值显示为蓝色，这是因为蓝色成分被设置为最高值（ff），而其他成分被设置为 0。
实例：

Quote:

p
{
background-color:#0000ff;
}

RGB 颜色

所有浏览器都支持 RGB 颜色值。
RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
举例说，rgb(0,0,255) 值显示为蓝色，这是因为 blue 参数被设置为最高值（255），而其他被设置为 0。
同样地，下面的值定义了相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。
实例

Quote:

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

RGBA 颜色

RGBA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 – 它规定了对象的不透明度。
RGBA 颜色值是这样规定的：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
实例

Quote:

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

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% 是白色。
实例

Quote:

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

HSLA 颜色

HSLA 颜色
HSLA 颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
HSLA 颜色值是 HSL 颜色值的扩展，带有一个 alpha 通道 – 它规定了对象的不透明度。
HSLA 颜色值是这样规定的：hsla(hue, saturation, lightness, alpha)，其中的 alpha 参数定义不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
实例

Quote:

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

颜色值

CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0（十六进制 00）。最高值是 255（十六进制 FF）。
十六进制值使用三个双位数来编写，并以 # 符号开头。
 

1600 万种不同的颜色

从 0 到 255 种红绿蓝值能够组合出总共超过一千六百万种不同的颜色（根据 256 x 256 x 256 计算）。
大多数现代的显示器都能显示出至少 16384 种不同的颜色。
如果您查看下面的表格，您将看到红光从 0 到 255 变化后的结果，此时绿光和蓝光为零。
如需查看红光由 0 向 255 变化的完整颜色混合器列表，请点击下面的十六进制值或 rgb 值。
 
 

灰阶

灰色使用所有光源的等量的光线来显示。为了让您更方便地选择正确的灰色，我们已经为您编辑了一个灰色列表：
 
 

网络安全色

多年前，当电脑只支持最多 256 种颜色时，216 种“网络安全色”列表被定义为 Web 标准，并保留了 40 种固定的系统颜色。
现在，这些都不重要了，因为大多数电脑都能显示数百万种颜色，但是选择权依然在您手里。
这个 216 跨浏览器调色板被创建的目的是确保当计算机运行 256 色调色板时能够正确地显示颜色：
 
 

颜色名

所有浏览器都支持的颜色名

HTML 和 CSS 颜色规范中定义了 147 中颜色名（17 种标准颜色加 130 种其他颜色）。下面的表格中列出了所有这些颜色，以及它们的十六进制值。
提示：17 种标准色是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。
 
 
 
 
 
 
 

颜色十六进制

所有浏览器都支持的颜色名

常用颜色代码及效果

gold金
草榴社区&t66y.com

green绿色
草榴社区&t66y.com

渐变颜色代码

#000000
#CCFFFF
#99FFFF
#66FFFF
#33FFFF
#00FFFF
#000FCC
#CCFFCC
#99FFCC
#66FFCC
#33FFCC
#00FFCC
#000F99
#CCFF99
#99FF99
#66FF99
#33FF99
#00FF99
#000F66
#CCFF66
#99FF66
#66FF66
#33FF66
#00FF66
#000F33
#CCFF33
#99FF33
#66FF33
#33FF33
#00FF33
#000F00
#CCFF00
#99FF00
#66FF00
#33FF00
#00FF00
#FFCCFF
#CCCCFF
#99CCFF
#66CCFF
#33CCFF
#00CCFF
#FFCCCC
#CCCCCC
#99CCCC
#66CCCC
#33CCCC
#00CCCC
#FFCC99
#CCCC99
#99CC99
#66CC99
#33CC99
#00CC99
#FFCC66
#CCCC66
#99CC66
#66CC66
#33CC66
#00CC66
#FFCC33
#CCCC33
#99CC33
#66CC33
#33CC33
#00CC33
#FFCC00
#CCCC00
#99CC00
#66CC00
#33CC00
#00CC00
#FF99FF
#CC99FF
#9999FF
#6699FF
#3399FF
#0099FF
#FF99CC
#CC99CC
#9999CC
#6699CC
#3399CC
#0099CC
#FF9999
#CC9999
#999999
#669999
#339999
#009999
#FF9966
#CC9966
#999966
#669966
#339966
#009966
#FF9933
#CC9933
#999933
#669933
#339933
#009933
#FF9900
#CC9900
#999900
#669900
#339900
#009900
#FF66FF
#CC66FF
#9966FF
#6666FF
#3366FF
#0066FF
#FF66CC
#CC66CC
#9966CC
#6666CC
#3366CC
#0066CC
#FF6699
#CC6699
#996699
#666699
#336699
#006699
#FF6666
#CC6666
#996666
#666666
#336666
#006666
#FF6633
#CC6633
#996633
#666633
#336633
#006633
#FF6600
#CC6600
#996600
#666600
#336600
#006600
#FF33FF
#CC33FF
#9933FF
#6633FF
#3333FF
#0033FF
#FF33CC
#CC33CC
#9933CC
#6633CC
#3333CC
#0033CC
#FF3399
#CC3399
#993399
#663399
#333399
#003399
#FF3366
#CC3366
#993366
#663366
#333366
#003366
#FF3333
#CC3333
#993333
#663333
#333333
#003333
#FF3300
#CC3300
#993300
#663300
#333300
#003300
#FF00FF
#CC00FF
#9900FF
#6600FF
#3300FF
#0000FF
#FF00CC
#CC00CC
#9900CC
#6600CC
#3300CC
#0000CC
#FF0099
#CC0099
#990099
#660099
#330099
#000099
#FF0066
#CC0066
#990066
#660066
#330066
#000066
#FF0033
#CC0033
#990033
#660033
#330033
#000033
#FF0000
#CC0000
#990000
#660000
#330000
#000000

表格代码及效果

最基本的表格代码

複製代碼

[table][tr][td]草榴社区[/td][/tr][/table]

分代码注释

複製代碼

[table] 表頭開始
[tr] 行開始
[td] 表元頭
[/td] 表元尾
[/tr] 行結束
[/table] 表格結束

表格結束*注 表元：表格內具體數據，表格內所有數據都在[td]和[/td]中。

有頭必有尾，有行必有元。

示例

複製代碼

[table][tr][td]草榴社区
[/td][td]t66y.com

效果是一行兩列：

草榴社区
t66y.com

#通過重複使用[td]草榴社区[/td]可以把一行分為N列

複製代碼

[table][tr][td]草榴社区
[tr][td]草榴社区
[/table]

效果是一行兩列

草榴社区
草榴社区

#通過tr可以給表格分行，當然，每行必須含有表元標記。

表格寬度

表格寬度屬性附加在表格頭部，它可以是具體像素值也可以是百分比。系統允許的最大像素值寬度爲560，超過這個數值會自動被修改成98%。表格沒有高度的定義，表格的高度取決與表格中的內容（表元）。

示例：

1.

複製代碼

[table=500][tr][td]草榴社区[/td][/tr][/table]

效果：
草榴社区

注：表格寬度爲500像素

2.

複製代碼

[table=90%][tr][td]草榴社区[/td][/tr][/table]

效果：
草榴社区

注：表格寬度爲帖子內容框的90%，這個寬度會隨浏覽器分辨率變化而變化.

跨行與跨列

這兩個屬性定義在表元，第壹個數字代表所跨的列數，第二個數字代表所跨的行數。

示例

1.跨多列

複製代碼

[table][tr][td=3,1][align=center]草榴社区1[/align][/td][/tr][tr][td]草榴社区2[/td][td]草榴社区3[/td][td]草榴社区4[/td][/tr][/table]

效果是第一行跨三列：

草榴社区1

草榴社区2草榴社区3草榴社区4

2.跨多行

複製代碼

[table][tr][td=1,2]草榴社区1[/td][td]草榴社区2[/td][/tr][tr][td]草榴社区3[/td][/tr][/table]

效果是第一列跨兩行：
草榴社区1草榴社区2草榴社区3
表元寬度
表元寬度屬性附加在表元頭（[td]），必須和跨行跨列壹起使用，它可以是具體數值也可以是百分比。
表元沒有高度的定義。

示例

1.一行兩列，寬度分別爲20%和80%

複製代碼

[table=90%][tr][td=1,1,20%]草榴社区[/td][td=1,1,80%]草榴社区[/td][/tr][/table]

效果：
草榴社区草榴社区
2.兩行，第壹行跨兩列，第二列兩表元寬度分別爲150像素和400像素

複製代碼

[table=560][tr][td=2,1,560]草榴社区[/td][/tr][tr][td=1,1,150]草榴社区[/td][td=1,1,400]草榴社区[/td][/tr][/table]

效果：
草榴社区草榴社区草榴社区

感谢ID：恰同学少年
在做表格这个板块的时候，发现恰同学少年发过此贴，而且做得非常棒，引用在此，向原作者致敬！
感谢他的辛苦整理搜集，原帖地址：htm_data/7/1410/1254301.html

[ 此貼被Superlew在2015-01-28 20:55重新編輯 ]