探索 CSS 自訂屬性，也被稱為 CSS 變數，這是現代瀏覽器的強大新功能，幫助您編寫更好的 CSS 介紹 使用變數的基礎知識 在任何元素內建立變數 變數的作用範圍 使用 JavaScript 互動 CSS 變數值 處理無效值 瀏覽器支援 CSS 變數區分大小寫 CSS 變數中的數學計算 使用 CSS 變數進行媒體查詢 為 var() 設定備用值 介紹 過去幾年，CSS 預處理器非常成功。在新專案中開始使用 Less 或 SASS 是非常常見的事情。到現在仍然是非常流行的技術。 這些技術的主要優勢在我看來有以下幾點： 它們允許嵌套選擇器 它們提供了方便的導入功能 它們提供變數 現代 CSS 有一個強大的新功能，稱為 CSS 自訂屬性，通常也被稱為 CSS 變數。 CSS 不像 JavaScript、Python、PHP、Ruby 或 Go 這樣的程式語言，變數對於執行有用的事情至關重要。CSS 在它可以做的事情上非常有限，主要是一種聲明語法，用於告訴瀏覽器如何顯示 HTML 頁面。 但是，變數就是變數：一個指向值的名稱，CSS 中的變數有助於減少 CSS 中的重複和不一致，通過集中定義值。 它還引入了一個 CSS 預處理器永遠無法擁有的獨特功能：您可以使用 JavaScript 以編程方式訪問和更改 CSS 變數的值。 使用變數的基礎知識 CSS 變數使用特殊語法定義，將兩個連字符 (--) 添加到變數名稱 (--variable-name) 前面，然後是冒號和值。像這樣：...

＃什麼是適用於響應式設計的好的 CSS 斷點值？ 我在設計網站時注意到我在使用一些相當隨機的值作為我的 CSS 斷點。有時是像 800 或 1200 這樣的圓整值，有時是一個像 672 這樣具體的像素值。 我搜尋了適合我未來使用的斷點的正確值。 我有一點時間來查找這個，並得出了以下結論。 我們需要擔心的是 5 個主要的設備尺寸： 行動裝置直向（mobile portrait） 行動裝置橫向（mobile landscape） 平板電腦直向（tablet portrait） 平板電腦橫向（tablet landscape） 筆記型電腦（laptop） 這些設備對應到以下像素值： 行動裝置直向：小於 640px 行動裝置橫向：> 640px 平板電腦直向：> 768px 平板電腦橫向：> 1024px 筆記型電腦：> 1280px 我從Tailwind預設取得這些值。 我不是一位設計師，所以我並不每天涉獵最佳慣例，但這一次我決定以行動裝置為先設計。 這意味著我的 CSS，在沒有任何媒體查詢的情況下，將為行動裝置直向進行設計，然後在越來越大的設備上添加斷點，禁止在媒體查詢中使用 max-width。 我想我總是選擇相反的路線：先為較大的屏幕進行設計，這是我最常使用的方法，然後再縮小，但現在似乎最常接受和使用的解決方案是以行動裝置為先設計，並使用 min-width。 這些是我從現在開始要使用的媒體查詢： @media (min-width: 640px) { } @media (min-width: 768px) { } @media (min-width: 1024px) { } @media (min-width: 1280px) { }

