Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
行動開發學院 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

3,477 views

Published on

Published in: Technology
  • Be the first to comment

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 為什麼會有三角形? 其中一邊顏色保留,另外三邊設成透明色

×