邊撸鐵健身邊學Code的Dhal

動呲動呲

0%

CSS語法使用

Posted on In ,

以下圖源均來自：Alpha Camp課程

觀念隨記

階層式樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）

用戶體驗 (UX) 研究表示，在桌機的閱讀體驗中，理想上每行的字元應該在 50 到 75 之間才能維持良好的易讀性。更有其他研究表示，其實這個範圍可以擴大到 85 個字元。

認識 display 屬性
所有的 HTML 元素都會有一個預設的 display 值，預設值通常是 block 或 inline 其中一個。

塊元素(block element)

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易，也是css layout的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1 - 大标题
  • h2 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
  • noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
  • ol - 排序表单
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

內聯元素(inline element)

  • a - 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体(不推荐)
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码(在引用源码的时候需要)
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定(不推荐)
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线(不推荐)
  • samp - 定义范例计算机代码
  • select - 项目选择
  • small - 小字体文本
  • span - 常用内联容器，定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量

Rest default CSS

每家瀏覽器都有預設不同的 CSS 樣式，造成前端工程師網頁開發上一個頭痛的問題：
開發時用 CSS 設計好整齊美麗的排版，在 Google Chrome 上看起沒問題，用 IE 打開卻全變了樣，且市面上還有 Firefox、Safari、Opera 等其他家瀏覽器，

所以實務開發中，CSS起手式通常會是 Reset CSS，先將各大瀏覽器的預設樣式還原，有個乾淨的開始，再來制訂專案的樣式。

可以直接使用開源的 CSS Reset 工具如：

  1. Reset CSS ，這是 CSS 大師 Eric Meyer 整理出的版本
  2. Normalize.css 這是 Bootstrap 目前已經內建使用的版本
  3. 或是自行制訂

網頁 ( 單位 ) px, em, rem, %

px：

絕對單位代表螢幕中每個「點」( pixel )。

em：

相對單位，每個子元素透過「倍數」乘以父元素的 px 值。

rem：

相對單位，每個元素透過「倍數」乘以根元素(瀏覽器預設)也就是html元素標籤的 px 值，通常瀏覽器預設為 16 px。
使用 rem 的好處是，專案一複雜，很容易忘記父元素是多少大小，用 rem 不用特別去記。或當父元素字體大小突然被改動時，用 rem 不會受到連帶影響。

%：

相對單位，每個子元素透過「百分比」乘以父元素的 px 值

RWD重點筆記

  1. 由小螢幕到大螢幕，mobile first。
  2. 使用media query以不同Breakpoint來設定不同階層的樣式
  3. Breakpoint會設在各種螢幕尺寸變化的中間，例如常見的有：320px、480px、720px、768px、960px、1024px。

每設一個 breakpoint 意味需要準備多一份 CSS 樣式，要抓得多細是看設計的需求。

除了幾個在設備間切換的主要分界點，也會設定次要分界點來調整比較細微的 CSS 變化，像是元素的邊距、避免文字超過頁面寬度，或是調整圖片尺寸。

media queries使用