學習如何在CSS中使用字型 在Web的黎明時期，你只能選擇少數幾種字型。 幸運的是，如今你可以在你的網頁上載入任何種類的字型。 CSS在字型方面在多年來獲得了許多不錯的功能。 font屬性是一些屬性的縮寫： font-family font-weight font-stretch font-style font-size 讓我們逐一介紹它們，然後再討論font。 接著，我們將討論如何載入自訂字型，可以使用@import或@font-face，或通過載入字型樣式表來載入。 font-family 設置元素將使用的字型家族。 為什麼是"家族"? 因為我們所了解的字型實際上是由幾個子字型組成的，這些子字型提供了我們所需要的所有樣式（粗體、斜體、輕鬆等）。 這是我Mac上的Font Book應用程式中的一個示例 - Fira Code字型家族下面有幾個專用字型： 這個屬性讓你可以選擇特定的字型，例如： body { font-family: Helvetica; } 你可以設置多個值，所以如果第一個值由於某些原因不能使用（例如在機器上找不到或下載字型的網絡連接失敗），則使用第二個值： body { font-family: Helvetica, Arial; } 到目前為止，我使用了一些特定的字型，我們稱之為Web安全字型，因為它們預安裝在不同的操作系統中。 我們將它們分成有衬线字体、无衬线字体和等宽字体。以下是一些最受歡迎的列表： 有衬线字体 Georgia Palatino Times New Roman Times 无衬线字体 Arial Helvetica Verdana Geneva Tahoma Lucida Grande Impact Trebuchet MS Arial Black 等宽字体 Courier New Courier Lucida Console Monaco 你可以將所有這些用作font-family屬性，但是不能保證它們在每個系統上都存在。還有其他的字体，对于它们的支持程度各不相同。 你也可以使用通用名称： sans-serif 无衬线字体 serif 有衬线字体 monospace 等宽字体 cursive 用于模拟手写文本 fantasy 名字中已经说明了一切 通常在font-family定义的末尾使用这些通用名称，以提供后备值，以防止无法应用其他样式：...

CSS供應商前綴（Vendor prefixes）的概述，Autoprefixer以及為什麼它們在未來不太重要。 供應商前綴是瀏覽器提供給我們CSS開發者的一種方式，讓我們可以使用尚未被認為是穩定的新功能。 然而，需要注意的是，這種方法正在逐漸不受歡迎，取而代之的是使用實驗性標誌，這些標誌必須在用戶的瀏覽器中明確啟用。 為什麼會這樣呢？因為開發者們並不是將供應商前綴視為預覽功能的一種方式，而是直接將其用於生產環境中，而這被CSS工作組視為有害的行為。 主要原因是，一旦您添加了一個標誌，開發者們開始在生產環境中使用它時，如果瀏覽器意識到需要進行更改，它就處於一個非常尷尬的位置。使用標誌，除非您能夠說服所有訪問者在其瀏覽器中啟用該標誌，否則無法推送該功能（開個玩笑，別嘗試）。 話雖如此，讓我們看看供應商前綴是什麼。 我特別記得過去在處理CSS過渡（Transitions）時使用它們。而不僅僅只是使用 transition 屬性，您還需要這樣做： .myClass { -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear; } 現在您只需使用： .myClass { transition: all 1s linear; } 因為這個屬性現在已經得到了所有現代瀏覽器的良好支持。 所使用的前綴是： -webkit-（Chrome、Safari、iOS Safari / iOS WebView、Android） -moz-（Firefox） -ms-（Edge、Internet Explorer） -o-（Opera、Opera Mini） 由於Opera和Edge基於Chromium，-o-和-ms-可能很快就會被淘汰。但正如我們所說，供應商前綴作為一整套也將不再流行。 撰寫前綴很困難，主要是因為存在不確定性。您是否真的需要為特定屬性添加前綴？一些線上資源也已經過時，這使得情況變得更加困難。 像Autoprefixer這樣的專案可以完全自動化這個過程，無需我們去弄清楚是否仍需要前綴，或者該功能現在是否穩定並且應該去除前綴。它使用了來自caniuse.com的數據，這是一個關於瀏覽器支持的非常好的參考網站。 如果您使用React或Vue，像create-react-app和Vue CLI這樣的專案，這是兩個常見的構建應用程序的方式，都已經內置使用了autoprefixer，因此您甚至不需要擔心這個問題。

如何使用CSS設計版式 在這篇文章中，我將介紹使用CSS來設計文字的方法，並使用以下屬性： text-transform text-decoration text-align vertical-align line-height text-indent text-align-last word-spacing letter-spacing text-shadow white-space tab-size writing-mode hyphens text-orientation direction line-break word-break overflow-wrap text-transform 此屬性可轉換元素的大小寫。 有四個有效值： capitalize – 將每個單字的第一個字母轉為大寫 uppercase – 將所有文字轉為大寫 lowercase – 將所有文字轉為小寫 none – 禁用文字轉換，用於避免繼承此屬性 範例： p { text-transform: uppercase; } text-decoration 此屬性用於對文字添加裝飾，包括： underline – 添加底線 overline – 添加上劃線 line-through – 添加刪除線 blink – 添加閃爍效果 none – 無裝飾 範例： p { text-decoration: underline; } 您也可以設定裝飾的樣式和顏色。 範例： p { text-decoration: underline dashed yellow; } 有效的樣式值為 solid、double、dotted、dashed、wavy。...

CSS是定義HTML頁面在瀏覽器中的視覺外觀的語言。從基礎到彈性盒子(Flexbox)、CSS網格(Grid)和CSS變數，學習關於CSS的一切。 CSS是一個令人驚嘆的工具，在過去幾年中它得到了很大的發展，引入了許多絕對出色的功能，如CSS網格(Grid)、彈性盒子(Flexbox)和CSS變數。 在你查看這些酷炫功能之前，請退後一步，通過我的CSS入門文章瞭解CSS的基礎知識。 以下是有關現代CSS布局構建的一些更高級主題: 彈性盒子(Flexbox) CSS網格(Grid) 有時，有些東西你以為自己懂，但當你開始實現時，它們可能有些混淆，尤其是當你在網上搜索時，你真的可以找到任何東西: 使用CSS居中 CSS邊距屬性 變量是一個非常重要的主題，它可以使CSS非常接近SCSS和其他預處理器: CSS變量 現在，動畫。動畫是非常重要的。 CSS動畫是執行簡單動畫的最佳方法。更複雜的事情需要使用JavaScript來完成，但CSS非常強大！查看： CSS過渡效果 CSS動畫 CSS在顯示方面有很大作用，但它對於打印文檔也非常重要。如果你有興趣，請查看如何使用CSS進行打印。 Web字體是另一個重要主題。我寫了一篇有關CSS系統字體的文章，介紹了如何使用系統字體，避免加載不必要的數據片段，如果你不是絕對需要它們的話。

在CSS中如何使用float屬性以及清除。 浮動在過去是一個非常重要的話題。 在許多黑客和創意的用法中，它是我們能夠真正實現一些布局的少數方式之一，與表格一起使用。在過去，我們經常將側邊欄左浮動，以便將其顯示在螢幕的左側並對主內容添加一些邊距。 幸運的是，時代已經改變，現在我們已經有了Flexbox和Grid來幫助我們進行布局，浮動回到了它最初的作用：將內容放置在容器元素的一側，並使其兄弟元素顯示在周圍。 float屬性支持3個值： left right none（默認） 假設我們有一個包含帶有文本的段落和圖像的框： <div class="parent"> <div class="child"> <div class="box"> <p>This is some random paragraph and an image. <img src="https://via.placeholder.com/100x100" /> The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text. The image is in the middle of the text....

學習CSS偽類的基礎知識 偽類是預定義的關鍵字，用於根據元素的狀態或對特定子元素進行選擇。 它們以單冒號:開頭。 它們可以作為選擇器的一部分使用，非常有用，例如在活動或訪問鏈接上更改樣式，懸停時更改樣式，聚焦或對第一個子元素或奇數行進行目標。在許多情況下非常方便。 以下是您可能會使用的最常用的偽類： 偽類 目標 :active 正在被用戶激活的元素（例如點擊）。通常用於鏈接或按鈕 :checked 已啟用的複選框，選項或單選按鈕輸入類型 :default 一組選項中的默認選項（例如，在select或單選按鈕中的選項） :disabled 已禁用的元素 :empty 沒有子元素的元素 :enabled 已啟用的元素（與:disabled相反） :first-child 兄弟姐妹中的第一個子元素 :focus 具有焦點的元素 :hover 鼠標懸停的元素 :last-child 兄弟姐妹中的最後一個子元素 :link 尚未訪問過的鏈接 :not() 不匹配傳遞的選擇器的任何元素。例如:not(span) :nth-child() 匹配指定位置的元素 :nth-last-child() 從末尾開始匹配指定位置的元素 :only-child 沒有任何兄弟姐妹的元素 :required 具有設置了required屬性的表單元素 :root 表示html元素。就像定位html，但更具體。在CSS變量中很有用。 :target 匹配當前URL片段的元素（用於頁面內導航） :valid 在客戶端成功驗證的表單元素 :visited 已訪問過的鏈接 讓我們舉個例子。實際上是一個常見的例子。您想要樣式化一個鏈接，因此創建一個CSS規則以定位a元素： a { color: yellow; } 事情看起來很正常，直到您點擊一個鏈接。當您點擊鏈接時，鏈接會返回預定義的顏色（藍色）。然後，當您打開鏈接並返回頁面時，鏈接現在是藍色的。 為什麼會這樣？ 因為點擊鏈接會改變狀態，並進入:active狀態。當它被訪問時，它處於:visited狀態。永遠如此，直到用戶清除瀏覽歷史。 因此，為了正確地在所有狀態下將鏈接設置為黃色，您需要編寫： a, a:visited, a:active { color: yellow; } :nth-child() 值得特別一提。它可用於通過 :nth-child(odd) 和 :nth-child(even) 定位奇數或偶數位置的子項。...

CSS動畫是創建視覺動畫的絕佳方式，不僅限於CSS過渡的單一移動，而且更加細緻。使用 animation 屬性將動畫應用於元素 介紹 CSS動畫示例 CSS動畫屬性 用於CSS動畫的JavaScript事件 可以使用CSS動畫來製作的屬性 介紹 使用 animation 屬性將動畫應用於元素。 .container { animation: spin 10s linear infinite; } spin 是動畫的名稱，我們需要單獨定義它。我們還告訴CSS使動畫持續10秒，以線性方式執行（速度不加速或有任何差異），並無限重複播放。 您必須使用 關鍵幀（keyframes） 定義動畫的工作方式。以下是旋轉項目的動畫示例： @keyframes spin { 0% { transform: rotateZ(0); } 100% { transform: rotateZ(360deg); } } 在 @keyframes 定義中，您可以擁有任意多個中間點。 在這種情況下，我們告訴CSS將變換屬性將Z軸從0度旋轉到360度，完成完整的循環。 您可以在此處使用任何CSS變換。 請注意，這並不影響動畫應該持續的時間間隔。這是在使用 animation 時定義的。 CSS動畫示例 我想畫出四個圓，起點都在一個公共點，彼此相距90度。 <div class="container"> <div class="circle one"></div> <div class="circle two"></div> <div class="circle three"></div> <div class="circle four"></div> </div> body { display: grid; place-items: center; height: 100vh; } ....

默認情況下，如果在元素上設置了寬度（或高度），這將應用於內容區域。 這不包括填充、邊框和外邊距，它們是添加在其上面的。 例如，我在一個p元素上設置了以下CSS： p { width: 100px; padding: 10px; border: 10px solid black; margin: 10px; } 下面是瀏覽器應用的效果： 您可以通過設置box-sizing屬性來更改這種行為。如果將其設置為border-box，則計算寬度和高度時將包括填充和邊框。 在前面的示例中，這是什麼意思： p { box-sizing: border-box; width: 100px; padding: 10px; border: 10px solid black; margin: 10px; } 看到了嗎？實際元素大小現在是60，因為它是100 - 10 * 2（填充）- 10 * 2（邊框）。 只有外邊距被忽略，這是合理的，因為在我們的思維中，我們通常將其視為一個獨立的事物：外邊距在元素的框外。 這個屬性是一個小改變，但在計算元素尺寸時有很大的影響。 在Codepen上的演示 如果您喜歡使用它，您可以通過以下CSS規則將它應用於頁面上的每個元素： *, *:before, *:after { box-sizing: border-box; }