CSS教程

如何開始使用CSS 歡迎來到CSS的世界！CSS（層疊樣式表）是一種用於網頁設計的語言，它能夠控制網頁的外觀和排版。使用CSS，您可以為網頁添加各種樣式和效果，使其更具吸引力和易於閱讀。在本篇文章中，我將向您介紹如何開始使用CSS。 1. 創建CSS檔案 首先，您需要創建一個CSS檔案，以便將樣式應用於您的網頁。您可以在HTML文件中使用<link>元素來連接CSS檔案。在<head>標籤中添加以下程式碼： <link rel="stylesheet" type="text/css" href="styles.css"> 上述程式碼中，href屬性的值應該是您的CSS檔案的路徑。確保CSS檔案與HTML檔案位於同一個目錄中。 2. 選擇元素 在CSS中，您可以選擇要應用樣式的HTML元素。例如，如果您想為所有的<p>元素設置樣式，您可以使用以下程式碼： p { /* 在這裡添加您的樣式 */ } 上述程式碼中，"p"是選擇器，表示選擇所有的<p>元素。您可以使用其他選擇器來選擇不同的元素，例如"class"和"id"。 3. 添加樣式 一旦您選擇了要應用樣式的元素，您可以在選擇器中添加各種樣式屬性。以下是一些常見的樣式屬性： color: 設置文字顏色 font-size: 設置文字大小 background-color: 設置背景顏色 margin: 設置元素的外邊距 padding: 設置元素的內邊距 border: 設置元素的邊框 您可以使用像素（px）或百分比（%）等不同的單位來設置這些屬性的值。例如： p { color: red; font-size: 16px; background-color: #f2f2f2; margin: 10px; padding: 5px; border: 1px solid black; } 4. 繼承和優先級 在CSS中，元素可以繼承其父元素的某些樣式。例如，如果您為<body>元素設置了文字顏色，則其中的<p>元素也將繼承相同的文字顏色。然而，有些屬性不會被繼承，例如邊框和背景顏色。 此外，CSS還使用優先級來確定樣式的應用順序。當多個樣式規則應用於同一個元素時，具有更高優先級的規則將優先應用。優先級可以通過選擇器的特定性、樣式屬性的重要性和樣式表的順序來確定。 結論 開始使用CSS可能會有些困惑，但一旦您熟悉了基本概念和語法，它將成為您設計精美網頁的有力工具。通過創建CSS檔案、選擇元素、添加樣式，您可以開始為您的網頁增添視覺上的吸引力和個性化。

卡片已設width:100%，加上內距後，右邊卻超出容器。先看這張卡片的box-sizing：若寬度只算內容區，左右padding與border還會再加上去。把它改成border-box，才會把這些空間算進指定寬度。 先用一張卡片看出差別 把下面HTML與CSS放進空白頁。外層寬300px，卡片寬100%，左右各有24px內距和2px邊框。這裡刻意指定content-box，避免你的主題原本已設border-box，讓問題無法重現。 <div class="demo-frame"> <div class="demo-card">卡片內容</div> </div> .demo-frame { width: 300px; max-width: 100%; } .demo-card { box-sizing: content-box; width: 100%; padding: 24px; border: 2px solid #126477; } 在外層確實有300px可用、邊框按2px計算時，卡片的邊框外緣總寬是300＋24×2＋2×2，也就是352px。100%只填滿內容區，並沒有替左右多出的52px預留位置。瀏覽器縮放可能讓邊框換算後出現小數，實際尺寸請看開發者工具的盒模型。 只改卡片的box-sizing .demo-card { box-sizing: border-box; width: 100%; padding: 24px; border: 2px solid #126477; } 同樣300px的可用寬度，現在padding與border都放在這300px裡，內容區則縮小。以邊框2px計，內容區剩248px。這個案例沒有margin；border-box也不會把margin包進width，若另加左右外距，仍須另外計算。 在原網站裡確認改到哪一層 打開瀏覽器開發者工具，選到超寬卡片本身，查看Computed裡的box-sizing、width、padding和border。先只切換這張卡片的box-sizing，比較左右邊界是否回到容器內，再把確定有效的規則寫回對應元件。 不要只看CSS檔裡有沒有border-box：選擇器可能沒有套中，也可能被後面的規則覆蓋。這個屬性預設不繼承，父層設定不代表所有後代都有同樣值；部分表單元件的瀏覽器預設也不同。修改既有主題時，先限定目標卡片，別為一個區塊直接重設全站。 還在超寬，就查別的來源 border-box處理的是指定寬度如何容納padding與border。固定寬圖片、不能換行的長字串、額外margin，或Flex子項的最小寬度，仍可能造成溢出。先找出真正超出邊界的元素，不要用整頁overflow:hidden把問題和內容一起藏掉。 最後把容器縮窄，檢查卡片內容有沒有被壓得難以閱讀。內容區最小只能到0；當padding與border本身已比可用寬度大，border-box也不能保證塞得下。此時要調小內距、調整元件排列，或重新分配空間。 參考資料 MDN：box-sizing與盒模型計算 MDN：width及百分比寬度

CSS Comments 在CSS中，註釋（Comments）是一種用於描述代碼功能、目的或設計決策的工具。註釋不會被瀏覽器解釋為代碼，它們僅僅是給開發者閱讀和理解代碼的一種方式。 使用CSS註釋的語法 在CSS中，註釋以斜線和星號開始（/*）並以星號和斜線結束（*/）。註釋可以位於CSS文件的任何位置，並且可以跨越多行。 以下是一個使用CSS註釋的示例： /* 這是一個CSS註釋 */ h1 { color: red; } /* 這是另一個CSS註釋 它可以跨越多行 */ p { font-size: 16px; } 在上面的示例中，我們使用註釋來描述每個選擇器的作用。這有助於其他開發者理解代碼，尤其是在代碼變得複雜時。 註釋的用途 使用CSS註釋有以下幾個主要用途： 說明代碼功能：註釋可以用於解釋代碼的目的和功能。這對於其他開發者閱讀和維護代碼非常有用。 臨時禁用代碼：通過將代碼註釋掉，可以臨時禁用該代碼而無需刪除它。這在調試和測試過程中非常有用。 記錄修改：當對代碼進行修改時，可以使用註釋來記錄修改的日期、時間和原因。這有助於團隊成員之間的溝通和協作。 註釋的最佳實踐 以下是使用CSS註釋的最佳實踐： 清晰明瞭：註釋應該清晰明瞭，以便其他開發者能夠理解代碼的目的和功能。 適度使用：適度使用註釋，不要過度註釋。只在需要解釋或記錄的地方使用註釋。 避免冗長：避免使用冗長的註釋，應該盡量簡潔明瞭。 更新維護：隨著代碼的變化，應該及時更新和維護註釋，以確保其準確性和有效性。 結論 在CSS中使用註釋是一種良好的程式設計習慣，它可以提高代碼的可讀性和可維護性。通過清晰明瞭地描述代碼的功能、目的和修改紀錄，註釋有助於促進團隊成員之間的協作和溝通。

CSS（层叠样式表）是一种用于描述网页文档外观和样式的标记语言。它是前端开发中不可或缺的一部分，通过CSS，我们可以控制网页的布局、颜色、字体、大小、边框等各个方面的样式。在本篇文章中，我将为您详细介绍CSS的语法。 CSS的语法由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，而声明块则包含了一系列的样式规则。 首先，让我们来看一下选择器。选择器可以根据元素的类型、类名、ID等来选择元素。以下是几种常见的选择器类型： 1. 元素选择器：通过元素的标签名选择元素。例如，p选择器将选择所有的段落元素。 2. 类选择器：通过元素的class属性选择元素。例如，.red选择器将选择所有class为red的元素。 3. ID选择器：通过元素的id属性选择元素。例如，#header选择器将选择id为header的元素。 4. 属性选择器：通过元素的属性选择元素。例如，[type="text"]选择器将选择所有type属性为text的元素。 5. 伪类选择器：用于选择元素的特殊状态。例如，:hover选择器将选择鼠标悬停在元素上时的状态。 选择器可以单独使用，也可以组合使用。例如，p.red选择器将选择所有class为red的段落元素。 接下来，我们来看一下声明块。声明块由花括号{}包围，其中包含了一系列的样式规则。每个样式规则由属性和值组成，用冒号:分隔。例如，color:red;将设置元素的文本颜色为红色。 除了基本的属性和值，CSS还提供了一些特殊的属性和值，用于控制元素的布局和外观。以下是一些常见的属性： 1. 宽度（width）和高度（height）：用于设置元素的宽度和高度。 2. 边距（margin）和填充（padding）：用于设置元素的外边距和内边距。 3. 边框（border）：用于设置元素的边框样式、宽度和颜色。 4. 背景（background）：用于设置元素的背景颜色、图像和其他属性。 5. 字体（font）：用于设置元素的字体样式、大小和颜色。 6. 定位（position）：用于设置元素的定位方式，例如相对定位、绝对定位等。 除了这些基本的属性，CSS还提供了许多其他属性和值，用于实现更复杂的样式效果。例如，CSS3引入了动画（animation）、渐变（gradient）和阴影（box-shadow）等新特性。 在CSS中，我们还可以使用注释来对代码进行说明。注释以/*开始，以*/结束。例如，/* 这是一个注释 */。 最后，让我们来看一下CSS的引入方式。我们可以将CSS代码直接写在HTML文件的<style>标签中，也可以将CSS代码写在外部的CSS文件中，并通过<link>标签将其引入到HTML文件中。外部CSS文件的优势在于可以在多个HTML文件中共享样式。 总结一下，CSS是一种用于描述网页文档外观和样式的标记语言。它由选择器和声明块组成，通过选择器选择要应用样式的HTML元素，通过声明块设置元素的样式规则。CSS提供了丰富的属性和值，用于控制元素的布局和外观。通过掌握CSS的语法，您将能够创建出美观、具有吸引力的网页。

模板原本的卡片標題是藍色，你在後面加上紅色規則，畫面卻還是藍色。先別急著補!important：後寫的規則不一定會贏，選擇器的權重也會影響結果。若你正在製作可被不同頁面調整的基礎樣式，:where()能讓這層規則更容易覆寫。 :where()可以把多個選擇器放在同一組，也可以包含較完整的選取條件。它特別的地方是自身及括號內的選擇器不增加specificity。範圍仍然照樣匹配，但不用把那段範圍的權重帶到每次覆寫裡。 先重現後寫也蓋不掉的情況 以下HTML是一張放在theme容器裡的卡片。CSS先設定基礎藍色，再設定頁面想用的紅色。兩條規則都命中同一個元素，卻不是只看哪條寫在最後。 <div class="theme"> <article class="card">商務模板</article> </div> .theme .card { color: #2454a4; } .card { color: #b3261e; } 在本例相同來源、相同重要性、沒有cascade layer等額外條件下，兩個class的.theme .card權重高於只有一個class的.card，因此顏色仍是藍色。將這兩條規則前後交換，也不會讓.card突然贏過較高權重的規則。 如果這是你自己維護的基礎樣式，可以把整段選取條件放進:where()。匹配的仍是theme裡的card，權重卻變成零，後面的.card就能設定紅色。 :where(.theme .card) { color: #2454a4; } .card { color: #b3261e; } 這不是取消基礎樣式，也不是讓所有元素變成低權重。只有放在:where括號裡的那段選擇器不增加權重；它仍有原本的匹配範圍。沒有被後面規則覆寫的屬性，仍會使用基礎設定。 放在哪一段，保留下來的權重就不同 你可以只把外層範圍放進:where，保留元件class的權重。這通常比把每個規則都降到零更容易維持元件邊界。 :where(.theme) .card { color: #2454a4; } .card { color: #b3261e; } 這次:where(.theme)不加權重，外面的.card仍是一個class。兩條規則權重相同，在本例其他cascade條件相同時，後面的.card勝出。若你把頁面覆寫規則移到前面，則後面的基礎規則可能再把它蓋回去。因此「整段歸零」與「只讓範圍歸零」有不同用途，應按樣式架構選擇。 也別把:where與:is當成完全相同的工具。兩者都能接受選擇器清單，但:is會採用參數中最高的specificity。若:is(.card, #featured)命中card，裡面那個ID會讓整個:is帶上ID等級的權重；換成:where則不會。你只是想整理重複選擇器時，也要留意是否意外加入高權重條件。 它適合基礎層，不是所有覆寫問題的萬用解法 可重用的模板元件常需要一層預設顏色、間距與字型，再讓頁面或客戶樣式調整。這些預設規則可以採較低權重，讓覆寫不用一直增加外層class或ID。像:where(.template-page) h2，就能把頁面範圍留住，同時避免範圍本身抬高權重。 反過來，真正代表元件狀態的規則，例如欄位錯誤、按鈕停用或展開狀態，是否要降到零就需要評估。若狀態樣式很容易被普通顏色規則蓋掉，使用者可能看不出錯誤或停用。不要整份搜尋取代所有選擇器，先從清楚的基礎預設開始，逐項確認狀態與互動。 第三方CSS若含!important，單純把自己的規則放進:where不會幫你勝出；那反而降低了你的權重。行內樣式、樣式來源、cascade layer、重要性與動畫等，也可能先於普通specificity比較影響結果。要調整第三方主題，先確認輸掉的是哪個cascade階段，而不是只數class有幾個。 從Computed與Styles面板找真正勝出的宣告 本機Chromium案例比較了三種基礎選擇器：.theme .card得到藍色，:where(.theme .card)得到紅色，:where(.theme) .card在後面的.card規則下也得到紅色。案例只針對同來源普通規則；其他主題的!important與layer設定，仍要對照實際cascade。 自己的頁面可以選取元素，先在Computed查看最後的color，再到Styles確認哪條宣告被劃掉，以及規則來自哪個檔案。若你新加的規則根本沒有出現，可能是CSS未載入、selector沒命中或語法錯誤，這些問題不能靠:where修好。先確認規則存在且命中，再談權重。 檢查時一次只改一個選擇器，不要同時調整載入順序、layer和important。修好後再確認其他同元件的頁面，以及hover、focus、錯誤與停用狀態。基礎規則更容易覆寫是一種設計選擇，變更也可能讓原本被壓住的規則開始生效，需要看到實際結果才能判斷。 把可覆寫的範圍寫清楚 處理響應式規則時，也要注意相同元素在不同寬度下命中的規則。假設桌面卡片用低權重基礎色，窄螢幕又有一條.theme .card指定顏色，那個media query成立時仍可能蓋過頁面的.card。media query並不自行增加specificity，但它決定規則是否參與比較；只在桌面確認紅色生效，不能直接推論手機也相同。 另一個常見誤會是繼承。你在外層容器設定color，子卡片本身已有命中的color宣告時，子卡片會使用自己的值，不能只比較外層選擇器有多長。排查時先看宣告究竟在同一個元素上競爭，還是從父層繼承過來。本文的三個案例都在同一張卡片上設定color，所以可以直接比較選擇器；改成父子不同元素時，分析方式也要跟著調整。 如果你無法修改主題的基礎規則，先以自己的小元件確認:where行為，再決定是否需要在可控制的樣式層處理覆寫。不要把教學範例直接取代正式主題的整份檔案；保留既有載入與狀態規則，逐個屬性核實哪一條宣告需要變更，才不會修顏色卻弄壞其他頁面。 例如你希望文章頁的卡片顏色可以調整，但後台管理卡片維持原樣，保留明確的容器條件會比把.card套到全站更穩定。:where不會替你建立隔離邊界，括號內的範圍仍應正確。不要為了零權重而省掉必要的頁面條件，否則規則可能命中本來無關的元件。 若團隊使用cascade layers，可以另外規劃基礎、元件和頁面覆寫的順序；那是另一層cascade設計，與:where的specificity用途互相配合。先讓每一層的責任清楚，避免基礎規則到處用!important、頁面又不斷加ID追上去。本文的小案例可以幫你看懂權重變化，套到完整專案前仍要對照實際layer與來源。 維護時可以在元件文件註明哪些屬性預期讓頁面覆寫、哪些狀態由元件控制。這樣新同事看到:where就知道它在降低基礎設定的成本，而不會為了「看起來比較新」把所有選擇器都換掉。用可重現的元素與計算樣式確認效果，會比反覆加更長選擇器更容易找出原因。 參考資料 MDN：where選擇器MDN：SpecificityMDN：is選擇器與最高參數權重MDN：CSS cascade比較順序MDN：important與cascade

什麼是 CSS 選擇器？ 作為一位高級研究專家，我很樂意為您解答有關CSS選擇器的問題。CSS（層疊樣式表）是一種用於定義網頁上元素樣式的語言，而選擇器則是CSS中用於選擇要應用樣式的元素的模式。 選擇器的基本概念 選擇器是CSS中非常重要的一個概念，它使我們能夠根據元素的屬性、類型、狀態等來選擇要應用樣式的元素。選擇器可以是單個元素，也可以是元素的組合。下面是一些常見的選擇器： 元素選擇器：選擇所有指定類型的元素，例如 p 選擇所有段落元素。 類選擇器：選擇具有指定類名的元素，例如 .red 選擇所有擁有 "red" 類的元素。 ID選擇器：選擇具有指定ID的元素，例如 #header 選擇擁有 "header" ID的元素。 屬性選擇器：選擇具有指定屬性的元素，例如 [type="text"] 選擇所有擁有 "type" 屬性且值為 "text" 的元素。 後代選擇器：選擇指定元素的後代元素，例如 div p 選擇所有在 div 元素內的 p 元素。 選擇器的優先級 在CSS中，選擇器的優先級決定了當多個選擇器都能選擇同一個元素時，哪個樣式將被應用。優先級由高到低的順序如下： 內聯樣式：直接在元素的style屬性中指定的樣式。 ID選擇器：使用ID選擇器選擇的元素。 類選擇器、屬性選擇器和偽類選擇器：使用類、屬性或偽類選擇器選擇的元素。 元素選擇器和偽元素選擇器：使用元素或偽元素選擇器選擇的元素。 通用選擇器和屬性選擇器：選擇所有元素的選擇器。 如果多個選擇器具有相同的優先級，則後面出現的規則將覆蓋先前的規則。 組合選擇器 組合選擇器允許我們根據元素之間的關係來選擇元素。以下是一些常見的組合選擇器： 後代選擇器：選擇指定元素的後代元素，例如 div p 選擇所有在 div 元素內的 p 元素。 子選擇器：選擇指定元素的直接子元素，例如 ul > li 選擇所有作為 ul 元素直接子元素的 li 元素。 相鄰兄弟選擇器：選擇與指定元素相鄰且具有相同父元素的元素，例如 h2 + p 選擇與 h2 元素相鄰且具有相同父元素的 p 元素。 通用兄弟選擇器：選擇與指定元素相鄰且具有相同父元素的所有元素，例如 h2 ~ p 選擇與 h2 元素相鄰且具有相同父元素的所有 p 元素。 總結...