HTML5边玩边学（3）像素和颜色

HTML5边玩边学（3）像素和颜色是一篇介绍HTML中像素和颜色的基础知识的文章。以下是它的完整攻略：

标题

HTML5边玩边学（3）像素和颜色

像素

像素（pixel）是一种用于测量屏幕分辨率的单位，通常用于衡量屏幕的清晰度。在HTML中，像素通常用来描述开发者定义的元素大小。实际上，浏览器根据不同的屏幕和设备，将像素映射为不同的比例。比如，在Retina屏幕上，1个CSS像素会被映射为2个屏幕像素。

像素的大小可以通过CSS样式来设置，像这样：

div {
  width: 200px;
  height: 100px;
}

这个例子中，我们使用了CSS中的width和height属性，将一个div元素的宽度设置为200px，高度设置为100px。这意味着这个div元素将在页面上占据200x100像素的空间。

颜色

HTML中，颜色可以用多种方式表示。其中，最常用的方式是使用颜色名称或颜色的哈希值。

使用颜色名称

颜色名称指的是用单词来描述颜色，比如“red”（红色）、“blue”（蓝色）等。这些颜色名称被预定义为CSS关键字，可以直接在CSS样式中使用，像这样：

body {
  background-color: red;
}

这个例子中，我们将整个文档的背景颜色设置为红色。

使用哈希值

哈希值是一种用于表示颜色的六位十六进制数。每个数字和字母代表颜色的一个分量，从最左边的分量开始分别为红、绿、蓝。比如，红色的哈希值为“#ff0000”，其中“ff”表示红色分量的最大值，其他分量为0。

同样，我们可以在CSS中使用哈希值来设置颜色，像这样：

div {
  background-color: #ff0000;
}

这个例子中，我们将一个div元素的背景颜色设置为红色。

示例

以下是两个关于像素和颜色的示例：

示例1：根据不同分辨率使用不同大小的图片

在一个响应式的页面中，我们需要使用不同大小的图片来适应不同的屏幕分辨率。比如，在普通屏幕上使用一张200x200像素的图片，在Retina屏幕上使用一张400x400像素的图片。

为了实现这一目标，我们需要使用像素密度比（device pixel ratio）来判断当前设备的屏幕是普通屏幕还是Retina屏幕。根据像素密度比，我们可以通过CSS样式来加载不同大小的图片，像这样：

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
  div {
    background-image: url('[e-mail]');
    background-size: 200px 200px;
  }
}

@media only screen and (max-width: 640px) {
  div {
    background-image: url('image.png');
    background-size: 100px 100px;
  }
}

这个例子中，我们使用CSS的@media查询来判断是否为Retina屏幕，并根据结果来加载不同大小的背景图片。同时，我们在其他@media查询中定义了在普通屏幕和小屏幕上显示的背景图片。

示例2：根据颜色值的不同设定不同样式

在一个网站中，我们需要使用多种不同的颜色来区分不同的元素，比如文字颜色、边框颜色、背景颜色等。为了方便维护和管理这些颜色，我们可以将它们定义为CSS变量，在需要使用时直接调用即可，像这样：

:root {
  --color-primary: #00ccff;
  --color-secondary: #ff9900;
}

h1 {
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-secondary);
}

.button {
  background-color: var(--color-primary);
  border-color: var(--color-secondary);
  color: white;
}

这个例子中，我们在:root伪类中定义了两种颜色变量，分别代表主要颜色和次要颜色。然后，在其他CSS样式中使用了这些变量来设置文本、边框、背景等颜色。这样，当需要更换颜色时，只需要修改此处的颜色定义即可，不用改动其他位置的代码。