用CSS語法修改樣式,到底要加在哪裡?

by | 4 月 15, 2020 | 0 comments

用CSS語法修改樣式,到底要加在哪裡?

by | 4 月 15, 2020 | 0 comments

這篇文章要教你的是,到底CSS語法可以加在哪裡,才不會讓網站爆炸呢?以及一些使用CSS語法的小工具們,讓你在學習CSS語法的過程中不孤單。

我想很多人都是程式語法的初學者,,因為擔心自己亂加CSS而導致網站整個壞掉,而不敢隨意接觸CSS語法這塊,總是靠外掛來替網站作微調。

我以前也跟你們一樣,在接觸到Wordpress建站後,才開始慢慢摸索CSS語法,後來就漸漸發覺到CSS的好處與方便性,不僅可省去使用無數個外掛,也減少網站被外掛速度拖累的問題


1.CSS語法修改位置

1-1.外觀自訂

首先,進入控制台後,滑鼠移動到左側的外觀→接著點選自訂,進入網站外觀的自訂區域。

Customise

1-2.附加的CSS

接著點選左側最下方的附加的CSS,你會看到下圖右邊的畫面,下方紅色線條框選處就是你貼上CSS語法的位置。

每當你貼上一個有效的CSS語法,右邊的網站預覽畫面都會照著你的CSS語法作改變。如果你滿意CSS語法的效果,點擊右上角「發佈」就完成了。

如果你不喜歡CSS語法的效果,只要直接把語法刪除,效果就會消失,又恢復到你原本的網站樣式,是一個可以很安全使用語法的位置,不會把網站整個毀滅!可以盡情地嘗試CSS語法。

additional css

2.顏色色表

另外,大家在利用CSS更改樣式時,顏色的表達方式會是6個英文數字組成的色碼,這個色碼可以到 HTML Color Picker 來查詢。

使用方法也非常簡單,從左側色盤挑選好顏色的大方向後,右側會讓你選擇明暗度,中間則是顏色與黑白色文字的預覽圖,當你選好顏色後,下方#開頭的文字,就是你要使用的色碼,請連同前面的#字號一起複製到你的CSS語法中,就OK囉。

html color picker

3.名稱定義

剛開始使用CSS語法時,要修改的樣式的名稱總是讓人很容易混淆,CSS Reference 整理表,你需要用到的CSS語法名稱都在這裡,雖然是英文,但是總好過什麼都沒有靠自己空想,以下提供我比較常用的項目:

  • background-color:背景顏色
  • font-family:使用字體
  • font-size:字體大小
  • font-weight:字體粗細
  • color:顏色
  • padding:外圍寬度
  • border:邊框樣式

4.修改示範

如果你對於CSS語法有一點興趣,在「6個重點整理,用Contact Form 7製作完美的聯絡我們頁面」文章內,我使用了CSS語法來示範一些使用的教學,歡迎閱讀。


如果你對於這篇文章有任何疑問或者建議,都歡迎你在底下留言,我將盡我所能替你解答。而且,如果你提問了將可能幫助到其他擁有相同問題的人!:)


讀者優惠

以下優惠都是本網站與各大服務商爭取到,專屬於讀者的優惠代碼,只要你點擊以下連結,或者使用優惠碼購買產品,除了你能享受到特殊的優惠價格以外,我也會額外獲得一點來自服務商的獎金,這都是我能夠持續分享的動力來源之一:)
服務商優惠取得優惠
主機+網域第一年1折起點擊連結
.com網域只要$8.88點擊連結
全新網域7折起點擊連結
網域只要$4.99點擊連結

服務商優惠取得優惠
共享主機六折起 每月$5.95點擊連結
前三個月主機九折優惠使用優惠碼NJD4U註冊會員
註冊即得$15優惠金點擊連結
專用主機優惠79折點擊連結
主機+網域第一年1折起點擊連結
共用主機第一年優惠5折點擊連結
共享主機54折點擊連結
服務商優惠取得優惠
SSL優惠65折點擊連結
SSL年付$299特價$269.99點擊連結

服務商優惠取得優惠
DIVI Elegant
終生會員優惠8折
$249$199
點擊連結
DIVI Elegant
一年會員折扣$19
$89$70
點擊連結
DIVI Elegant
獲得全部主題及外掛
優惠價$70
點擊連結

服務商優惠取得優惠
1個網站加速優惠八折
$49$39.2
點擊連結前往購買
使用期限至4月16日止
3個網站加速優惠八折
$99$79.2
點擊連結前往購買
使用期限至4月16日止
無限網站加速優惠八折
$249$199.2
點擊連結前往購買
使用期限至4月16日止

服務商優惠取得優惠
專屬電子信箱優惠67折點擊連結

0 Comments

Submit a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *