CSS的值和单位

在本文章中

数值
1. 长度和尺寸
2. 无单位的值
  1. 无单位的行高
  2. 动画的数值
百分比
主动学习: Playing with lengths
颜色
Active learning: Playing with colors
函数
总结

CSS的属性值可以有很多种类，可以是普通类型的数值，也可以是有特定作用的颜色和函数（比如内置的背景图片，或者旋转一个元素）。有些值通过特定的单位来指定与之相对应的值——你是想把你的盒子（box）宽度设置为30像素（pixel）， 30厘米（centimeter）还是30em呢？在本指导中，我们既会讨论常用的值像长度、颜色以及简单函数，也会探索一些不那么常用的单位像角度甚至没有单位的纯数值。

预备知识:	计算机基本技能, 安装必须的软件, 了解文件的基本操作, HTML基础 (学习HTML简介), 知道CSS是如何起作用的 (在这里学习前一章.)
目标:	学习最常用的CSS属性值以及相关的单位

在CSS中，值的类型有很多种，一些很常见，一些你却几乎没怎么遇到过。我们不会在这篇文档中面面俱到地描述他们，而只是这些对于掌握CSS可能最有用处的这些。本文将会涉及如下CSS的值：

数值: 长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。用于指定例如相对线宽或运行动画的次数。
百分比: Can also be used to specify size or length — relative to a parent container's width or height for example, or the default font-size.可以用于指定尺寸或长度——例如相对于父容器的长度或高度，或默认的字体大小。
颜色: 用于指定背景颜色，字体颜色等。
坐标位置: 例如，用于指定定位元素相对于屏幕的左上方的位置。
函数: 例如，用于指定背景图片或背景图片渐变。

在接下来所有关于CSS的主题中，你都会看到这些单位的例子在不断展现，就像你在其他的CSS资源文件中看到的一样。很快你就会熟悉他们的。

提示: 你可以在CSS手册中找到关于CSS单位的详尽描述; 关于单位的条目会用一对尖括号包起来，比如 <color>。

数值

你会在很多地方看到CSS单位中使用到数值。这一部分将会讨论数值的最常用类别。

长度和尺寸

在CSS布局、排版等等的所有时候，你都会使用到长度/尺寸单位（比如参考 <length>）。我们不妨先看一个简单的例子——先上HTML：

 <p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

然后是CSS：

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}
p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}
p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}
p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

结果如下：

在这个例子中我们做了以下事情：

分别将每个段落的 margin，padding 和 border-width 设置为5 pixels, 10 pixels 和 2 pixels。一个单独的margin/padding值表示所有的4个面都被设置成同样的值。边框也被设置成了 border 的缩写值。
为三个不同的段落设置越来越大的宽度（width ）像素值，也就是意味着越往下盒子越大。
为三个不同的段落设置越来越大字号（ font-size）像素值，也就是意味着越往下文本越大。font-size代表字体/字形的高度。

像素 (px) 是一种绝对单位（ absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。其他的绝对单位如下：

mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
pt, pc: 点（Points (¹/₇₂ of an inch)），十二点活字（ picas (12 points.)）

除了px之外，你很可能都不怎么使用其他的单位。

也有相对单位，他们是相对于当前元素的字号（ font-size ）或者视口（viewport ）尺寸。

em:1em是当前元素的字体大小相同（更具体地说，一个大写字母M）宽度的默认基础字体大小给网页浏览器在应用CSS样式是16像素，这意味着1em计算值为16的像素为一个元素的默认。但是要小心-em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。现在不要过于担心这个问题，我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位。
ex, ch: 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。
rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，这听起来像一个更好的选择比em，虽然在旧版本的IE上不被支持（查看关于跨浏览器支持 Debugging CSS.)
vw, vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持。

使用相对单位是非常有用的-你可以把你的HTML元素相对于你的字体或视口大小，这意味着布局将保持正确，如果在整个网站上的文本大小是由一个视障用户翻一番。

