登录  /  注册
首页 >web前端 >html教程 > 正文

html,css中的色彩使用总结

原创2017-06-09 11:03:431121

在HTML中,一种颜色可以通过如下的三种方式来表示:色名、RGB值、或HEX值。实际开发中可以使用色彩来做很多的事情,也可以自定义字体色彩的效果,让色彩实现渐变的效果,同通过css属性使用为边框,字体,图像等等设置你想要的各种色彩效果。本篇文章主要就是介绍html,css中的色彩使用方式。

可以先学习php中文网相关的免费课程

1. 学习《html/css快速入门》中的 颜色和分类 章节课程

html/css快速入门

2. 观看 《黑马程序员html视频教程》颜色的代码 视频教程

黑马程序员html视频教程

html,css中的色彩使用

1. html各种常见色彩的编号数值(收藏)

在HTML中,一种颜色可以通过色名、RGB值、或HEX值表示。RGB rgb(red,green,blue)三变量为三原色的浓度(0~255) 例如,rgb(255,0,0) 红 rgb(0,0,0)黑 rgb(255,255,255)白 HEX hexadecimal代表十六进制数 十进制:0~255 转换十六进制:00~FF

2. HTML5边玩边学(四)-变幻的色彩

在HTML5边玩边学(二)-基础绘图中,我们提到过有两个上下文属性可以用来设置颜色:

strokeStyle 决定了你当前要绘制的线条的颜色

fillStyle 决定了你当前要填充的区域的颜色

颜色值只要是符合CSS3 颜色值标准的有效字符串都可以。

3. 详解CSS3 RGBA色彩模式使用实例代码

RGBA色彩模式是RGB色彩模式的扩展,在红,蓝,绿三原色的基础上增加了不透明度参数。语法如下:rgba(r,g,b,<opaciy>)

其中r,g,b表示红色,蓝色,绿色三种原色所占的比重。其值可以使整数或者百分数,正整数值的取值范围为0~255,百分数值的取值范围为0.0%~100.0%,超出范围的数值将被截止其最接近的取值极限。注意,并非所有的浏览器都支持使用百分数值。第四个参数<opacity>表示不透明度,取值在0到1之间。

4. css渐变色彩 省略标记 嵌入字体 文本阴影的详细介绍

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同,这里我们只针对线性渐变的 W3C 标准语法来分析其用法,其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

5. 高品质的网页设计: 实例与技巧之六(发挥色彩的全部潜能)

Summertime in Tennessee(田纳西州夏日观光) 是一个充满活力的、明亮的,非常温暖的站点。所有一切看起来都是为了推送夏日活动而设计。该站点使用了非常多不同色相的高饱和度色,但每一种颜色都切中要害,没有一种是不适合主题的。高品质设计的色彩搭配必定与其要呈现的服务或产品密切关联。好的设计并不总是需要费尽心力选一些出奇制胜的颜色,那些最明显最该用的颜色反而能创造更好的效果。比如说 Hell Design(地狱设计),不用象征地狱的火红色简直说不过去。

6. CSS3教程(3):border-color网页边框色彩

使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6中颜色,那么最后一个颜色将被添加到剩下的宽度。

相关问答

1. 浏览器中的opacity、rgba的效果和Android、iOS程序中使用的色彩透明的效果差别很大。

2. 为什么 CSS3 的 hsl 色彩模式很少被使用?

【相关推荐】

1. php中文网免费视频教程:《php.cn独孤九贱(2)-css视频教程》

2. php中文网免费教程:《弹指间学会HTML+CSS》

以上就是html,css中的色彩使用总结的详细内容,更多请关注php中文网其它相关文章!

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:html,css,色彩
  • 相关文章

    相关视频


    视频教程分类

    专题推荐