[ CSS ] CSS3 print 列印

media 是指定 CSS 套用裝置
預設(不指定時)是螢幕
例如
<link rel="stylesheet" type"text/css" href="print.css" media="print">
這代表這一份 CSS 只有在列印時才會生效
你也可這麼寫
<style type="text/css">
@media print {
.....
.....
.....
}

CSS3列印解決許多問題，如@media print可對列印頁面做不同的CSS顯示樣子，設定邊框與頁輸出列印的紙張大小調用，都可以很客製化的去製作所需要的呈現的列印頁面，並且想讓某段落分到下一個頁面，也可用pag-break-after:always;，強制分頁。

CSS
@page {
    margin:1cm;    /*print邊界*/
    size:210mm148mm;     /*列印紙張大小*/
}
.print {
    page-break-after:always;    /*print分頁面*/
}
@media print{
    .imgs{
        width:100px;
    }
}

HTML
<div class="print">
    要印的內容
</div>

網頁的字型設定

正體中文與簡體中文之網頁泛用字型設定
用微軟正黑體在簡體網站字體會出現大小不一的狀況，要用黑体
font-family: "simhei" //黑体
font-family: "黑体" //黑体
font-family: "Microsoft JhengHei UI" //微軟正黑體
font-family: "微軟正黑體" //微軟正黑體

[ CSS3 ] nth-of-type() VS nth-child()

定義和用法
:nth-of-type( n )選擇器匹配屬於父元素的特定類型的第N個子元素的每個元素.
:nth-child( n )選擇器匹配屬於其父元素的第N個子元素，不論元素的類型。
n可以是數字、關鍵詞或公式。

