阅读(1.4k) 书签赞(0) 我要纠错

CSS values and units

2018-05-15 17:26 更新

先决条件:	基本计算机知识，安装的基本软件，基本知识 developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files\">处理文件，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.
Percentages: 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.
Colors: For specifying background colors, text colors, etc.
Coordinate positions: e.g. for specifying the position of a positioned element relative to the top left of the screen.
Functions: For specifying e.g. background images or background image gradients.

你还会看到这样的单元的例子在使用中的所有CSS主题的其余部分，以及你看到的每一个其他的CSS资源！你会习惯这一切，没有时间。

注意:您可以在 CSS参考中找到CSS单元的详尽涵盖范围， / a>; 单位是由尖括号包围的条目，例如< color> 。

数值

您将看到以CSS单位在许多地方使用的数字。本节讨论最常见的数值类。

长度和尺寸

您将使用长度/大小单位(请参阅< length> 以供参考) 在CSS中的时间在布局，排版和更多。让我们来看一个简单的例子 - 首先是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;
}

结果如下:

所以在这段代码中我们做了以下:

Setting the margin, padding and border-width of every paragraph to 5 pixels, 10 pixels and 2 pixels respectively. A single value for margin/padding means that all four sides are set to the same value. The border width is set as part of the value for the border shorthand.
Setting the width of the three different paragraphs to larger and larger pixel values, meaning that the boxes get wider the further down you go.
Setting the font-size of the three different paragraphs to larger and larger pixel values, meaning that the text gets bigger the further down you go. The font-size refers to the height of each glyph.

像素(px)称为绝对单位，因为它们将始终具有相同的大小，而与其他任何相关设置无关。其他绝对单位如下:

mm, cm, in: Millimeters, centimeters, or inches.
pt, pc: Points (¹/₇₂ of an inch) or picas (12 points.)

除了像素，你可能不会经常使用这些。

还有相对单位，它们相对于当前元素的 font-size 或 ="glossaryLink"title ="viewport:视口表示当前正在查看的计算机图形中的多边形(通常为矩形)区域。在Web浏览器术语中，它指的是由可见网站内容占用的浏览器部分。 "> viewport size:

em: 1em is the same as the font-size of the current element (more specifically, the width of a capital letter M.) The default base font-size given to web pages by web browsers before CSS styling is applied is 16 pixels, which means the computed value of 1em is 16 pixels for an element by default. But beware — font sizes are inherited by elements from their parents, so if different font sizes have been set on parent elements, the pixel equivalent of an em can start to become complicated. Don't worry too much about this for now — we'll cover inheritance and font-sizing in more detail in later articles and modules. ems are the most common relative unit you'll use in web development.
ex, ch: Respectively these are the height of a lower case x, and the width of the number 0. These are not as commonly used or well-supported as ems.
rem: The rem (root em) works in exactly the same way as the em, except that it will always equal the size of the default base font-size; inherited font sizes will have no effect, so this sounds like a much better option than ems, although rems don't work in older versions of Internet Explorer (see more about cross-browser support in Debugging CSS.)
vw, vh: Respectively these are ¹/₁₀₀th of the width of the viewport, and ¹/₁₀₀th of the height of the viewport. Again, these are not as widely supported as rems.

使用相对单位非常有用 - 您可以相对于字体或视口大小来调整HTML元素的大小，这意味着如果例如文字大小在视觉受损的用户的整个网站上翻倍，则布局将保持正确。

无单位值

有时你会在CSS中遇到无单位的数字值 - 这并不总是一个错误，事实上它在某些情况下是完全允许的。例如，如果你想从一个元素中完全删除 margin 或 padding ，你可以使用无单位0 - 0为0，无论以前设置了什么单位！

margin: 0;

Unitless line height

另一个示例是 "> 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倍，或24像素。

Number of animations

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， ="https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function">< timing-function> s， mozilla.org/zh-CN/docs/Web/CSS/string\"><string> s ...)，但我们在这里感兴趣的是在 animation-iteration - count:5; - 它控制动画在被关闭时出现的次数(在这种情况下，当段落被鼠标移过时)，并且是一个简单的无单位整数(整数，在计算机中)。

我们从这段代码得到的结果如下:

百分比

您还可以使用百分比值来指定可以通过特定数值指定的大多数内容。这允许我们创建例如其宽度将总是移动到其父容器宽度的一定百分比的框。这可以与宽度设置为某个单位值(如 px 或 em )的框相比较，即使它们的父级容器的宽度改变。

