社交网站建设公司,中国移动社区app下载,wordpress用的什么前端,网站访问工具CSS 颜色
CSS 中的颜色可以通过以下方法指定#xff1a;
十六进制颜色带透明度的十六进制颜色RGB 颜色RGBA 颜色HSL 颜色HSLA 颜色预定义/跨浏览器的颜色名称使用 currentcolor 关键字
十六进制颜色
用 #RRGGBB 规定十六进制颜色#xff0c;其中 RR#xff08;红色…CSS 颜色
CSS 中的颜色可以通过以下方法指定
十六进制颜色带透明度的十六进制颜色RGB 颜色RGBA 颜色HSL 颜色HSLA 颜色预定义/跨浏览器的颜色名称使用 currentcolor 关键字
十六进制颜色
用 #RRGGBB 规定十六进制颜色其中 RR红色、GG绿色和 BB蓝色十六进制整数指定颜色的成分分量。所有值必须在 00 到 FF 之间。
例如0000ff 值呈现为蓝色因为蓝色分量设置为最高值ff其他分量设置为 00。
实例
定义不同的 HEX 颜色
!DOCTYPE html
html
head
style
#p1 {background-color:#ff0000;}
#p2 {background-color:#00ff00;}
#p3 {background-color:#0000ff;}
#p4 {background-color:#ffff00;}
#p5 {background-color:#ff00ff;}
/style
/head
bodyh1HEX 颜色/h1
p用#RRGGBB指定十六进制颜色其中RR红色GG绿色和BB蓝色十六进制整数指定颜色的组成部分。所有值必须在00到FF之间。/pp idp1红色/p
p idp2绿色/p
p idp3蓝色/p
p idp4黄色/p
p idp5樱桃色/p/body
/html带透明度的十六进制颜色
用 #RRGGBB 规定十六进制颜色。如需增加透明度请在 00 和 FF 之间添加两个额外的数字。
实例
定义带透明度的 HEX 颜色 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%)。
实例
定义不同的 RGB 颜色
!DOCTYPE html
html
head
style
#p1 {background-color:rgb(255,0,0);}
#p2 {background-color:rgb(0,255,0);}
#p3 {background-color:rgb(0,0,255);}
#p4 {background-color:rgb(192,192,192);}
#p5 {background-color:rgb(255,255,0);}
#p6 {background-color:rgb(255,0,255);}
/style
/head
bodyh1RGB 颜色/h1
pRGB 颜色值通过 rgb() 函数来规定rgb(red, green, blue)/p
p每个参数红色绿色和蓝色定义颜色的强度并且可以是 0 到 255 之间的整数或百分比值从 0 到 100。/pp idp1红色/p
p idp2绿色/p
p idp3蓝色/p
p idp4灰色/p
p idp5黄色/p
p idp6樱桃色/p/body
/htmlRGBA 颜色
RGBA 颜色值是 RGB 颜色值的扩展它带有 Alpha 通道 - 指定对象的不透明度。
RGBA 颜色通过 rgba() 函数规定语法如下
rgba(red, green, blue, alpha)alpha 参数是介于 0.0完全透明和 1.0完全不透明之间的数字。
实例
定义带有不透明度的不同 RGB 颜色
!DOCTYPE html
html
head
style
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
/style
/head
bodyh1带不透明度的 RGB 颜色/h1
pRGBA 颜色值是带有 Alpha 通道的 RGB 颜色值的扩展 - 它指定对象的不透明度。/pp idp1红色/p
p idp2绿色/p
p idp3蓝色/p
p idp4灰色/p
p idp5黄色/p
p idp6樱桃色/p/body
/htmlHSL 颜色
HSL 指的是色相hue、饱和度saturation和亮度lightness- 代表颜色的圆柱坐标表示。
使用 hsl() 函数指定 HSL 颜色值该函数的语法如下
hsl(hue, saturation, lightness)色相是色轮上的度数从 0 到 360- 0或 360是红色120 是绿色240 是蓝色。
饱和度是一个百分比值 0 表示灰色阴影而 100 是全彩色。
亮度也是一个百分比 0 是黑色100 是白色。
实例
定义不同的 HSL 颜色
!DOCTYPE html
html
head
style
#p1 {background-color:hsl(120,100%,50%);}
#p2 {background-color:hsl(120,100%,75%);}
#p3 {background-color:hsl(120,100%,25%);}
#p4 {background-color:hsl(120,60%,70%);}
#p5 {background-color:hsl(290,100%,50%);}
#p6 {background-color:hsl(290,60%,70%);}
/style
/head
bodyh1HSL 颜色/h1
pHSL 代表色相\饱和度和明度 - 表示颜色的圆柱坐标表示。/p
pHSL 颜色值通过 hsl() 函数来指定 hsl(hue, saturation, lightness)/p
p色相Hue是色轮上的度数从 0 到 360- 0或 360是红色120 是绿色240 是蓝色。饱和度Saturation是一个百分比值 0 表示灰色阴影而 100 是全彩色。亮度Lightness也是一个百分比 0 是黑色100 是白色。/pp idp1绿色/p
p idp2浅绿色/p
p idp3深绿色/p
p idp4柔绿色/p
p idp5紫色/p
p idp6淡紫色/p/body
/htmlHSLA 颜色
HSLA 颜色值是 HSL 颜色值的扩展它带有 Alpha 通道 - 指定对象的不透明度。
HSLA 颜色值由 hsla() 函数指定该函数的语法如下 hsla(hue, saturation, lightness, alpha) alpha 参数是介于 0.0完全透明和 1.0完全不透明之间的数字。
实例
定义带有不透明度的不同 HSL 颜色 !DOCTYPE html
html
head
style
#p1 {background-color:hsla(120,100%,50%,0.3);}
#p2 {background-color:hsla(120,100%,75%,0.3);}
#p3 {background-color:hsla(120,100%,25%,0.3);}
#p4 {background-color:hsla(120,60%,70%,0.3);}
#p5 {background-color:hsla(290,100%,50%,0.3);}
#p6 {background-color:hsla(290,60%,70%,0.3);}
/style
/head
bodyh1带不透明度的 HSL 颜色/h1
pHSLA 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它指定了对象的不透明度。/pp idp1绿色/p
p idp2浅绿色/p
p idp3深绿色/p
p idp4柔绿色/p
p idp5紫色/p
p idp6淡紫色/p/body
/html预定义/跨浏览器的颜色名称
HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。
例如blue、red、coral、brown 等
实例
定义不同的颜色名
!DOCTYPE html
html
head
style
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
/style
/head
bodyh1预定义的颜色名称/h1
pHTML 和 CSS 颜色规范中预定义了 140 个颜色名称。这些只是其中的一些/pp idp1蓝色/p
p idp2红色/p
p idp3珊瑚色/p
p idp4棕色/p/body
/htmlcurrentcolor 关键字
currentcolor 关键字引用元素的 color 属性值。
实例
以下 div 元素的边框颜色将为蓝色因为 div 元素的文本颜色为蓝色
!DOCTYPE html
html
head
style
#myDIV {color: blue;border: 10px solid currentcolor;
}
/style
/head
bodyh1currentcolor 关键字/h1
pcurrentcolor 关键字引用元素的 color 属性的值。/p
p下面的 div 元素的边框颜色将为蓝色因为 div 元素的文本颜色为蓝色/pdiv idmyDIV
这个 div 元素有蓝色文本颜色和蓝色边框。
/div/body
/html