无单位的值

你有时候会在CSS遇到无单位的数值，这是不是一个错误，事实上它是在某些情况下，完全可以。例如，如果你想让一个元素完全去外边框和内边框，你可以只使用无单位的0 - 0=0，不管前面的属性是什么！

margin: 0;

无单位的行高

另一个例子是 line-height,设置元素中每行文本的高度。你可以使用单位设置特定的行的高度，但它往往是更容易使用的一个无量纲的值，它就像一个简单的乘法因子。例如，使用下面的HTML：

<p>Blue ocean silo royal baby space glocal evergreen relationship housekeeping
native advertising diversify ideation session. Soup-to-nuts herding cats resolutionary
virtuoso granularity catalyst wow factor loop back brainstorm. Core competency
baked in push back silo irrational exuberance circle back roll-up.</p>

下面的CSS：

p {
  line-height: 1.5;
}

这将产生以下输出：

这里的font-size的值为16px; 行高为1.5或24px。

动画的数值

CSS动画能够让页面上的HTML元素动起来。我们来看一个例子，当我们把鼠标浮动到一个段落上的时候，它能够旋转起来。这个例子的HTML代码很简单：

<p>Hello</p>

CSS有点复杂：

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}
p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

这里你可可以看到一些我们我们之前没有明确提到的有趣单位 (<angle>s, <time>s, <timing-function>s, <string>s...)，但是我们感兴趣的是这一行 animation-iteration-count: 5; ——此行控制着动画启动（这里是指光标浮动至段落上）时后会执行多少次，而且这是一个简短无单位纯数字（计算机中成为整型）。

以下是代码的实际效果：

百分比

还可以使用百分比值指定可以通过特定数值指定的大部分内容。这使我们可以创建，例如，其宽度总是会移动到其父容器宽度的一定百分比的框中。这可以与那些将其宽度设置为某个单位值（如px或ems）的框进行比较，它们的长度总是保持相同的长度，即使它们的父容器的宽度发生变化。

让我们举个例子来说明这个问题。

首先，用HTML标记的两个相似的盒子：

<div>Fixed width layout with pixels</div>
<div>Liquid layout with percentages</div>

现在一些CSS来装饰这些盒子：

div {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}
div:nth-child(1) {
  background-color: red;
  width: 650px;
}
div:nth-child(2) {
  background-color: blue;
  width: 75%;
}

这给了我们以下结果：

我们在这里给一些div margin, height, font-size, border和color. 然后我们给第一个div和第二个div不同。background-colors 所以我们可以很容易地把它们分开。我们也在设置第一个div width to 650px, 第二div的宽度为75%。这样做的效果是，第一个div始终具有相同的宽度，即使视口的大小（它将开始消失，当屏幕视图变得比屏幕窄），而第二div的宽度不断改变视口的大小改变时，它将永远是75%，其母为宽。在这种情况下，div的父元素是<主体>元素，默认情况下是视口宽度的100%。

注意: 您可以通过调整本文中的浏览器窗口来看到这种效果； raw examples found on Github.

我们也可以设置font-size的百分比为200%。它将和你预计的工作方式有一点不同，但这是讲得通的，它的新大小是相对于父容器的字体大小的，就像em一样。在这种情况下，父容器的字体大小为16px—页面的默认值，所以计算的值为200%或32px。这和em的风格确实很类似—200%基本上和2em一样。

这两种不同的框布局类型通常称为液体布局（如浏览器视口大小的变化），固定宽度布局（不管怎样都保持不变）：

可以使用液体布局来确保标准文档始终适合于屏幕，并且可以在不同的移动设备屏幕大小上显示良好。
一个固定宽度的布局可以用来保持在线地图的大小相同；浏览器视口可以在地图上滚动，只在一个时间内查看一定数量的地图。您可以立即看到的数量取决于您的视口有多大。