1
2
3
@media screen and (max-width: 600px) {...//styles}
@media screen and (min-width: 600px) and (max-width: 900px) {...//styles}
@media screen and (min-width: 900px) {...//styles}

可以使用 and、or 或 not 等運算子。

@import 其他文件

如果樣式太多想要把文件拆開，可以使用 @import 來導入其他文件，仍然可以在同一份 CSS 裡統一管理網站樣式。

運用 url() 來載入文件，仍然可以串接 media type and feature：
@import url(‘styles.css’) screen and (max-width: 670px);

關於CSS整體優先級

瀏覽器開發商的優先級

style sheets 的來源可以分為三種：(由上而下)

  1. User agent origin：由「瀏覽器廠商」制定。
  • 所以後來產生了重置樣式的工具 Reset CSS、Normalize CSS 等，就是用來解決不同廠牌瀏覽器下造成的預設樣式偏差的問題，讓開發者得以在一致的基礎上，建構網頁 CSS 樣式設計。
  1. User origin：由「瀏覽器使用者」制定。
  • 可以覆蓋掉 user agent origin 的樣式。通常能在你的瀏覽器右上角找到設定的地方，以 Firefox 為例，使用者可「偏好設定 > 語言與外觀」中，自訂字型、字體大小等樣式
  1. Author origin：由「網頁開發者」制定。
  • 優先級最高，可以覆蓋掉上述兩個來源的定義。而載入 CSS 樣式到 HTML 的方法有很多種。

style sheets 優先級

  1. HTML文檔內直接設定元素標籤的
  2. HTML文檔內由上而下，越下面大於越上面
  3. 載入的CSS樣式表，越優先載入的大於後面載入的，例如
1
2
3
4
5
6
7
8
<link rel="stylesheet" href="style.css">
<style>
  div {
    background-color: orange; /* 第二優先 */
  }
</style>

<div style="background-color: red"></div> <!-- 最優先 -->
style.css
1
2
3
4
@import url(style-2.css)
  div {
    background-color: pink;  /*第三，優先於style-2*/
  }
style-2.css
1
2
3
4
@import url(style-2.css)
  div {
    background-color: red; /*最後*/
  }

CSS 選擇器的優先級

網頁開發者制定樣式是透過多種 CSS 選擇器，選取到特定的元素來指定樣式。
在談論 CSS 優先級問題時，我們會把選擇器分成以下三個等級：

等級一：以 ID 選擇器為代表，例如#article。
等級二：以 Class 選擇器為代表，另外包括屬性選擇器、偽類選擇器，例如 .container 、[type=”radio”]、:hover。
等級三：以 Element 選擇器為代表，另外包括偽元素選擇器，例如 div、::before。
優先級是，等級一 > 二 > 三，CSS選擇器有一個分數機制，可以看成一個數學比大小的問題。
一個類別都有一個分數
等級一:ID類別:0分(百位) - 等級二:class類別:0分(十位) - 等級三:Element類別: 0分(個位)

每當選擇器列出多一個class名稱時，例如 .container
這時候class就會+1分
等級一:ID類別:0分(百位) - 等級二:class類別:1分(十位) - 等級三:Element類別: 0分(個位)
總分10分

再來選擇器多一個element元素名稱時，例如 div
這時候Element就會+1分
等級一:ID類別:0分(百位) - 等級二:class類別:1分(十位) - 等級三:Element類別: 1分(個位)
總分11分

這時候這兩個選擇器有不一樣樣式內容，這時候div.container會優先於.container

1
2
3
div.container {...}
.container {...}

CSS優先級總結

總而言之，言而總之

圖源：Alpha Camp課程

CSS撰寫注意三件事

避免掉入 CSS 樣式優先集泥潭中的原則就是千萬不要因為「某個選擇器看起來很厲害」、「某個選擇器可以一擊必殺」隨意使用，請把以下三點放在心上：

  1. 不使用 !important：除非你有很好的理由，否則千萬別輕易放大絕招，導致日後難維護。
  2. 遵守內容和樣式分離：盡量不要在 HTML 中另外撰寫 style 區塊及使用 inline style ，除非你有個很好的理由，例如用 JavaScript 動態控制樣式變化的時候。
  3. 讓選擇器的優先級放低：撰寫樣式時，盡量選用 Class 或 Element 的級別的選擇器，非必要不用 id 或複雜的選擇器組合，保留多一點彈性的空間給後續的樣式來覆蓋。

複習選擇器的好幫手：

Envato Tuts+ - 30個你必須記住的CSS選擇器
CSS Diner (一款小遊戲，你需要輸入正確的選擇器來選到指定器皿或食物)

語法使用隨記

行高 line-height

用line-height設定文字的垂直置中

只要將元素的line-height設定跟容器的高度一樣即可。

1
2
3
4
5
6
7
8
/* Reverts to the default value of the browser. */
line-height: normal;
/* 可以使用無單位: 航高會是以倍數乘字體大小 */
line-height: 1.6;
/* 可以使用px單位 */
line-height: 30px;
/* 可以使用em單位 */
line-height: 0.8em;

固定元素位置於網頁最上層，position: fixed

1
2
3
4
5
header {
  /*固定置頂*/
  position: fixed;
  z-index: 999;
}

可以透過position的fixed來控制元素固定於原本位置，接著使用z-index以數字大小來控制此元素的圖層優先順序。0最後面，數字越大越上面。

絕對定位 position:absolute

絕對定位 position: absolute 指的是子元素根據父元素做定位。
接著可以使用Top來設定元素位於父元素的垂直位置，

1
2
3
4
5
.navbar {
  position: absolute;
  top: 0 ; /*會貼齊父元素的最上緣*/
  top: 100%; /*會貼齊父元素的最下緣*/
}

absolute是相對於自己最近的父元素來定位的，
如果不給.father相對定位，那麼.father:before 和 .father::after的絕對定位absolute就是相對於body來定位的。
relative是相對於自己來定位的，例如：.father{position:relative;top:-50px;},這時.hamburger會以他原本的位置上移50px。

Grid system

進階：grid-template-columns 和 grid-template-rows 的值

grid-template-columns 和 grid-template-rows 的值除了使用基本的網頁單位 px, em, rem, %, 來設定之外，
還可以使用以下幾種較為彈性的設定單位

對齊系統

和 flexbox 佈局系統一樣，grid 系統有 align-items, justify-items, align-content, justify-content 屬性可以對子元素操作。

fr：

fraction 這個單位和分幾份有關。1fr 意味著能分到容器剩餘空間的一個等分、2fr 的分到兩等份，以此類推，因此 fr 相較於 px 是一個比較具有彈性的單位。

minmax()：

minmax(min, max) 能夠給定尺寸最小和最大值，讓尺寸的決定變得相對彈性。

repeat()：

透過 repeat() 的使用可以大量快速的設定重複區塊：

auto()

auto 有兩種行為，會受到左右的單位影響。

  1. auto 元素的尺寸簡單來說是：內容多大就有多大，但留意它會依照同一列 / 同一行最大尺寸的格子進行調整，例如未來如果有第二行、第二列，而它的寬度是 100px，那目前這個很窄的2號格子也會被撐寬為 100px。
  2. 搭配其他固定尺寸的單位使用，2號格子的尺寸會自動延伸，填滿容器內的剩餘空間。

grid-auto-flow 與 grid-auto-rows

grid-auto-flow 是控制當沒有宣告子元素要被擺在網格的特定位置時，子元素將根據特定的流向被自動擺放到網格當中。
grid-auto-flow 的預設值為 row ，意思是子元素將逐列被擺放到網格中。
假設第一行有兩列，放滿後會被推向下一行，若是有設定grid-auto-rows高，那麼會自動生成下一行高，並把元素推下一行的第一列。

1
2
3
4
5
.container{
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 100px;
}

換個方向可以手動更改grid-auto-flow 為 column，子元素將逐行被放到網格中。
假設第一行只有一列，第二行也只有一列，
子元素會由上而下，放滿後會被推向下一列第一行，若是有設定grid-auto-columns寬，那麼自動生成的下一列寬，並把元素推下一列的第一行。

1
2
3
4
5
.container{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100px;
}

偽類 pseudo

pseudo-elements使用方法及簡易範例

偽元素寫法是在選擇器後面加上兩個冒號和一個關鍵字
關鍵字，如：

p::first-line - 選取第一行。
p::first-letter - 選取第一個字。
p::before - 在選取的元素前面插入東西。
p::after - 在選取的元素後面插入東西。
p::selection - 選取反白後的文字。

例如 p::first-line 選擇器是 p 標籤，關鍵字是 first-line，通過p::first-line就可以選到段落中的第一行文字來控制它的樣式。

::before 和 ::after

這兩個是最常用的，兩者預設值都是 display:inline-block，然後會繼承原本元素屬性，通常會搭配 content 屬性來添加內容。
範例

1
<p>大家好，我是AC Genie</p>
1
2
3
4
5
6
7
8
p::before {
content: "♥";
color: red;
}
p::after {
content: "^_^";
color: blue;
}

pseudo-class使用介紹及簡易範例

一開始學最常用的就是 :hover，是用來控制滑鼠滑過時元素的樣式，但 hover 前面只有一個冒號，和兩個冒號::的偽元素不同，
偽類 (pseudo-class) 這種類別與元素的某個「狀態」有關，例如：

:visited - 點擊過的超連結。
:checked - 被勾選的元素。
:hover - 滑鼠滑過的地方。
:focus - 滑鼠所在的表單輸入框。
:first-child - 第一個子元素。
:last-child - 最後一個子元素。
:nth-child() - 特定子元素。
單個冒號 (:) 是這種類別的特殊標記。

範例

1
2
3
4
5
6
<div class="example">
    <p>一</p>
    <p>二</p>
    <p>三</p>
    <p>四</p>
</div>

使用偽類 :nth-child()，搭配關鍵字 odd 指定單數的子元素給橘紅色背景、 even 指定雙數的子元素給綠色背景，p:nth-child(odd) 也可以寫作 p:nth-child(2n+1)，p:nth-child(even) 也可以寫作 p:nth-child(2n) 。

1
2
3
4
5
6
.example p:nth-child(odd) {
    background-color: OrangeRed;
}
.example p:nth-child(even) {
    background-color: LightSeaGreen;
}

使用:not(:last-child)可以取消選擇最後一個元素
範例

1
2
3
.example p:not(:last-child) {
    background-color: OrangeRed;
}

意思則是 所有的p元素橘紅色背景，除了最後一個p元素

transition

transition 屬性是一個縮寫，冒號後面可以放四個屬性值：
transition: property duration timing-function delay;

依序代表：
transition-property：載明哪個屬性要使用這個效果，例如我們的目標是和顯示有關的 display 屬性。
transition-duration：這個效果持續發生的時間，單位是秒，如果是 0 點幾，0 可以不寫。例如我們希望持續 0.2 秒的話可寫 .2s 。
transition-timing-function：效果的變化速度，可以寫屬性名稱，例如 ease-in 是緩慢的開始，也可以自由定義 cubic-bezier 函數，easing.net 提供一張好用的速查表，可前往試用後複製想要的函數。
transition-delay：先延遲多久之後再開始這個效果，單位和寫法同transition-duration。

使用方法可參考：
W3C
作業-毛小孩星球

transform

transform 的 MDN 文件，裡面有屬性變化效果的範例。
transform 這個屬性可以平移、旋轉、縮放和傾斜元素。
使用方法可參考：
MDN
作業-毛小孩星球

transform-origin

使用transform-origin來設定變化的原點
使用方法可參考：
MDN
作業-毛小孩星球

隱藏元素方法 visibility: hidden 及 display: none

display: none 與 visibility: hidden 都是隱藏元素的方法，差別在於 display: none 會一口氣使操作對象從文字流中拔除，而 visibility: hidden 則像是用一塊白布蓋起來的感覺，畫面上不顯示，但還是會佔一個空間：

將 visibility: hidden 搭配上 position: absolute; ，故元素會從文字流中移除，完全和 display: none 是一樣的效果。
在我們的情境中這兩種做法都可以，一併介紹給大家知道。
未來你可以根據需求判斷要用哪一個方法比較合適。

Welcome to my other publishing channels