行動開發學院 http://MobileDev.TW
Cascading Style Sheet
Basic
Ryan@MobileDev.tw
行動開發學院 http://MobileDev.TW
大綱
1. 簡介
2. 位置
3. 語法
4. 背景
5. 文字
6. 字型
7. 箱子
8. Margin
9. Border
10. Padding
11. 清單
12. 表格
13. ...
行動開發學院 http://MobileDev.TW
第1章:簡介
l  Cascading Style Sheets
l  Cascading:多個樣式定義可被重疊使用在一個網頁上
l  外部檔案
l  表頭
l  行內
l  S...
行動開發學院 http://MobileDev.TW
第2章:位置
l  外部:獨立儲存為一個檔案(例如mystyle.css)
l  在你的網頁檔案的head.../head中加入
link rel=stylesheet type=tex...
行動開發學院 http://MobileDev.TW
第3章:語法
•  整體結構 selector {property:value}
•  selector選擇器
•  HTML標籤 p{color:red} 段落中的文字顏色為紅色
•  i...
行動開發學院 http://MobileDev.TW
第3章:語法
•  property:屬性
•  指定該元件或標籤的某項特質(如顏色或字體)
•  多項屬性可用分號分開 
{propertyA:valueA ; propertyB:val...
行動開發學院 http://MobileDev.TW
第4章:背景
l  background-color 設定背景顏色
n  三種表達方式
è  名稱 yellow
è  Hex #00FF00
è  RGB rgb(255,0,2...
行動開發學院 http://MobileDev.TW
Chap4.Lab
行動開發學院 http://MobileDev.TW
Chap4.Lab
行動開發學院 http://MobileDev.TW
Lab2.混用顏色與圖片
行動開發學院 http://MobileDev.TW
第5章:文字
l  color 設定文字顏色
l  名稱、RGB、Hex
l  text-align 對齊
l  left、center、right、justify 
l  tex...
行動開發學院 http://MobileDev.TW
第6章:字型
l  font-family 指定字型
l  指定字型一,指定字型二,指定字型三
l  font-style 指定樣式 (就只是斜體)
l  normal 標準
l ...
行動開發學院 http://MobileDev.TW
Lab.文章標示練習
•  找一段文字,進行文字與字型各種樣式測試
行動開發學院 http://MobileDev.TW
第7章:Box Model
l  Margin –邊界
l  Border – 邊框
l  Padding – 框距
l  Content - 內容、文字/影像
行動開發學院 http://MobileDev.TW
第8章:邊界 Margin
l  margin-xxxx 分開標示
l  margin-bottom
l  margin-left
l  margin-right
l  margi...
行動開發學院 http://MobileDev.TW
第9章:邊框 Border 1/2
l  border-style 設定邊框樣式 (可每一邊不同)
l  樣式
-  none, dotted, dashed, solid, doubl...
行動開發學院 http://MobileDev.TW
第9章:邊框 Border 2/2
l  border-width 設定邊框寬度(框的粗細)
l  四邊分開設
-  border-top-width
-  border-right-w...
行動開發學院 http://MobileDev.TW
第10章:框距 Padding
l  設定內容與邊框的距離大小
l  各別設定
l  padding-bottom
l  padding-left
l  padding-right...
行動開發學院 http://MobileDev.TW
Lab:iOS7 Style Page
行動開發學院 http://MobileDev.TW
Lab.Box Model
行動開發學院 http://MobileDev.TW
第11章:清單 List 1/2
l  list-style-type 設定清單樣式
l  none
l  circle
l  disc
l  square
l  decimal...
行動開發學院 http://MobileDev.TW
第11章:清單 List 2/2
l  list-style-image 使用圖片作為清單樣式
l  list-style-image:url('picture.jpg');
l  l...
行動開發學院 http://MobileDev.TW
第12章:表格 Table
l  border-collapse 決定表格邊框與儲存格邊框是否重疊
l  collapse
l  separate(預設值)
l  border-sp...
行動開發學院 http://MobileDev.TW
Lab:Mobile Style Slide
•  可往左捲動一頁,背景不動
•  最下方有灰色半透明背景
•  圖示均有圓角邊框
•  圖示間距上下較窄、左右
較寬
行動開發學院 http://MobileDev.TW
第13章:元件 Element
l  控制元件大小
l  height
l  width
l  visibility 元件可視性
l  visible (預設值)
l  hidd...
行動開發學院 http://MobileDev.TW
第14章:應用
•  圖文編排
•  區塊連結按鈕
•  全頁排版 取代表格效果
行動開發學院 http://MobileDev.TW
Chap14.Lab Menu Bar
行動開發學院 http://MobileDev.TW
Chap14.Lab Float
行動開發學院 http://MobileDev.TW
Lab.對話泡泡
行動開發學院 http://MobileDev.TW
為什麼會有三角形?
每一邊先設定成不同的顏色
行動開發學院 http://MobileDev.TW
為什麼會有三角形?
把div的大小縮成0px
行動開發學院 http://MobileDev.TW
為什麼會有三角形?
其中一邊顏色保留,另外三邊設成透明色
Upcoming SlideShare
Loading in...5
×

CSS Basic

2,117

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,117
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "CSS Basic"

  1. 1. 行動開發學院 http://MobileDev.TW Cascading Style Sheet Basic Ryan@MobileDev.tw
  2. 2. 行動開發學院 http://MobileDev.TW 大綱 1. 簡介 2. 位置 3. 語法 4. 背景 5. 文字 6. 字型 7. 箱子 8. Margin 9. Border 10. Padding 11. 清單 12. 表格 13. 元件 14. 應用
  3. 3. 行動開發學院 http://MobileDev.TW 第1章:簡介 l  Cascading Style Sheets l  Cascading:多個樣式定義可被重疊使用在一個網頁上 l  外部檔案 l  表頭 l  行內 l  Style:樣式 l  HTML:結構 l  CSS:樣式 l  Sheets:表 l  一堆相同格式的資料放在一起
  4. 4. 行動開發學院 http://MobileDev.TW 第2章:位置 l  外部:獨立儲存為一個檔案(例如mystyle.css) l  在你的網頁檔案的head.../head中加入 link rel=stylesheet type=text/css href=mystyle.css / l  內部:整個樣式表放在網頁檔案的head.../head裡 l  在你的網頁檔案的head.../head中加入 style type=text/css........../style l  行內:直接將樣式語法加入該標記中 l  在你需要使用樣式的元件之開始標籤中,如例所示 p style=color:sienna;margin-left:20pxThis is a paragraph./p l  階層式關係,取最後一個 層層相疊覆元件、剝⾄至底層知分曉
  5. 5. 行動開發學院 http://MobileDev.TW 第3章:語法 •  整體結構 selector {property:value} •  selector選擇器 •  HTML標籤 p{color:red} 段落中的文字顏色為紅色 •  id •  CSS語法:#para1{ text-align:center; color:red;} •  HTML套用語法: p id=para1This paragraph will take the para1 style/p •  class •  CSS語法:.right {text-align:right} •  HTML套用語法: p class=rightThis paragraph will be right-aligned./p •  Attribute •  CSS語法:input[type=text] {background-color:blue} •  HTML影響:所有type為text的input元件,背景顏色為藍色
  6. 6. 行動開發學院 http://MobileDev.TW 第3章:語法 •  property:屬性 •  指定該元件或標籤的某項特質(如顏色或字體) •  多項屬性可用分號分開 {propertyA:valueA ; propertyB:valueB} •  value:屬性值 •  決定屬性的值(如什麼顏色,什麼字體) •  屬性值若為兩個字以上,加 •  p {font-family:sans serif}
  7. 7. 行動開發學院 http://MobileDev.TW 第4章:背景 l  background-color 設定背景顏色 n  三種表達方式 è  名稱 yellow è  Hex #00FF00 è  RGB rgb(255,0,255) l  background-image 設定背景圖片 n  background-repeat:重複 è  repeat 垂直與水平重複(預設值) è  repeat-x 水平重複 è  repeat-y 垂直重複 è  no-repeat 不重複 n  background-attachment:固定或捲動 è  fixed 固定 è  scroll 捲動 n  background-position:圖片位置
  8. 8. 行動開發學院 http://MobileDev.TW Chap4.Lab
  9. 9. 行動開發學院 http://MobileDev.TW Chap4.Lab
  10. 10. 行動開發學院 http://MobileDev.TW Lab2.混用顏色與圖片
  11. 11. 行動開發學院 http://MobileDev.TW 第5章:文字 l  color 設定文字顏色 l  名稱、RGB、Hex l  text-align 對齊 l  left、center、right、justify l  text-decoration 裝飾 l  overline 頂線、line-through 刪除線 l  underline 底線、blink 閃動 l  none (最常用,用來消除連結預設底線) l  text-transform 大小寫 l  uppercase 都大寫 l  lowercase 都小寫 l  capitalize 首字大寫 l  text-indent 首行縮排、line-height 行距 l  letter-spacing 字元間距、word-spacing 字詞間距
  12. 12. 行動開發學院 http://MobileDev.TW 第6章:字型 l  font-family 指定字型 l  指定字型一,指定字型二,指定字型三 l  font-style 指定樣式 (就只是斜體) l  normal 標準 l  italic 斜體(使用字型本身的斜體) l  oblique 斜體(使其傾斜) l  font-size 指定大小 l  px、em(W3C建議) l  font-weight 粗細 (就只是粗體) l  normal(400)、bold(700)、100~900 l  bolder、 lighter l  font-variant 變種(以大寫字來寫小寫字) l  normal、small-caps
  13. 13. 行動開發學院 http://MobileDev.TW Lab.文章標示練習 •  找一段文字,進行文字與字型各種樣式測試
  14. 14. 行動開發學院 http://MobileDev.TW 第7章:Box Model l  Margin –邊界 l  Border – 邊框 l  Padding – 框距 l  Content - 內容、文字/影像
  15. 15. 行動開發學院 http://MobileDev.TW 第8章:邊界 Margin l  margin-xxxx 分開標示 l  margin-bottom l  margin-left l  margin-right l  margin-top l  margin 一次標示 l  10px -  上:10px、右:10px、下:10px、左:10px l  10px 5px -  上:10px、右:5px、下:10px、左:5px l  10px 5px 15px -  上:10px、右:5px、下:15px、左:5px l  10px 5px 15px 20px -  上:10px、右:5px、下:15px、左:20px
  16. 16. 行動開發學院 http://MobileDev.TW 第9章:邊框 Border 1/2 l  border-style 設定邊框樣式 (可每一邊不同) l  樣式 -  none, dotted, dashed, solid, double, groove 溝槽 -  ridge 隆起, inset, outset, hidden l  四邊分開設 -  border-top-style -  border-right-style -  border-bottom-style -  border-left-style l  一次一起設 -  border-style:dotted solid double dashed 上,右,下,左 -  border-style:dotted solid double 上,左右,下 -  border-style:dotted solid 上下,左右 -  border-style:dotted 四邊相同
  17. 17. 行動開發學院 http://MobileDev.TW 第9章:邊框 Border 2/2 l  border-width 設定邊框寬度(框的粗細) l  四邊分開設 -  border-top-width -  border-right-width -  border-bottom-width -  border-left-width l  一次一起設 -  border-width:10px 5px 15px 20px 上,右,下,左 -  border-width:10px 15px 5px 上,左右,下 -  border-width:10px 5px 上下,左右 -  border-width:10px 四邊相同 l  border-color 顏色 l  border 一次設定四邊的樣式、寬度與顏色 l  border:5px solid red
  18. 18. 行動開發學院 http://MobileDev.TW 第10章:框距 Padding l  設定內容與邊框的距離大小 l  各別設定 l  padding-bottom l  padding-left l  padding-right l  padding-top l  一次設定 l  padding
  19. 19. 行動開發學院 http://MobileDev.TW Lab:iOS7 Style Page
  20. 20. 行動開發學院 http://MobileDev.TW Lab.Box Model
  21. 21. 行動開發學院 http://MobileDev.TW 第11章:清單 List 1/2 l  list-style-type 設定清單樣式 l  none l  circle l  disc l  square l  decimal 1,2,3,... l  decimal-leading-zero 01,02,03,.... l  lower-latin a,b,c,... l  upper-latin A,B,C,.... l  lower-roman i,ii,iii,..... l  upper-roman I,II,III,.....
  22. 22. 行動開發學院 http://MobileDev.TW 第11章:清單 List 2/2 l  list-style-image 使用圖片作為清單樣式 l  list-style-image:url('picture.jpg'); l  list-style-position 位置 l  inside l  outside
  23. 23. 行動開發學院 http://MobileDev.TW 第12章:表格 Table l  border-collapse 決定表格邊框與儲存格邊框是否重疊 l  collapse l  separate(預設值) l  border-spacing 相鄰儲存格邊框之間的距離 l  10px 四邊 l  10px 5px 水平、垂直 l  caption-side 標題位置 l  top l  bottom l  left l  right
  24. 24. 行動開發學院 http://MobileDev.TW Lab:Mobile Style Slide •  可往左捲動一頁,背景不動 •  最下方有灰色半透明背景 •  圖示均有圓角邊框 •  圖示間距上下較窄、左右 較寬
  25. 25. 行動開發學院 http://MobileDev.TW 第13章:元件 Element l  控制元件大小 l  height l  width l  visibility 元件可視性 l  visible (預設值) l  hidden l  collapse
  26. 26. 行動開發學院 http://MobileDev.TW 第14章:應用 •  圖文編排 •  區塊連結按鈕 •  全頁排版 取代表格效果
  27. 27. 行動開發學院 http://MobileDev.TW Chap14.Lab Menu Bar
  28. 28. 行動開發學院 http://MobileDev.TW Chap14.Lab Float
  29. 29. 行動開發學院 http://MobileDev.TW Lab.對話泡泡
  30. 30. 行動開發學院 http://MobileDev.TW 為什麼會有三角形? 每一邊先設定成不同的顏色
  31. 31. 行動開發學院 http://MobileDev.TW 為什麼會有三角形? 把div的大小縮成0px
  32. 32. 行動開發學院 http://MobileDev.TW 為什麼會有三角形? 其中一邊顏色保留,另外三邊設成透明色

×