[Back To Basic] CSS rounded corner

rounded corner(圓角)

CSS可以設定元素的圓角半徑

語法

border-radius: 左上 右上 右下 左下

border-radius: 左上 右上+左下 右下

border-radius: 左上+右下  右上+左下

border-radius: 左上+右下+右上+左下

*.可以做八圓角

*.可以用來做橢圓形

source code

[Back To Basic] CSS Specificity

如果有多個 CSS 規則套用在同一個元素上時，確定最後要套用哪一個的規則就是 Specificity

每個選擇器都有特定的層級，優先順序為:

Inline styles > ID > class、attributes、pseudo-class > element、pseudo-element

*. 如果優先順序相同，就看哪個規則在 style sheet 比較下面

[Back To Basic] CSS Units

數值&單位

• 數值和單位之間不能有空白

e.g. 18px

• 數值為0的話，單位可以省略
• 有一些 CSS 屬性，數值可以為負值

長度單位有二種類型

• 絕對長度

適合用於已經知道要輸出的媒介，例: 印表機的輸出版面配置

絕對長度單位:

• cm: 公分
• mm: 毫米
• in: 英吋
• px: 像素
• pt: 點
• pc: 派卡

• 相對長度

在不同裝置中，有更好的延展性

相對長度單位:

• em: 相對於字體大小
• ex: 相對於字體高度
• ch: 相對於"0"的寬度
• rem: 相對於根元素的字體大小
• vw: 相對於viewport寬度的1%
• vh: 相對於viewport高度的1%
• vmin: 相對於viewport較小的維度
• vmax: 相對於viewport較大的維度
• %: 相對於父元素

*.Viewport 就是瀏覽器window的大小

[Back To Basic] CSS Layout

網站切版

頁面通常切分為 4 個區塊

• Header
• 包含 Logo 及網站名稱

• Menu
• Content
• Footer

Note

• 若有IE10以前的需求: 用float排版
• 若無: 使用 flex 較方便

source code

[Back To Basic] CSS Counters

css 的 counter 類似 javascript 的變數(variables)

使用以下這些屬性，來控制計算

• counter-reset
• 建立和重置一個計數器
• counter-increment
• 遞增1
• content
• 插入產生的內容
• counter() / counters()
• 增加計數器的值給元素

source code

[Back To Basic] CSS Attribute Selectors

css 可以在特定的屬性(attributes)發生時，賦予樣式

• 屬性
• [attribute]
• 屬性值
• [attribute="value"]
• 屬性值包含指定文字
• [attribute~="value"]
• 屬性值以指定文字開頭(後面必須緊接著 - 符號)
• [attribute|="value"]
• 屬性值以指定文字開頭(後面不須緊接著 - 符號)
• [attribute^="value"]
• 屬性值以指定文字結尾
• [attribute$="value"]
• 屬性值包含指定字段(不需是完整單字)
• [attribute*="value"]

source code

[Back To Basic] CSS Image Sprites

Image Sprites

• 數張圖片組成一張圖片即為 Image Sprites
• Client端中，一張圖片會發出一個 request，使用這種方式可以減少 Request 及節省頻寬
• 顯示時顯示出組合圖的局部，就可以只顯示想要的圖片

source code

[Back To Basic] CSS Image Gallery

畫廊

source code

[Back To Basic] CSS Dropdown

• 基本 Dropdown
• 下拉式選單

source code

[Back To Basic] CSS Navigation Bar

Navigation Bar

• 就是多個連結的清單

範例樣式列表

• 純HTML樣式
• Reset樣式
• Item改區塊
• 垂直導覽列
• 有邊框區塊導覽列
• 固定式導覽列(側邊)

• 水平導覽列
• inline版本

li {

  display: inline;

}

• floating版本

li {

  float: left;

}

• 固定式導覽列(最上方)

ul {

  position: fixed;

  top: 0;

}

• 固定式導覽列(最下方)

ul {

  position: fixed;

  bottom: 0;

}

• 導覽列(sticky)

ul {

  position: sticky;

  top: 0;

}

source code

[Back To Basic] CSS Opacity

opacity

• 指定元素的不透明度
• 範圍: 0.0 - 1.0
• 越低越透明
• IE8以前: 使用這個語法
• filter:alpha(opacity=x)
• x範圍: 0 - 100
• 越低越透明

區域內的文字會不會跟著透明

會: 使用opacity

