MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS的值和单位

翻译正在进行中。

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

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

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

  • 数值:Numeric values: Length values for specifying e.g. element width, border thickness, or font size, and unitless integers for specifying e.g. relative line width or number of times to run an animation.
  • 百分比: 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.
  • 颜色: For specifying background colors, text colors, etc.
  • 坐标位置: e.g. for specifying the position of a positioned element relative to the top left of the screen.
  • 函数: For specifying e.g. background images or background image gradients.

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

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

数值

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

长度和尺寸

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

Length_and_size

<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;
}

结果如下:

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

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

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

  • mm, cm, in: 毫米(Millimeters),厘米(centimeters),英寸(inches)
  • pt, pc: 点(Points (1/72 of an inch)), 十二点活字( picas (12 points.))

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

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

  • em:1em是当前元素的字体大小相同(更具体地说,一个大写字母M)宽度的默认基础字体大小给网页浏览器在应用CSS样式是16像素,这意味着1em计算值为16的像素为一个元素的默认。但是要小心-字体大小是由父母的元素继承的,所以如果在父元素上设置了不同的字体大小,EM的像素值就会变得复杂。现在不要过于担心这个问题,我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。EMS是Web开发中最常用的相对单位。
  • ex, ch: 分别是小写x的高度和数字0的宽度。这些并不像EMS那样被普遍使用或很好地支持。
  • rem: REM(根EM)以同样的方式作为他们,但它总是等于默认基础字体大小的尺寸;继承了字体大小没有影响,这听起来像一个更好的选择比EMS,虽然系统不工作在旧版本的Internet Explorer(多见关于跨浏览器支持 Debugging CSS.)
  • vw, vh: Respectively these are 1/100th of the width of the viewport, and 1/100th of the height of the viewport. Again, these are not as widely supported as rems.

使用相对单位是非常有用的-你可以把你的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;
}

这将产生以下输出:

Here the font-size is 16px; the line height will be 1.5 times this, or 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 and color. 然后我们给第一个div和第二个div不同。background-colors 所以我们可以很容易地把它们分开。我们也在设置第一个div width to 650px, 第二div的宽度为75%。这样做的效果是,第一个div始终具有相同的宽度,即使视口的大小(它将开始消失,当屏幕视图变得比屏幕窄),而第二div的宽度不断改变视口的大小改变时,它将永远是75%,其母为宽。在这种情况下,div的父元素是<主体>元素,默认情况下是视口宽度的100%。

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

We've also set the font-size to a percentage value: 200%. This works a bit differently to how you might expect, but it does make sense — again, this new sizing is relative to the parent's font-size, as it was with ems. In this case, the parent font-size is 16px — the page default, so the computed value will be 200% of this, or 32px. This actually works in a very similar fashion to ems — 200% is basically the equivalent of 2ems.

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

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

你会在后面的课程中学习到更多关于网页的布局,在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.

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

颜色

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万种颜色之间,但以不同的方式:

  1. 色调:颜色的底色调。这个值在0到360之间,表示色轮周围的角度。
  2. 饱和度:饱和度是多少?这需要一个价值从0-100%,其中0是没有颜色(它将显示为灰色),100%是全彩色饱和度
  3. 明度:颜色是明亮还是明亮?这需要一个价值从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.

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%);
}

Gives the following result:

The HSL color model is intuitive to designers that are used to working with such color models. It is useful for, for example, finding a set of shades to go together in a monochrome color scheme:

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

RGBA and HSLA

RGB and HSL both have corresponding modes — RGBA and HSLA — that allow you to set not only what color you want to display, but also what transparency you want that color to have. Their corresponding functions take the same parameters, plus a fourth value in the range 0–1 — which sets the transparency, or alpha channel. 0 is completely transparent, and 1 is completely opaque.

Let's show another quick example — first the HTML:

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

Now the CSS — here we are moving the first paragraph downwards with some positioning, to show the effect of the paragraphs overlapping (you'll learn more about positioning later on):

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);
}

This is the result:

Transparent colors are very useful for richer visual effects — blending of backgrounds, semi-transparent UI elelments, etc.

Opacity

There is another way to specify transparency via CSS — the opacity property. Instead of setting the transparency of a particular color, this sets the transparency of all selected elements and their children. Again, let's study an example so we can see the difference.

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

Now the 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;
}

This is the result:

Note the difference — the first box that uses the RGBA color only has a semi-transparent background, whereas everything in the second box is transparent, including the text. You'll want to think carefully about when to use each — for example RGBA is useful when you want to create an overlaid image caption where the image shows through the caption box but the text is still readable. opacity on the other hand is useful when you want to create an animation effect where a whole UI element goes from completely visible to hidden.

Active learning: Playing with colors

This active learning session also has no right answers — we'd just like you to alter the background color values of the three boxes below that are slightly overlaid on top of one another. Try keywords, hex, RGB/HSLA/RGBA/HSLA, and the opacity property. See how much fun you can have.

If you make a mistake, you can always reset it using the Reset button.

Functions

In programming, a functions is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of the both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section, with rgb(), hsl(), etc.:

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

These functions calculate what color to use.

But you'll see functions in other places too — anytime you see a name with brackets after it, containing one or more values separated by commas, you are dealing with a function. For example:

/* 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');

There are many exciting bits of functionality to use within CSS, which you'll learn about in due course!

Summary

I hope you enjoyed learning about CSS values and units — don't worry if this doesn't all make complete sense right now; you'll get more and more practice with this fundamental part of CSS syntax as you move forward!

文档标签和贡献者

 此页面的贡献者: Atractylodes, mytream
 最后编辑者: Atractylodes,