☟為了讓這裡能夠永續經營,請容許一點點的廣告☟

這篇文章想記錄我的CSS學習起點,也想感謝我的啟蒙老師優雅筆寄。一開始只是想幫文章中的h2加上底色與左側的寬邊框,我知道CSS就可以做,根本不需要為了這一點小功能再安裝外掛!雖然網路上有許多CSS樣式的教學,比如說w3schools,背景與邊線的樣式根本小菜一碟,而codepen則是可以試做CSS與JS樣式。
然而,問題來了,我該將這些CSS樣式放在哪裡?以及,我該如何將這些CSS樣式應用在文章裡的h2?

基礎CSS樣式

h2 with css

我在h2運用到的樣式包含〔背景顏色〕、〔字體顏色〕、〔邊線位置〕、〔邊線寬度〕、〔邊線顏色〕、〔上右下左的內距〕。
使用的CSS snippet如下:

h2 {
  color: #ffffff !important;
  background-color: #83b5aa;
  border-left: 12px solid #5c726e;
  padding : 1px 1px 1px 20px;
}

在上面的CSS語法中,藍色字是可以自由更改的屬性值,紅色字則是可以按照需要加上。

CSS語法

CSS-Syntax

在CSS語法結構中,為最前面的〔h2〕是selector,也就是被指定的元素。
後半段前後用{}花括號包住的是declaration,是用來聲明樣式給最前面的selector。

selector|指定要套用CSS樣式的元素

因為h2是HTML的標籤,如果想要在全站的h2都套用這個樣式,在最前面的selector直接用h2,是最快速方便的方式!如此便不需要再個別去套用CSS樣式。
除了h2以外,h1、h3、h4、h5、h6都一樣,可以作為最前面的selector,用後半段的declaration去指定樣式,並且套用到全站。

但是,有時候可能無法這麼輕鬆;因為在整個網站中,可能有一些主題與外掛,也偷偷為某些標題強制使用了h2~h6!
這樣可能會讓我們自訂的CSS樣式也套用在預料之外的地方。

某些主題或外掛,往往也會將文章的標題設為h2或h3。因此,一旦將自訂的CSS樣式套用到全站的h2或h3,可能會讓原本只想要在文章中呈現出自訂的樣式,居然也套用到某些預料之外的地方。
而這樣的全站套用,可能並不會影響版面,但是在我自訂的樣式中,的確破壞了版面。

這種預期之外的全站套用,如果不影響版面佈局,那就無所謂了;反之,一旦影響了版面的整齊美觀,那就得為這個指定的selector做一些設定進行篩選,讓它只套用在我們想要套用的元素上。

為特定的selector命名,將CSS樣式套用在指定的元素中

這個方式不只能應用於headings(h1~h6),其實是可以應用在所有的HTML的標籤或元素中,當然,也可以應用在Gutenberg或Block Editor區塊編輯器的任何一個區塊中。

既然h1~h6、p、body、title…這些是HTML標籤,那就幫selector取一個不會HTML標籤混淆,又可方便識別的名稱吧!

因為是自定義的selector,名稱的前面必須加上〔.〕這個英文的句號。
比如說,想要將CSS樣式只套用在特定的h2身上,那就為這個CSS樣式命名為〔.myh2〕,或者是〔.miriamh2〕,甚至是〔.lmthequeen〕也可以,隨自己喜好,只要這個名字在網站的CSS樣式中是獨一無二的即可,重點是前面一定要加上〔.〕。
如果決定將selector命名為〔.myh2〕,修改後的CSS語法如下:

.myh2 {
  color: #ffffff !important;
  background-color: #83b5aa;
  border-left: 12px solid #5c726e;
  padding : 1px 1px 1px 20px;
}

字體顏色

css-property-color

字體顏色的屬性為color,範例中使用的是〔HEX〕,屬性值為#ffffff
屬性值可更改為自己想要的字體顏色。
在CSS的樣式聲明中,屬性與屬性值之間使用英文的冒號:
範例中在顏色屬性值的後面加了一個【!important】,前面一個英文的驚嘆號!,後面是英文字important,這代表這個屬性值必須優先。
屬性值後面的英文分號【;】是為了與下一個屬性區隔。

!important

