您的位置:首页 > CSS入门 > 【 返回上一页

css 字体颜色设置 CSS如何设置文字字体颜色

css 字体颜色设置 DIV CSS字体颜色如何设置篇

使用CSS对文字字体颜色设置使用CSS样式单词为color,这里ThinkCSS为大家介绍几种CSS字体颜色设置方法。

一、css字体颜色color代码

color:#000(准确颜色值 推荐使用)
color:red(不常用)

div{color:#F00} 

对div内文字字体颜色设置为红色。

二、直接标签设置字体颜色(标签内使用style)

要设置字体颜色的盒子对象标签内直接使用style属性设置css color字体颜色。

CSS字体颜色小例代码:

<div style="color:#F00">ThinkCSS 我是红色字体</div> 

标签内使用style属性效果截图:


字体颜色设置截图

#F00红色
可以DW软件直接选择此颜色值。


DW软件选择颜色值截图

常用测试时候可以使用DW提示出的颜色值,但实际布局中时需要PS获取准确颜色值,以美工图上的字体颜色值为准。

三、外部CSS设置字体颜色

使用id或class对文字字体设置颜色值

1、字体颜色实例CSS代码:

.expa{ color:#00F} 

2、HTML代码:

<div class="expa">ThinkCSS 我是蓝色字体</div> 

3、完整HTML+CSS代码

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字体颜色实例 ThinkCSS</title>
<style>
.expa{ color:#00F}
</style>
</head>
<body>
<div class="expa">ThinkCSS 我是蓝色字体</div>
</body>
</html>

4、外部CSS字体颜色设置效果截图


外部CSS设置字体颜色实例截图

四、css字体颜色设置一段文字其中某些文字设置不同字体颜色

对一段红色文字中,其中一些字设置不同字体颜色color样式,一般使用span标签设置外部CSS样式设置不同颜色。

一段文字中一些字体设置不同CSS字体颜色实例如下:

1、CSS代码:

div{ color:#F00} 
.expb{ color:#06F}

CSS代码解释:

div{ color:#F00} 

对div内文字设置统一红色字体。

.expb{ color:#06F} 

设置class=expb对应字体颜色为浅蓝色

2、HTML代码

<div>ThinkCSS 我是<span class="expb">蓝色字体</span>测试文字</div> 

3、完整实例HTML+CSS代码

<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字体颜色实例 ThinkCSS</title>
<style>
div{ color:#F00}
.expb{ color:#06F}
</style>
</head>
<body>
<div>ThinkCSS 我是<span class="expb">蓝色字体</span>测试文字</div>
</body>
</html>

4、字体颜色设置实例效果截图


设置一段文字中不同CSS字体颜色实例截图

五、div css文字字体颜色设置总结

不论哪种情况下对文字字体颜色设置,都是使用color样式单词来实现。颜色值设置时候注意“#”井号不要丢掉,否则设置字体颜色将失效无用。

关于DIV CSS字体颜色设置扩展阅读:
1、css字体颜色代码
2、div字体大小设置
3、css设置下划线颜色
4、css颜色单独设置

相关标签: 颜色 字体颜色
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/css/923.shtml

日期:2016-07-02 09:38:57 来源:www.thinkcss.com 作者:css div

热门点击