让我们举一个例子来解释这个。

首先，两个类似的框，在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%;
}

这给我们以下结果:

注意:您可以通过调整此文章所在的浏览器窗口来查看此效果的效果; 也尝试在上执行相同的操作 Github上找到的原始示例。

我们还将 font-size 设置为百分比值:200％。这有点不同于你的期望，但它确实有意义 - 再次，这个新的大小是相对于父的字体大小，因为它是与 em s。在这种情况下，父字体大小为16px - 页面默认值，因此计算值将为此值的200％，即32像素。这实际上工作在一个非常类似的方式ems - 200％基本上相当于2ems。

这两种不同的框布局类型通常称为液体布局(随浏览器视口大小变化而变化)和固定宽度布局(保持不变) 不同用途，例如:

A liquid layout could be used to ensure that a standard document will always fit on the screen and look ok across varying mobile device screen sizes.
A fixed width layout can be used to keep an online map the same size; the browser viewport could then scroll around the map, only viewing a certain amount of it at any one time. The amount you can see at once depends on how big your viewport is.

稍后在课程中，在CSS布局和响应式设计模块(TBD)中，您将了解更多关于网页布局的信息。

主动学习:使用长度

对于这种积极的学习，没有正确的答案。我们只是想让你在使用 .inner 和 .outer divs的宽度/高度来看看不同的值有什么效果。尝试 .inner div的百分比值，并查看它如何调整为 .outer div的宽度更改。尝试一些固定值，如像素和 em 。

如果发生错误，您可以随时使用重置按钮重置。

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位，其允许通过不同的红色，绿色和蓝色通道的组合显示大约1670万种不同的颜色，每通道具有256个不同的值(256×256×256 = 16777216)。

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

注意:要在下面讨论的不同颜色系统之间进行转换，您需要使用颜色转换器。有许多简单的转换器可在线查找，例如 HSL到RGB / RGB到HSL /十六进制颜色转换器 >。

关键词

CSS中最简单，最古老的颜色类型是颜色关键字。这些是表示特定颜色值的特定字符串。例如，下面的代码:

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

p {
  background-color: red;
}

给出这个结果:

这很容易理解，虽然它只是真的允许我们指定明显的颜色基元。现代网络浏览器中有大约165种不同的关键字可供使用 - 请参见全彩色关键字列表。

你可能会在你的工作中经常使用纯红色，黑色和白色，但除此之外，你将需要使用另一个颜色系统。

十六进制值

下一个普遍存在的颜色系统是十六进制颜色或十六进制代码。每个十六进制值由散列/井号(#)和六个十六进制数组成，每个十六进制数可以取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万种颜色，但采用不同的方式:

hue: the base shade of the color. This takes a value between 0 and 360, presenting the angles round a color wheel.
saturation: how saturated is the color? This takes a value from 0-100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation
lightness: how light, or bright is the color? This takes a value from 0-100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)

注意:HSL圆柱体用于可视化此颜色模型的工作方式。请参阅维基百科上的 HSL和HSV文章。

现在我们重写我们的例子来使用HSL颜色:

<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和HSL都有相应的模式 - 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元素从完全可见到隐藏时，透明度是有用的。

主动学习:使用颜色

这个主动的学习会话也没有正确的答案 - 我们只是想你改变下面的三个框的背景颜色值，稍微重叠在另一个。尝试关键字，十六进制，RGB / HSLA / RGBA / HSLA和opacity属性。看看你有多少乐趣。

如果发生错误，您可以随时使用重置按钮重置。

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

功能

在编程中，函数是一个可重复使用的代码段，可以多次运行以完成重复任务，开发人员和计算机都要尽量减少工作量。函数通常与JavaScript，Python或C ++等语言相关联，但它们也作为属性值存在于CSS中。我们已经在颜色部分中看到了正在实施的功能，其中包含 / Web / CSS / color_value#rgb％28％29"> rgb() ， Web / CSS / color_value#hsl％28％29"> 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中有许多令人兴奋的功能使用，你会在适当的时候学习！

概要

我希望你喜欢学习CSS值和单位 - 不要担心，如果这不是所有都完全意义，现在; 随着你的前进，你将会得到越来越多的练习与CSS语法的这个基本部分！

以上内容是否对您有帮助：

← Combinators and multiple selectors

Cascade and inheritance →

写笔记

我要补充