CSS 分享 (4) Box model 等,實習
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

CSS 分享 (4) Box model 等,實習

on

  • 1,245 views

 

Statistics

Views

Total Views
1,245
Views on SlideShare
1,245
Embed Views
0

Actions

Likes
1
Downloads
25
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS 分享 (4) Box model 等,實習 Presentation Transcript

  • 1. CSS基本概念與語法(二)
    2011.5.31
    鄒心瑜Hsinyu Chou
    hsinyu.chou@isobar.com
  • 2. 重新認識HTML tag
    <h1>,<h2>,<p>,<div>….. 是什麼?
  • 3. 重新認識HTML tag
    它們是文字嗎?
  • 4. 重新認識HTML tag
    不,它們是除了是裡面的文字,也是外面的框框。
  • 5. 重新認識HTML tag
    所有HTML元素都是不同名字的框框。而<div>是天生沒有名字的萬用框框,你可以幫它取名字。
    <html>, <body>也都是框框。
  • 6. 重新認識HTML tag
    框框包括容器和內容物。你可以對內容物做些事情,也可以對容器做些事情。
  • 7. 重新認識HTML tag
    框框裡面還可以裝小框框。
  • 8. 重新認識HTML tag
    過去我們唯一知道的容器是<td>。
  • 9. 重新認識HTML tag
    現在試著把東西從<td>裡拿出來,讓CSS教它們排隊和變身。
  • 10. 重新認識HTML tag
    這就是部落格的原理。有了CSS,同樣的框框們能排成不同的隊形,變成各種顏色。
  • 11. HTML與CSS的關係
    HTML要找到對的CSS檔,才知道要排什麼隊形,變什麼顏色。
  • 12. HTML與CSS的關係
    CSS要在HTML裡找到對的框框,才知道叫誰排隊或變身,這就是選擇符的作用。
  • 13. HTML與CSS的關係
    可以只選一個框框,也可以一次選好幾個框框。
    p{
    font-size:13px;
    }
    (群組)
    p, .block{
    font-size:13px;
    }
  • 14. HTML與CSS的關係
    還可以選框框裡的框框。
    (子嗣)
    #feature .block p{
    font-size:13px;
    }
  • 15. Firebug 練習
    http://dl.dropbox.com/u/8057029/0531/CSS-ex1.zip
  • 16. CSS能改變哪些特性
    #header{ height: 100px;}
    選擇符 屬性 值
  • 17. CSS能改變哪些特性
    我們可以改變內容物的哪些特性呢?
    color, font-size, font-family, font-weight
    color 字的顏色
    font-size 字級
    font-family 字型
    font-weight 粗細
    內容物的特性可以被子孫繼承。
  • 18. CSS能改變哪些特性
    顏色碼的寫法
    color: #00aadd (= #0ad)
  • 19. CSS能改變哪些特性
    超連結有四種狀態
    a:link 有連結a:visited 已造訪a:hover滑鼠滑過去a:active 按下去時請按照順序
  • 20. CSS能改變哪些特性
    我們可以改變容器的哪些特性呢?
    width, height, margin, padding, border, background
    margin 外距
    top
    border 框線
    padding 內距
    width 寬度
    height 高度
    left
    right
    height
    width
    background 背景
    bottom
    容器的特性大多不會被子孫繼承。
  • 21. CSS能改變哪些特性
    容器屬性的寫法
    margin: 15px 10px 5px 20px;
    上右 下 左 (順時針)
    margin: 15px 10px 5px;
    上 左右 下
    margin: 15px 10px;
    上下 左右
    padding 同 margin
    border: 2px solid #0ad;
    (= #00aadd)
    粗細 款式 顏色
  • 22. CSS能改變哪些特性
    背景除了排成像磁磚一樣,還有很多種排法no-repeat, repeat-x, repeat-y
  • 23. CSS能改變哪些特性
    背景與容器的對齊
    (-5,-10)
    (0,0)
    background-position: -5px -10px;
  • 24. CSS能改變哪些特性
    背景屬性的寫法
    background-image: url(../images/bg.jpg);
    background-position: 15px 10px; ( 0 0 = left top)
    左 上
    (特殊) background-position:center center | right bottom
    background-color: #0ad; (=#00aadd)
    background-repeat: no-repeat | repeat-x | repeat-y;
    background: #0ad url(../images/bg.jpg) no-repeat -5px -10px;
    背景色 背景圖 排列方式 左 上
  • 25. 排版練習
    http://dl.dropbox.com/u/8057029/0531/CSS-ex1.zip
  • 26.
    • 誰的權重最大?
    “CSS Selector Specificity”
    CSS選擇符
  • 27. Box Model
    標準
    IE6
    margin
    margin
    padding
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    padding
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    height
    height
    width
    width
  • 28. 容器的其他特性
    容器有兩種,block和inline。
    block容器會把整行空間佔滿。
    inline容器照著內容物變寬,且自動並排。
    h1
    span
    a
    span text text
    p
    HTML預設的inline容器只有<a>, <span>, <img>。
    ul
    display: block | inline;
  • 29. 容器的其他特性
    容器可以改變寬度,然後浮動並排。
    float: left | right | none;
    沒有設浮動的容器,即使寬度變窄也不會並排。
  • 30. 容器的其他特性
    容器可以疊在其他容器上面。
    (外) position: relative;
    (內) position: absolute; (絕對定位)