CSS Basic

行動開發學院 http://MobileDev.TW CSS Basic 1 Cascading Style Sheet Basic 鐘祥仁Ryan
http://MobileDev.tw

行動開發學院 http://MobileDev.TW CSS Basic 2 大綱 1. 簡介 2. 位置 3. 語法 4. 背景
5. 文字 6. 字型 7. 箱子 8. Margin 9. Border 10. Padding 11. 清單 12. 表格 13. 元件 14. 應用

行動開發學院 http://MobileDev.TW CSS Basic 3 第1章：簡介 l  Cascading Style Sheets
l  Cascading：多個樣式定義可被重疊使用在一個網頁上 l  外部檔案 l  表頭 l  行內 l  Style：樣式 l  HTML：結構 l  CSS：樣式 l  Sheets：表 l  一堆相同格式的資料放在一起

行動開發學院 http://MobileDev.TW CSS Basic 4 第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:20px">This is a paragraph.</p> l  階層式關係，取最後一個層層相疊覆元件、剝至底層知分曉

行動開發學院 http://MobileDev.TW CSS Basic 5 第3章：語法 •  整體結構 selector {property:value}
•  selector選擇器 •  HTML標籤 p{color:red} 段落中的文字顏色為紅色 •  id •  CSS語法：#para1{ text-align:center; color:red;} •  HTML套用語法： <p id="para1">This paragraph will take the para1 style</p> •  class •  CSS語法：.right {text-align:right} •  HTML套用語法： <p class="right">This paragraph will be right-aligned.</p> •  Attribute •  CSS語法：input[type="text"] {background-color:blue} •  HTML影響：所有type為text的input元件，背景顏色為藍色

行動開發學院 http://MobileDev.TW CSS Basic 6 第3章：語法 •  property：屬性 •  指定該元件或標籤的某項特質(如顏色或字體)
•  多項屬性可用分號分開 {propertyA:valueA ; propertyB:valueB} •  value：屬性值 •  決定屬性的值(如什麼顏色，什麼字體) •  屬性值若為兩個字以上，加"" •  p {font-family:"sans serif"}

行動開發學院 http://MobileDev.TW CSS Basic 7 第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：圖片位置

行動開發學院 http://MobileDev.TW Chap4.Lab CSS Basic 8

行動開發學院 http://MobileDev.TW Chap4.Lab CSS Basic 9

行動開發學院 http://MobileDev.TW Lab2.混用顏色與圖片 CSS Basic 10

行動開發學院 http://MobileDev.TW CSS Basic 11 第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 字詞間距

行動開發學院 http://MobileDev.TW CSS Basic 12 第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

行動開發學院 http://MobileDev.TW Lab.文章標示練習 •  找一段文字，進行文字與字型各種樣式測試 CSS Basic 13

行動開發學院 http://MobileDev.TW CSS Basic 14 第7章：Box Model l  Margin –邊界
l  Border – 邊框 l  Padding – 框距 l  Content - 內容、文字/影像

行動開發學院 http://MobileDev.TW CSS Basic 15 第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

行動開發學院 http://MobileDev.TW CSS Basic 16 第9章：邊框 Border 1/2 l  border-style
設定邊框樣式 (可每一邊不同) l  樣式 -  none, dotted, dashed, solid, double, groove 溝槽 -  ridge 隆起, inset, outset, hidden -  none與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 四邊相同

行動開發學院 http://MobileDev.TW CSS Basic 17 第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

行動開發學院 http://MobileDev.TW CSS Basic 18 第10章：框距 Padding l  設定內容與邊框的距離大小 l 
各別設定 l  padding-bottom l  padding-left l  padding-right l  padding-top l  一次設定 l  padding

行動開發學院 http://MobileDev.TW Lab：iOS7 Style Page CSS Basic 19

行動開發學院 http://MobileDev.TW Lab.Box Model CSS Basic 20

行動開發學院 http://MobileDev.TW CSS Basic 21 第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,.....

行動開發學院 http://MobileDev.TW CSS Basic 22 第11章：清單 List 2/2 l  list-style-image
使用圖片作為清單樣式 l  list-style-image:url('picture.jpg'); l  list-style-position 位置(縮排) l  inside l  outside l  為啥不用padding-left就好？

行動開發學院 http://MobileDev.TW CSS Basic 23 第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

行動開發學院 http://MobileDev.TW Lab：iOS7 Style Slide •  可往左捲動一頁，背景不動 •  最下方有灰色半透明背景 • 
圖示均有圓角邊框 •  圖示間距上下較窄、左右較寬 CSS Basic 24

行動開發學院 http://MobileDev.TW CSS Basic 25 第13章：元件 Element l  控制元件大小 l 
height l  width l  visibility 元件可視性 l  visible (預設值) l  hidden l  collapse l  visibility的hidden與collapse的差別

