• 本站不接受任何被列入廣告發文黑名單的電子信箱。如您無法註冊,可能是您使用的電子信箱為廣告黑名單信箱。正常的信箱都是可以正常註冊。

    如果您可以証實您的信箱非廣告黑名單,請自行來信 hstaryoching#gmail.com 申請。

    申請請留下您的正統名稱及信箱,並告知從何得知及想進來的理由。

  • 浩瀚星空站已經重新整合並新增新的開發小站天地。

    採用新版的xenforo 2.2.3 做為最新的站點系統。

    中文搜尋已在本站啟用成功,歡迎多加測試看看

    有問題請再回報

  • 游客 您好:

    目前「IT人巴啦啦天地」需要數個專家協助發表文章。

    只要您願意,可以直接與我 ihstat 連絡。我將會給你「專家」身份。

    成為「專家」有什麼好處?目前暫時還沒有。我也只願意提供最多10名會員有這樣的身份。

    他可能可以成為未來非常高的權限。(除了管理) 也可以獲得由浩瀚星空站提供的資源。

教學 CSS變數

a7m5001

觀察會員
CSS預設有140種標準顏色名稱,當你用以下兩種方式更改字體顏色會得到相同的效果。
CSS:
body{
    color:red;
}
CSS:
body{
   color:#f00;
}

雖然記住英文單詞確實要比記住色彩的RGB值或HEX值要輕鬆得多,但對於沒學過色彩專業的人,
這些標準顏色名稱應該並不會有太多幫助,那麼我們是不是可以自定義色彩名稱呢?

如果我們需要為CSS建立變數,和程式語言的變數相同,我們可以建立全域變數和區域變數,
並使用JavaScript變更CSS變數的值,讓改動整份網頁的顏色變得相當簡易。

以下我將以全域變數為例:
CSS:
:root{
    --blue:#00f;
}
CSS變數名稱需要以兩個減號為開頭,並在:root下宣告,而當我們要使用這個變數時,則以var()來調用變數。
CSS:
body{
    background-color:var(--blue);
}

這麼做的好處很明顯,當有大量使用某一設定的元素要進行變更時,
只須對變數的值做更改,那麼最多只要更改一次,如果以傳統的方式(RGB或HEX),
那麼每次做變動都必須耗盡心力。
而變數名稱可以自由定義,不一定得要是顏色的名稱,
甚至可以使用MainColor和SecondaryColor等等這種用來描述其意圖的名稱,
如此程式設計師便可完全將此部分交由相關職位的設計師去做處裡。
 

a7m5001

觀察會員
在此附上140種顏色及名稱全覽圖:
PpewWm.png


如有變動請以W3C官方網站為主。
 
頂部