css外觀樣式
現代化行動網頁設計基礎入門班 DAY 2
講師:張凱迪(KD.Chang)
Copyright © 2013 All rights reserved
提醒您鍵盤左右鍵可以移動投影片
Sorry, PPT is not suitable for Hackers : (
前情提要
內容架構 - HTML
外觀樣式 - CSS
行為互動 - JavaScript
打開瀏覽器的dEV TOOLS
試看看,沒CSS差很多...
打開你的開發者工具試試
Firefox
– Firebug
Chrome
– 開發者工具
IE
– 開發者工具(F12)
Safari
– 開發者工具
Opera
– Dragonfly
教學文件:Chrome開發者工具關於css的一些小事
層疊樣式表(原文:Cascading Style Sheets,簡寫CSS)
CSS 規格標準由W3C 所制定,CSS 1.0 於 1996年推出
歷經CSS 1 、CSS2、CSS2.1,目前朝CSS3發展中
CSS3 新增許多功能,但不同瀏覽器支援不一(需加前綴)
用文字編輯器即可編輯,存.css檔
CSS3 主要新玩意兒
圓⾓
方盒陰影 / 文字陰影
漸層
外部字體
2D / 3D 漸變 / 動畫
Media Queries
CSS 問題多在跨平台支援度
http://laughingthroughthepain.files.wordpress.com/
各瀏覽器使用不同樣板引擎
排版引擎Wiki
http://pashutaphotography.blogspot.tw/
css屬性分為兩大類
外觀
主要負責控制如:文字顏色、大小、背影顏色等外觀
版面
負責如何將元素放置在螢幕中適切的位置
主要css使用方式
1. 行內樣式 (Inline Styles)
直接在HTML元素中加入style屬性,將樣式套用到該元素。缺點是樣式無法重複利用,且閱讀、維護不便
2. 內嵌樣式 (Embeded Styles)
將樣式寫在<head></head>的<style></style>中,缺點是無法重複利用
3. 外部樣式表 (External Stylesheets)
最適合使用的CSS使用方式,將樣式從內容結構抽離出來,成獨立的CSS檔案,易於維護和重複使用
主要CSS使用方式
1. 行內樣式 (Inline Styles)
<img style="width:150px; height:auto;" src="img/js-logo.png" alt="">
2. 內嵌樣式 (Embeded Styles)
<style>
body {
background: red;
}
</style> // 請放置於<head></head>之間
3. 外部樣式表 (External Stylesheets)
<link rel="stylesheet" href="css/main.css">
//請放置於<head></head>之間
為何要使用獨立樣式表?
可以重複使用原始碼
易於閱讀、維護和修改
將結構和樣式分離清楚,有利於團隊合作
串起HTML和css
CSS的運作方式是將規則和HTML的元素連結起來。這些規則定義了特定元素內容所呈現的外觀樣式
CSS 規則包含了兩部分:1. 選擇器、2. 宣告
p //選擇器,指出所選的元素
{color: red;} //宣告樣式
按這看結果
CSS屬性影響元素外觀
CSS 宣告位在大括號中,每個宣告由兩部分所組成:
屬性與值,每個宣告裡可以有多個屬性,屬性間用分號區隔
p {
color: red;
font-family: Arial;
//屬性(元素的面向):值(想用在該元素上的設定值)
}
第一個css檔案
//HTML
<h1>Hello HTML5</h1>
//CSS寫在<head><style></style></head>中
h1 {
color: blue;
font-family: Arial;
}
練習一(sample 2-1)
運用之前的HTML,運用行內、內嵌、引入方式,將其套上CSS顏色
CSS Reset 與 Normalize
重新定義各元素樣式的樣式表,
希望能解決跨瀏覽器問題
目前最有名的CSS Reset為Eric A. Meyer 的 CSS Reset 版本
CSS RESET 與 NORMALIZE 用法
<!--請試著註解掉旁邊的CSS Reset觀察效果-->
<!--可以試著註解掉CSS Normalize並和CSS Reset比較-->
按這看結果
選擇器
選擇器是讓你可以選取到你想要套用樣式的元素
CSS選擇器有大小寫之分,選取名稱必須相同
常用選擇器種類
Universal selector(通用選擇器)
使用 * 選取所有元素
Type selectors(型態選擇器)
Ex. h1、p ,選取該元素
Class selectors(Class選擇器)
使用 . class名稱,選取該class元素
ID selectors(ID選擇器)
使用#ID名稱,選取該ID元素
按這看結果
常用選擇器種類
Attribute selectors(屬性選擇器)
選取具有所指定屬性的元素
selector[att]
selector[att=val]
selector[att^=val]
selector[att$=val]
selector[att*=val]
selector[att|=val]
selector[att~=val]
常用選擇器種類
Child combinator(子選擇器)
找出一元素之直系子元素(兒子必緊鄰父親)
Descendant selectors (後代選擇器)
找出一指定元素之所有後代元素
按這看結果
常用
選擇器種類
Adjacent sibling combinator(同層相鄰選擇器)
E + F,利用 + 區隔兩個元素,表示在與 E 同一層關係的相鄰 F 元素才會套用
General sibling combinator(同層全體選擇器)
E ~ F,利用 ~ 區隔兩個元素,表示在與 E 同一層關係的 F 元素全部都會套用
Groups of selectors(群組選擇器)
同時選取多個元素
按這看結果
常用選擇器種類
Pseudo-classes(偽類選擇器)
:link (超連結平常的樣式)
:visited (超連結點閱後的樣式)
:hover (滑鼠滑入的樣式)
:active (滑鼠按下的樣式)
:focus (目標為焦點的樣式)
:lang(A) (當語言為A的樣式)
:first-child (第一個元素的樣式)
常用
選擇器種類
Pseudo-elements(偽元素選擇器)
:first-line (元素的第一行會套用)
:first-letter (元素的第一個字母會套用)
:after (在元素後加上內容(一般會配 content 屬性))
:before (在元素前加上內容(一般會配 content 屬性))
按這看結果
常用選擇器種類
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
//請注意順序,因為CSS後來優先,權重相同者會被覆蓋,記憶方式 LOVE HATE
按這看結果
練習二(sample 2-2)
運用Pseudo-classes(偽類選擇器)製作一顏色互動的超連結
css階層
CSS 是階層樣式表 (cascading style sheet) ,在定義外觀樣式時
難免會有不同的樣式去定義到同一個元素的情況
,所謂的
階層
(cascading) 係指
樣式 (style) 規則 (rule) 的優先權有不同的層次
,包括來源(origin)、重要性 (importance) 、順序 (order) 、明確性 (specificity) 等,並結合繼承 (inheritance) 決定最終 HTML 元素的樣式
參考資料: CSS inheritance 屬性繼承
CSS階層順序
1. 尋找樣式規則,並判斷選取項是否符合 HTML文件中可用的名稱,例如元素名稱、 class 或 id 屬性名稱
2. 依來源(origin)排序(依以下順序排列優先性)
(1)瀏覽器使用者(user) !important 宣告
(2)網頁設計者(author) !important 宣告
(3)網頁設計者(author)所指定的樣式(行內>內嵌>外部)
(4)瀏覽器使用者(user)定義樣式
(5)瀏覽器(user agent)預設樣式
* !important指非常重要,權重最高
css Specificity
若specificity明確度相同以後來優先
1,0,0,0 可看為 "1000",但不是10進位
CSS 屬性衝突
有些時候在定義CSS時,會發現明明已經改過過CSS設定值,但是就是無法變更外觀樣式,這時就有可能是因為有其他更高明確度的設定值覆蓋造成
此時可以嘗試打開瀏覽器的開發工具,觀察CSS被覆蓋的情形
註解
// 這是單行註解
/* 這是多行註解,使用 /* 開頭,用 */ 當結尾。 */
了解色彩
在螢幕上所顯示的顏色都是混合了光的三原色
紅、綠、藍
所組成的,螢幕上是由像素小方框所組成,每個方框都混合了紅、綠、藍三種顏色。可以用顏色檢查器取得欲使用的顏色
好用工具:Colorzilla
色彩三要素
色相(Hue)
亦即一般我們稱的顏色,依不同波長色彩呈現的相貌所稱呼的「名字」
彩度(Chroma)
彩度是指色彩的純粹度或鮮豔度,亦可說是區分色彩鮮濁的程度指色彩的純度或,任何顏色的純色因不含雜色,飽和度及純粹度最高。
明度(Value)
係指顏色中的黑色量。明度越低黑色量越多,色彩的明度與光線的反射率有關
前景色
color屬性讓我們可以指定元素的顏色,一般可用以下三種方式指定顏色:
RGB值:透過紅、綠、藍組成來表現色彩,使用0-255數值來定義。如:rgb(0, 0, 0)
HEX值:六位數代表一色彩中的紅、綠、藍比例,使用十六進位定義並以#開頭。如:#696969(紅色105用十六進位表69)
顏色名:瀏覽器可以認得約147個顏色名字,如:red
* CSS3增HSLA屬性(色相[0-360], 彩度[%], 明度[%], 不透明度)
背景色
CSS將每個HTML元素視為獨立方框,
background-color屬性擇設定該方框的背景顏色
,顏色定義方式如同前景色
按這看結果
CSS3 : 新增不透明度
CSS3新增了透明度屬性 : opacity,可以讓你直接指定元素和子元素的不透明度,讓設計網頁更加靈活(其值為0.0到1.0,0.6為60%不透明度)
CSS3亦提供了RGBA的顏色設定,其中A為不透明度,其值如opacity屬性,但子元素不會繼承
小技巧:先用RGB指定一顏色,再用RGBA,若遇瀏覽器不支援,元素仍可以使用傳統的顏色指定方式
按這看結果
文字
文字的格式和頁面易讀性有關,所以使用屬性上需特別注意
一般而言控制文字的外觀可以分為兩類:
直接影響字體和其整體外觀的屬性 (EX:字體、文字大小)
不管使用何種字體的效果皆為相同 (EX:顏色、文字間距)
關於字體...
襯線(Serif)
襯線字型在字母的主要筆劃末端都有額外的細節,這些細節稱為襯線,傳統印刷上長用於較長的內容,易讀性較高
無襯線(Sans Serif)
Sans在法文為『無』的意思,其文字末端為直的,無過多細節,看起來較簡潔,文字較小時較清晰易讀
等寬(monospace)
每個字母有相同的寬度,常用於原始碼中,因為較易對齊
關於字體...
http://files.dotblogs.com.tw/larrynung/
通用字體(Generic Font Family)
serif 襯線字
generic-family: serif
s
ans-serif 無襯線字 generic-family: sans-serif
cursive 捲曲字體 generic-family: cursive
fantasy 花俏字體 generic-family: fantasy
monospace 等寬字體 generic-family: monospace
*瀏覽器對各種 Generic font family 有預設字體
關於字體的那些小事
若字體在使用者電腦裡沒有會自動使用下一個(字型堆疊)
最後一個盡量使用瀏覽器預設的
Generic font family
font-family: '微軟正黑體', 'Times', sans-serif;
繁體中文字型也盡量用英文名稱表示:
微軟正黑體 : Microsoft JhengHei
新細明體 : PMingLiU
細明體 : MingLiU
標楷體 : DFKai-sb
參考資料:關於 CSS 設定 font-family 研究
更多字體...
CSS3 @font-face :
由Server端提供字體給瀏覽器顯示使用,使用毋須安裝字體
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf")
format('ttf');
}
h2 {
font-family: "Bitstream Vera Serif Bold", serif
}
按這看結果
更多字體...
使用圖片替代(記得加alt屬性) :
圖片取代文字時增強搜尋引擎搜索技巧
line-height:0;
font-size:0;
overflow:hidden;
指定字體
使用font-family屬性決定字體,但必須是使用者電腦中有安裝你指定的字體,不然無法顯示,若需使用多個字體,請用逗號分隔,同頁面不建議使用超過三種以上的字體
若有字體名稱超過一個字,需要放於雙引號中
字體大小
font-size
屬性可以指定字體大小,
字體大小單位一般有三種,一般瀏覽器預設16px = 1em = 100.0% = 12pt
像素
是常見的大小單位,因為使用上較為方便,但缺點舊瀏覽器時,使用者是無法自行調整文字大小
百分比
瀏覽器預設文字大小多為16px,故50 % = 8 px
em
W3C 規定的文字單位,因為其符合無障礙規定,可以讓使用者伸縮大小 ,一個em等於M字母寬度 ,會繼承父元素
好用工具:PXtoEM.com
粗體、斜體 、大小寫
font-weight
屬性可以製作粗體字,有normal(正常)和blod(粗體)兩種值可以選擇
font-style
屬性可以製作斜體字,有normal、italic(斜體)、oblique(傾斜體)三種屬性值可以選擇
text-transform屬性可以改變文字大小寫,屬性值為uppercase(轉大寫)、lowercase(轉小寫)、capitalize(第一個字母大寫)
按這看結果
底線和刪節線
text-decoration
屬性有以下屬性值:
1. none(移除所有裝飾)
2. underline(文字加上底線)
3. overline(文字上方加上一條線)
4. line-through(從文字中間加入刪節線)
按這看結果
行高
line-height行高指的是此行文字的上一行文字下緣線到此行下緣線的距離,在CSS中line-height屬性設定了整行文字的高度,font-size和line-height的差距為行距(leading)
http://blog.justfont.com/
行高
行高屬性值主要有
1. 預設值(normal)
元素設定的font-size文字大小 x 1 . 2(一般瀏覽器為1 .0 - 1 .2)
2. 純數字倍數
該元素設定的font-size文字大小 x 所設定值
3. 單位的值
直接設定單位值,多半使用em作為單位,因可以相對調整
4. 百分比
依據父元素 x 所設定百分比決定值
5. 繼承(
inherit
)
繼承父元素的值 x font-size
按這看結果
字母、單字間距
letter-spacing
屬性值可以決定字母間的間距,若字母為大寫增加字母間距多半可以增加文字的易讀性
word-spacing
屬性值則決定單字間的距離,通常不用特別更動,預設間距是由字體決定,只有當粗體等情況加大單字間距可以增加可閱讀性
按這看結果
文字水平對齊
水平對齊
一般文字由左向右書寫是相對合適,而
text-align
屬性值可以控制文字的對齊方向,一般有left(向左對齊)、right(向右對齊)、center(置中)、justify(此屬性值表除了最後一行外,每一行都應該佔據容器框的整個寬度)
按這看結果
垂直對齊
垂直對齊
此處
vertical-align
屬性值
指的垂直對齊並非指的是<p>、<div>等block level元素當中的文字垂直對齊,但若用於<table>的<td>、<th>會產生效果。正確用法應使用於<em>、<strong>、<img>等
行內元素(inline level)
,屬性值有:baseline、sub、super、top、text-top、middle、bottom、text-bottom
文字縮排
text-indent
屬性值可以讓元素的第一行文字進行縮排,通常用em為單位,可以接受負值,亦即將文字縮至瀏覽器之外,給搜尋引擎或看不見圖片者看,此為過去常見使用負值縮排的技巧(效能問題,現在不建議使用)
按這看結果
CSS3 : 文字陰影
文字陰影為CSS3新增之屬性,可以更輕易製作出文字陰影的效果,text-shadow有四個屬性值,第一個為陰影左右位置,第二個值為陰影上下位置,第三個值為陰影模糊量(選擇性),最後值為陰影顏色,目前最新瀏覽器均支援text-shadow屬性
text-shadow: 2px 2px 2px black;
按這看結果
了解CSS運作方式的關鍵:
想像每個HTML元素周圍都有看不見的方框(Box)
回想之前談到的<div>(block)和<span>(inline)
按這看結果
常用DISPLAY
display:block - 元素會以區塊方式呈現,除非設定 position 或 float,預設為block的元素:<div> 、 <p> 、 <h1~6> ,水平置中方法是在元素加上 margin : 0 auto , 0 可為任意值
display:inline - 所有文字或圖片均不換行。預設為inline的元素:<a> 、 <span> 、 <em> 、 <strong> 、 <img> 、 <iframe>,可以有 margin-left 、 margin-right 、 padding-left 、 padding-right ,但不能有 margin-top 、 margin-bottom 、 padding-top 、 padding-bottom 、 width 、 height 、 background-image,元素水平置中的方式是在此元素的父元素加上 text-align : center
常用DISPLAY
display : inline-block -
外面是 inline,裡面是 block 。 所以inline-block 元素不會換行,但是又可以設定 padding-top 、 padding-bottom 、 width 、 height 、background-image等屬性
display : none
display : none 和另一屬性
visibility : hidden
的最大差別是
display : none 並不會在瀏覽器佔空間
,但在檢視原始碼仍可見,而 visibility : hidden 是隱形看不見,還是有佔空間
按這看結果
關於boxmodel的那些小事
背景顏色寬(高)度 = 內容寬(高) + padding 寬(高)
block 元素的 margin-top和margin-bottom (上邊界、下邊界)
密接時,只會顯示較大的那一個 (Collapsing margin)
margin-top 有可能會超出父元素
按這看結果
box寬高
width、height可以決定block level元素的寬高,可以使用px、%、em為單位,若需針對不同device做相對變化都會考慮使用em,inline level則是由line-height決定高
按這看結果
最大、最小寬高
針對不同大小的螢幕你可以設置最大最小寬
(max/min-width)
、高
(max/min-height)
來讓使用者在不同螢幕上都可以有良好的使用體驗,
設置最小值後,真正的值不能比最小值低,反之,
設置最大值後,真正的值不能比最大值高
按這看結果
overflow
overflow
屬性值會告訴瀏覽器若內容比box寬高還大時該如何處理,主要有兩種處理方式:hidden(隱藏多餘內容)、scroll(出現捲軸)
按這看結果
邊框寬度、樣式、顏色
border-width
可以決定邊框寬度,
border-style
可以決定邊框樣式(dotted,、dashed、double、 groove,、ridge、 inset、outset、hidden、none),
border-color
可以決定邊框顏色,設定方式如文字顏色。top、right、bottom、left可以決定各方位屬性值
按這看結果
css 屬性縮寫
屬性縮寫可以讓屬性值可以寫於同一屬性,但需注意順序,以下兩者為等價關係
div {
background-color:red;
background-image:none;
background-repeat:repeat;
background-repeat:0% 0%;
background-attachment:scroll;
}
參考資料:CSS shorthand property 屬性縮寫
內距
padding可以讓你決定元素內容和邊框間需要保持多少空間,通常值的單位為px,不過也會使用em或%,
top、right、bottom、left可以決定各方位屬性值
按這看結果
邊界
margin屬性控制了box和box間的空隙,通常值的單位為px,不過也會使用em或%,top、right、bottom、left可以決定各方位屬性值
按這看結果
CSS3 : BOX-SIZING
content-box:box的寬與高只包括內容,不含內緣(padding),邊線(border),外緣(margin)。此為預設值
border-box:box的寬與高包括內容加上內緣與邊線
width = border + padding + content
box-sizing: content-box;
box-sizing: border-box;
練習三(sample 2-3)
運用boxmodel、偽類選擇器a:hover、ul元素製作一畫廊
項目符號樣式、位置
list-style-type屬性可以更改項目符號,list-style-position可以更改符號位置
游標符號
cursor屬性可以更改游標符號,常用值:pointer、move
排版基礎觀念
由上而下、由左而右 → Normal Flow
display: block 之元素垂直排列
display: inline / inline-block 之元素水平排列
常見三種定位方式
Normal Flow position:
static | relative; float: none;
Floats float:
left | right
Absolute Positioning position:
absolute | fixed
參考資料:CSS除錯
按這看結果
由上而下,由左而右 Normal Flow
http://selfecy.com/css-troubleshooting-slide/#/7/4
Float文繞圖
http://selfecy.com/css-troubleshooting-slide/#/7/5
position : relative
http://selfecy.com/css-troubleshooting-slide/#/7/9
position : absolute
http://selfecy.com/css-troubleshooting-slide/#/7/9
boxmodel
http://selfecy.com/css-troubleshooting-slide/#/7/9
z-index
疊放群組 (Stacking Contexts)
疊放群組 (stacking contexts) 指的是一組具有相同父元素的 elements 具有相同的疊放順序 (stacking order)
以下三種情況會產生新的 疊放群組 (stacking contexts):
1. html文件的根節點 <html>
2. position : 非使用 static,且 z-index != auto
3. opacity < 1
*設定 CSS 屬性 z-index 的 HTML 元件,必須同時有 position 屬性,且值是 relative 或 absolute , z-index 才會生效
參考資料:The stacking context
z-index
整數:元素矩格在重疊堆(stack)中的層次,可用負值。展現時數字大的在上,會蓋住數字小的。元素內的子元素不論是否設定 z-index,與父元素放在同一層,不須與外界的元素相比。同層的元素依先後次序堆疊,後來的蓋過先來的。
auto:等同於 0 層,元素矩格的層次與父元素相同。元素內的子元素其 z-index 設為整數時,會與父元素及外界的元素相比。此為預設值
z-index
inherit:繼承父元素的值。 要將多個元素重疊,要用到 position 特徵的 relative, absolute, fixed,及 top, right, bottom, left 四個特徵
z-index 必須配合 position 設為 relative, absolute, fixed 使用;其它情形 z-index 沒有效果,一律等同於 0 層
完整 z-index 規則
1. the background and borders of the element forming the stacking context
2. the child stacking contexts with negative stack levels (most negative first)
3. the in-flow, non-inline-level, non-positioned descendants
4. the non-positioned floats
5.the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0
7.the child stacking contexts with positive stack levels (least positive first)
進階班 : less/scss/sass
http://sonspring.com/sites/