正常情況下不太需要使用到【!important】,但是如果當已經設定好的CSS樣式屬性沒有生效,可以嘗試在那個屬性的後面加上!important,應該就可以優先套用。
這是因為這個CSS樣式是為了h2所自訂,但是某些主題可能已經自訂了h2的顏色,這樣可能會讓這個CSS樣式中所自訂的字體顏色無法改變主題裡已自訂的顏色,所以在顏色屬性的後面加上【!important】,讓這個屬性優先於其他地方的相同屬性的樣式設定。
顏色的屬性值

可使用顏色名稱〔color name〕、〔RGB〕、〔HEX〕、〔HSL〕以及可調整透明度的〔HEXA〕與〔HSLA〕。

color name

比如說Black、Blue、Red、Gray…等等,是最常用到的Color name,可以在w3schools中,查看一百多個顏色的〔color name〕、〔HEX〕以及〔RGB〕數值。
如果要使用Color name作為屬性值,可直接將範例中的#ffffff改成White就可以了。

並不是每一個顏色都有Color name,如果想要更多元的顏色,還是〔HEX〕最豐富也最方便!

HEX

呈現方式為#FFFFFF或#000000,也就是白色與黑色。
這是最容易取得的顏色屬性值,能選擇的顏色最細。
在WordPress後台的編輯頁面中任何一個色盤中,就可以找到顏色的〔HEX〕,或者是這個好用的檢色器網站,也能快速查找顏色的〔RGB〕、〔HEX〕以及〔HSL〕。

RGB

雖然比較少使用到,但是可以了解一下它的呈現方式為rgb(255, 255, 255)或rgb(0, 0, 0),前面那組是白色的RGB數值,後面那組則是黑色的。
如果有需要,也可以在Picker上使用檢色器面板快速找到。
如果要使用RGB作為屬性值,可直接將範例中的#ffffff改成rgb(255, 255, 255)就可以了。
CSS語法就會變成:

.myh2 {
  color: rgb(255, 255, 255) !important;
  background-color: rgb(131, 181, 170);
  border-left: 12px solid rgb(92, 114, 110);
  padding : 1px 1px 1px 20px;
}

背景顏色

css-property-background-color

背景顏色的屬性為background-color,範例中使用的是Hex,屬性值為#83b5aa
屬性值可更改為自己想要的背景顏色。
在CSS的樣式聲明中,屬性與屬性值之間使用英文的冒號:
屬性值後面的英文分號【;】是為了與下一個屬性區隔。
屬性的呈現方式為

background-color: #83b5aa;

邊線位置、寬度、樣式與顏色

css-property-border

邊線屬性:位置
邊線的屬性為border,代表四邊都有邊線
如果只需要特定位置有邊線,可在屬性後面加上-top、-right、-bottom或-left
範例中只要左邊有邊線,所以屬性就是border-left

❷邊線屬性值:寬度、樣式與顏色
邊線的寬度、樣式與顏色是屬性值。
在CSS的樣式聲明中,屬性與屬性值之間使用英文的冒號:
邊線寬度的單位為【px】,範例中邊線寬度為【12px】。
邊線樣式的屬性值有【dotted】代表點點、【dashed】代表虛線、【solid】代表實線…等等,還有許多樣式,可以在w3schools中查詢。範例中選擇的樣式為【solid】。
範例中的邊線顏色使用的是〔HEX〕,屬性值為#5c726e
屬性值後面的英文分號【;】是為了與下一個屬性區隔。

內距|padding

css-property-padding

邊線的屬性為padding,目的是控制元素裡面的內容與邊線的距離。
內距的屬性值依序為上右下左,單位是【px】。
範例中指定為只有左邊距離20px,其他都是1px,所以設定值按照【上右下左】的順序為1px 1px 1px 20px

添加CSS樣式

按照前面所自訂的CSS樣式,有2種作法:
❶自動套用在全站的h2
❷手到套用在指定的h2

自動套用在全站的h2

CSS樣式最前面的selector直接填h2即可:

h2 {
  color: #ffffff !important;
  background-color: #83b5aa;
  border-left: 12px solid #5c726e;
  padding : 1px 1px 1px 20px;
}
☟為了讓這裡能夠永續經營,請容許一點點的廣告☟

手動套用在指定的h2

必須先自訂selector,範例中自訂取名為myh2,前面要加上英文的句號〔.〕如下:

.myh2 {
  color: #ffffff !important;
  background-color: #83b5aa;
  border-left: 12px solid #5c726e;
  padding : 1px 1px 1px 20px;
}

CSS樣式放哪裡?

add-css

