CSS

如何使用 CSS 盒模型？ 每个 CSS 元素本质上都是一个盒子。每个元素都是一个通用的盒子。 盒模型根据一些 CSS 属性解释元素的大小。 从内到外，我们有： 内容区域 内边距 边框 外边距 最好的方式是打开浏览器的开发者工具并查看它的显示： 在这里，你可以看到 Firefox 告诉我一个我突出显示的 span 元素的属性。我右键点击它，按下检查元素，然后转到开发者工具的布局面板。 你可以看到，浅蓝色的空间是内容区域。它周围有内边距、边框和外边距。 默认情况下，如果你在元素上设置了宽度（或高度），宽度将应用于内容区域。所有的内边距、边框和外边距计算都是在值的外部完成的，所以当你进行计算时，要记住这一点。 你可以使用 Box Sizing 更改这种行为。

CSS 是一種語言，用於定義網頁在瀏覽器中的視覺外觀。由於最新的功能，CSS 的使用變得更加簡單。 什麼是 CSS CSS 的簡要歷史 CSS 的外觀 分號 格式和縮排 如何在網頁中加載 CSS 1：使用 link 標籤 2：使用 style 標籤 3：內聯樣式 什麼是 CSS CSS（層疊樣式表的縮寫）是用於為 HTML 文件添加樣式的語言，它告訴瀏覽器如何渲染頁面上的元素。 在 CSS 出現之前，人們希望能夠為他們的網頁添加樣式，因為當時的網頁看起來都很相似和“學術”。在個性化方面，你不能做許多事情。 HTML 3.2 引入了內聯定義顏色的選項，以及像 center 和 font 這樣的呈現標籤，但它很快變成了一個不理想的情況。 CSS 讓我們將所有與展示相關的內容從 HTML 移動到 CSS 中，這樣 HTML 就可以恢復為定義文檔結構而不是在瀏覽器中的外觀的格式。 CSS 不斷演進，5年前使用的 CSS 可能已經過時了，因為新的慣用 CSS 技術和瀏覽器的變化。 很難想象 CSS 誕生時的情況以及網頁有多麼不同。 當時，我們有幾個競爭的瀏覽器，主要有 Internet Explorer 和 Netscape Navigator。 通過使用 HTML，頁面被樣式化，使用特殊的呈現標籤（例如 bold）和特殊的屬性，其中大部分現在已被棄用。 這意味著你只能有有限的自定義機會。 大部分的樣式決策都由瀏覽器決定。 此外，你要為它們之一構建一個網站，因為每個瀏覽器都引入了不同的非標準標籤以提供更多的功能和機會。 不久後，人們意識到需要一種方法來跨瀏覽器樣式化頁面。 1994 年提出了最初的想法，1996 年，CSS 發布了第一個版本，即 CSS Level 1（“CSS 1”）。...

如何在 CSS 中使用系統字型，以提升您的網站速度並為使用者提供更好的體驗和網頁載入時間 一點歷史 現在 網頁字型的影響 系統字型登場 著名的網站使用系統字型 我決定使用系統字型，給我程式碼 關於 system-ui 的一點說明 使用 @font-face 規則來使用字型變化 閱讀更多 一點歷史 多年來，網站只能使用所有電腦上可用的字型，例如 Georgia、Verdana、Arial、Helvetica、Times New Roman。其他字型無法保證在所有網站上運作。 如果你想使用花俏的字型，你就得使用圖片。 在 2008 年，Safari 和 Firefox 引入了 @font-face CSS 屬性，線上服務開始提供 Web 字型的授權。第一個是 2009 年的 Typekit，後來由於免費提供，Google Fonts 變得非常受歡迎。 @font-face 在所有主要瀏覽器上實現，現在是現代設備的標準功能。如果你是年輕的網頁開發者，你可能沒有意識到，在 2012 年我們仍然有文章解釋這種新的 Web 字型技術。 現在 現在你可以使用任何你想使用的字型，無論是依賴於像 Google Fonts 這樣的服務，還是提供自己的字型進行下載。 你可以這麼做，但你應該這麼做嗎？ 如果你有選擇的權利（這意味著你不是在實現客戶提供的設計），你可能會想好好考慮一下，回歸到基本（但仍具有風格！）。 網頁字型的影響 在你的網頁上載入的每個內容都有一個成本。這個成本在移動設備上特別明顯，因為你所需的每個位元組都會影響載入時間和使用者消耗的頻寬量。 在內容渲染之前，字型必須被載入，因此您需要在用戶能夠閱讀您所寫的任何單詞之前等待該資源載入完成。 但網頁字型是提供出色的用戶體驗的一種方式，通過良好的排版。 系統字型登場 作業系統具有優秀的預設字型。 系統字型具有速度和性能上的優勢，而且能夠減少網頁大小。 但是，它們讓您的網站對任何查看該網站的人來說都非常熟悉，因為他們每天都在使用自己的電腦或移動設備上看到相同的字型。 它實際上就是一種原生字型。 由於它是系統字型，所以保證看起來很棒。 著名的網站使用系統字型 您可能知道其中一些著名的網站，例如： GitHub Medium Ghost Bootstrap Booking.com 他們多年來一直使用系統字型。 甚至 WordPress 控制台 - 用於運行數百萬個網站的平台 - 也使用系統字型，而以閱讀為主的 Medium 也決定使用系統字型。...