你会在后面的课程中学习到更多关于网页的布局，在CSS布局和响应式设计模块（待定）

主动学习: Playing with lengths

For this active learning, there are no right answers. We'd simply like you to have a go at playing with the width/height of the .inner and .outer divs to see what effects the different values have. Try a percentage value for the .inner div, and see how it adjusts as the .outer div's width changes. Try some fixed values as well, such as pixels and ems.

如果你犯了一个错误，你可以用重置按钮重新设置它。

Playable code

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="outer">
  <div class="inner">
  </div>
</div></textarea>
  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.outer {
  width: 100%;
  height: 10em;
  background-color: red;
}
.inner {
  width: 550px;
  height: 10em;
  background-color: blue;
}</textarea>
  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);
function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}
reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

颜色

CSS中指定颜色的方法有很多，其中一些是最近实现的。CSS中到处都可以使用相同的颜色值，无论是指定文本颜色、背景颜色，还是其他任何颜色。

现代计算机中可用的标准颜色系统是24位，通过不同的红、绿、蓝通道，每个通道有256种不同的值，从而显示出大约1670万种不同的颜色。 (256 x 256 x 256 = 16,777,216.)

让我们运行不同的可用类型的颜色值。

注意:要在下面讨论的不同颜色系统之间转换，您需要一个颜色转换器。有很多简单的在线转换器，如 HSL to RGB / RGB to HSL / Hex Colour Converter.

关键词

最简单、最古老的颜色类型在CSS颜色关键词。这些都是特定的字符串代表特定的颜色值。例如,下面的代码:

<p>This paragraph has a red background</p>

p {
  background-color: red;
}

给出这个结果：

这很容易理解，虽然它只允许我们指定明显的颜色原语。有大约165个不同的关键字可用于现代Web浏览器-见 full color keyword list.

你可能会在工作中经常使用诸如红色、黑色和白色这样的纯颜色，但除此之外，你还想使用另一种颜色系统。

十六进制值

下一个无处不在的颜色系统是十六进制颜色或十六进制代码。每个十六进制值由一个哈希/磅符号（#）其次是六进制数，其中每个可以值0和F之间（占16），0123456789abcdef。每对值代表一个通道——红色、绿色和蓝色——允许我们指定每个256个可用值中的任何一个。 (16 x 16 = 256.)

例如，这个代码：

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>

/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: #ff0000;
}
/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: #0000ff;
}
/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: #e0b0ff;
}

给出以下结果：

这些值比较复杂，不太容易理解，但是它们比关键字更灵活——您可以使用十六进制值来表示您想要在颜色方案中使用的任何颜色。.

RGB

我们要讨论的第三个方案是RGB。一个RGB值是一个函数rgb() -这是给定的三个参数表示的红色，绿色和蓝色通道的颜色值，在大致相同的方式作为十六进制值。与RGB的区别在于，每个通道不是由两个十六进制数字表示的，而是由0到255之间的十进制数表示的。

让我们重写最后一个例子来使用RGB颜色：

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>

/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}
/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}
/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

这给出了以下结果：

RGB系统几乎支持十六进制值-你可能不会遇到任何浏览器不支持他们在你的工作。RGB值可以说比十六进制值更直观，更容易理解。

注意: 为什么是255而不是256？计算机系统倾向于从0计算，而不是从1计算。所以允许256个可能的值，RGB颜色在0-255范围值，不是1-256。

HSL

比RGB支持稍微差一点的是HSL（而不是在旧版本IE），这是非常感兴趣的设计师而不是红后实施，绿色和蓝色的值，该hsl()函数接受的色相、饱和度和明度值，这是用来区分1670万种颜色之间，但以不同的方式：

色调：颜色的底色调。这个值在0到360之间，表示色轮周围的角度。
饱和度：饱和度是多少？这需要一个价值从0-100%，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度
明度：颜色有多亮或明亮？这需要一个价值从0-100%，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）

