CSS values and units

在CSS中有許多值類型，其中一些是非常常見的，其中一些，你很少會(huì)遇到。 我們不會(huì)在本文中詳盡地涵蓋所有這些; 只是那些你可能會(huì)發(fā)現(xiàn)最有用的，因?yàn)槟憷^續(xù)你的道路掌握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.

你還會(huì)看到這樣的單元的例子在使用中的所有CSS主題的其余部分，以及你看到的每一個(gè)其他的CSS資源！ 你會(huì)習(xí)慣這一切，沒有時(shí)間。

數(shù)值

您將看到以CSS單位在許多地方使用的數(shù)字。 本節(jié)討論最常見的數(shù)值類。

長(zhǎng)度和尺寸

您將使用長(zhǎng)度/大小單位(請(qǐng)參閱< length> 以供參考) 在CSS中的時(shí)間在布局，排版和更多。 讓我們來看一個(gè)簡(jiǎn)單的例子 - 首先是HTML:

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

現(xiàn)在的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;
}

結(jié)果如下:

所以在這段代碼中我們做了以下:

• 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)稱為絕對(duì)單位，因?yàn)樗鼈儗⑹冀K具有相同的大小，而與其他任何相關(guān)設(shè)置無關(guān)。 其他絕對(duì)單位如下:

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

除了像素，你可能不會(huì)經(jīng)常使用這些。

還有相對(duì)單位，它們相對(duì)于當(dāng)前元素的 font-size 或 ="glossaryLink"title ="viewport:視口表示當(dāng)前正在查看的計(jì)算機(jī)圖形中的多邊形(通常為矩形)區(qū)域。在Web瀏覽器術(shù)語中，它指的是由可見網(wǎng)站內(nèi)容占用的瀏覽器部分。 "> 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.

使用相對(duì)單位非常有用 - 您可以相對(duì)于字體或視口大小來調(diào)整HTML元素的大小，這意味著如果例如文字大小在視覺受損的用戶的整個(gè)網(wǎng)站上翻倍，則布局將保持正確。

無單位值

有時(shí)你會(huì)在CSS中遇到無單位的數(shù)字值 - 這并不總是一個(gè)錯(cuò)誤，事實(shí)上它在某些情況下是完全允許的。 例如，如果你想從一個(gè)元素中完全刪除 margin 或 padding ，你可以使用無單位0 - 0為0，無論以前設(shè)置了什么單位！

margin: 0;

Unitless line height

另一個(gè)示例是 "> line-height ，它設(shè)置元素中每行文本的高度。 您可以使用單位設(shè)置特定的行高，但通常更容易使用無單位值，這就像一個(gè)簡(jiǎn)單的乘法因子。 例如，取以下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;
}

這將產(chǎn)生以下輸出:

這里 font-size 是16px; 線高度將是此值的1.5倍，或24像素。

Number of animations

CSS動(dòng)畫允許您為網(wǎng)頁上的HTML元素設(shè)置動(dòng)畫。 讓我們提出一個(gè)簡(jiǎn)單的例子，當(dāng)一個(gè)段落被移動(dòng)時(shí)，它會(huì)使一個(gè)段落旋轉(zhuǎn)。 這個(gè)例子的HTML很簡(jiǎn)單:

<p>Hello</p>

CSS有點(diǎn)復(fù)雜:

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

在這里，您可以看到一些有趣的單位，我們?cè)诒疚闹袥]有明確討論(< ; 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 ...)，但我們?cè)谶@里感興趣的是在 animation-iteration - count:5; - 它控制動(dòng)畫在被關(guān)閉時(shí)出現(xiàn)的次數(shù)(在這種情況下，當(dāng)段落被鼠標(biāo)移過時(shí))，并且是一個(gè)簡(jiǎn)單的無單位整數(shù)(整數(shù)，在計(jì)算機(jī)中)。

我們從這段代碼得到的結(jié)果如下:

百分比

您還可以使用百分比值來指定可以通過特定數(shù)值指定的大多數(shù)內(nèi)容。 這允許我們創(chuàng)建例如其寬度將總是移動(dòng)到其父容器寬度的一定百分比的框。 這可以與寬度設(shè)置為某個(gè)單位值(如 px 或 em )的框相比較，即使它們的父級(jí) 容器的寬度改變。

讓我們舉一個(gè)例子來解釋這個(gè)。

