CSS 並不難（你只是缺少這些基礎知識）

當我第一次開始 Web 開發時，我認為我最大的挑戰是 JavaScript（並不是說 JS 還不是少數），但隨後出現了很多關於 CSS 的糟糕表現和恐怖故事。

儘管如此，我還是深入研究了前端開發，天哪，CSS 對我做了很多工作。沒有什麼進展順利，甚至沒有讓我開始將 div 置中。這是一場惡夢。

但是，然後，我意識到，CSS 不是問題，問題是我不了解基礎知識，一旦我掌握了它們，樣式就變得更容易並且令人驚訝地有趣。

在本文中，我將引導您了解兩個基本概念，這將為掌握 CSS 奠定基礎：

1. CSS 選擇器
2. 盒子模型
3. 定位與版面

• CSS 選擇器：CSS 選擇器是讓您定位某些需要樣式化的 HTML 元素的工具。

讓我們來探索一些常用的選擇器：

A.通用選擇器： 用於定位頁面上的每個元素。它由星號（*）表示，通常用於全域重設或套用基本樣式。

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

B.類別選擇器： 用於選擇具有特定類別屬性值的 HTML 元素。若要選擇具有特定類別的元素，請寫一個句點(.)，後面接著類別屬性的值。

<div>





<pre class="brush:php;toolbar:false">.box{
  background-color: teal;
  padding: 30px;
  border-radius: 10px;
  border: 2px solid;
  text-align: center;
}

C.類型選擇器： 用於定位特定類型的所有元素。它也稱為元素選擇器。

p{
text-align: center;
font-size: 1.2rem
}

用例：這對所有

標籤套用統一的樣式。

D.屬性選擇器： 此選擇器根據 HTML 元素的屬性和值來定位 HTML 元素。

input[type = "text"] {
background-color: cyan;
color: gray;
}

E.偽類： 這些會根據其狀態選擇樣式元素。

a:hover{
color: blue;
transition: ease-in 0.5s;
}

還有其他有用的 CSS 選擇器，但目前就這些。

• 盒子模型

盒子模型本質上是一個包裹 HTML 元素的盒子，基本上 HTML 中的每個元素只是一個大（或小）的矩形盒子。盒子模型的作用是幫助控制每個盒子佔用的空間以及它們如何與其他元素互動。

每個盒子有四個主要部分：

1。內容： 這是盒子裡面的內容—文字、圖像和其他元素。
2.填充： 這是內容與框架邊緣之間的空間。
3.邊框： 這是盒子的邊緣。
4.邊距： 這是邊框外的空間，將該框與其他框分開。

這是解釋盒子模型的插圖

注意：虛線是盒子的邊框。

盒子模型對於您想要在 CSS 中執行的任何操作都是必不可少的，從定位元素到管理間距。例如，我僅使用 HTML 和 CSS 繪製了盒子模型插圖，以顯示不同層如何協同工作。

這是幫助我將插圖變成現實的程式碼：

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

總結（時間到了）
CSS 一開始可能看起來很多，但一旦你掌握了基礎知識，你就準備好征服世界（至少是你的世界）。
這是本文的要點：CSS 並不難，你只需要更專注於基礎知識。
繼續學習，最重要的是繼續練習，很快，您就會像專業人士一樣設計網頁。

下一步是什麼？
現在您已經學習了 CSS 選擇器和盒子模型的基礎知識，您離掌握 CSS 又更近了一步，但還有更多東西需要探索。
在下一篇文章中，我們將深入探討 CSS 定位和佈局技術，例如 Flexbox 和 Grid。

編碼愉快！ ！ ！

以上是CSS 並不難（你只是缺少這些基礎知識）的詳細內容。更多資訊請關注PHP中文網其他相關文章！