账号注册找回密码
  微信登录

奇瑰网

[教程] CSS 文本字体颜色(CSS color)

[复制链接]

767

主题

1012

帖子

5万

积分

网站技术组

Rank: 7Rank: 7Rank: 7

G币
47341
信用
334
体力
1418

论坛版主在线达人

发表于 6 天前 | 显示全部楼层 |阅读模式
免费G币领取活动中
CSS 颜色样式篇
目录一、认识CSS 颜色(CSS color)   -   TOP
这里要介绍的是网页设置颜色包含有哪些;网页颜色规定规范。
1、常用颜色地方包含:字体颜色、超链接颜色、网页背景颜色、边框颜色
2、颜色规范与颜色规定:网页使用RGB模式颜色
二、颜色基础知识   -   TOP
网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动感(特别是超链接中运用)、美观之用,同时颜色也是各种各样网页的样式表现元素之一,了解CSS 字体颜色
传统的html颜色与w3c标准下的css颜色对比和DIV CSS运用颜色
CSS color颜色语法:
color:#000000;
Css样式中color后直接加RGB颜色值(#FFFFFF 、#000000 、#F00)
RGB颜色值在实际布局时候确定,可以使用Photoshop(简称PS)拾取工具进行获取获得。
三、两种方法设置对象颜色样式   -   TOP
1、在DIV标签内使用color颜色样式
<div style="color:#F00">www.divcss5.com</div>
2、在CSS选择器中使用color颜色样式CSS代码
.divcss5{color:#00F}
/* 设置对象divcss5内文字为蓝色 */
扩展阅读:这里运用了CSS注释对此样式设置说明,了解CSS 注释http://www.divcss5.com/rumen/r32.shtml
3、DIV+CSS颜色样式完整案例:
Css代码:
  • .divcss5{color:#00F}
  • /* 设置对象divcss5内文字为蓝色 */
  • <p>
  • 标签内使用color css样式<br />
  • <div style="color:#F00">www.divcss5.com 红色</div>
  • </p>
  • <p>外部样式表设置对象color颜色<br />
  • <div class="divcss5">www.divcss5.com 蓝色</div>
  • </p>
4、实例结构图:
1_130120213657_1.png
以上使用标签内使用color颜色样式和css代码使用color颜色样式。
四、文字颜色控制一样   -   TOP
传统html和css 文字颜色相同使用“color:”+“RGB颜色取值”即可,如颜色为黑色字即对应设置CSS属性选择器内添加“color:#000;”即可。
五、网页背景颜色设置区别   -   TOP
传统设置背景颜色使用“bgcolor=颜色取值”,而CSS中则“background:”+颜色取值。例如:设置背景为黑色,传统Html设置,即在标签内加入“bgcolor="#000"”即可实现颜色为黑色背景,如果在W3C中即在对应CSS选择器中始终“background:#000”实现。
六、设置边框颜色区别   -   TOP
传统“bordercolor=取值”,CSS中“border-color:”+颜色取值。例如:在传统html直接在table标签加入“bordercolor="#000"”即可,在现在CSS中设置“border-color:#000;”即可让边框颜色为黑色,同时记得对包括设置宽度和样式(虚线、实现)。
DIV+CSS颜色值扩展知识:
颜色值是一个关键字或一个数字的RGB规范。
16个关键字是采取从Windows的VGA调色板: 水色 , 黑色 , 蓝色 , 紫红色 , 灰 , 绿 , 灰 , 褐红色 ,藏青色, 橄榄色 , 紫色 , 红色 , 银色 , 青色 , 白色 , 黄色 。
七、RGB颜色给出了四种方法之一   -   TOP
1、#rrggbb( 如 ,#00cc00) (强烈推荐使用此表示颜色取值)
2、#的RGB( 如 ,#0c0)
3、RGB(十中,x,x)的x是一个包容性的0和255之间的整数( 如 的RGB(0,204,0))
4、RGB(Ÿ%,Ÿ%,Ÿ%),其中 y是一个包容性的数量介于0.0和100.0( 如 的RGB(0%,80%,0%))
八、以下是RGB颜色表   -   TOP
1_100531133740_1.gif
当然一般的网页开发软件都有颜色取值器:
1_100531085953_1.png
网页开发软件DW软件中CSS取色器
如何获得CSS颜色值?
我们又不能记住颜色值,以及如何确定准确的与美工图相同颜色值呢?其实很简单通常我们是在PS软件里通过识色器工具进行获得准确颜色值,当然也可以借用其它专门识别颜色工具进行获取准确的color颜色值。
九、div css color颜色样式总结   -   TOP
使用css样式设置对象内容color颜色样式,我们可以使用命名CSS类对象设置其颜色样式,还有直接在html标签内设置color样式。以上我们也详细介绍和实践这2种对文字内容设置颜色方法。





上一篇:html字体颜色 html中设置字体颜色代码 字体颜色获取
下一篇:改变字体、颜色和大小的代码
我们尊重所有会员!只要你付出了,大家都会看在眼里,态度决定一切!
感谢您对奇瑰网社区的关注与支持!

32

主题

247

帖子

171

积分

资深会员

Rank: 2

G币
2
信用
0
体力
-20
发表于 6 天前 | 显示全部楼层
马上来领取免费的邀请码加入奇瑰吧
垃圾内容,路过为证。
回复

使用道具 举报

1

主题

149

帖子

198

积分

资深会员

Rank: 2

G币
0
信用
0
体力
35
发表于 6 天前 | 显示全部楼层
新人看看怎么样
回复

使用道具 举报

0

主题

146

帖子

127

积分

资深会员

Rank: 2

G币
0
信用
0
体力
-2
发表于 6 天前 | 显示全部楼层
马上来领取免费的邀请码加入奇瑰吧
我了个去,顶了
回复

使用道具 举报

1

主题

145

帖子

199

积分

资深会员

Rank: 2

G币
0
信用
0
体力
40
发表于 6 天前 | 显示全部楼层
小白一个 顶一下
回复

使用道具 举报

0

主题

154

帖子

191

积分

资深会员

Rank: 2

G币
43
信用
0
体力
7
发表于 6 天前 | 显示全部楼层
马上来领取免费的邀请码加入奇瑰吧
呵呵。。。
回复

使用道具 举报

0

主题

31

帖子

141

积分

资深会员

Rank: 2

G币
6
信用
0
体力
44
发表于 6 天前 | 显示全部楼层
LZ帖子不给力,勉强给回复下吧
回复

使用道具 举报

0

主题

203

帖子

186

积分

资深会员

Rank: 2

G币
10
信用
0
体力
0
发表于 6 天前 | 显示全部楼层
马上来领取免费的邀请码加入奇瑰吧
我也是坐沙发的
回复

使用道具 举报

23

主题

255

帖子

168

积分

资深会员

Rank: 2

G币
2
信用
0
体力
-24
发表于 6 天前 | 显示全部楼层
强烈支持奇瑰,免费就是给力啊!
回复

使用道具 举报

使用高级回帖 (可批量传图、插入视频等)

发表回复

您需要登录后才可以回帖 登录 | 账号注册   微信登录

本版积分规则   Ctrl + Enter 快速发布  

发帖时请遵守我国法律,网站会将有关你发帖内容、时间以及发帖IP地址等记录保留,只要接到合法请求,即会将信息提供给有关政府机构。
Powered by Discuz! X3.4 ( 粤ICP备20013252号-1 | 粤公网安备44130302100219号  
Copyright © 2014-2021 奇瑰网 All Rights Reserved.
快速回复 返回顶部 返回列表