」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > CSS 之旅:掌握顏色並繼續前進

CSS 之旅:掌握顏色並繼續前進

發佈於2024-08-06
瀏覽:462

Journey Through CSS: Mastering Colors and Moving Forward

嘿社區,

我很高興與大家分享我的最新成就。我最近透過 freeCodeCamp 完成了 「透過建立一組彩色標記來學習 CSS 顏色」 課程。本課程深入探討了 CSS 顏色的世界,教我有效設定顏色值和配對顏色的各種方法。了解色彩理論以及如何將其應用於網頁設計可以顯著增強網頁的美感,使其對使用者更具吸引力。

主要學習內容

  • 設定顏色值的不同方法(十六進位、RGB、HSL等)
  • 和諧搭配色彩的技巧
  • 透過建構一組彩色標記來實際應用 以下是我發現特別有用的一些程式碼片段:

以十六進位值設定顏色:

.marker-red {
  background-color: #FF0000;
}

.marker-blue {
  background-color: #0000FF;
}

使用 RGB 值設定顏色:

.marker-green {
  background-color: rgb(0, 255, 0);
}

.marker-yellow {
  background-color: rgb(255, 255, 0);
}

使用 HSL 值設定顏色:

.marker-purple {
  background-color: hsl(300, 100%, 50%);
}

.marker-orange {
  background-color: hsl(30, 100%, 50%);
}

完成本課程不僅擴展了我的 CSS 技能,也讓我更深入地認識到色彩在網頁設計中的重要性。

下一步是什麼?
我很高興能在下一章繼續我的學習之旅,該章將重點放在形式上。表單是網站上使用者互動的關鍵元素,掌握其設計和功能對於任何 Web 開發人員都至關重要。在本章中,我將深入探討:

  • 建立表單並設定樣式
  • 瞭解表單元素及其屬性
  • 透過精心設計的表單來增強使用者體驗

隨著下一章的進展,我期待分享更多的見解和學習。

如果您是編碼新手或正在尋找優質資源,我強烈建議您查看 freeCodeCamp。這是一個很棒的平台,提供結構化課程,引導您逐步學習 Web 開發。

請繼續關注更多更新,並隨時分享您認為可能有幫助的任何提示或資源。讓我們一起繼續學習、一起成長!

編碼愉快!

版本聲明 本文轉載於:https://dev.to/ack/journey-through-css-mastering-colors-and-moving-forward-59li?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何使用PHP將斑點(圖像)正確插入MySQL?
    如何使用PHP將斑點(圖像)正確插入MySQL?
    在嘗試將image存儲在mysql數據庫中時,您可能會遇到一個可能會遇到問題。本指南將提供成功存儲您的圖像數據的解決方案。 easudy values('$ this-> ; image_id','file_get_contents($ tmp_imag...
    程式設計 發佈於2025-02-06
  • 為什麼我的GO數據庫/SQL查詢要比直接Postgres PSQL查詢要慢?
    為什麼我的GO數據庫/SQL查詢要比直接Postgres PSQL查詢要慢?
    使用數據庫/sql的查詢比直接查詢數據庫 QUERYing明顯慢,儘管使用了相同的查詢,但在執行A執行一個明顯的性能差異使用Postgres的PSQL實用程序直接查詢,並使用GO應用程序中的數據庫/SQL軟件包進行查詢。這種差異在PSQL中毫無疑問的查詢佔GO中的數十毫秒。數據庫/SQL初始化了一...
    程式設計 發佈於2025-02-06
  • 版本5.6.5之前,使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制?
    版本5.6.5之前,使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制?
    在默認值中使用current_timestamp或mysql版本中的current_timestamp或在5.6.5 這種限制源於遺產實現的關注,這些限制需要為Current_timestamp功能提供特定的實現。消息和相關問題 `Productid` int(10)unsigned not ...
    程式設計 發佈於2025-02-06
  • 如何在JavaScript對像中動態設置鍵?
    如何在JavaScript對像中動態設置鍵?
    如何為JavaScript對像變量創建動態鍵,嘗試為JavaScript對象創建動態鍵,使用此Syntax jsObj['key' i] = 'example' 1;將不起作用。正確的方法採用方括號:他們維持一個長度屬性,該屬性反映了數字屬性(索引)和一個數字屬性的數量。標準對像沒有模仿這...
    程式設計 發佈於2025-02-06
  • 我可以將加密從McRypt遷移到OpenSSL,並使用OpenSSL遷移MCRYPT加密數據?
    我可以將加密從McRypt遷移到OpenSSL,並使用OpenSSL遷移MCRYPT加密數據?
    將我的加密庫從mcrypt升級到openssl 問題:是否可以將我的加密庫從McRypt升級到OpenSSL?如果是這樣?使用openssl? 答案:可以使用mcrypt數據加密數據,可以使用openssl。關於如何使用openssl對McRypt進行加密的數據: openssl_decryp...
    程式設計 發佈於2025-02-06
  • 如何通過JavaScript中的鍵找到嵌套對象?
    如何通過JavaScript中的鍵找到嵌套對象?
    通過鍵 recursive solutive ); 如果(結果){ 休息; } } } 別的 { 對於(theObject中的var Prop){ con...
    程式設計 發佈於2025-02-06
  • 我如何使用Laravel \'s“ Orderby”關係訂購相關的模型記錄?
    我如何使用Laravel \'s“ Orderby”關係訂購相關的模型記錄?
    在Laravel中與Laravel的訂單關係一起檢索相關的模型記錄,從相關模型訪問數據時,可以對使用訂單方法的結果。例如,以下代碼檢索作者的所有註釋,並將它們顯示在列表中:但是,該列表不可用所需的序列排序。要根據帖子ID訂購結果,您可以擴展與查詢函數的關係:'列'參數指定要進行排序...
    程式設計 發佈於2025-02-06
  • 如何使用不同數量列的聯合數據庫表?
    如何使用不同數量列的聯合數據庫表?
    合併列數不同的表 當嘗試合併列數不同的數據庫表時,可能會遇到挑戰。一種直接的方法是在列數較少的表中,為缺失的列追加空值。 例如,考慮兩個表,表 A 和表 B,其中表 A 的列數多於表 B。為了合併這些表,同時處理表 B 中缺失的列,請按照以下步驟操作: 確定表 B 中缺失的列,並將它們添加到表的...
    程式設計 發佈於2025-02-06
  • PHP啟動錯誤:為什麼可以加載動態庫?
    PHP啟動錯誤:為什麼可以加載動態庫?
    [2遇到錯誤消息,表明未能加載動態庫。這些錯誤可能會顯著影響PHP功能,這對於迅速解決和解決這些錯誤至關重要。 此問題的一個常見原因是試圖加載未安裝的PHP擴展程序。要確定相關擴展名,請搜索PHP配置文件中包含擴展名=的行。利用GREP命令在PHP配置目錄中遞歸搜索:修改適當的配置文件,然後重新啟動...
    程式設計 發佈於2025-02-06
  • 潛入系統編程:C的初學者指南
    潛入系統編程:C的初學者指南
    探索系統編程:C 語言初學者指南系統編程涉及與計算機底層硬件和軟件交互。 C 語言是系統編程的首選語言之一,因為它能夠直接訪問硬件資源。這篇指南將帶你踏上系統編程之旅,從 C 語言基礎到實際應用案例。 C 語言基礎變量和數據類型:變量用於存儲數據。在C 中,變量必須聲明其數據類型,例如:int ag...
    程式設計 發佈於2025-02-06
  • 現代遊戲開發人員的高級JavaScript遊戲開發技術
    現代遊戲開發人員的高級JavaScript遊戲開發技術
    使用JavaScript構建遊戲比以往任何時候都更令人興奮。無論您是在編碼經典平台遊戲還是複雜的模擬,都知道如何充分利用工具,可以改變遊戲規則。本指南深入研究了JavaScript遊戲開發的基本策略和高級技術,這些技術可以幫助您提高自己的技巧。 1。遊戲開發中的網絡工作者 為什麼要使...
    程式設計 發佈於2025-02-06
  • 插入資料時如何修復「常規錯誤:2006 MySQL 伺服器已消失」?
    插入資料時如何修復「常規錯誤:2006 MySQL 伺服器已消失」?
    插入記錄時如何解決“一般錯誤:2006 MySQL 服務器已消失”介紹:將數據插入MySQL 數據庫有時會導致錯誤“一般錯誤:2006 MySQL 服務器已消失”。當與服務器的連接丟失時會出現此錯誤,通常是由於 MySQL 配置中的兩個變量之一所致。 解決方案:解決此錯誤的關鍵是調整wait_tim...
    程式設計 發佈於2025-02-06
  • 在映射到MySQL枚舉列時,如何確保冬眠保留值?
    在映射到MySQL枚舉列時,如何確保冬眠保留值?
    在hibernate中保存枚舉值:故障排除錯誤的列type ,他們各自的映射至關重要。在Java中使用枚舉類型時,至關重要的是,建立冬眠的方式如何映射到基礎數據庫。 在您的情況下,您已將MySQL列定義為枚舉,並在Java中創建了相應的枚舉代碼。但是,您遇到以下錯誤:“ MyApp中的錯誤列類型...
    程式設計 發佈於2025-02-06
  • 我可以在CSS中使用SVG作為偽元素嗎?
    我可以在CSS中使用SVG作為偽元素嗎?
    使用svgs用作pseudo-element content css content properts允許在使用元素之前或之後使用元素插入各種類型的內容偽元素,例如::之前和::之後。但是,對可以包括哪些內容有限制。 可以將svgs用作pseudo-element Content? ,現在可以使...
    程式設計 發佈於2025-02-06
  • 對象擬合:IE和Edge中的封面失敗,如何修復?
    對象擬合:IE和Edge中的封面失敗,如何修復?
    解決此問題,我們採用了一個巧妙的CSS解決方案來解決問題:高度:100%; 高度:auto ; 寬度:100%; //對於水平塊 ,使用絕對定位將圖像定位在中心,以object-fit:object-fit :cover in IE和edge消除了問題。現在,圖像將按比例擴展,保持所需的效果而不...
    程式設計 發佈於2025-02-06

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

Copyright© 2022 湘ICP备2022001581号-3