CSS

學習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中使用媒體查詢來構建響應式網頁 在本篇文章中，我將首先介紹媒體類型和媒體特性描述符，然後解釋媒體查詢。 媒體類型 在媒體查詢和@import聲明中使用的媒體類型，允許我們確定在哪個媒體上加載CSS文件或CSS片段。 我們有以下媒體類型： all表示所有媒體 print用於打印 screen用於在屏幕上顯示頁面 speech用於屏幕閱讀器 screen是默認值。 以前我們有更多的媒體類型，但大多數已被棄用，因為它們被證明不能有效地確定設備需求。 我們可以在@import語句中使用它們，就像這樣： @import url(myfile.css) screen; @import url(myfile-print.css) print; 我們可以在多個媒體類型上加載CSS文件，每個類型之間用逗號隔開： @import url(myfile.css) screen, print; 在HTML的link標籤中也可以這樣使用： <link rel="stylesheet" type="text/css" href="myfile.css" media="screen" /> <link rel="stylesheet" type="text/css" href="another.css" media="screen, print" /> 我們不僅僅可以在media屬性和@import聲明中使用媒體類型。還有更多。 媒體特性描述符 首先，讓我們介紹媒體特性描述符。它們是我們可以將其添加到link的media屬性或@import聲明中的附加關鍵字，以對CSS的加載表示更多的條件。 以下是列表： 寬度（width） 高度（height） 設備寬度（device-width） 設備高度（device-height） 寬高比（aspect-ratio） 設備寬高比（device-aspect-ratio） 顏色（color） 顏色索引（color-index） 黑白顯示（monochrome） 分辨率（resolution） 方向（orientation） 掃描方式（scan） 网格（grid） 每個媒體特性描述符都有對應的min-和max-，例如： min-width和max-width min-device-width和max-device-width 等等。 其中一些接受length值，可以使用px或rem或任何長度值來表示。這就是width、height、device-width和device-height的情況。 例如： @import url(myfile.css) screen and (max-width: 800px); 請注意，我們將每個使用媒體特性描述符的塊都用括號包裹起來。 某些特性描述符接受固定值。orientation用於檢測設備方向，它接受portrait或landscape。 例如： <link rel="stylesheet" type="text/css" href="myfile....

