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

CSS 基本概念與語法 ( 二 )

2011.5.31鄒心瑜 Hsinyu [email protected]

mailto:[email protected]

重新認識 HTML tag

<h1>,<h2>,<p>,<div>….. 是什麼？


它們是文字嗎？


不，它們是除了是裡面的文字，也是外面的框框。


所有 HTML 元素都是不同名字的框框。而 <div> 是天生沒有名字的萬用框框，你可以幫它取名字。

<html>, <body> 也都是框框。


框框包括容器和內容物。你可以對內容物做些事情，也可以對容器做些事情。


框框裡面還可以裝小框框。


過去我們唯一知道的容器是 <td> 。


現在試著把東西從 <td> 裡拿出來，讓 CSS 教它們排隊和變身。


這就是部落格的原理。有了 CSS ，同樣的框框們能排成不同的隊形，變成各種顏

色。

HTML 要找到對的 CSS 檔，才知道要排什麼隊形，變什麼顏色。

HTML 與 CSS 的關係


CSS 要在 HTML 裡找到對的框框，才知道叫誰排隊或變身，這就是選擇符的作用。

可以只選一個框框，也可以一次選好幾個框框。


p{ font-size:13px;

}

( 群組 )

p, .block{ font-size:13px;

}

還可以選框框裡的框框。


( 子嗣 )

#feature .block p{ font-size:13px;

}

Firebug 練習

http://dl.dropbox.com/u/8057029/0531/CSS-ex1.zip


CSS 能改變哪些特性

#header { height: 100px; }選擇符屬性值


我們可以改變內容物的哪些特性呢？color, font-size, font-family, font-weight

color 字的顏色 font-size 字級font-family 字型font-weight 粗細

內容物的特性可以被子孫繼承。

color: #00aadd (= #0ad)

CSS 能改變哪些特性顏色碼的寫法

a:link 有連結a:visited 已造訪a:hover 滑鼠滑過去a:active 按下去時

請按照順序

CSS 能改變哪些特性超連結有四種狀態


我們可以改變容器的哪些特性呢？width, height, margin, padding, border, background

top

left

bottom

right

margin 外距border 框線padding 內

距width 寬度height 高度

background 背景

容器的特性大多不會被子孫繼承。

width

height

margin: 15px 10px 5px 20px;

margin: 15px 10px 5px;

margin: 15px 10px;

上右下左 ( 順時針 )

上左右下

上下左右

padding 同 margin

border: 2px solid #0ad;粗細款式顏色

(= #00aadd)

CSS 能改變哪些特性容器屬性的寫法


背景除了排成像磁磚一樣，還有很多種排法no-repeat, repeat-x, repeat-y


背景與容器的對齊(-5,-10)

background-position: -5px -10px;

(0,0)

background-image: url(../images/bg.jpg);

background-position: 15px 10px; ( 0 0 = left top)

background-color: #0ad; (=#00aadd)

background-repeat: no-repeat | repeat-x | repeat-y;

background: #0ad url(../images/bg.jpg) no-repeat -5px -10px;

左上

背景色背景圖排列方式左上

CSS 能改變哪些特性背景屬性的寫法

( 特殊 ) background-position: center center | right bottom

排版練習



• 誰的權重最大？“CSS Selector Specificity”

CSS 選擇符

margin

Box Model

width

paddingLorem 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

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

width

height

標準 IE6

容器的其他特性

容器有兩種， block 和 inline 。

h1

p

ul

span a span text text

block 容器會把整行空間佔滿。 inline 容器照著內容物變寬，且自動並排。

display: block | inline;

HTML 預設的 inline 容器只有<a>, <span>, <img> 。


容器可以改變寬度，然後浮動並排。

float: left | right | none;

沒有設浮動的容器，即使寬度變窄也不會並排。


容器可以疊在其他容器上面。

( 外 ) position: relative;( 內 ) position: absolute; ( 絕對定

位 )

Documents

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