Note: （An HSL cylinder is useful for visualising the way this color model works. See the HSL and HSV article on Wikipedia.）一个HSL圆柱体可用于可视化此颜色模型的工作方式，在Wikipedia上查看 HSL and HSV article 。

Now we'll rewrite our example to use HSL colors:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>

/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}
/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}
/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

给出如下结果：

HSL的颜色模型直观的设计师用来处理这种颜色模型。是有用的,例如,找到一组颜色一起去单色配色方案

/* three different shades of red*/
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA 和 HSLA

RGB和HSLA都有相应的模式——RGBA和HSLA——允许您设置不仅要显示什么颜色,而且还可以设置颜色透明。相应的函数采用同样的参数,再加上第四个值范围在0 - 1——设置透明度,或者alpha通道。0是完全透明的,1是完全不透明的。

让我们展示另一个简单的例子,第一个HTML:

<p>This paragraph has a transparent red background</p>
<p>This paragraph has a transparent blue background</p>

现在CSS——我们正在第一段向下定位,显示段落重叠的效果(以后你会了解更多关于定位):

p {
  height: 50px;
  width: 350px;
}
/* Transparent red */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
  position: relative;
  top: 30px;
  left: 50px;
}
/* Transparent blue */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

结果如下：

透明的颜色更丰富的视觉效果非常有用——混合的背景,半透明的UI元素等等。

透明度

还有另一种方法来指定透明度，通过CSS——opacity 属性。与设置某个特定颜色的透明度相比，这会设置所有选定元素以及它们的孩子节点的透明度。再一次, 为了看出他们的区别，我们来研究下面这个例子：

<p>This paragraph is using RGBA for transparency</p>
<p>This paragraph is using opacity for transparency</p>

现在CSS是：

/* Red with RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}
/* Red with opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

结果如下：

注意区别——第一个框,使用RGBA颜色只有一个半透明的背景,而一切在第二个盒子是透明的,包括文本。你要仔细思考每个——例如何时使用RGBA是有用的,当你想创建一个覆盖图像标题图像显示在标题框但仍可读的文本。不透明度,另一方面是有用的,当你想要创建一个动画效果,整个UI元素从完全隐藏可见。

Active learning: Playing with colors

这个主动学习会话也没有正确的答案,我们就像你改变背景颜色值的三个盒子下面稍微覆盖在另一个之上。尝试一下关键词,十六进制,RGB / HSLA / RGBA / HSLA和不透明属性。看到你可以有多么有趣。

如果你犯了错,你可以使用reset按钮重置它。

Playable code 2

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="first">
</div>
<div class="second">
</div>
<div class="third">
</div></textarea>
  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.first {
  background-color: red;
  width: 400px;
  height: 200px;
  top: 0;
  left: 100px;
}
.second {
  background-color: blue;
  width: 200px;
  height: 200px;
  top: -150px;
  left: 125px;
}
.third {
  background-color: pink;
  width: 200px;
  height: 300px;
  top: -375px;
  left: 250px;
}
.first, .second, .third {
  position: relative;
}</textarea>
  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);
function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}
reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});
htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

函数

在程序中， functions是代码中的可重复使用的部分，它可以多次运行，以便使开发人员和计算机以最小的代价完成重复的任务。函数通常与JavaScript，Python，C++语言相关联，但它也作为属性值存在于CSS中。我们已经在Colors部分中看到函数了，例如 rgb(), hsl()：

background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

这些函数计算使用什么颜色。

但是你会看到函数在其他地方——每当你看到一个名字后用括号,包含一个或多个值之间用逗号分隔,你处理的是一个函数。例如:

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');

有许多令人兴奋的功能使用CSS,你将了解在适当的时候!

总结

I我希望你喜欢学习CSS值和单位——别担心如果这并不完整意义现在;你会得到越来越多的实践与这基本的CSS语法的一部分你前进!

上一页 Overview: Introduction to CSS 下一页

文档标签和贡献者

另见