首先，兩個(gè)類似的框，在HTML中標(biāo)記:

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

現(xiàn)在一些CSS風(fēng)格這些框:

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

這給我們以下結(jié)果:

這給我們以下結(jié)果:

我們還將 font-size 設(shè)置為百分比值:200％。 這有點(diǎn)不同于你的期望，但它確實(shí)有意義 - 再次，這個(gè)新的大小是相對(duì)于父的字體大小，因?yàn)樗桥c em s。 在這種情況下，父字體大小為16px - 頁面默認(rèn)值，因此計(jì)算值將為此值的200％，即32像素。 這實(shí)際上工作在一個(gè)非常類似的方式ems - 200％基本上相當(dāng)于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布局和響應(yīng)式設(shè)計(jì)模塊(TBD)中，您將了解更多關(guān)于網(wǎng)頁布局的信息。

主動(dòng)學(xué)習(xí):使用長(zhǎng)度

對(duì)于這種積極的學(xué)習(xí)，沒有正確的答案。 我們只是想讓你在使用 .inner 和 .outer divs的寬度/高度來看看不同的值有什么效果。 嘗試 .inner div的百分比值，并查看它如何調(diào)整為 .outer div的寬度更改。 嘗試一些固定值，如像素和 em 。

如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。

<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中指定顏色有許多方法，其中一些是最近實(shí)現(xiàn)的。 在CSS中，無論是指定文本顏色，背景顏色等，都可以使用相同的顏色值。

在現(xiàn)代計(jì)算機(jī)中可用的標(biāo)準(zhǔn)顏色系統(tǒng)是24位，其允許通過不同的紅色，綠色和藍(lán)色通道的組合顯示大約1670萬種不同的顏色，每通道具有256個(gè)不同的值(256×256×256 = 16777216)。

讓我們運(yùn)行不同的可用類型的顏色值。

關(guān)鍵詞

CSS中最簡(jiǎn)單，最古老的顏色類型是顏色關(guān)鍵字。 這些是表示特定顏色值的特定字符串。 例如，下面的代碼:

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

p {
  background-color: red;
}

給出這個(gè)結(jié)果:

這很容易理解，雖然它只是真的允許我們指定明顯的顏色基元。 現(xiàn)代網(wǎng)絡(luò)瀏覽器中有大約165種不同的關(guān)鍵字可供使用 - 請(qǐng)參見全彩色關(guān)鍵字列表 。

你可能會(huì)在你的工作中經(jīng)常使用純紅色，黑色和白色，但除此之外，你將需要使用另一個(gè)顏色系統(tǒng)。

十六進(jìn)制值

下一個(gè)普遍存在的顏色系統(tǒng)是十六進(jìn)制顏色或十六進(jìn)制代碼。 每個(gè)十六進(jìn)制值由散列/井號(hào)(#)和六個(gè)十六進(jìn)制數(shù)組成，每個(gè)十六進(jìn)制數(shù)可以取0和f(表示16)之間的值，所以0123456789abcdef。 每對(duì)值表示一個(gè)通道(紅色，綠色和藍(lán)色)，并允許我們?yōu)槊總€(gè)通道指定256個(gè)可用值中的任何一個(gè)(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;
}

給出以下結(jié)果:

這些值有點(diǎn)復(fù)雜，不太容易理解，但它們比關(guān)鍵字更通用 - 您可以使用十六進(jìn)制值來表示要在您的配色方案中使用的任何顏色。

RGB

我們將在這里討論的第三個(gè)方案是RGB。 RGB值是一個(gè)函數(shù) - rgb() - 其中包含代表紅色，綠色和藍(lán)色 強(qiáng)>通道值的顏色，以十六進(jìn)制值的方式。 與RGB的區(qū)別在于每個(gè)通道不是由兩個(gè)十六進(jìn)制數(shù)字表示，而是由0和255之間的十進(jìn)制數(shù)表示。

讓我們重寫我們最后一個(gè)例子來使用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);
}

這給出以下結(jié)果:

RGB系統(tǒng)幾乎與十六進(jìn)制值支持 - 你可能不會(huì)遇到任何不支持他們?cè)谀愕墓ぷ鞯臑g覽器。 RGB值可以說是有點(diǎn)更直觀和容易理解比十六進(jìn)制值太。

HSL

