HTML5（12）——颜色

在HTML中，要使用颜色的话，需要用他们的名称来引用。HTML支持大概140种标准颜色，可以看链接： Color Names Supported by All Browsers 。

前面我们在 HTML5(5)——属性 一文中简要提到过style属性，而在 HTML5（8）——样式

一文中详细介绍了 style 的各个property的作用，这里我们用它来控制网页背景颜色，文本颜色等。语法大概如下：

同背景颜色一样设置，其中一些不同。style中属性不同，这里就是 color 属性，值就是颜色名称。

这里就使用 border property，而它的值包括粗细，填充，颜色，你可以使用自己想要的值。

在HTML中，颜色可以用几种类型的值来描述：RGB, HEX, HSL, RGBA 和HSLA。

rgb(red,green,blue) ，每一种参数都是颜色的密度值，范围在0-255之间。例如，rgb(0,0,0)是黑色，rgb(255,255,255)是白色。不同的灰度，是3种颜色相同的情况下的改变。

这是用16进制来表示RGB的三种颜色，也是三种值，范围都在00-ff之间。同样灰度也是用相同的三种颜色的值大小，来表示。

这种颜色的是通过色调，饱和度和亮度，来表示某种颜色。

hsl(hue, saturation, lightness) 。色调的值在0-360之间。0是红色，120是绿色，240是蓝色。饱和度是百分数表示的，0%表示灰色，100%是颜色本身。亮度也是百分数，0%是黑色，50%是适中，100%是白色。灰度是色调和饱和度都为0值，而通过亮度的调节来改变。

这两者都是在RGB和HSL的基础上，增加了第四个参数，透明度（alpha）。透明度的范围在0.0-1.0之间。0.0是全透明，而1.0是不透明。

/* 整体设置 */*{margin:0pxpadding:0px} /** * 设置日历的大小 */.calendar{  width: 240px  height: 400px  display: block} /** * 设置日历顶部盒子 */.calendar .calendar-title-box{  position: relative  width: 100%  height: 36px  line-height: 36px  text-align:center  border-bottom: 1px solid #ddd} /** * 设置上个月的按钮图标 */.calendar .prev-month {  position: absolute  top: 12px  left: 0px  display: inline-block  width: 0px  height: 0px  border-left: 0px  border-top: 6px solid transparent  border-right: 8px solid #999  border-bottom: 6px solid transparent  cursor: pointer} /** * 设置下个月的按钮图标 */.calendar .next-month {  position: absolute  top: 12px  right: 0px  display: inline-block  width: 0px  height: 0px  border-right: 0px  border-top: 6px solid transparent  border-left: 8px solid #999  border-bottom: 6px solid transparent  cursor: pointer}  /* 设置日历表格样式 */.calendar-table{  width: 100%  border-collapse: collapse  text-align:center} /* 表格行高 */.calendar-table tr{  height: 30px  line-height: 30px} /* 当前天 颜色特殊显示 */.currentDay {  color: red} /* 本月 文字颜色 */.currentMonth {  color: #999} /* 其他月颜色 */.otherMonth{  color: #ede}

在设置颜色时有多种方法：

采用颜色的英文单词 比如 red 指红色

采用#号，后面跟6位的16进制数字，比如：#ff0000 表示红色 每个数字的取值为0~9，a~f（a表示10，f表示15）。当第1~2位、第3~4位、第5~6位的数字分别相同时，可以缩写为3位，如 #ff0000可以缩写为 #f00， #3399ff可以缩写为#39f。对于#3699ff此类不满足条件的颜色值则不能缩写

采用rgb数值表示法，比如 rgb(255, 0, 0)表示红色，三个数字分别表示红、绿、蓝，取值范围为0~255

采用rgba数值表示法，比如rgba(255, 0, 0, 0.5)表示50%透明度的红色，最后一个数字表示透明度，取值为0~1之间的小数，0表示全透明，1表示不透明。

---