決定好CSS樣式之後,接著就是前往Appearance外觀→Customize自訂→Additional CSS自訂CSS,將CSS樣式貼上之後,再點擊發布Publish即可。

自動套用在全站的h2

css-to-all-site-broke-others

在自訂CSS貼上後,就會在右半邊的即時預覽看到變化。
一開始顯示的是首頁,可以前往文章或頁面看效果;如果都沒有問題的話,就可以點擊【發布Publish】,如此就能自動套用在網站中所有的h2。

因為我的首頁裡面也有使用h2,所以一貼上套用到全站h2的CSS樣式之後,有二處的h2已經呈現出CSS樣式。
但是這二處h2標題套用了自訂樣式之後,反而破壞了版面的美觀。

解決的方法有二個:

❶要嘛將不想要套用全站h2樣式的地方改成其他的heading,比如說h3~h6
❷要嘛就是改用【只套用在指定的h2】,但是需要再手動套用。

手動套用在指定的h2

因為在WordPress網站中,不一定只有文章中可以自己設定headings,有一些主題與外掛會強制設定標題要使用h2或h3…,除非要自己去修改主題或外掛的【.php】檔案。
所以,當遇到各種麻煩的原因,導致套用到全站的CSS樣式發生意料之外的效果而破壞版面,那只好麻煩一點,在自訂CSS貼上後,再手動套用到需要指定CSS樣式的h2區塊中。

其實在Gutenberg或區塊編輯器裡面指定,也非常快速,不需要切換到HTML,一點都不麻煩唷~

如何在區塊編輯器指定CSS樣式給特定區塊?

CSS class Selector to gutenberg-final

將CSS樣式指定給特定的元素,在Gutenberg或區塊編輯器Block Editor是非常簡單又快速的操作方式,完全不需要切換到HTML編輯模式,非常推薦!

操作時間 1 minute

STEP 1|自訂名稱的CSS語法

CSS class Selector to gutenberg-step-1

使用的是自己定義CSS名稱的這組語法。

STEP 2|先將CSS語法加入主題的自訂中

CSS-class-Selector-to-gutenberg-step-2

在Appearance外觀→Customize自訂→Additional CSS自訂CSS,將CSS樣式貼上,再點擊發布Publish。

STEP 3|在區塊編輯器中使用自訂的CSS樣式

CSS-class-Selector-to-gutenberg-step-3

因為CSS樣式已經加入主題的自訂CSS裡面,所以編輯文章的時候,每當需要指定h2的樣式時,再手動輸入自訂的CSS名稱,範例中的名稱為【myh2】。
操作方式☞在區塊編輯器先新增headings區塊→在右邊的【Block】中找到最下面的【Advanced】→展開下拉箭頭後會出現一個叫做【Additional CSS class(es)】的欄位,接著將自訂的CSS名稱【myh2】填在這個欄位中。

請注意,在自訂CSS中的CSS語法中,自訂名稱前面要加英文輸入法的句號〔.〕,但是在區塊編輯器的【Additional CSS class(es)】欄位中,就不用再加上〔.〕,只需要填寫自訂的名稱myh2就可以了。

為h2自訂CSS樣式的教學就介紹到這裡了!如果有任何問題,歡迎在下方的留言板討論指教囉~
更多WordPress相關筆記都在這裡

好嘛好嘛…臨走前幫我拍拍手嘛
如果你願意免費幫助我,請在下方圓形按鈕幫我拍拍手,最多可以按5下,那就幫我按5下吧!算我求你啦啦啦~~~謝謝你、我愛你❤
臉書或Google帳號都可以快速登入喲…

facebook留言板|文章相關問題歡迎留言討論唷~
IMG_2349-miriammibao-100px

▍關於作者|MiriamMibao温唯

2019.02.11,我開始了這裡…
不懂css、不懂php,當然-也不知道誰是Nginx、誰又是Apache…
硬要WordPress架站,一切自己來,所有的細節,從0開始,自己架站會遇到的問題,遇到了才知道!這一路走來,跌跌撞撞,摸索過國內外能夠解決問題的資料…
是不是該好好紀錄這一段跌跌撞撞的探索日記?或許,也能帶給你們一些幫助...

咖啡贊助計畫

buy me a coffee-icon

我願意《將我所知道的一切,仔細地、真實地分享給你》
你願意《請我喝咖啡》嗎?
你的一杯咖啡,是我最溫暖的支持❤
用實際行動支持我創作更多好作品吧