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>DEF123red div456
ABCgreen spanDEF
- div為block元素
- span為inline元素
- 沒有功能的HTML元素
- 常用於CSS控制
CSS:width/height
width: (units)|auto;
height: (units)|auto;50% width40px 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>DEF123inline的p
456
ABCblock的markDEF
- 設定元素為inline或block
- 可覆蓋HTML設定
- 常用於div或span排版
CSS display:none
123<div style="display:none;">456</div>789123456789
- 將整個元素隱藏
- 不佔空間
- JS仍然可以抓取
CSS visibility
visibility: visible|hidden;123<span style="visibility:hidden;">456</span>789123456789
- 設定元素是否可見
- visible為可見，預設值
- hidden為不可見
- 會保留排版位置
CSS display:inline-block
123<span style="display:inline-block;width:300px;height:100px;background:green;">inline-block</span>456123inline-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>
item1item2item3
- 將元素表現為<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>AAABBABB
- 將元素表現為各種表格元素
- 可取代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以下不支援
CSS3
2015/10/28 阮韞澂