」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > Odin 專案 - CSS 簡介

Odin 專案 - CSS 簡介

發佈於2024-11-08
瀏覽:906

The Odin Project -Intro to CSS

你好呀 ? ,

我是一名擁有 3 年經驗的前端開發人員。我一直想彌合我的知識差距並成為全端開發人員。我曾多次嘗試啟動奧丁項目,但未能始終如一地堅持到底。這一次,我決心堅持下去,提升自己的技術。

為了追蹤我的進度,我將發布一系列部落格文章,詳細介紹我從 Odin 計畫每個章節中學到的知識。將這些視為我的開發日記。

我會添加我學到的主題並分享我以前不知道的東西。

我從 CSS as HTML 開始,以及我以前經歷過或至少我知道的所有介紹內容。

學習主題

  • 選擇器
  1. 通用選擇器
  2. 型選擇器
  3. 類別選擇器
  4. ID選擇器
  5. 分組選擇器
  6. 連結選擇器
  • 組合器 我確實知道如何使用組合器,但我不知道該特定術語。還有關於選擇器之間關係的定義,而不是將它們分組或連結。
  • 後代組合器

基本 CSS 屬性

  • 顏色、背景顏色
  • 版式
  1. 字型系列與通用字型系列
  • 影像高度與寬度
    因此,我在這裡學到的另一件事是,建議始終在 HTML 中指定圖像的寬度和高度屬性。這可確保瀏覽器在頁面渲染期間為圖像保留適當的空間,從而防止圖像載入時內容佈局發生意外變化。若要保持影像的原始寬高比,您可以僅變更寬度屬性並將高度設為「自動」。這將根據影像的比例自動調整高度。

  • 外部CSS

  • 內部與內聯 CSS

我記得我的技術主管將內嵌 CSS 加入 HTML 中的一個例子。我猶豫是否要質疑他的決定,因為他是一位經驗豐富的專業人士,而我對該領域仍然相對較新。

然而,我現在明白,更有效的方法是建議我們盡量減少內聯 CSS 的使用。透過將內聯樣式限制為規則運行所絕對必需的樣式,我們可以避免過度應用特異性並維護更乾淨、更易於維護的程式碼庫。

我還計劃每週發布一個播客,回顧我學到的東西。

版本聲明 本文轉載於:https://dev.to/iamhrk/the-odin-project-intro-to-css-3opa?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3