行動開發學院 http://MobileDev.TW CSS Basic 26 第14章：應用 •  圖文編排 •  區塊連結按鈕
•  全頁排版取代表格效果

行動開發學院 http://MobileDev.TW Chap14.Lab Menu Bar CSS Basic 27

行動開發學院 http://MobileDev.TW Chap14.Lab Float CSS Basic 28

行動開發學院 http://MobileDev.TW Lab.對話泡泡 CSS Basic 29

行動開發學院 http://MobileDev.TW 為什麼會有三角形？每一邊先設定成不同的顏色 CSS Basic 30

行動開發學院 http://MobileDev.TW 為什麼會有三角形？把div的大小縮成0px CSS Basic 31

行動開發學院 http://MobileDev.TW 為什麼會有三角形？其中一邊顏色保留，另外三邊設成透明色 CSS Basic 32

CSS Basic

CSS Basic

Ryan Chung

More Decks by Ryan Chung

Other Decks in Technology

Featured

Transcript

行動開發學院 http://MobileDev.TW CSS Basic 1 Cascading Style Sheet Basic 鐘祥仁Ryan

行動開發學院 http://MobileDev.TW CSS Basic 2 大綱 1. 簡介 2. 位置 3. 語法 4. 背景

行動開發學院 http://MobileDev.TW CSS Basic 3 第1章：簡介 l  Cascading Style Sheets

行動開發學院 http://MobileDev.TW CSS Basic 4 第2章：位置 l  外部：獨立儲存為一個檔案(例如mystyle.css) l  在你的網頁檔案的<head>...</head>中加入

行動開發學院 http://MobileDev.TW CSS Basic 5 第3章：語法 •  整體結構 selector {property:value}

行動開發學院 http://MobileDev.TW CSS Basic 6 第3章：語法 •  property：屬性 •  指定該元件或標籤的某項特質(如顏色或字體)

行動開發學院 http://MobileDev.TW CSS Basic 7 第4章：背景 l  background-color 設定背景顏色 n

行動開發學院 http://MobileDev.TW Chap4.Lab CSS Basic 8

行動開發學院 http://MobileDev.TW Chap4.Lab CSS Basic 9

行動開發學院 http://MobileDev.TW Lab2.混用顏色與圖片 CSS Basic 10

行動開發學院 http://MobileDev.TW CSS Basic 11 第5章：文字 l  color 設定文字顏色 l

行動開發學院 http://MobileDev.TW CSS Basic 12 第6章：字型 l  font-family 指定字型 l

行動開發學院 http://MobileDev.TW Lab.文章標示練習 •  找一段文字，進行文字與字型各種樣式測試 CSS Basic 13

行動開發學院 http://MobileDev.TW CSS Basic 14 第7章：Box Model l  Margin –邊界

行動開發學院 http://MobileDev.TW CSS Basic 15 第8章：邊界 Margin l  margin-xxxx 分開標示

行動開發學院 http://MobileDev.TW CSS Basic 16 第9章：邊框 Border 1/2 l  border-style

行動開發學院 http://MobileDev.TW CSS Basic 17 第9章：邊框 Border 2/2 l  border-width

行動開發學院 http://MobileDev.TW CSS Basic 18 第10章：框距 Padding l  設定內容與邊框的距離大小 l

行動開發學院 http://MobileDev.TW Lab：iOS7 Style Page CSS Basic 19

行動開發學院 http://MobileDev.TW Lab.Box Model CSS Basic 20

行動開發學院 http://MobileDev.TW CSS Basic 21 第11章：清單 List 1/2 l  list-style-type

行動開發學院 http://MobileDev.TW CSS Basic 22 第11章：清單 List 2/2 l  list-style-image

行動開發學院 http://MobileDev.TW CSS Basic 23 第12章：表格 Table l  border-collapse 決定表格邊框與儲存格邊框是否重疊

行動開發學院 http://MobileDev.TW Lab：iOS7 Style Slide •  可往左捲動一頁，背景不動 •  最下方有灰色半透明背景 •

行動開發學院 http://MobileDev.TW CSS Basic 25 第13章：元件 Element l  控制元件大小 l

行動開發學院 http://MobileDev.TW CSS Basic 26 第14章：應用 •  圖文編排 •  區塊連結按鈕

行動開發學院 http://MobileDev.TW Chap14.Lab Menu Bar CSS Basic 27

行動開發學院 http://MobileDev.TW Chap14.Lab Float CSS Basic 28

行動開發學院 http://MobileDev.TW Lab.對話泡泡 CSS Basic 29

行動開發學院 http://MobileDev.TW 為什麼會有三角形？每一邊先設定成不同的顏色 CSS Basic 30

行動開發學院 http://MobileDev.TW 為什麼會有三角形？把div的大小縮成0px CSS Basic 31

行動開發學院 http://MobileDev.TW 為什麼會有三角形？其中一邊顏色保留，另外三邊設成透明色 CSS Basic 32