iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
自我挑戰組

WordPress 客製化從 0 開始系列 第 8

Day 8 從 WordPress 看 CSS 樣式:版面配置 (flex)

大家好,我是 Eric。
一般在學習 CSS 的時候,都會從較簡單的樣式開始,例如字型顏色 (color)、字型系列 (font-family) 等。但今天,我們先從範圍較廣泛的版面配置 (layout) 說起。

在開始之前:CSS 權重的基本原則

在開始進入 CSS 的樣式篇章前,我們必須注意幾個基本原則:

原則一:寫在越後面的權重越大

我們來看看下列語法:

    p {
        color: #000;
    }
    p {
        color: #1adbca;
    }

在上述的語法中,由於第二個 <p> 元素的選擇器較晚出現,因此瀏覽器最終會採用它的樣式。

我們再看看 Twenty Twenty 示範頁面的 HTML 語法:

<link rel="stylesheet" id="wp-block-library-css" href="https://wp-themes.com/wp/wp-includes/css/dist/block-library/style.min.css?ver=5.6-alpha-48971" media="all">
<link rel="stylesheet" id="twentytwenty-style-css" href="https://wp-themes.com/wp-content/themes/twentytwenty/style.css?ver=1.5" media="all">
<style id="twentytwenty-style-inline-css">
/** 此處省略 */
</style>
<link rel="stylesheet" id="twentytwenty-print-style-css" href="https://wp-themes.com/wp-content/themes/twentytwenty/print.css?ver=1.5" media="print">

按照這項原則,在使用相同選擇器時,Twenty Twenty 的樣式 (twentytwenty/style.css) 會覆蓋區塊編輯器 (block-library/style.min.css) 的樣式;而 [自訂 CSS] 的 <style id="twentytwenty-style-inline-css"> 內嵌樣式又會覆蓋 Twenty Twenty 的樣式。

也因為這項原則,因此內嵌樣式的權重會是最高的權重。這項特性在 WordPress 中非常重要,因為許多外掛都會直接幫元素加上內嵌樣式,因此即使透過 [自訂 CSS],有時候也無法覆蓋這些樣式。

原則二:ID > 類型 (class) > 元素/虛擬元素

以下列的 HTML 語法為例:

<article class="post-19 post type-post status-publish format-standard hentry category-uncategorized tag-boat tag-lake" id="post-19">

接著我們用下列三種 CSS 選擇器來設定樣式:

#post-19 {
    background-color: #ff0000;
}
.type-post {
    background-color: #333;
}
article {
    background-color: #000;
}

儘管 article 在最後才出現,但因為原則二的關係,這個區塊的最終樣式會是 background-color: #ff0000;

原則三:選擇器越精準,權重越高

我們一樣用上述的例子來看,用下列三種方式來進行選擇:

/* 1 */
article.type-post {
    background-color: #ff0000;
}
/* 2 */
article.post.type-post {
    background-color: #ff2200;
}
/* 3 */
article#post-19.post {
    background-color: #ff4422;
}

按照原則三,上述的樣式順位會是 3 > 2 > 1。

關於選擇器的權重,可以透過這個 Specificity Calculator 網站來做檢驗。

例外:!important

我們在原則一中,曾經提到,許多 WordPress 的外掛,會將樣式內嵌於元素中,以致 [自訂 CSS] 無法覆寫樣式。為了解決這個問題,我們需要了解一下 !important。首先,我們將前面的例子稍作改寫:

/* 1 */
article.type-post {
    background-color: #ff0000 !important;
}
/* 2 */
article.post.type-post {
    background-color: #ff2200;
}
/* 3 */
article#post-19.post {
    background-color: #ff4422;
}

因為我們在屬性值的後面加上 !important 後,這項屬性可以無視前面的權重。但須注意的是,這只是例外的使用方法,應該要盡量避免。

掌管版面配置的屬性 display

使用 display 的基本語法如下:

選擇器 {
    display: none|inline|inline-block|block|flex|grid;
}

W3schools 中,有詳細列舉 display 中可以包含的屬性值,對各種屬性的特性想要進一步了解的話可以參考。

