• 技术文章 >web前端 >css教程

    css如何设置文本颜色

    青灯夜游青灯夜游2021-03-31 16:57:56原创90

    在css中,可以使用color属性来设置文本颜色,只需要给文本元素添加“color:颜色值;”样式即可。颜色值有4种写法:1、使用颜色名,例red;2、使用十六进制数值,例“#FF0033”;3、RGB或RGBA值;4、HSL或HSLA值。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    在CSS中,我们可以通color属性来设置文本颜色。该属性设置了一个元素的前景色(在 HTML 表现中,就是元素文本的颜色);光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框,除非被 border-color 或另外某个边框颜色属性覆盖。

    要设置一个元素的前景色,最容易的方法是使用 color 属性。

    color属性的语法:

    color : 颜色值;

    示例:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    	</head>
    
    	<body>
    		<p>普通文本!</p>
    		<p style="color: red;">设置了颜色的文本!</p>
    		<h1 style="color:#00ff00;">大标题</h1>
    	</body>
    
    </html>

    1.png

    推荐教程:CSS视频教程

    css颜色值有4种写法:

    1、使用颜色名

    虽然目前已经命名的颜色约有 184 种,但真正被各种浏览器支持,并且作为 CSS 规范推荐的颜色名称只有 16 种,如下表所示。

    表1:CSS 规范推荐的颜色名称

    /*名 称	颜 色	名 称	颜 色	名 称	颜 色
    black	纯黑	silver	浅灰	navy	深蓝
    blue	浅蓝	green	深绿	lime	浅绿
    teal	靛青	aqua	天蓝	maroon	深红
    red	大红	purple	深紫	fuchsia	品红
    olive	褐黄	yellow	明黄	gray	深灰
    white	壳白*/

    不建议在网页中使用颜色名,特别是大规模的使用,避免有些颜色名不被浏览器解析,或者不同浏览器对颜色的解释差异。

    2、十六进制颜色

    十六进制符号 #RRGGBB 和 #RGB(比如 #ff0000)。"#" 后跟 6 位或者 3 位十六进制字符(0-9, A-F)。

    这是最常用的取色方法,例如:

    #f03
    #F03
    #ff0033
    #FF0033

    3、RGB,红-绿-蓝(red-green-blue (RGB))

    规定颜色值为 rgb 代码的颜色,函数格式为 rgb(R,G,B),取值可以是 0-255 的整数或百分比。

    rgb(255,0,51)
    rgb(255, 0, 51)
    rgb(100%,0%,20%)
    rgb(100%, 0%, 20%)

    扩展:RGBA,红-绿-蓝-阿尔法(RGBa)

    RGBA 扩展了 RGB 颜色模式,它包含了阿尔法通道,允许设定一个颜色的透明度。a 表示透明度:0=透明;1=不透明。

    rgba(255,0,0,0.1)    /* 10% 不透明 */  
    rgba(255,0,0,0.4)    /* 40% 不透明 */  
    rgba(255,0,0,0.7)    /* 70% 不透明 */  
    rgba(255,0,0,  1)    /* 不透明,即红色 */

    4、HSL,色相-饱和度-明度(Hue-saturation-lightness)

    色相(Hue)表示色环(即代表彩虹的一个圆环)的一个角度。
    饱和度和明度由百分数来表示。
    100% 是满饱和度,而 0% 是一种灰度。
    100% 明度是白色, 0% 明度是黑色,而 50% 明度是"一般的"。

    hsl(120,100%,25%)    /* 深绿色 */  
    hsl(120,100%,50%)    /* 绿色 */       
    hsl(120,100%,75%)    /* 浅绿色 */

    扩展:HSLA,色相-饱和度-明度-阿尔法(HSLa)

    HSLa 扩展自 HSL 颜色模式,包含了阿尔法通道,可以规定一个颜色的透明度。 a 表示透明度:0=透明;1=不透明。

    hsla(240,100%,50%,0.05)   /* 5% 不透明 */   
    hsla(240,100%,50%, 0.4)   /* 40% 不透明 */  
    hsla(240,100%,50%, 0.7)   /* 70% 不透明 */  
    hsla(240,100%,50%,   1)   /* 完全不透明 */

    更多编程相关知识,请访问:编程视频!!

    以上就是css如何设置文本颜色的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 文本颜色
    上一篇:你所不知道的css规则,值得收藏!! 下一篇:css怎么设置文字间距
    第15期线上培训班

    相关文章推荐

    • css中link和import的区别是什么• 添加CSS的三种方式• css与css3的区别是什么• 如何使用css设置文字透明背景不透明• 你所不知道的css规则,值得收藏!!

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网