不會: 使用 background-color: rgba(x, x, x, opacity);

source code

[Back To Basic] CSS Pseudo-elements

pseudo-elements 可針對元素的特定部分，添加樣式

• e.g. 針對元素的第一個字或第一行，添加樣式
• e.g. 新增內容在元素的前後

語法

• W3C 在 CSS 三為了區別 pseudo-elements 和 pseudo-class，用冒號數量分辨
• 在 CSS2 、CSS1並無此區別
• 因向下相容，一個冒號的語法仍可接受在CSS1、CSS2 的 pseudo-elements

• ::pseudo-element
• 2個冒號

• :pseudo-class
• 1個冒號

pseudo-elements 舉例

• ::first-line
• 在第一行加入樣式
• 只能用在"block"層級的元素

• ::first-line
• 在第一個字母加入樣式
• 只能用在"block"層級的元素

• ::before
• 插入特定內容在元素之前

• ::after
• 插入特定內容在元素之後

• ::selection
• 被選擇的部分元素

source code

[Back To Basic] CSS Pseudo-classes

pseudo-class 被用來定義元素的"特殊狀態"

pseudo-class 舉例

• :hover
• 滑鼠移過時

• :first-child
• 第一個元素

• :lang
• 不同語言的特殊規則

source code

[Back To Basic] CSS Combinators

Combinators

• Combinators 的功能是解釋 Selectors 之間關係

CSS selector

• CSS selector 可以包含一個到多個 Selectors
• 在 selector 之間，就用 Combinators 連結

四種 Combinators

• descendant selector; 符號: 空白
• child selector; 符號: >
• adjacent sibling selector; 符號: +
• general sibling selector; 符號: ~

Descendant Selector

• 指定的元素，它的所有子元素皆套用
• e.g.

div p {

  background-color: red;

}

• 所有 div 內的 p 全部套用(不管幾層)

Child Selector

• 指定的元素，它的第一層子元素皆套用
• e.g.

div>p {

  color: blue;

}

• 所有 div 內的 p 套用(只有第一層)

Adjacent Sibling Selector

• 指定的元素，和它同一層，且在它之後的第一個指定元素套用
• e.g.

div+p{

  background-color: yellow;

}

• 所有 div 後面第一個 p 套用(後面第二、三...都不套用)

General Sibling Selector

• 指定的元素，和它同一層，且在他之後的所有指定元素套用
• e.g.

div~p{

  background-color: brown;

}

• 所有 div 後面的 p 套用

source code

[Back To Basic] CSS align

置中元素

• 語法: margin: auto;
• 設定寬度，可以避免元素延伸到容器的邊界
• 如果沒設定寬度或設定為100%，都不會有置中效果

置中文字

• 語法: text-align: center;

置中圖片

• 語法: display: block; margin: auto;

置左&置右(絕對位置)

• 語法:

position: absolute;

right: 0; /* 靠右對齊 */

• 設定絕對位置，跳脫出正常排版，可以和其他元素交疊(overlap)

置左&置右(float)

• 語法: float: right;
• 如果元素本身高度超出元素的容器，會有溢出的情況，可用clearfix處理

垂直置中(padding)

• 語法: padding: 8px; /* 任意設定 */

垂直置中(line-height)

• 語法:

/* 兩個設定一樣 */

height: 100px;

line-height: 100px;

垂直置中(position & transform)

• 語法:
• 容器

height: 200px; /* 任意指定 */

position: relative;

• 容器內元素

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

source code

[Back To Basic] CSS inline-block

display: inline-block

inline-block 和 inline 差別: 

• inline-block 可以設定寬度和高度
• inline-block 上下的 margin 和 padding 是被重視的

inline-block 和 block 差別:

• inline-block 不會換行

source code

[Back To Basic] CSS float and clear

float

用於定位、格式化內容

• left: 在同一個容器中，漂浮在容器左側
• right: 在同一個容器中，漂浮在容器右側
• none(預設值): 不浮動(顯示在原本出現的位置)

clear

• none: 允許浮動在左右兩側
• left: 不允許浮動在左側
• right: 不允許浮動在右側
• right: 不允許浮動在左右側

clearfix 密技

若浮動的元素超出容器，浮動的元素會溢出容器。

解法: 給定容器: overflow: auto

.clearfix {

    overflow: auto;

}

更安全的作法:

.clearfix::after {

  content: "";

  clear: both;

  display: table;

}

source code