CSS

網頁開發一直在不斷演進，每年一月，我都喜歡停下腳步重新評估並觀察這個生態系統。 問題是：2022年初學者應該從哪裡開始學習，才能學到能找到工作的技能呢？ 地圖有變嗎？與去年有不同嗎？ 變革似乎需要很長的時間，但它們可以很微妙，有時候從一年到另一年事情會徹底變化，你甚至都意識不到。 因此，我開始撰寫這篇文章，指導您如何在網頁開發領域中導航。 對於想要跟上生態系統並保持相關性的開發人員來說，這也是很有用的。有什麼新東西你一定要學嗎？ 讓我們開始吧。 先說一下，這是一個高度主觀的路線圖。這不是一個列出了1000種不同技術的路線圖，然後就讓你淚流滿面地愁眉苦臉。 讓我為您挑選最好的技術，相信我，這樣您就可以停止無休止的分析，並繼續前進。 在網頁開發中，我們有3條路線： 前端開發人員 後端開發人員 全棧開發人員 這些角色之間的界線有點模糊。在這篇文章中，我將聚焦於全棧開發人員，這是我最喜歡的專業化領域——在這個領域中，您不需要專攻前端或後端，而是能夠創建出所有展示出來的內容。 積極忽略 首先，讓我們從我們將忽略的內容開始。 在這個路線圖中，我將忽略像UI/UX工程師、可訪問性和其他重要主題這樣更專業的範疇。這些完全是不同的職業，有自己獨特的學習路徑。 您不可能從一開始就假設您需要學習所有東西。 積極排除。 我們將忽略使用Web技術進行移動開發。那是一個完全不同的領域。我們還將忽略一切不屬於網頁開發的趨勢，而是不同類型的開發專業化，比如AI、數據科學、web3等等。 深入研究5個核心技術 我建議深入研究一組核心的5個技術： HTML CSS JavaScript React Next.js 這些5個技術按順序是您需要掌握的5個東西。 您可以用一只手數清楚。 其中3個是基礎。HTML、CSS、JavaScript。您無法避免它們。這些是我們的工具。 HTML定義了內容 CSS定義了我們希望內容呈現的樣子 JavaScript定義了行為 React是我在這裡的首個選擇。 React是一種簡化創建用戶界面的技術。 它以許多不同的方式讓我們的生活更輕鬆。 HTML、CSS和JavaScript沒有其他替代品，但您可以選擇使用其他東西，比如Svelte、Vue、Angular，但我選擇了React。 但是React非常流行，它有一個悠久的歷史和遺產，使它成為事實上的標準。它被使用得如此廣泛，以至於您可以找到一切，每個庫，大量的教程和課程，需要幫助時也不用擔心。 您可以賭一個替代品，但您還可以看看工作市場和React帶來的機會，並選擇它。 現在我們需要最後一個組件。一個網絡應用程序框架。 我們選擇了React，所以我們需要選擇一個與React配合的網絡應用程序框架。 在React和HTML/CSS/JavaScript三者之上，我選擇了Next.js，它可以讓React-based網站和應用程序的服務和前端無縫集成。 所以，我們共同使用的3個核心技術是HTML/CSS/JavaScript，最上面的是非常流行的UI庫React，再加上一個非常流行的框架Next.js。 現在還有更多的東西可以添加到這5個選擇中，但您需要從某個地方開始。 通過這5個選擇，您已經排除了很多其他可能分散注意力、讓您在成為網頁開發者的道路上分心的東西。 讓我再強調一下這個排除。至少在開始時忽略TypeScript。我知道你會一直聽到它，但它對你的旅程並不重要，你可以在未來的任何時候添加它。 JavaScript讓事情變得簡單得多，這對於保持動力至關重要。 從HTML和CSS開始 此時，開始學習並進行實驗。學習HTML，創建網頁。閱讀我的[HTML手冊](https://flaviocopes.com/page/html-handbook/）。多做練習。Codepen是一個很好的工具。 只是不要被“我使用CSS完成了這個”吸引住，有些人用CSS做了一些不可能的事情。我不知道他們是怎麼做到的，這是藝術（如果您喜歡，那很好，但在我們的旅程中不是很有用）。 至於CSS，學習基礎知識。閱讀我的[CSS手冊](https://flaviocopes.com/page/css-handbook/）。並立即開始學習Tailwind，這是一種非常實用且流行的將CSS應用於您的網頁的方法。 CSS可能很復雜，但Tailwind使它變得更簡單。相信我，我從事CSS已有 20 年，使用Tailwind讓我終於能夠在每個項目上都處理好事情。這也是其他很多人的感受。 您應該使用HTML和CSS/Tailwind創建哪些項目呢？嗯，從您的愛好和興趣開始。創建一些隨機的網頁，看看它們在瀏覽器中如何顯示。 創建一個有關狗的網頁，有關足球、橄欖球、棒球的網頁，有關您最喜歡的Netflix系列、最喜歡的音樂家的網頁，等等。重要的是進行實驗。 在HTML和CSS/Tailwind上別太花哨。它們是兔子洞。關於這兩者有很多東西要學。熟悉它們，使用它們來完成任務。 熟悉像VS Code這樣的編輯器，以及終端和Bash shell的基礎知識。學習Git來管理版本。它將為您節省很多時間和麻煩。 添加JavaScript 現在是學習JavaScript的時候了。下載並閱讀我的JavaScript初學者手冊。 HTML和CSS定義了內容和呈現方式，而JavaScript是一門程式語言。 使用JavaScript，我們可以開始玩樂。 基礎知識有點……無聊並且可能會令人困惑，因為有很多理論和新概念。但這是您在網頁開發中最常使用的東西。因此，掌握它是至關重要的。 逐步將JavaScript添加到您的網頁中。 使用JavaScript，您將能夠為您的網頁添加一些互動性。您將探索DOM，這是瀏覽器讓我們與頁面上的元素進行交互的方式。 您將創建您的第一個表單。 在創建第一個表單之後，您將需要將表單數據發送到某個地方。 想像一下，您建立了一個電子報註冊表單。您想要將電子郵件發送到某個地方以便存儲它。...

學習如何使用 CSS 的 calc() 函式 calc() 函式可以讓您對數值進行基本的數學運算，尤其在需要將長度值加減百分比時非常有用。 以下是它的工作方式： div { max-width: calc(80% - 100px) } 它會返回一個長度值，因此可以在任何需要像素值的地方使用。 您可以進行以下運算： 使用 + 進行加法 使用 - 進行減法 使用 * 進行乘法 使用 / 進行除法 注意：在進行加法和減法時，運算符號周圍的空格是必需的，否則它將不按預期工作。 範例： div { max-width: calc(50% / 3) } div { max-width: calc(50% + 3px) }

如何在 CSS 中使用填充 (padding) padding 是 CSS 中常用的屬性，用於在元素的內側添加空間。 記住： margin 會在元素邊框外添加空間 padding 會在元素邊框內添加空間 特定 padding 屬性 (Specific padding properties) padding 有 4 個相關屬性，可以一次性修改單個邊緣的填充效果： padding-top padding-right padding-bottom padding-left 使用這些屬性非常簡單，不會混淆。例如： padding-left: 30px; padding-right: 3em; 使用 padding 簡寫 (Using the padding shorthand) padding 是一個簡寫形式，用於同時指定多個填充值，根據輸入的值的數量不同，其行為也不同。 單一值 (1 value) 使用單一值會將其應用於所有填充：上，右，下，左。 padding: 20px; 2 個值 (2 values) 使用 2 個值將第一個值應用於上和下，第二個值應用於左和右。 padding: 20px 10px; 3 個值 (3 values) 使用 3 個值將第一個值應用於上，第二個值應用於左和右，第三個值應用於下。 padding: 20px 10px 30px; 4 個值 (4 values) 使用 4 個值將第一個值應用於上，第二個值應用於右，第三個值應用於下，第四個值應用於左。...

了解如何使用 CSS 的 url() 函數。 當我們談到背景圖片、@import 等等時，我們使用 url() 函數來載入資源： div { background-image: url(test.png); } 在這個例子中，我使用了相對 URL，它會在定義 CSS 檔案的資料夾中尋找該檔案。 我可以往前一層： div { background-image: url(../test.png); } 或進入一個資料夾： div { background-image: url(subfolder/test.png); } 或者，我可以從主機的根目錄開始載入文件： div { background-image: url(/test.png); } 或者，我可以使用絕對 URL 來載入外部資源： div { background-image: url(https://mysite.com/test.png); }

在我的博客上，我在一些文章中遇到了一些响应性的问题。结果发现是一些代码片段引起的。 在我的博客上有一些文章，在这些文章中，有一些代码片段超出了正常页面宽度而没有空格。 例如： cd /some/super/long/super/long/folder 或者其他非常长的命令。 我的博客上的代码片段都是自动添加在 code 标签内，而 code 标签内部又包含了一个 pre 标签。 默认情况下，pre 标签上的 CSS white-space 属性被设置为 normal。为了解决这个问题，我们将其设置为 pre-wrap： pre { white-space: pre-wrap; } 当某些单词太长时，它们仍然可能破坏布局。为了解决这个问题，还需添加以下代码： pre { word-break: break-all; }

了解 CSS 具體性的含義以及其重要性 當一個元素被多個具有不同選擇器的規則所影響時，會發生什麼情況？這些規則都影響相同的屬性。 例如，讓我們來談一談這個元素： <p class="dog-name">Roger</p> 我們可以有以下規則： .dog-name { color: yellow; } 還有另一個以 p 為選擇器的規則，它將顏色設置為另一個值： p { color: red; } 還有一個以 p.dog-name 為選擇器的規則。哪個規則將優先於其他規則，為什麼？ 這時要介紹一下具體性。最具體的規則將優先選擇。如果兩個或多個規則具有相同的具體性，則最後出現的規則將優先選擇。 對於初學者來說，實際上什麼是更具體的有點困惑。我想對於不常看這些規則的專家來說也是困惑的，或者只是忽視了它們。 如何計算具體性 具體性是使用一種約定方式來計算的。 我們有 4 個插槽，每個插槽的初始值為 0: 0 0 0 0。最左邊的插槽最重要，最右邊的插槽最不重要。 就像十進制數字一樣：1 0 0 0 比 0 1 0 0 要大。 插槽 1 插槽 1 是最不重要的。 當我們有一個 類型選擇器 時，我們會增加這個值。類型就是標籤名稱。如果在規則中有多個類型選擇器，則按照該插槽中存儲的值進行遞增。 例子： p { } /* 0 0 0 1 */ span { } /* 0 0 0 1 */ p span { } /* 0 0 0 2 */ p > span { } /* 0 0 0 2 */ div p > span { } /* 0 0 0 3 */ 插槽 2 第二個插槽的值增加 3 個方面：...

要選取 HTML 文件中沒有類別的元素，您可以使用以下方式： :not(.class) 例如： p:not(.description) { color: red; }

在這篇文章中，我將介紹屬性選擇器的使用方法。 你也可以參考 基本 CSS 選擇器介紹文章，在那裡我介紹了幾種基本的 CSS 選擇器：使用類型選擇器、類別、ID，如何結合它們，如何選擇多個類別，如何在同一規則中樣式化多個選擇器，如何使用子選擇器和直接子選擇器來遵循頁面層級，以及相鄰兄弟元素選擇器。 屬性存在選擇器 第一種選擇器類型是屬性存在選擇器。 我們可以使用 [] 語法來檢查元素是否具有某個屬性。p[id] 將選中頁面中所有帶有 id 屬性的 p 標籤，無論其值為何： p[id] { /* ... */ } 精確屬性值選擇器 在方括號內，你可以使用 = 來檢查屬性值，只有當屬性與指定的精確值匹配時，CSS 才會生效： p[id="my-id"] { /* ... */ } 匹配屬性值部分 雖然 = 讓我們可以檢查精確值，但我們還有其他運算符： *= 檢查屬性是否包含該部分值 ^= 檢查屬性是否以該部分值開頭 $= 檢查屬性是否以該部分值結尾 |= 檢查屬性是否以該部分值和連字符開頭（在類別中很常見），或者只包含該部分值 ~= 檢查屬性是否在屬性中包含該部分值，但是與其它部分之間用空格隔開 我們提到的所有檢查都是區分大小寫的。 如果在方括號的結尾加上 i，檢查就會忽略大小寫。它在許多瀏覽器中都有支持，但並非所有瀏覽器都支持，可以在 https://caniuse.com/#feat=css-case-insensitive 進行檢查。

如何在 CSS 中使用特性查詢 特性查詢是 CSS 的一個近期且相對較不為人知的功能，但它得到了良好的支持。 我們可以使用它來檢查瀏覽器是否支援某個特性，方法是使用 @supports 關鍵字。 舉個例子，這在目前的時候，檢查瀏覽器是否支援 CSS Grid 特別有用，可以這樣做： @supports (display: grid) { /* 應用這個 CSS */ } 我們檢查瀏覽器是否支援 display 屬性的 grid 值。 我們可以使用 @supports 來檢查任何 CSS 屬性，並檢查任何值。 我們還可以使用邏輯運算符 and、or 和 not 來構建複雜的特性查詢。 以下示例檢查瀏覽器是否同時支援 CSS Grid 和 Flexbox： @supports (display: grid) and (display: flex) { /* 應用這個 CSS */ }

margin（邊距）是一個在CSS中常用的簡單屬性，用於在元素周圍添加空間。 記住： margin 在元素邊框之外添加空間 padding 在元素邊框之內添加空間 具體的 margin 屬性 margin 有四個相關屬性，可以一次性改變單個邊的 margin： margin-top margin-right margin-bottom margin-left 使用這些屬性非常簡單，不容易混淆，例如： margin-left: 30px; margin-right: 3em; 使用 margin 快捷方式 margin 是一個快捷方式，用於同時指定多個邊的 margin，根據輸入的數值個數不同，其行為也不同。 1個數值 如果使用一個數值，那麼該數值將應用於所有邊的 margin：top、right、bottom、left。 margin: 20px; 2個數值 如果使用兩個數值，那麼第一個數值將應用於底部和頂部，第二個數值將應用於左邊和右邊。 margin: 20px 10px; 3個數值 如果使用三個數值，那麼第一個數值將應用於頂部，第二個數值將應用於左右邊，第三個數值將應用於底部。 margin: 20px 10px 30px; 4個數值 如果使用四個數值，那麼第一個數值將應用於頂部，第二個數值將應用於右邊，第三個數值將應用於底部，第四個數值將應用於左邊。 margin: 20px 10px 5px 0px; 因此，順序是頂-右-底-左。 可接受的數值 margin 可接受以任何長度單位表示的數值，最常見的單位是 px、em、rem，但也存在許多其他單位。 它還接受百分比值和特殊值 auto。 使用 auto 來居中元素 auto 可以用於告訴瀏覽器自動選擇 margin，最常用於以下方式居中元素： margin: 0 auto; 如上所述，使用兩個數值時，第一個數值應用於底部和頂部，第二個數值應用於左邊和右邊。 現代居中元素的方法是使用Flexbox及其 justify-content: center; 指令。...