在CSS里颜色的定义有四种方法：一，用颜色的名称；二，以十六进制数;三，以RGB整数设置颜色；四，以RGB百分数设置颜色。下面分别用这四种方法定义颜色，不过要注意的是以RGB整数定义的时候整数的范围是0-255，以百分比定义的时候范围是0%-100%，如果不在这个范围内，将按最接近这个范围的值计算。

<html>
<head>
<title>颜色的定义和背景颜色的设置
</title>
<style type=text/css>
<!--
body{
margin-right:20px;
margin-left:10%;
background-color:gray;
}
p{
text-indent:40px;
}
#color1{color:rgb(56,89,200);background-color:red;}
#color2{color:rgb(80%,10%,10%); background-color:#00ff00}
#color3{color:black;background:rgb(255,255,255)}
#color4{color:#00ff00;background-color:blue}
-->
</style>
</head>
<body>
<p>在CSS里颜色的定义有四种方法：一，用颜色的名称；二，以十六进制数;三，以RGB整数设置颜色；四，以RGB百分数设置颜色。下面分别用这四种方法定义颜色，不过要注意的是以RGB整数定义的时候整数的范围是0-255，以百分比定义的时候范围是0%-100%，如果不在这个范围内，将按最接近这个范围的值计算。
<table border=1 cellspacing=0 align=center width=100%>
<tr>
<td>style</td>
<td>results</td>
</tr>
<tr>
<td>#color1{color:rgb(56,89,200);background-color:red;}</td>
<td id=color1>这是所设置的颜色的效果</td>
</tr>
<tr>
<td >#color2{color:rgb(80%,10%,10%); background-color:#00ff00}</td>
<td id=color2>这是所设置的颜色的效果</td>
</tr>
<tr>
<td >#color3{color:black;background:rgb(255,255,255)}</td>
<td id=color3>这是所设置的颜色的效果</td>
</tr>
<tr>
<td>#color4{color:#00ff00;background-color:blue}</td>
<td id=color4>这是所设置的颜色的效果</td>
</tr>
</table>
</body>
</html>

下面是上面的代码所显示的效果：

style results
color1{color:rgb(56,89,200);background-color:red;} 这是所设置的颜色的效果
color2{color:rgb(80%,10%,10%); background-color:#00ff00} 这是所设置的颜色的效果
color3{color:black;background:rgb(255,255,255)} 这是所设置的颜色的效果
color4{color:#00ff00;background-color:blue} 这是所设置的颜色的效果

css中颜色的表示方法相关推荐

  1. CSS中颜色代码和单位

    CSS中颜色有其代码,部分颜色可以直接用英文代替,例如black,green,blue,red等. CSS中单位有多种表达形式,百分比等. 下面是来自w3cschools的信息: 1.用英文名称表示: ...

  2. HTML中颜色的书写方法

    HTML中颜色的书写方法 颜色英文名 例如:background_color: red     表示背景颜色为红色 16进制数 格式:# 加 三个两位的 16进制数 例如:background_col ...

  3. html如何给3种渐变色,css中颜色渐变的实现（三种方式）

    本篇文章给大家带来的内容是关于css中颜色渐变的实现(三种方式),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. !!注意IE9及之前的版本不支持渐变.Safari要加-webkit- ...

  4. CSS中颜色、样式规则（字体样式、列表样式、表格样式）

    目录 一.CSS中的颜色设置 1.颜色的表示方式 (1).颜色名 (2).rgb函数 (3).十六进制表示(HEX 值) ​二.CSS样式规则 1.字体规则 (1) font-family属性:字体 ...

  5. php超链接样式,html和css中设置超链接样式方法的总结

    在之前的文章中我们介绍了关于html中超链接的颜色设置,我们都也知道超链接在网站中都是无处不在的,超链接是跳转到另一个页面的入口,当你把鼠标移动到超链接上,会有颜色或者样式的改变,那么我们今天就给大家 ...

  6. css禁止图片保存,CSS中的图片保存方法

    "css中的图片"指的就是镶在CSS样式表中的图片.在我们用在浏览器保存网页时,很多时候,下载网页里的图片都下载不到,这样的话就会使网页非常不美观.所以,今天小编就给大家介绍集中保 ...

  7. html里如何定位背景图片,Html+Css CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  8. CSS 中颜色如何表示？

    CSS 中的颜色如何表示?简单易学 1.英语单词表示法 这个是给英语大佬准备的,英语不好这种方式就跳过.反正我记不住那么多英语单词的. 说实话,我一个单词都不认识,也没去查翻译,就看图翻译的哈哈哈.样 ...

  9. HTML中颜色的表示方法

    HTML中颜色的表达方式现在一共有三种. 第一种:单词表示的方法;比如red,yellow,black之类的.但是这种表示方法有两个局限性,第一:总有人的英语水平不是那么好,不是大家都能记住那么的颜色 ...

最新文章

  1. 北京大学AI写作机器人来了，会替代记者？
  2. JS中点语法和方括号语法访问属性的区别
  3. python语言程序设计实验答案实验八函数_C++程序设计 实验8 实验报告 标准答案...
  4. 数据可视化系列（五）：样式色彩秀芳华
  5. iOS 动画十四：Replicating Animations
  6. java验证用户名和密码_java验证用户名和密码详解
  7. 淘宝开店经验 心得 攻略
  8. 将png格式图片批量转存为jpg格式
  9. 第一章 初识JVAV
  10. jQuery AJAX回调函数this指向问题
  11. 走进Prime Time系列 - PT的Timing exception 03
  12. mysql to_days() 逆向函数_mysql的 TO_DAYS() 函数应用实例
  13. 2 C/C++快速入门
  14. 新视野大学英语第三版第四册读写教程第二单元-真正的美
  15. 分区变RAW如何恢复数据？
  16. APP推广大渠道不给量，我们该怎么办？
  17. “借刀杀人”之CSRF拿下盗图狗后台
  18. 中国医科大学2021年9月《药事管理学》作业考核试题
  19. 游戏绑定计算机绑定什么用,《新大话西游3》游戏绑定电脑功能设置攻略
  20. 惯性导航原理(三)-加速度计应用+陀螺仪应用

热门文章

  1. POJ2446 二分匹配
  2. hdu4067 费用流（混合欧拉的宽展和延伸）
  3. 【Android 应用开发】动态权限管理示例 ( 使用原生代码实现 | 申请权限 | 判定权限申请结果 | 判定 “ 不再询问 “ 情况 )
  4. 【Android APT】编译时技术 ( 开发编译时注解 )
  5. 【Flutter】Flutter 拍照示例 ( Flutter 插件配置 | Flutter 插件源码示例 | iOS 应用配置 | Android 应用配置 )
  6. 深入理解SQL Server 2005 中的 COLUMNS_UPDATED函数
  7. 关于MyEclipse连接SQLServer和Mariadbsql
  8. 计算机网络第七次笔记
  9. C语言 · 矩阵乘法
  10. fflush(stdin)与fflush(stdout)