CSS入门教程—

CSS 中常见的定义颜色的方法有：

直接使用颜色名称
RGB 值
16 进制值

例如，下面 5 种写法都表示红色：

red
rgb(255, 0, 0)
rgb(100%, 0%, 0%)
#ff0000
#f00

CSS 内置了一些颜色名称，比如 aqua，black，blue，fuchsia，gray，green，lime，maroon，navy，olive，purpule，red，silver，teal，white，yellow 以及 transparent。

注意，除了 white 和 black，其他颜色在网站设计中并不常用，因为一个设计精美的网站一般会定义一套符合品牌调性的颜色组合。

RGB 是三个取值范围为 [0, 255] 的值，其中 0 表示最小值，255 表示最大值。当然，这三个值也可以用百分比来表示。

16进制值是一个用 16 进制表示的数值。它以 # 开头，支持六位和三位：

三位值有等价的六位值，例如 #ff0000 等于 #f00，#cc9966 等于 #c96
三位值更简洁一些，三个数值分别代表 RGB
六位精度更高，比如 #fc3846 就无法用三位值来表达

CSS3 还支持 HSL 颜色，后面高阶教程中会详细讲解

颜色和背景色

颜色有两种，color 和 background-color。

例如，一个黄底蓝字的 <h1> 标题：

h1 {color: yellow;background-color: blue;
}

这个颜色可能有些刺眼，我们用 16 进制色值稍作调整：

body {font-size: 14px;color: navy;
}h1 {color: #ffc;background-color: #009;
}

color 和 background-color 可作用于大部分 HTML 元素，如果作用于 body 之上，会修改页面内的所有颜色。

CSS入门教程——颜色相关推荐

css做名单,css基础教程：2021年适合新手的7个CSS入门教程推荐
上一篇我们向同学们推荐了5个html入门教程,本篇我们继续向同学们精选推荐一些适合新手学习的CSS基础入门教程,欢迎学习! 首先我们来介绍什么是CSS?以及CSS的作用 CSS 是一种标准样式表语言, ...
一套完整的CSS入门教程
最近花了点时间,整理了一下之前的CSS博客文章,完成了这个CSS教程.也为我的个人网站,增加了一个教程模块.教程模块地址:请点击这里.教程地址:请点击这里. 该教程是一套完整的CSS入门教程,看了绝对 ...
零基础CSS入门教程(1)–初识CSS
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
CSS初级教程(颜色、注释、选择器）【第一天】
CSS初级教程[第一天] [1]CSS初识 [2]CSS简介 [3]CSS语法 [4]CSS 选择器 [5]CSS使用 [6]CSS 注释 [7]CSS 颜色 [8]CSS RGB 颜色 [9]CSS ...
CSS入门教程——HTML选择器
HTML 有标签(tags),而 CSS 有选择器(selectors). 选择器是样式的名字,只能定义在在内部和外部样式表(style sheets)中. 在 CSS 入门篇的专栏中,我们只会用到 ...
零基础CSS入门教程(9)——背景颜色和背景图片
本章目录 1.任务目标 2.背景颜色 3.背景图片 4.小结 1.任务目标我们前几小节学习了如何设置字体格式,我们这一小节学习一下如何设置背景颜色和图片 2.背景颜色我们可以通过backgroun ...
零基础CSS入门教程(13)–边框样式
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 边框的样式 3. 边框宽度 4. 边框颜色 5. 简写属性 6. 单独设定各边样式 7. 小结 1. 前言边框是使用频率很高的样式,图 ...
零基础CSS入门教程(18)–颜色值
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 三原色 3. RGB颜色值 4. 16进制颜色值 5. 取色 6. 小结 1. 前言世界是五彩缤纷的,不论是皑皑的白雪.还是飘落的秋叶 ...
零基础CSS入门教程(19)–盒子模型简述
点此查看所有教程.项目.源码导航本文目录 1. 前言 2. 实例解析 3. 小结 1. 前言之前我们讲过CSS的尺寸.边框.内边距.外边距. 其实这些都是占用网页空间,在CSS中,我们将网页元素 ...

CSS入门教程——颜色

颜色和背景色

CSS入门教程——颜色相关推荐

最新文章

热门文章