比RGB更好的支持是HSL模型(不是老版本的IE)，這是在設(shè)計(jì)師的很多興趣之后實(shí)現(xiàn)的，而不是紅色，綠色和藍(lán)色值， hsl() 色調(diào)，飽和度和亮度值，用于區(qū)分1670萬種顏色，但采用不同的方式:

1. hue: the base shade of the color. This takes a value between 0 and 360, presenting the angles round a color wheel.
2. 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
3. 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)

現(xiàn)在我們重寫我們的例子來使用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%);
}

給出以下結(jié)果:

HSL顏色模型對(duì)于用于使用這種顏色模型的設(shè)計(jì)者是直觀的。 它對(duì)于例如找到一組在單色配色方案中一起使用的陰影是有用的:

/* 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都有相應(yīng)的模式 - RGBA和HSLA - 允許您不僅設(shè)置要顯示的顏色，而且還要設(shè)置您想要的顏色的透明度。 它們的相應(yīng)函數(shù)采用相同的參數(shù)，加上設(shè)置透明度的范圍0-1中的第四個(gè)值，或 alpha通道。 0是完全透明的，1是完全不透明的。

讓我們展示另一個(gè)快速示例 - 首先是HTML:

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

現(xiàn)在的CSS - 這里我們將第一段向下移動(dòng)一些定位，以顯示段落重疊的效果(稍后將了解有關(guān)定位的更多信息):

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

這是結(jié)果:

透明色彩對(duì)于更豐富的視覺效果非常有用 - 混合背景，半透明UI元素等。

不透明度

還有另一種通過CSS指定透明度的方法 - 元素，即元素后面的背景覆蓋的程度。"> opacity 屬性。 不是設(shè)置特定顏色的透明度，而是設(shè)置所有選定元素及其子元素的透明度。 再次，讓我們研究一個(gè)例子，所以我們可以看到差異。

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

現(xiàn)在的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;
}

這是結(jié)果:

注意區(qū)別 - 使用RGBA顏色的第一個(gè)框只有半透明背景，而第二個(gè)框中的所有內(nèi)容都是透明的，包括文本。 你需要仔細(xì)考慮什么時(shí)候使用每個(gè) - 例如RGBA是有用的，當(dāng)你想創(chuàng)建一個(gè)重疊的圖像標(biāo)題的圖像顯示通過標(biāo)題框，但文本仍然可讀。 另一方面，當(dāng)你想創(chuàng)建一個(gè)動(dòng)畫效果，整個(gè)UI元素從完全可見到隱藏時(shí)，透明度是有用的。

主動(dòng)學(xué)習(xí):使用顏色

這個(gè)主動(dòng)的學(xué)習(xí)會(huì)話也沒有正確的答案 - 我們只是想你改變下面的三個(gè)框的背景顏色值，稍微重疊在另一個(gè)。 嘗試關(guān)鍵字，十六進(jìn)制，RGB / HSLA / RGBA / HSLA和opacity屬性。 看看你有多少樂趣。

如果發(fā)生錯(cuò)誤，您可以隨時(shí)使用重置按鈕重置。

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

功能

在編程中， 函數(shù)是一個(gè)可重復(fù)使用的代碼段，可以多次運(yùn)行以完成重復(fù)任務(wù)，開發(fā)人員和計(jì)算機(jī)都要盡量減少工作量。 函數(shù)通常與JavaScript，Python或C ++等語言相關(guān)聯(lián)，但它們也作為屬性值存在于CSS中。 我們已經(jīng)在顏色部分中看到了正在實(shí)施的功能，其中包含 / 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);

這些函數(shù)計(jì)算要使用的顏色。

但你會(huì)看到其他地方的函數(shù) - 任何時(shí)候你看到一個(gè)名稱后面的括號(hào)，包含一個(gè)或多個(gè)值用逗號(hào)分隔，你正在處理一個(gè)函數(shù)。 例如:

/* 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中有許多令人興奮的功能使用，你會(huì)在適當(dāng)?shù)臅r(shí)候?qū)W習(xí)！

概要

我希望你喜歡學(xué)習(xí)CSS值和單位 - 不要擔(dān)心，如果這不是所有都完全意義，現(xiàn)在; 隨著你的前進(jìn)，你將會(huì)得到越來越多的練習(xí)與CSS語法的這個(gè)基本部分！