CSS3

2015/10/28 阮韞澂

CSS

Cascading Style Sheets
層疊樣式表
1996年發明
由W3C維護

CSS

設定樣式
版面配置
畫圖

CSS3

CSS最新標準
用於取代HTML的樣式設定
瀏覽器尚未完全支援像是IE阿...
目前有大量功能尚未實作

Try It!


<p style="color:yellow;">Yellow</p>

在網頁中加入以上元素

Yellow

CSS屬性


CSS屬性: 值;
CSS屬性: 值 值;

基本語法由屬性與值組成
若有多個值則以空格分隔
多個屬性以分號分隔

使用CSS

行內樣式(style屬性)


<p style="color:yellow;">Yellow</p>

內部樣式表(head中style標籤+selector)


<head>
	<style>
		p{
			color: yellow;
		}
	</style>

外部樣式表(head中連結獨立CSS檔案+selector)


<link rel="stylesheet" href="style.css">


p{
	color: yellow;
}

CSS:color


<p style="color:red;">RED</p>
<p style="color:#00ffff;">#00FFFF</p>
<p style="color:rgb(150,255,175);">RGB</p>

RED
#00FFFF
RGB

用於改變文字顏色
可輸入顏色名、六進位RGB碼、顏色函式(多種)
W3C School Color Value
W3C School Color Picker

Try It!

三原色
紅
黃
藍

試著在網頁中達成以上效果

CSS:background-color


(background|background-color): (color-value)|transparent;

Yellow

<mark>
指定背景顏色
使用任意顏色值
設定transparent為透明，預設值

div/span


123<div style="color:red;background:yellow;">red div</div>456<br>
ABC<span style="color:green;background:yellow;">green span</span>DEF

123red div
456
ABCgreen spanDEF

div為block元素
span為inline元素
沒有功能的HTML元素
常用於CSS控制

CSS:width/height


width: (units)|auto;
height: (units)|auto;

50% width
40px height

設定寬度和高度
auto為自動計算，預設值
數值可使用各種長度單位
常用px,%,em,vw,vh等
只對block元素有效

CSS 長度單位

分為相對單位與絕對單位
最常用px,%,em
絕對單位包含px,cm,mm,in(inch),pt,pc(pica,12pt)
px為一個像素點，相對於解析度
px之外通常只用於列印

CSS 長度單位

相對單位包含%,em,rem,ex,ch,vw,vh,vmin,vmax
%為相對上一層標籤
em為'M'寬度、ex為'x'高度、ch為'0'寬度
rem為root元素的em
vw為可瀏覽部分寬度的1%,vh為高度的1%
vmin為vw與vh中較小值，vmax為較大值
em相對於當前字體大小，會受到上層元素影響

Try It!

三原光
紅綠藍

試著在網頁中達成以上效果

CSS:font-weight


font-weight: normal|bold;

標準字
粗體字

<strong>
bold為粗體
normal非粗體，預設值

CSS:font-style


font-style: normal|italic|oblique;

標準字
斜體字
斜體字(更斜)

<em>
normal為非斜體，預設值
italic為斜體
oblique為更斜的斜體，只有chrome支援

CSS:text-decoration


text-decoration: none|[underline|overline|line-through];

標準字
底線underline
頂線overline
刪除線line-through

<u>~~<del>~~
在文字上畫線
none為無，預設值
可同時使用多個值，像是這樣

CSS:text-align


text-align: left|right|center|justify;

靠左
靠右
置中
左右對齊(用於拼音語言)

用於文字對齊
對於block元素的對齊無效
inline元素中沒有效果(因為width也無效)
左右對齊在自動換行的非等寬字時對齊左右

CSS:font-size


font-size: (units)|xx-small|x-small|smaller|small|medium
           |larger|large|x-large|xx-large;

小字
標準字
大字

設定字體大小
medium為預設值
數值可用各種尺寸單位

CSS em


<span style="font-size:1.2em;">
	M
	<span style="font-size:1.2em;">
		M
		<span style="font-size:1.2em;">
			M
			<span style="font-size:1.2em;">
				M
				<span style="font-size:1.2em;">
					M
				</span>
			</span>
		</span>
	</span>
</span>

MMMMM

Try It!

警告
CSS3有許多功能瀏覽器尚未實作、或是實作不完全，像是IE阿，IE阿，或是IE之類的，因此有許多功能可能無法使用、只支援一部份，或是發生莫名其妙的錯誤；需要以加上前墜(+1~42電傷,-webkit-,-moz-)、使用不同語法支援不同瀏覽器等方式達成效果。
或是等待，時間會解決所有問題，或至少解決發現問題的人。

試著以div/span配合CSS在網頁中達成以上效果

CSS:display


display: inline|block|none|inline-block|list-item|(flex)|(table元素);

決定元素的顯示方式
inline為預設值
none為不顯示
inline-block為inline與block的混合
flex為CSS3新功能，須搭配其他flex系列的屬性使用
list-item使該元素表現為<li>
設定table類則表現為HTML5-table系列各種元素

CSS display:inline/block


123<p style="display:inline;background:red;">inline的p</p>456<br>
ABC<mark style="display:block;">block的mark</mark>DEF

123inline的p
456
ABCblock的markDEF

設定元素為inline或block
可覆蓋HTML設定
常用於div或span排版

CSS display:none


123<div style="display:none;">456</div>789

123456
789

將整個元素隱藏
不佔空間
JS仍然可以抓取

CSS visibility


visibility: visible|hidden;


123<span style="visibility:hidden;">456</span>789

123456789

設定元素是否可見
visible為可見，預設值
hidden為不可見
會保留排版位置

CSS display:inline-block


123<span style="display:inline-block;width:300px;height:100px;background:green;">inline-block</span>456

123inline-block456

本身作為inline元素排列
元素內部視為block
可設定width、height等

CSS display:list-item


<ul>
	<div style="display:list-item">item1</div>
	<a href="#" style="display:list-item">item2</a>
	<div style="display:list-item">item3</div>
</ul>

item1
item2item3

將元素表現為<li>
可以達成一些很奇怪的效果
通常不建議使用

CSS display:(table元素)


<div style="display:table;">
	<div style="display:table-row;">
		<div style="display:table-cell;">AA</div>
		<div style="display:table-cell;">AB</div>
	</div>
	<div style="display:table-row;">
		<div style="display:table-cell;">BA</div>
		<div style="display:table-cell;">BB</div>
	</div>
</div>

AA
AB
BA
BB

將元素表現為各種表格元素
可取代HTML表格
IE8以下不支援

CSS display:(table元素)

display value	HTML tag
table	<table>
inline-table	inline的<table>
table-row	<tr>
table-cell	<td>
table-caption	<caption>

CSS display:(table元素)

display value	HTML tag
table-header-group	<thead>
table-row-group	<tbody>
table-footer-group	<tfoot>
table-column	<col>
table-column-group	<colgroup>

Try It!

試著以CSS達成以上效果

initial


(CSS屬性): initial;

將該屬性設定為初始值
可用於任意屬性
IE無效習慣就好，習慣就好

inherit


(CSS屬性): inherit;

使該屬性繼承父元素之值
可用於任意屬性
IE8以下不支援