這個屬性,掌管著元素的版面樣式配置。在進入今天的主題 flex 之前,我們先介紹幾個重要的屬性:
屬性值 | 說明
-------+-------
none | 不顯示,在頁面不會佔據任何空間。
inline | 內嵌,在其後的相鄰元素不會換行。<span><a> 通常預設會使用這種顯示方式。displayinline 時,無法指定元素的寬度與高度。
block | 區塊元素,可以指定寬度與高度。會使相鄰的元素換行。
inline-block | 內嵌區塊,擁有內嵌版面「相鄰元素不會換行」的特性,同時也能指定寬度與高度。

在 style.css 中,我們可以看到 display 這個樣式屬性大量出現。以設定基礎樣式的第 288 行為例:

/* style.css Line 288 */
main {
	display: block;
}

/* style.css Line 601 */
figure {
	display: block;
	margin: 0;
}

iframe {
	display: block;
	max-width: 100%;
}

video {
	display: block;
}

通常為了方便設定元素的寬度,基本上除了 <label><span> 這種會在句中出現的元素外,通常會將所有的元素指定為 blockinline-block 的方式。

了解了基本的 display 屬性後,我們接著開始談談 flex

display: flex;

在當代網頁開發中,我們時常需要將元素對齊,譬如許多人時常會問道:「我要如何置中這個元素?」而 flex 就是用來排列子層級元素樣式。

flex 這個屬性出現之前,較早的作法會使用 float 這個屬性。float 這個屬性相當於我們在 Word 中看到的「文繞圖」效果。也因為這個屬性主要作用,是在讓指定的元素溢出於其他元素之外,因此時常會產生未預期的錯誤。

而在 flex 出現後,我們有更好的方法來排列子層級元素。flex 所掌管的,是直線的排列方式,讓子元素可以更整齊地排列。以我們公司的官網為例,就是使用 flex 來排列頁首的選單列,藉此讓選單項目的排列順序更符合我的期待。

基本的樣式屬性如下:

選擇器 {
    display: flex;
    樣式屬性: 屬性值;
}

樣式屬性 | 屬性值 | 說明
-------+-------+-------
flex-wrap | wrap | 當子層級元素的全部寬度大於螢幕時,是否要換行。wrap 表示會換行。
flex-direction | row/column/row-reverse/column-reverse | 排列的方向是橫向 (row) 或縱向 (column)。如果有 reverse 則會將子層級元素的排序顛倒。
justify-content | flex-start/flex-end/center/space-between/space-around | 水平對齊,更精確的說是平行對齊。因為當 flex-direction 為 column 時,便變成縱向對齊。
align-items | flex-start/flex-end/center/space-between/space-around | 垂直對齊,與水平對齊一樣,如果是 column 的話,便變成橫向對齊。

網路上有個名為 Flexbox Froggy 的遊戲,如果想要熟悉 flex 語法的話,非常建議可以從這個互動遊戲中練習。

我們來看看 flex 在 Twenty Twenty 中扮演什麼角色:

/* style.css Line 642 */
.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: 3em 0 3em -0.8em;
	width: calc(100% + 1.6em);
}

在 Twenty Twenty 中,gallery 用於圖庫區塊。藉由 display: flex;flex-wrap: wrap;,讓圖庫的個別子層級元素可以按照預期的方式呈現。

結語

今天我們討論了 CSS 中一項相當核心的屬性值 display。透過 display 這個屬性,我們可以告訴瀏覽器,目前的元素應該以什麼樣的「身份」存在於網頁中:「隱形 (none)?內嵌於元素間 (inline)?區塊 (block)?」
在回應式設計 (Responsive Web Design) 中,如何在不同的畫面寬度中,使版面配置調整成符合設計稿的樣貌,一直是前端工程的重要課題。透過 flex 的方式,我們可以將不同的元素井然有序的排列在一直線上。不過隨著瀏覽器逐漸演進,人們開始從「直線」的排列轉為思考「平面」的排列。
下一章,我們就要來討論掌控「平面」排列的 grid 配置。


上一篇
Day 7 用 WordPress 佈景主題學 CSS 選擇器:進階篇
下一篇
Day 9 用 WordPress 看 CSS 樣式:版面配置 (grid 與 @media)
系列文
WordPress 客製化從 0 開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言