CSS 文本字体颜色设置方法(CSS color)

一、认识CSS 颜色(CSS color)

这里要介绍的是网页设置颜色包含有哪些;网页颜色规定规范。

1、常用颜色地方包含:字体颜色、超链接颜色、网页背景颜色、边框颜色
2、颜色规范与颜色规定:网页使用RGB模式颜色

二、颜色基础知识

网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动感(特别是超链接中运用)、美观之用,同时颜色也是各种各样网页的样式表现元素之一,了解CSS 字体颜色。

传统的html颜色与w3c标准下的css颜色对比和DIV CSS运用颜色

CSS color颜色语法:

color:#000000;

Css样式中color后直接加RGB颜色值(#FFFFFF 、#000000 、#F00)
RGB颜色值在实际布局时候确定,可以使用Photoshop(简称PS)拾取工具进行获取获得。

三、两种方法设置对象颜色样式

1、在DIV标签内使用color颜色样式
<div style="color:#F00">www.jb51.net</div>

2、在CSS选择器中使用color颜色样式CSS代码:

.divcss5{color:#00F}

/* 设置对象divcss5内文字为蓝色 */

扩展阅读:这里运用了CSS注释对此样式设置说明,了解CSS 注释

3、DIV+CSS颜色样式完整案例:

Css代码:

复制代码

代码如下:

.divcss5{color:#00F}
/* 设置对象divcss5内文字为蓝色 */

HTML代码:

复制代码

代码如下:

<p>
标签内使用color css样式

<div style="color:#F00">www.jb51.net 红色</div>
</p>
<p>外部样式表设置对象color颜色

<div class="divcss5">www.jb51.net 蓝色</div>
</p>

4、实例结构图:

以上使用标签内使用color颜色样式和css代码使用color颜色样式。

四、文字颜色控制一样  

传统html和css 文字颜色相同使用“color:”+“RGB颜色取值”即可,如颜色为黑色字即对应设置CSS属性选择器内添加“color:#000;”即可。

五、网页背景颜色设置区别  

传统设置背景颜色使用“bgcolor=颜色取值”,而CSS中则“background:”+颜色取值。例如:设置背景为黑色,传统Html设置,即在标签内加入“bgcolor="#000"”即可实现颜色为黑色背景,如果在W3C中即在对应CSS选择器中始终“background:#000”实现。

六、设置边框颜色区别

传统“bordercolor=取值”,CSS中“border-color:”+颜色取值。例如:在传统html直接在table标签加入“bordercolor="#000"”即可,在现在CSS中设置“border-color:#000;”即可让边框颜色为黑色,同时记得对包括设置宽度和样式(虚线、实现)。

DIV+CSS颜色值扩展知识:
颜色值是一个关键字或一个数字的RGB规范。

16个关键字是采取从Windows的VGA调色板: 水色 , 黑色 , 蓝色 , 紫红色 , 灰 , 绿 , 灰 , 褐红色 ,藏青色, 橄榄色 , 紫色 , 红色 , 银色 , 青色 , 白色 , 黄色 。

七、RGB颜色给出了四种方法之一  

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颜色表


当然一般的网页开发软件都有颜色取值器:


网页开发软件DW软件中CSS取色器

如何获得CSS颜色值?

我们又不能记住颜色值,以及如何确定准确的与美工图相同颜色值呢?其实很简单通常我们是在PS软件里通过识色器工具进行获得准确颜色值,当然也可以借用其它专门识别颜色工具进行获取准确的color颜色值。

九、div css color颜色样式总结


使用css样式设置对象内容color颜色样式,我们可以使用命名CSS类对象设置其颜色样式,还有直接在html标签内设置color样式。

CSS 文本字体颜色设置方法(CSS color)的更多相关文章

  1. [转载]Linux下终端字体颜色设置方法

    原文地址:Linux下终端字体颜色设置方法作者:router 网上类似的文章有很多,但是都是转来转去的,没有经过测试,按照很多文章的方法会造成你设置之后的终端在换行和删除输入字符时终端显示会乱七八糟, ...

  2. Linux下终端字体颜色设置方法

    颜色=\033[代码;前景;背景m 如:\033[1;32;40m表示高亮显示字体为绿色,背景色为黑色 颜色=\[\033[代码;前景;背景m\] echo -e "this is a \0 ...

  3. 超链接字体颜色设置(通过html/css的设置方法)

    超链接字体颜色设置是通过css来设置,a链接的颜色设置常用的有以下两种,1.超链接a的初始状态颜色,2.超链接字体的鼠标滑过颜色,还有两种病不常用:3.超链接字体的已访问颜色,4.超链接字体在按下鼠标 ...

  4. echarts x轴或y轴文本字体颜色改变

    1:x轴文本字体颜色改变 xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-','>=70'], axi ...

  5. 【pycharm基本操作】项目创建、切换、运行、字体颜色设置,常见包的安装步骤

    创建新项目 退出项目 怎样区别虚拟环境和系统环境? 虚拟环境和系统环境切换:进入项目切换解释器 切换项目 创建python目录和文件 代码运行方式一: 还可以这样执行代码方式二: 文件的剪切.复制.删 ...

  6. 【转】IntelliJ IDEA 仿照vs2017快捷键设置,以及字体颜色设置

    因后期工作需要使用java技术栈,所以近期抽空下载了intelliJ IDEA工具,但是作为一个Net开发者,在使用了vs以后,感觉在使用别的开发工具感觉就是没法和vs相比,毕竟vs被称为宇宙最强id ...

  7. Python字体颜色设置

    Python字体颜色设置 平时学习工作中,我们经常会接触到一些大佬写的Python工具,运行起来总会显示出五颜六色的字体,比如红色代表Error , 黄色代表Warning , 绿色代表Success ...

  8. win7保护眼睛的颜色设置方法(85,125,205)

    win7保护眼睛的颜色设置方法(85,125,205) 在电脑桌面空白处点击右键“个性化”按钮. 在弹出的对话框单击“窗口颜色”. 在弹出的新的对话框中单击“高级外观设置”. 在弹出的窗口颜色和外观中 ...

  9. css宽度+字体+颜色+边框+文本+光标+伪类选择器

    常用属性: width:宽 height:高 min-width:最小宽度 :可以设置如果宽度变小了,有个滑动效果(常常在我们布局的过程中需要去设置) min-height;最小高度 max-widt ...

随机推荐

  1. 【转载】spring boot 链接 虚拟机(Linux) redis

    原文:https://www.imooc.com/article/43279?block_id=tuijian_wz 前提是你已经安装redis且支持远程连接,redis的安装这里不再赘述,有需要的可 ...

  2. 栈(stack)--c实现(使用双链表)

    是不是直接贴代码不太好,我竟然不知道说什么. 写这个考虑的问题,或者是纠结的问题是这个头指针怎么处理,也就是栈的顶部,最后采用的是初始化第一个栈空间浪费掉,栈顶是有元素的.好像应该去学习下画图,没图不 ...

  3. 比较排序算法(PHP)

    冒泡排序 两两比较相邻记录的关键字,如果反序则交换,大的数字往下沉,一直到最大的出现在数组最后 function swap(&$x, &$y) { $temp = $x; $x = $ ...

  4. 【BZOJ 1192】[HNOI2006]鬼谷子的钱袋

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 设k为最大的正整数满足 \(2^0+2^1+...+2^k<=m\) 如果\(m>2^0+2^1+...+2^k\) 那 ...

  5. LaTeX 设置字体颜色

    本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50240179 需要包含宏包: \use ...

  6. 一起talk C栗子吧(第九十五回:C语言实例--使用共享内存进行进程间通信一)

    各位看官们,大家好,上一回中咱们说的是SystemV IPC结构概述的样例,这一回咱们说的样例是:使用共享内存进行进程间通信. 闲话休提.言归正转.让我们一起talk C栗子吧! 共享内存是Syste ...

  7. 【数据压缩】JPEG标准与原理解析

    转载请注明出处:http://blog.csdn.net/luoshixian099/article/details/50392230 CSDN-勿在浮沙筑高台 为了满足不同应用的需求,JPEG标准包 ...

  8. 10.29 工作笔记 ndk编译C++,提示找不到头文件(ndk-build error: string: No such file or directory)

    ndk编译C++.提示找不到头文件(ndk-build error: string: No such file or directory) 被这个问题弄得愁眉苦脸啊.心想为啥一个string都找不到呢 ...

  9. hdu_1166,线段树单点更新

    在刷线段树,参考自http://www.notonlysuccess.com/index.php/segment-tree-complete/ #include<iostream> #in ...

  10. POJ 2110 二分+暴搜

    题意: 给你一个矩阵 ,你能往各个方向走(不走出去就行),每次只能上下左右走一格,问路径上的点权最大值和最小值的差最小是多少. 思路: 首先 二分最后的答案, 暴力枚举当前的区间是啥. DFS 就OK ...