學習如何在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層疊的意義及其重要性 層疊是CSS的一個基本概念。畢竟，它在名字中就有了，CSS的第一個C - Cascading Style Sheets（層疊樣式表），它一定是一件重要的事情。 它代表什麼意思？ 層疊是指確定應用於頁面上每個元素的屬性的過程或算法。 試圖從定義在各個位置的CSS規則列表中匯總。 它考慮到了： 特定性 重要性 繼承 檔案中的順序 它還負責解決衝突。 對於應用於同一元素的相同屬性的兩個或更多競爭CSS規則，需要根據CSS規範進行進一步處理，以確定應該應用哪個規則。 即使您只有一個CSS文件在頁面上加載，仍然有其他CSS會參與到此過程中。我們有瀏覽器（user agent）的CSS。瀏覽器有一套預設規則，各個瀏覽器之間都不相同。 然後進行您的CSS。 然後瀏覽器應用任何用戶樣式表，這可能也是由瀏覽器擴展應用的。 所有這些規則在渲染頁面時都會參與其中。

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的filter屬性 濾鏡允許我們對元素進行操作。 你通常可以在Photoshop或其他圖片編輯軟件中進行的操作，像是更改透明度、亮度等等。 使用filter屬性。這是一個對圖片應用的例子，但這個屬性可以用於任何元素： img { filter: <something>; } 你可以在這裡使用各種不同的值： blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() sepia() saturate() url() 注意每個選項後面的括號，因為它們都需要一個參數。 例如： img { filter: opacity(0.5); } 這意味著圖片將是50%透明，因為opacity()接受介於0到1之間的值，或者是一個百分比。 你也可以同時應用多個濾鏡： img { filter: opacity(0.5) blur(2px); } 現在讓我們詳細介紹每個濾鏡。 blur() 對元素的內容進行模糊處理。你需要傳遞一個值，以px、em或rem表示，用於確定模糊半徑。 例子： img { filter: blur(4px); } opacity() opacity()接受介於0到1之間的值，或者是一個百分比，並根據它來確定圖片的透明度。 0或0%表示完全透明。 1、100%或更高表示完全可見。 例子： img { filter: opacity(0.5); } CSS還有一個opacity屬性，但filter可以根據實現方式進行硬件加速，所以應該優先使用filter。 drop-shadow() drop-shadow()在元素後面顯示一個陰影，該陰影遵循alpha通道。這意味著如果你有一個透明的圖片，在圖片的形狀上應用陰影，而不是在整個圖片框上應用陰影。如果圖片沒有alpha通道，陰影將應用於整個圖片框。 它接受至少2個參數，最多5個： 偏移X設置水平偏移量。可以是負數。 偏移Y設置垂直偏移量。可以是負數。 模糊半徑，可選，設置陰影的模糊半徑。它的默認值為0，表示不模糊。 擴散半徑，可選，設置擴散半徑。以px、rem或em表示。 顏色，可選，設置陰影的顏色。 你可以只設置顏色而不設置擴散半徑或模糊半徑。CSS會將該值理解為顏色而不是長度值。 例子： img { filter: drop-shadow(10px 10px 5px orange); } img { filter: drop-shadow(10px 10px orange); } img { filter: drop-shadow(10px 10px 5px 5px #333); } grayscale() 使元素變為灰色。...

默認情況下，如果在元素上設置了寬度（或高度），這將應用於內容區域。 這不包括填充、邊框和外邊距，它們是添加在其上面的。 例如，我在一個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; }

了解CSS繼承的含義以及其重要性 當在CSS中的選擇器上設置一些屬性時，這些屬性會被該選擇器的所有子元素繼承。 我說的是一些，因為並不是所有的屬性都表現出這種行為。 這是因為有些屬性被繼承是有意義的。這幫助我們更簡潔地撰寫CSS，因為我們不需要在每個子元素上再次明確設置這些屬性。 而其他一些屬性則更有意義不被繼承。 想想字體：您不需要將 font-family 應用於您網頁的每個標籤。您只需設置 body 標籤的字體，每個子元素都會繼承它和其他屬性。 另一方面，background-color 屬性被繼承很少有意義。 可繼承的屬性 以下是一個可繼承屬性的列表。該列表並不全面，但這些規則通常是您會使用到的最流行的： border-collapse border-spacing caption-side color cursor direction empty-cells font-family font-size font-style font-variant font-weight font-size-adjust font-stretch font letter-spacing line-height list-style-image list-style-position list-style-type list-style orphans quotes tab-size text-align text-align-last text-decoration-color text-indent text-justify text-shadow text-transform visibility white-space widows word-break word-spacing 這些資訊取自這篇來自Sitepoint的文章。 強制屬性繼承 如果您有一個默認情況下不繼承的屬性，但在子元素中您希望它繼承，您可以將屬性值設置為特殊關鍵字inherit。 例如： body { background-color: yellow; } p { background-color: inherit; } 強制屬性不繼承 相反，您可能會有一個被繼承的屬性，但您希望它不被繼承。 您可以使用revert關鍵字將其還原。在這種情況下，該值會還原為瀏覽器在其默認樣式表中為其提供的原始值。 在實踐中，這很少被使用，大部分情況下您只需設置另一個值來覆蓋那個繼承的值。 其他特殊值 除了剛才提到的inherit和revert特殊關鍵字之外，您還可以將任何屬性設置為：...

如何透過CSS處理邊框 邊框是在內邊距和外邊距之間的一層薄紗。透過編輯邊框，可以讓元素在螢幕上繪製其周邊。 你可以透過以下屬性來處理邊框： border-style border-color border-width 屬性border可以作為所有這些屬性的快捷方式使用。 border-radius用於創建圓角。 還可以使用圖像作為邊框，使用border-image及其特定的分開屬性來實現。 border-image-source border-image-slice border-image-width border-image-outset border-image-repeat 讓我們從border-style開始。 邊框樣式 border-style屬性允許您選擇邊框的樣式。您可以使用的選項有： dotted dashed solid double groove ridge inset outset none hidden 在此Codepen中查看實例：https://codepen.io/flaviocopes/pen/yraaxq 樣式的默認值是none，所以要使邊框完全顯示，您需要將其更改為其他樣式。大多數情況下，solid是個不錯的選擇。 您可以使用以下屬性為每個邊緣設置不同的樣式： border-top-style border-right-style border-bottom-style border-left-style 或者，您可以使用具有多個值的border-style來定義它們，使用常規的上-右-下-左順序： p { border-style: solid dotted solid dotted; } 邊框寬度 border-width用於設置邊框的寬度。 您可以使用預定義的值之一： thin medium（默認值） thick 或者，使用像素、em、rem或任何其他有效的長度值來表示值。 示例： p { border-width: 2px; } 您可以使用4個值來分別設置每個邊緣（上-右-下-左）的寬度： p { border-width: 2px 1px 2px 1px; } 或者，您可以使用特定的邊緣屬性border-top-width、border-right-width、border-bottom-width、border-left-width。 邊框顏色 border-color用於設置邊框的顏色。 如果您不設置顏色，邊框默認使用元素中文本的顏色。 您可以將任何有效的顏色值傳遞給border-color。...