學習如何使用 CSS 更改元素背景 可以使用多個 CSS 屬性來更改元素的背景： background-color 背景顏色 background-image 背景圖像 background-clip 背景區域 background-position 背景位置 background-origin 背景原點 background-repeat 背景重複 background-attachment 背景附著 background-size 背景大小 還有一個縮寫屬性 background，可以縮短定義並將它們分組在一行。 background-color 接受顏色值，可以是顏色關鍵字，也可以是 rgb 或 hsl 值： p { background-color: yellow; } div { background-color: #333; } 除了使用顏色，你還可以使用圖像作為元素的背景，指定圖像位置的 URL： div { background-image: url(image.png); } background-clip 可讓你決定背景圖片或顏色的區域。默認值為 border-box，該值延伸到邊框外緣。 其他值包括： padding-box：將背景延伸到填充邊緣，不包括邊框。 content-box：將背景延伸到內容邊緣，不包括填充。 inherit：應用父元素的值。 當使用圖像作為背景時，你需要使用 background-position 屬性來設置圖像的放置位置。left、right、center 都是 X 軸的有效值，top、bottom 是 Y 軸的有效值： div { background-position: top right; } 如果圖像比背景小，則需要使用 background-repeat 屬性設置行為。它應該在所有軸上重複 repeat-x、repeat-y，或者在所有軸上上重複 repeat？後者是默認值。還有一個值 no-repeat。...

學習CSS虛擬元素的基礎知識 虛擬元素用於樣式化元素的特定部分。 它們以兩個冒號::開頭。 有時你會在代碼中看到它們用單個冒號表示，但這只是一種為了向後兼容而支持的語法。應該使用兩個冒號來區分它們和虛擬類別。 ::before和::after可能是最常用的虛擬元素。它們用於在元素之前或之後添加內容，例如圖標。 以下是虛擬元素的列表： 虛擬元素 目標 ::after 在元素之後創建一個虛擬元素 ::before 在元素之前創建一個虛擬元素 ::first-letter 可用於樣式化一塊文本的首個字母 ::first-line 可用於樣式化一塊文本的首行 ::selection 標記用戶選中的文本 讓我們來做個例子。假設您想要設置段落的第一行字體大小稍大，這在印刷排版中很常見： p::first-line { font-size: 2rem; } 或者您想讓首個字母加粗： p::first-letter { font-weight: bolder; } ::after 和 ::before 則稍微有點不直觀。我記得在使用 CSS 添加圖標時使用過它們。 使用 content 屬性來在元素之後或之前插入任何形式的內容： p::before { content: url(/myimage.png); } .myElement::before { content: "嘿嘿！"; }

如何在 CSS 中使用註解 CSS 允許您在 CSS 文件中，或是頁面標頭的 style 標籤中寫註解。 格式是 C-style（或者您喜歡的 JavaScript-style）的註解，使用 /* 這是一個註解 */。 這是一個多行註解。在您添加結束的 */ 標記之前，所有在開頭行之後的行都會被註解掉。 範例： #name { display: block; } /* 好規則！ */ /* #name { display: block; } */ #name { display: block; /* color: red; */ } CSS 沒有像 C 語言 或 JavaScript 中的 // 這樣的行內註解。 然而請注意，如果您在規則之前加上 //，這條規則將不會被應用，看起來就像註解生效了。實際上，CSS 檢測到語法錯誤後，會忽略帶有錯誤的行，直接處理下一行。 知道這一點後，您可以有意地編寫行內註解，但要小心，因為您無法像在區塊註解中那樣隨意添加文字。 例如： // 好規則！ #name { display: block; } 在這個例子中，由於 CSS 的工作原理，#name 規則實際上被註解掉了。如果您對此感興趣，您可以在 這裡 找到更多細節。為了避免不必要的麻煩，請避免使用行內註解，並依賴於區塊註解。

了解 CSS 選擇器的所有重要事項 選擇器允許我們將一個或多個聲明與頁面上的一個或多個元素關聯起來。 基本選擇器 假設在頁面上有一個 p 元素，我們想要使用黃色顯示其中的文字。 我們可以使用選擇器 p 來定位該元素，該選擇器定位頁面上所有使用 p 標籤的元素。實現我們想要的效果的一個簡單 CSS 規則如下： p { color: yellow; } 每個 HTML 標籤都有對應的選擇器，例如：div、span、img。 如果一個選擇器匹配多個元素，則頁面上的所有元素都將受到更改的影響。 HTML 元素有兩個在 CSS 中非常常用的屬性，用於將樣式與頁面上的特定元素關聯起來：class 和 id。 這兩者之間有一個重大的區別：在 HTML 文檔中，您可以在多個元素中重複使用相同的 class 值，但是您只能使用一次 id。根據以下的推論，使用 class 時，您可以選擇具有 2 個或多個特定類名的元素，而使用 id 則無法實現這一點。 使用 . 符號來標識類，使用 # 符號來標識 id。 使用 class 的示例： <p class="dog-name"> Roger </p> .dog-name { color: yellow; } 使用 id 的示例： <p id="dog-name"> Roger </p> #dog-name { color: yellow; } 結合選擇器...

CSS 在處理錯誤時非常靈活。當它遇到錯誤時，它不同於 JavaScript，不會整個拆開東西然後全部停止執行腳本。 CSS 試圖盡力遵從你的要求。 如果一行有錯誤，它會跳過該行並繼續往下一行執行，而不報錯。 如果你忘記在一行上加上分號： p { font-size: 20px color: black; border: 1px solid black; } 有錯誤的那一行和下一行 都不會 生效，但第三行的規則將會正確應用在頁面上。基本上，CSS 會一直掃描直到遇到分號，但在達到之前，該規則已經變成了 font-size: 20px color: black;，這是無效的，所以它會跳過。 有時候我們很難意識到錯誤在哪裡，因為瀏覽器不會告訴我們。 這也是為什麼有像 CSS Lint 這樣的工具存在的原因。

＃什麼是適用於響應式設計的好的 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供應商前綴（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，因此您甚至不需要擔心這個問題。