正確學習 CSS

正確學習CSS

CSS（層疊樣式表） 由 Web 開發人員用來設計網站樣式。

當我開始學習 Web 開發時，我對 CSS 感到非常困惑。我遇到的最大困難是記住屬性和維護程式碼。在這篇文章中我將幫助初學者避免我在學習時所犯的錯誤。

1。練習
程式設計是你無法完全記住的東西。一切都是透過練習來理解它。
當我學習 CSS 練習時，有點困難，因為我無法好好記住東西。我試圖避免“複製和貼上”，因為我認為這會毀掉我的技能。最後我完成了 CSS 程式碼的複製和貼上。我並不是說複製和貼上會讓事情變得更好。但是，如果您嘗試了解執行複製並貼上的 CSS 程式碼時發生的情況。這比記住 CSS 屬性要好得多。

（例如）如果您想將按鈕設計為圓形、黑色和白色文本，並希望它在懸停時交換背景和文字顏色。你可以透過一段 CSS 程式碼來完成類似的操作：

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

如果不了解它的作用，它就沒有太大幫助。
如果你明白這一點：

• 邊框：2px實線；為按鈕新增了 2 像素實心邊框，
• border-radius: 16px 使其圓潤 16 像素，
• 背景顏色：#000000；將背景設為黑色，
• 顏色：#ffffff；將文字設為​​白色，:hover,
• 背景顏色：#ffffff;
• 顏色：#000000；懸停時背景變成白色，文字變成黑色。

您下次將能夠編寫按鈕，而無需複製粘貼，更好的是，您將對邊框、邊框半徑、背景顏色、顏色和:hover有基本的了解，並且能夠在更多方面使用它不僅僅是一個按鈕。這就是為什麼你應該理解你複製貼上的程式碼。

資源：
從哪裡複製和貼上程式碼也很重要。因為作為初學者，您需要對程式碼進行良好的解釋。

有很多網站可以很好地完成這項工作，但我推薦：

1。極客們的極客們：

GeeksforGeeks 是一個領先的線上平台，為全球數百萬開發人員和技術愛好者提供電腦科學和程式設計資源，其中包含大量課程、線下課堂專案、教程、文章、程式設計挑戰、練習題等等。

這個平台提供的程式碼有很好的解釋，是我個人最喜歡的。

訪問 GeeksForGeeks

2。 W3學校：

W3Schools 是一所針對 Web 開發人員的學校，涵蓋 Web 開發的所有面向：HTML 教學。 CSS 教學。 JavaScript 教程。 PHP 教學。

這個網站也和「Geeks For Geeks」非常相似。但解釋技術不同所以這取決於你是否舒服。

參觀 W3Schools

程式碼可維護性：
在學習 Web 開發時，第二件最煩人的事情是我的 CSS 程式碼變得太大。為複雜的網站專案維護 CSS 程式碼變得越來越困難。多虧了像 TailwindCSS 這樣的框架，你總是不必寫原始 CSS。

TailwindCSS：

Tailwind CSS 是一個開源 CSS 框架。與 Bootstrap 等其他框架不同，它不為按鈕或表格等元素提供一系列預先定義的類別。相反，它創建了一個「實用」CSS 類別列表，可用於透過混合和匹配來設定每個元素的樣式。

TailwindCSS 讓 CSS 程式碼像我們之前的按鈕範例一樣：

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

進入以下課程：

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton :hover{
    background-color: #ffffff;
    color: #000000;
}

可以將其新增至您的 HTML 按鈕元素中，例如：

border-2 rounded-md bg-black text-white hover:bg-white hover:text-black

對於像 ReactJS 這樣的其他框架，我會為初學者推薦 TailwindCSS。它更容易學習和在生產中使用。它使您的 CSS 程式碼更加可維護。您也可以將它與 ReactJS 一起使用，從而提高程式碼效率和可維護性。 TailwindCSS 也有非常詳細且易於理解的程式碼解釋的文檔。

訪問 TailwindCSS

結論：
雖然學習CSS可能很困難，但是在理解它的同時經常練習它會有很大幫助。

不要只是複製貼上程式碼，也要理解它的作用，因為這是學習 CSS 的正確方法。

以上是正確學習 CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！