【Day03】CSS選擇器與優先權、Box model以及block、inline element


階層樣式表 (Cascading Stylesheets;CSS) 既非如Java、C等標準程式語言,也不是如HTML般的標記語言, 而是一種風格頁面語言(style sheet language),透過CSS,能讓你在 HTML 文件中的元素(element)上套用不同的頁面樣式(style)。
例如,我們可以來複習一下前一天的內容,如果將CSS套上了div,就會產生以下效果。
https://jsfiddle.net/GRANTLI/couyk2r5/2/

CSS能夠辦到的事情很多,舉凡字體顏色、大小、滑鼠(移動或點選時)都可以觸發相關的樣式,
在學習 CSS 的時候, class、id,inline style寫法。除了了解基本的 css,再來最重要的就是css 權重了。
所謂的權重就是指 css 的優先權,例如:
inline style > ID > Class > Element
越左邊權限越高,也就是說元素內的樣式(inline style)>頁面內的樣式>外部載入
相同權重但是後寫的 css 可以覆蓋先寫的 css,當兩個選擇器同時作用在一個元素,權重高的優先生效。

所以你有時候會發現,ㄟ為甚麼我明明設定了CSS樣式,但我的頁面卻沒有作用呢?
答案就是權重的問題了。

權重的計算可以參考這篇: https://www.webdesigns.com.tw/CSS-selector.asp

再來要介紹的就是在CSS排版裡,最為重要的Box model了。
CSS box model 盒子模型也稱為區塊模型,CSS 允許網頁設計師將 DIV 區塊看成一個盒子,透過控制內距的 padding、控制外距的 margin 以及控制元素邊框的 border 屬性來調整"盒子"的展現結果。

下圖可以看出幾種在模型中的屬性:

  1. padding:用來設計元素內容與元素本身邊框間的距離,詳細請參閱:CSS padding 內距屬性與用法範例。
  2. margin:用來設計元素與外部元素的距離,詳細請參閱:CSS margin 屬性與用法範例。
  3. border:用來設計元素邊框的顏色、粗細與樣式,詳細請參閱:CSS border 邊框。

另外,在網頁排版裡,可以粗略的分成兩大系統。

  • 區塊(Block)元素:
    在新行上開始,高度、行高和邊距都可控制,寬度是它的容器的100%,除非設定一個寬度給它,例如前一篇文章的"div"。
  • 行列(Inline)元素:
    和其他元素都在同一行上,高、行高和邊距不可改變,寬度就是它的文字或圖片的寬度(元素內容),不可改變,如前一篇的"span"。

假如沒有css的作用,Block element會依照順序一行一行往下排。而有了css以后,我們可以改變這種html的默認布局模式,把塊元素擺放到你想要的位置上去。

以上就是CSS的一些簡單介紹。

下一篇就會開始進行實戰,一起來切割頁面,設計版型以及透過Vue框架建立專案。

本系列文章將同步發布於我的個人網站

#Web #切版






Related Posts

JavaScript:需要知道的部分

JavaScript:需要知道的部分

憤怒鳥抓豬遊戲解答

憤怒鳥抓豬遊戲解答

React Form: Redux Form vs React Final Form vs Formik and Yup

React Form: Redux Form vs React Final Form vs Formik and Yup

[Day 04] - Vault dynamic secrets engine - AWS

[Day 04] - Vault dynamic secrets engine - AWS

用 CSS Grid 創造蒙德里安藝術

用 CSS Grid 創造蒙德里安藝術

[Week2] 給自己看的 JavaScript 筆記

[Week2] 給自己看的 JavaScript 筆記



Comments