Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie CSS 分享 (4) Box model 等，實習
Ähnlich wie CSS 分享 (4) Box model 等，實習 (20)
Mehr von 知世‧安索帕 台北 (使用經驗設計中心)
CSS 分享 (4) Box model 等，實習
- 1. CSS基本概念與語法(二) 2011.5.31 鄒心瑜Hsinyu Chou hsinyu.chou@isobar.com
- 5. 重新認識HTML tag 所有HTML元素都是不同名字的框框。而<div>是天生沒有名字的萬用框框，你可以幫它取名字。 <html>, <body>也都是框框。
- 13. HTML與CSS的關係 可以只選一個框框，也可以一次選好幾個框框。 p{ font-size:13px; } (群組) p, .block{ font-size:13px; }
- 14. HTML與CSS的關係 還可以選框框裡的框框。 (子嗣) #feature .block p{ font-size:13px; }
- 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; 背景色 背景圖 排列方式 左 上
- 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; (絕對定位)