當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS学习摘要-数值和单位及颜色

發布時間：2024/4/14 CSS 56 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS学习摘要-数值和单位及颜色小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在CSS中，值的類型有很多種，一些很常見，一些你卻幾乎沒怎么遇到過。我們不會在這篇文檔中面面俱到地描述他們，而只是這些對于掌握CSS可能最有用處的這些。本文將會涉及如下CSS的值：

數值: 長度值，用于指定例如元素寬度、邊框（border）寬度或字體大小；以及無單位整數。用于指定例如相對線寬或運行動畫的次數。
百分比: 可以用于指定尺寸或長度——例如取決于父容器的長度或高度，或默認的字體大小。
顏色: 用于指定背景顏色，字體顏色等。
坐標位置: 例如，以屏幕的左上角為坐標原點定位元素的位置。
函數: 例如，用于指定背景圖片或背景圖片漸變。

數值

你會在很多地方看到CSS單位中使用到數值。這一部分將會討論數值的最常用類別。

長度和尺寸

在CSS布局、排版等等的所有時候，你都會使用到長度/尺寸單位（<length>)。我們不妨先看一個簡單的例子——先上HTML：

This is a paragraph. This is a paragraph. This is a paragraph.

然后是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 (1/72 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上不被支持。
vw, vh: 分別是視口寬度的1/100和視口高度的1/100，其次，它不像rem那樣被廣泛支持。

使用相對單位是非常有用的-你可以調整你的HTML元素大小相對于你的字體或視口大小，這意味著布局將保持看起來正確，假設舉個例子是一個視障用戶的話，整個網站上的文本大小是原來的兩倍。

無單位的值

你有時候會在CSS遇到無單位的數值，這不總是一個錯誤，事實上它是在某些情況下，完全可以。例如，如果你想讓一個元素完全去除外邊框和內邊框，你可以只使用無單位的0 — 0就是0，不管前面設置的單位是什么！

margin: 0;

無單位的行高

另一個例子是 line-height 設置元素中每行文本的高度。你可以使用單位設置特定的行的高度，但使用一個無量綱的值往往更容易，它就像一個簡單的乘法因子。

注：line-height
CSS屬性中設置用于行所需要的空間，例如文本。
對于塊級元素，它指定元素中線框的最小高度。
在未替換的內聯元素中，它指定用于計算線框高度的高度。
對于替代行內元素，如 button 或其他 input 元素，line-height 沒有影響。
對于部分替代元素，line-height 依然可以影響元素的樣式布局。

動畫的數值

CSS動畫能夠讓頁面上的HTML元素動起來。我們來看一個例子，當我們把鼠標浮動到一個段落上的時候，它能夠旋轉起來。這個例子的HTML代碼很簡單：

Hello

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

這里你可以看到一些我們之前沒有明確提到的有趣單位，但是我們感興趣的是這一行 animation-iteration-count: 5; ——此行控制著動畫啟動（這里是指光標浮動至段落上）時后會執行多少次，而且這是一個簡短無單位純數字（計算機中稱之為整型）。

以下是代碼的實際效果：

百分比

還可以使用百分比值指定可以通過特定數值指定的大部分內容。這使我們可以創建，例如，其寬度總是會移動到其父容器寬度的一定百分比的框中。這可以與那些將其寬度設置為某個單位值（如px或ems）的框進行比較，它們的長度總是保持相同的長度，即使它們的父容器的寬度發生變化。

讓我們舉個例子來說明這個問題。

首先，用HTML標記的兩個相似的盒子：

<div><div class="boxes">Fixed width layout with pixels</div><div class="boxes">Liquid layout with percentages</div> </div>

現在一些CSS來裝飾這些盒子：

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

這給了我們以下結果：

在這里，我們給兩個divs一些 [margin] [height] [font-size] [border] 和 [color] 。

然后我們給第一個div和第二個div不同的 [background-color]，所以我們可以很容易地區分開他們。我們還將第一個div的 [width]設置為650px，將第二個div的寬度設置為75％。這樣做的效果是，第一個div始終具有相同的寬度，即使視口大小被調整（當視口變得比屏幕更窄時，它將從屏幕上消失），而第二個div的寬度隨著視口（viewport ）的變化而變化，使其始終保持其父元素的75％。在這個例子中，div的父元素是<body>元素，默認情況下是視口寬度的100％。

注意: 您可以通過調整本文中的瀏覽器窗口來看到這種效果；
margin屬性為給定元素設置所有四個（上下左右）方向的外邊距屬性。這是四個外邊距屬性設置的簡寫。四個外邊距屬性設置分別是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外邊距允許為負數。

font-size CSS 屬性中指定字體的大小。因為該屬性的值會被用于計算em和ex長度單位，定義該值可能改變其他元素的大小。

border屬性是一個用于設置各種單獨的邊界屬性的簡寫屬性。border可以用于設置一個或多個以下屬性的值： border-width, border-style, border-color。

background-color 會設置元素的背景色, 屬性的值為顏色值或關鍵字transparent二者選其一。

width 屬性指定了元素內容區的寬度. 內容區在元素padding，border和margin里面。

我們也可以設置font-size的百分比為200%。它將和你預計的工作方式有一點不同，但這是講得通的，它的新大小是相對于父容器的字體大小的，就像em一樣。在這種情況下，父容器的字體大小為16px——頁面的默認值，所以計算的值為16px的200%，或32px。這和em的風格確實很類似—200%基本上和2em一樣。

這兩種不同的框布局類型通常稱為動態（流體）布局（如瀏覽器視口大小的變化），固定寬度布局（不管怎樣都保持不變）：

可以使用動態布局來確保標準文檔始終適合于屏幕，并且可以在不同的移動設備屏幕大小上表現良好。
一個固定寬度的布局可以用來保持在線地圖的大小相同；瀏覽器視口可以在地圖上滾動，只在一個時間內查看一定數量的地圖。您可以立即看到的量取決于您的視口有多大。

顏色

CSS中指定顏色的方法有很多，其中一些是最近實現的。CSS中到處都可以使用相同的顏色值，無論是指定文本顏色、背景顏色，還是其他任何顏色。

現代計算機中可用的標準顏色系統是24位，通過不同的紅、綠、藍通道，每個通道有256種不同的值，從而顯示出大約1670萬種不同的顏色。 (256 x 256 x 256 = 16,777,216.)

讓我們運行不同的可用類型的顏色值。

關鍵詞（色彩關鍵字）

最簡單、最古老的顏色類型，CSS顏色關鍵詞。這些都是特定的字符串代表特定的顏色值。例如red代表紅色。

這很容易理解，盡管它只能讓我們指定明顯的顏色基元。有大約165個不同的關鍵字可用于現代Web瀏覽器-見 full color keyword list.

你可能會在工作中經常使用諸如紅色、黑色和白色這樣的純顏色，但除此之外，你還想使用另一種顏色系統。

十六進制值

下一個常用的顏色系統是十六進制顏色或十六進制代碼。每個顏色包括一個哈希/磅符號（#）和其后面緊跟的六個十六進制數，其中每個十六進制數可以是0和F之間的一個值（一共16個），0123456789abcdef。每對十六進制數代表一個通道（紅色、綠色或者藍色）允許我們指定256個可用值。 (16 x 16 = 256.)

例如，這個代碼：

This paragraph has a red background This paragraph has a blue background This paragraph has a kind of pinky lilac background /* 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顏色：

This paragraph has a red background This paragraph has a blue background This paragraph has a kind of pinky lilac background /* 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()函數接受的色相、飽和度以及明度值，以與上述三種不同的方式用來區分167萬種顏色：

色調：顏色的底色調。這個值在0到360之間，表示色輪周圍的角度。

飽和度：飽和度是多少？這需要一個從0-100%的值，其中0是沒有顏色（它將顯示為灰色），100%是全彩色飽和度。

明度：顏色有多亮或明亮？這需要一個從0-100%的值，其中0是無光（它會出現全黑的），100%是充滿光的（它會出現全白）

現在我們用HSL顏色重寫上面的例子:

This paragraph has a red background This paragraph has a blue background This paragraph has a kind of pinky lilac background /* 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——不僅允許您設置想要顯示的顏色,還有此顏色的透明度（ transparency ）。它們與與之相應的函數采用同樣的參數,再加上第四個范圍在0-1的值——設置透明度,或者說alpha通道。0是完全透明的,1是完全不透明的。

讓我們展示另一個簡單的例子,第一個HTML:

This paragraph has a transparent red background This paragraph has a transparent blue background

現在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元素等等。

不透明度（Opacity）

還有另一種方法來指定透明度，通過CSS——opacity 屬性。
與設置某個特定顏色的透明度相比，這會設置所有選定元素以及它們的孩子節點的不透明度。

opacity屬性指定了一個元素的透明度。換言之，opacity屬性指定了一個元素后面的背景的被覆蓋程度。

為了看出他們的區別，我們來研究下面這個例子：

This paragraph is using RGBA for transparency This paragraph is using opacity for transparency

現在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元素從完全隱藏到可見，此時應該使用不透明度（Opacity）。

transparent 關鍵字

transparent 關鍵字表示一個完全透明的顏色，即該顏色看上去將是背景色。從技術上說，它是帶有阿爾法通道為最小值的黑色，是 rgba(0,0,0,0) 的簡寫。

currentColor 關鍵字

currentColor 關鍵字代表原始的 color 屬性的計算值。它允許讓繼承自屬性或子元素的屬性顏色屬性以默認值不再繼承。

它也能用于那些繼承了元素的 color 屬性計算值的屬性，相當于在這些元素上使用 inherit關鍵字，如果這些元素有該關鍵字的話。

附圖：大部分的色彩關鍵字和rgb表示

（譯者注：顏色譯名僅供參考。）

end
2018-5-31

全文摘錄自MDN網絡開發者網站

轉載于:https://www.cnblogs.com/tielemao/p/9118429.html

總結

以上是生活随笔為你收集整理的CSS学习摘要-数值和单位及颜色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： k-Nearest Neighbors
下一篇： python字符串应用