規定屬於其父元素的第二個p 元素的每個p：
p:nth-of-type(2)
{ background:#ff0000; }
親自試試

規定屬於其父元素的第二個子元素的每個p 的背景色：
p:nth-child(2)
{ background:#ff0000; }
親自試試

odd 和even 是可用於匹配下標是奇數或偶數的子元素的關鍵詞（第一個子元素的下標是1）。
使用公式( an + b )。描述：表示週期的長度，n是計數器（從0開始），b是偏移值。

CSS animations

CSS animations 使 CSS style configuration 的轉變變得可行。在這種動畫的運作上，你只需要定義兩個部份：1. 動畫的最初及結尾 2. 動畫轉變的方式。

animation property 的 sub-properties：

animation-delay
定義元素讀取完畢到動畫開始的間隔時間。

animation-direction
定義是否動畫播放完畢後將會反向播放。

animation-duration
定義動畫完成一次週期的時間。

animation-iteration-count
定義動畫重複的次數。你可以用 infinite 來讓動畫永遠重複播放。

animation-name
定義關鍵影格 @keyframes 的名字。

animation-play-state
控制動畫的播放狀態。有 pause 和 running 兩種值，後者為預設值。

animation-timing-function
定義動畫轉變時時間的加速曲線 (例如 linear)。

animation-fill-mode
定義元素在動畫播放外(動畫開始前及結束後)的狀態。


出處：CSS 動畫
延伸閱讀：CSS3中的動畫效果記錄
實作：http://codepen.io/Cmi/pen/KWvErL

[ CSS3 ] transition

使用「transition」屬性可使元素產生漸變動態效果
transition屬性可細分為：
transition-property – 要產生漸變的CSS屬性，all為所有屬性
transition-duration – 漸變效果的持續時間
transition-timing-function – 漸變效果的變化函數
transition-delay – 漸變效果延遲開始的時間
若要讓不同的屬性有不同的漸變效果，可使用逗號分隔
無法使用漸變效果的屬性 例如：display、z-index

寫在一起的寫法：
transition: property duration timing-function delay ;


.example {
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s;
}
符合各瀏覽器的前綴詞
練習
http://www.css3.info/preview/css3-transitions/

[ CSS ] Animation 動畫屬性

animation
用於設置以下六個動畫屬性：

• animation-name 動畫名稱
• animation-duration 動畫時間
• animation-timing-function 動畫速度曲線
• animation-delay 動畫延遲
• animation-iteration-count 動畫計數
• animation-direction 動畫方向
• animation-fill-mode 動畫填充模式：指定值於動畫中或動畫後得到應用。
• animation-play-state 指定動畫是否正在運行或暫停。

其上屬性皆須以瀏覽器名稱前綴
.selector {
-webkit-animation: my_ani 2s infinite ease-in-out;
-moz-animation: my_ani 2s infinite ease-in-out;
-o-animation: my_ani 2s infinite ease-in-out;
-ms-animation: my_ani 2s infinite ease-in-out;
animation: my_ani 2s infinite ease-in-out;
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
-o-animation-delay: -0.5s;
-ms-animation-delay: -0.5s;
animation-delay: -0.5s;
}

/*
animation:[動畫名稱｜動畫時間｜動畫計數｜動畫速度曲線]；
animation:[animation-name | animation-duration | animation-iteration-count | animation-timing-function];
animation-delay 用來指定動畫開始前延遲秒數。
*/

參考資料：
http://www.w3schools.com/css/css3_animations.asp

[CSS] Animate.CSS

http://daneden.github.io/animate.css/
它是一款集合了56種CSS3動態效果的CSS檔，由Daniel Eden.所開發。有了這個大集合動畫特輯CSS3檔案 , 可以讓設計師在作網頁設計時，只需透過JQuery 輸入指定動畫名稱，設計師不用寫半條CSS語法, 就能寫出跨瀏覽器的動畫

Animate.CSS APi
w3schools CSS3 動畫
Animate.CSS 使用教學

div {
width: 100px; height: 100px;
background-color: red;
animation-name: 動畫名稱;
animation-duration: 4s; //動畫時間
animation-iteration-count: 3; //動畫次數
}
//前綴詞
@-webkit-keyframes 動畫名稱 { } //Chrome, Safari, Opera
@-moz-keyframes 動畫名稱 { } //Firefox
@-o-keyframes 動畫名稱 { }

CSS Selectors

A
::after / ::before
:active
Adjacent sibling
[attribute]
B
:blank
C
:checked
Child
Class
D
:default
:disabled
Descendant
E
:empty
:enabled
F
::first-letter
::first-line
:first-child
:first-of-type
:focus
G
General sibling
H
:hover
I
:in-range
:invalid
ID
L
:lang()
:last-child
:last-of-type
:link
M
::marker
:matches()
N<
:not(s)
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
O
:only-child
:only-of-type
:optional
:out-of-range
P
::placeholder
:placeholder-shown
R
:read-write / :read-only
:required
:root
S
::selection
T
:target
Type
U
Universal
V
:valid
:visited

參考資料：https://css-tricks.com/almanac/

[ CSS ]CSS選擇器列表

選擇器	範例	說明
.class	.header	選擇class="header"的所有元素
#id	#name	選擇id="name"的所有元素
*	*	選擇所有元素(通常用於reset樣式)
element	p	選擇所有<p>元素
element,element	h1,h2	選擇所有<h1>和<h2>元素
element element	div a	選擇所有在<div>內的所有<a>元素(可以為子元素、孫元素、曾孫元素…)
element>element	div>p	選擇所有父元素為<div>的<p>元素
element+element	h1+p	選擇所有緊接在<h1>元素後的第一個<p>元素
element~element	p~ul	選擇在<p>元素之後的每一個<ul>元素
[attr]	[data-tooltip]	選擇所有附帶有data-tooltip屬性的元素
[attr=value]	[target=_blank][target="_blank"]	選擇附帶有target屬性且值為_blank的所有元素
[attr~=value][attr*=value]	[title~=subject][title*="subject]	選擇附帶有title屬性且值包含單詞subject的所有元素
[attr|=value][attr]^=value]	[href|=http][href^="http"]	選擇附帶有href屬性且值是以http為開頭的所有元素
[attr$=value]	[src$="jpg"]	選擇附帶有src屬性且值是以為結尾的所有元素
:link	a:link	選擇所有未被訪問過的連結
:visited	a:visited	選擇所有已被訪問過的連結
:active	a:active	選擇正在作用中的連結
:hover	a:hover	選擇滑鼠指標停留其上的連結
:focus	input:focus	選擇獲得焦點的<input>元素
:first-letter	span:first-letter	選擇所有<span>元素中的第一個字元
:first-line	span:first-line	選擇所有<span>元素中的第一行文字
:first-child	ul li:first-child	選擇所有父元素為<ul>的第一個<li>元素
:before	p:before	在所有<p>元素前插入內容
:after	p:after	在所有<p>元素後插入內容
:lang(language)	p:lang(en)	選擇所有帶有lang屬性且值是以en為開頭的所有<p>元素
:first-of-type	a:first-of-type	選擇所有在同層內的第一個<a>元素
:last-of-type	a:last-of-type	選擇所有在同層內的最後一個<a>元素
:only-of-type	a:only-of-type	選擇所有在同層內只有唯一一個的<a>元素
:only-child	span:only-child	選擇所有在同層內只有唯一一個元素且其為<span>標籤的元素
:nth-child(n)	li:nth-child(2)	選擇所有在同層內的第二個<li>元素
:nth-last-child(n)	li:nth-last-child(2)	選擇所有在同層內的倒數第二個<li>元素
:last-child	li:last-child	選擇所有在同層內的最後一個<li>元素
:root	:root	選擇該文件的根元素(一般而言就是指<html>)
:empty	p:empty	選擇所有內部沒有任何元素的<p>元素
:target	p:target	選擇目前正在作用中的<p>元素
:enabled	input:enabled	選擇所有可使用的<input>元素
:disabled	input:disabled	選擇所有不可使用的<input>元素
:checked	input:checked	選擇所有被選取到的<input>元素
:not(selector)	div:not(p)	選擇所有在<div>元素內不是<p>元素的其他元素
::selection	::selection	選擇所有被選中的內容

GoogleFont提供material風格的小圖示

GoogleFont提供material風格的小圖示  https://design.google.com/icons/

可直接在網頁head引入
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
或在css檔引入
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
即可使用

用法: 直接在網頁中插入<i class="material-icons">XXX</i>即可
例如愛心小圖示為<i class="material-icons">favorite</i>

詳細可參考說明文件 http://google.github.io/material-design-icons/
這套小圖示有提供svg和png檔  如果要排版的話可以直接下載來使用

六十種社群按鈕HTML CSS3

60 Free HTML CSS3 Social Media Buttons For Your Website

常用的 RWD 斷點

RWD 斷點

@media screen and (max-width: 1200px) {

}

@media screen and (max-width: 992px) {

}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 680px) {

}

@media screen and (max-width: 480px) {

}

[ CSS ] 選擇器列表

選擇器	範例	說明
.class	.header	選擇class=header的所有元素
#id	#name	選擇id=name的所有元素
*	*	選擇所有元素(通常用於reset樣式)
element	p	選擇所有<p>元素
element,element	h1,h2	選擇所有<h1>和<h2>元素
element element	div a	選擇所有在<div>內的所有<a>元素(可以為子元素、孫元素、曾孫元素…)
element>element	div>p	選擇所有父元素為<div>的<p>元素
element+element	h1+p	選擇所有緊接在<h1>元素後的第一個<p>元素
element~element	p~ul	選擇在<p>元素之後的每一個<ul>元素
[attr]	[data-tooltip]	選擇所有附帶有data-tooltip屬性的元素
[attr=value]	[target=_blank] [target=”_blank”]	選擇附帶有target屬性且值為_blank的所有元素
[attr~=value] [attr*=value]	[title~=subject] [title*=”subject]	選擇附帶有title屬性且值包含單詞subject的所有元素
[attr|=value] [attr]^=value]	[href|=http] [href^=”http”]	選擇附帶有href屬性且值是以http為開頭的所有元素
[attr$=value]	[src$=”jpg”]	選擇附帶有src屬性且值是以jpg為結尾的所有元素
:link	a:link	選擇所有未被訪問過的連結
:visited	a:visited	選擇所有已被訪問過的連結
:active	a:active	選擇正在作用中的連結
:hover	a:hover	選擇滑鼠指標停留其上的連結
:focus	input:focus	選擇獲得焦點的<input>元素
:first-letter	span:first-letter	選擇所有<span>元素中的第一個字元
:first-line	span:first-line	選擇所有<span>元素中的第一行文字
:first-child	ul li:first-child	選擇所有父元素為<ul>的第一個<li>元素
:before	p:before	在所有<p>元素前插入內容
:after	p:after	在所有<p>元素後插入內容
:lang(language)	p:lang(en)	選擇所有帶有lang屬性且值是以en為開頭的所有<p>元素
:first-of-type	a:first-of-type	選擇所有在同層內的第一個<a>元素
:last-of-type	a:last-of-type	選擇所有在同層內的最後一個<a>元素
:only-of-type	a:only-of-type	選擇所有在同層內只有唯一一個的<a>元素
:only-child	span:only-child	選擇所有在同層內只有唯一一個元素且其為<span>標籤的元素
:nth-child(n)	li:nth-child(2)	選擇所有在同層內的第二個<li>元素
:nth-last-child(n)	li:nth-last-child(2)	選擇所有在同層內的倒數第二個<li>元素
:last-child	li:last-child	選擇所有在同層內的最後一個<li>元素
:root	:root	選擇該文件的根元素(一般而言就是指<html>)
:empty	p:empty	選擇所有內部沒有任何元素的<p>元素
:target	p:target	選擇目前正在作用中的<p>元素
:enabled	input:enabled	選擇所有可使用的<input>元素
:disabled	input:disabled	選擇所有不可使用的<input>元素
:checked	input:checked	選擇所有被選取到的<input>元素
:not(selector)	div:not(p)	選擇所有在<div>元素內不是<p>元素的其他元素
::selection	::selection	選擇所有被選中的內容