MUKI space* » css教學 http://blog.mukispace.com 網站教學 // 電影評論 // 單眼樂摸 // 心情日誌 Fri, 03 Feb 2012 14:04:27 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 教學 | 深入CSS之line-height應用 http://blog.mukispace.com/css-line-height/ http://blog.mukispace.com/css-line-height/#comments Wed, 01 Sep 2010 04:47:16 +0000 muki http://blog.mukispace.com/?p=3277 前幾天改版後，發現留言的版面，頭像上面的樓層顯示出了點問題，在IE6、IE7底下看，會發現文字被截掉(如下圖)。

後來詢問CSS達人：風痕影以及SR之後，發現只要設置line-height，問題就會解決。

於是當下我對line-height產生了興趣，想知道為什麼要這麼設定才可以解決字被截斷的困擾，因此上網搜尋了一下，查到了幾篇文章。

繼續閱讀 »

]]> 前幾天改版後，發現留言的版面，頭像上面的樓層顯示出了點問題，在IE6、IE7底下看，會發現文字被截掉(如下圖)。

文字會被截斷

後來詢問CSS達人：風痕影以及SR之後，發現只要設置line-height，問題就會解決。

於是當下我對line-height產生了興趣，想知道為什麼要這麼設定才可以解決字被截斷的困擾，因此上網搜尋了一下，查到了幾篇文章。

在ISD webteam這裡有一篇翻譯過後的文章：深入CSS行高，雖然標題打「深入」二字，但其實這篇是從淺至深講得很清楚，建議大家可以先看這篇文章，理解line-height真正扮演的角色為何。而在簡報第81~83頁就解決了我上述問題的疑惑，原來是因為line-height跟font-size的設定問題，導致inline box比content area小。

接著跟大家推薦的第二篇文章，是來自鑫空間的css行高line-height的一些深入理解及應用，這裡把許多line-height會碰到的問題，還有如何應用都寫得很詳細。大推啊!!!

看完這兩篇之後，讓我對line-height又更加認識了。而有時候我閱讀完文章，會有作筆記的習慣，因此我結合了這兩篇寫出了line-height心得，另外一點是因為上面兩篇作者都是內地的朋友，在語氣以及專有名詞上，跟我們還是有點出入。我會嘗試用大家所習慣的口吻教導大家line-height的知識。也許所學不精、也許未嘗完善，所以看完後如有疑問歡迎提出，謝謝:)

什麼是line-height

line-height的中文是「行高」，簡單來說就是兩行文字中間的那段高度、距離。而行高測量的高度，是以文字的基線(baseline)為準，小時候有在外面補習英文的朋友，應該都曾經被教導要在格線上寫英文吧，而那條對準英文字母的線就是我們所說的基線(如下圖)。

▼而所謂的行高就是基線跟基線之間的距離

line-height屬性及作用

要設定line-height，總共有5種屬性可供運用。我們用以下這段html 做例子：

<style type="text/">
body {font-size:35px;line-height:屬性自帶;}
p {font-size:12px;}
.main {font-size:25px;}
</style>
</head>
<body>
<p>text wolrd<br />second line</p>
<div class="main">this is for main<br />class=main</div>
</body>

1.預設值：寫法為line-height:normal; ，行高會依照(該元素設定的文字大小 x 1.2)*的結果作為依據。

▼使用line-height:normal，行高的最終值
p：12(px) x 1.2 =14.4(px)
.main：25(px) x 1.2=30(px)

*1.0~1.2是瀏覽器line-height的初始值，通常我們都用1.2來計算。

2.純數字：範例為line-height:1.8; ，行高會依照(該元素設定的文字大小 x 1.8)的結果作計算。你的數字設定多少，行高就會乘以多少。

▼使用line-height:1.8，行高的最終值
p：12(px) x 1.8 =21.6(px)
.main：25(px) x 1.8=45(px)

3.帶單位的值：範例為line-height:18px; ，不管字型大小多少，你設定行高是18px，他就是18px。單位選擇有em/px/pt...等。

▼使用line-height:18px，行高的最終值
p：18px
.main：18px

4.百分比：範例為line-height:180%; ，行高會依照(父元素文字大小 x 180%)的結果作依據。例如我現在設定body的行高是180%，所有body的子元素(包含body)都會跟著body的設定走。或許你會問，如果我p的行高設150%呢？那就是從p以下(包含p)的子元素都會套用150%的設定。

▼使用line-height:180%，行高的最終值
p：35(px) x 180% = 63(px)
.main：35(px) x 180%= 63(px)

5.繼承：寫法為line-height:inherit; ，如果加上這段語法，就會繼承該父元素的設定。(因為繼承的寫法跟上述四種都不同，所以我單獨拉出來講)。

繼承請以這段html為例：

<style type="text/css">
body {font-size:35px;line-height:1.8;}
p {font-size:12px;}
.main {font-size:25px;line-height:3;line-height:inherit;}  /*繼承被寫在這裡*/
</style>
</head>
<body>
<p>text wolrd<br />second line</p>
<div class="main">this is for main<br />class=main</div>
</body>

▼對 main 使用line-height:inherit，行高的最終值
.main(有繼承)：25(px) x 1.8= 45(px)
.main(無繼承)：25(px) x 3 =75(px)
當有繼承的時候，會是自己的文字大小 x 父元素的行高；反之拿掉繼承，就是自己的文字大小 x 自己的行高。

line-height 跟 box model的關係

首先先簡略說明什麼是box，我在這做了一張簡圖給各位參考：

可以看到每個字都有1個inline box包圍，inline boxes再組成line box，line boxes再組成containing box。英文的話是一個單字為一組inline box。

接著我們把其中一段話放大，會發現有一個隱形的box圍繞著文字，他叫做content area，他本身是一個隱藏的box，我們沒辦法對他做任何事情。而這個box的高度取決於文字的大小。

而我在一開始提到的文字截斷的問題，就是跟inline boxes、content area，以及line-height有絕對的關係(講了那麼久終於講到重點了...)

當我們設定好行高之後，box model是怎麼分配他們的自己的高度呢？舉例來說，假設我的行高跟字型大小這麼寫：font-size:12px; line-height:16px; ，可以明顯看出他們的行間距差了4px，接著box model會把這4px除以2，也就是4(px)/2=2(px)，然後把2個2px分別分配在content area的頂部跟底部(如圖)。

也就是說，content area的高度是12px，而inline box的高度是16px。當inline box高於content area的時候，兩邊是相安無事的，因為文字不會被截斷。

但如果，inline box比content area小呢!!?

假設我寫成：font-size:16px; line-height:12px; ，而inline box的高度會優先以行高最為依據，所以inline box高度是12px。但前面提到content area會圍繞著文字，所以文字大小設為16px，content area也是16px。在這種情況下，就會有文字超出inline box(如圖)。

文章前面也提到，content area是隱形的，我們肉眼所能看到的範圍只有inline box的藍底區塊。所以當inline box比較小的時候，它所包覆的文字會被截斷，我們看到的也只是那塊藍底截斷的文字。

這也就是為什麼，當你發現文字被截斷的時候，可以使用line-height來解決截斷問題。但是最有效的方法，還是一開始在設定字型大小以及行高的時候就要先避免該問題出現。

高度是line-height還是font-size決定

最後提到的是高度的問題。我們都知道當一個圖層(div)有了文字之後，就會自動生成高度。那麼這個高度是由line-height還是font-size決定的呢？ (這邊指的不是指定高度height)。

我們先寫一個簡單的CSS+HTML：

<style>
.a {
font-size:15px;
line-height:0;
border:1px solid #ccc;
}
.b {
font-size:1px;
line-height:15px;
border:1px solid #ccc;
}
</style>

<div class="a">大家好，我是阿木</div>
<br /><br />
<div class="b">大家好，我是阿木</div>

出來的範例如圖(有興趣的朋友可以把語法copy回去試試看)：

在這邊我就不多做解釋了，相信聰明的各位一定看得出來高度到底是由誰決定的:D。

參考文章

除了文章一開頭提到的網站之外，我在寫這篇的過程中，還有查閱了其他網站的相關資料。在這邊一併放上來給大家做參考。

1.css行高line-height的一些深入理解及應用 / 鑫空間 鑫生活
2.[譯] 深入 CSS 行高 / ISD Webteam
(這兩篇真的講得很詳細，再次推薦!!)

3.Box Model - CSS 框框模型 [2*] / 網頁藝術思考
4.CSS3 Text Effects Module / W3C

, ,
]]> http://blog.mukispace.com/css-line-height/feed/ 20 教學 | 輕鬆上手CSS(III) - 修改?創造?基本語法傳授!! http://blog.mukispace.com/easy-to-learn-css-iii/ http://blog.mukispace.com/easy-to-learn-css-iii/#comments Mon, 16 Feb 2009 10:00:03 +0000 muki http://blog.mukispace.com/?p=1271 建議你先閱讀：

1.學css前要準備什麼?

2.輕鬆上手css(I) - 不可不知篇

3.輕鬆上手css(II) - 叫叫ABC篇

這次要跟大家談論的主題，是修改以及創造的抉擇。在css的世界裡，你希望當個看得懂css語法並且會修改的人？或者是當可以無中生有創造出令人驚豔的css佈景？這個答案沒有絕對，端看你自己想往哪一條路發展。然而，不論你想當個修改者或是創造者，今天的主題都是非看不可^_________^

繼續閱讀 »

]]> res1 建議你先閱讀：
1.學css前要準備什麼?
2.輕鬆上手css(I) - 不可不知篇
3.輕鬆上手css(II) - 叫叫ABC篇

這次要跟大家談論的主題，是修改以及創造的抉擇。在css的世界裡，你希望當個看得懂css語法並且會修改的人？或者是當可以無中生有創造出令人驚豔的css佈景？這個答案沒有絕對，端看你自己想往哪一條路發展。然而，不論你想當個修改者或是創造者，今天的主題都是非看不可^_________^

這邊要先跟各位說明，css的語法跟選擇器是兩種不同的東西，比如以下這段css：
a:hover {
font-size:11px;
line-height:180%;
}
a:hover 是css選擇器。裡頭標藍色字體，由 { }包住的則是css語法。對css選擇器不熟或想進一步瞭解的朋友，可以參考我之前寫的CSS選擇器概略說明。

不論以後你要走修改路線或是創造路線(好像遊戲轉職!!)，css的基本語法都是你必備的知識，在此我將常用的css語法做個整理，供大家閱覽參考。另外要特別說明一點，這邊所謂的「基本」語法是就我的認知而言，我覺得哪些是大家常用的語法才會把它丟上來，如果過於冷僻或艱難我會自動忽略。

文字屬性一覽

font-size:11px; /* 文字大小，單位可以有px.pt.em.%.... */
font-family:arial,sans-serif; /* 文字字型，如果第一種字型瀏覽者的電腦沒安裝會自動秀出第二種字型，建議最後都以sans-serif字型作結 */
font-style:italic; /* 文字斜體 */
font-weight:bold; /* 文字粗體 */
color:#999; /* 文字顏色，可以用顏色代碼也可以用顏色的英文表示 */
letter-spacing:0.1em; /*文字間距，單位可以有px,pt,em....*/
line-height:18px; /* 文字行距 */
text-align:left; /* 文字對齊方式，left:置左，right:置右，center:置中，justify:左右對齊 */
text-decoration:none; /* 文字線段，none:不使用，underline:底線，overline:頂線，line-through:刪除線 */

框線屬性一覽

border:1px solid #ccc; /* 框線的設置依序為: 框線寬度(1px) 框線樣式(solid) 框線顏色(#ccc) */
border-top:1px solid #ccc ;/* top為框線上方，可以改成bottom(下方)，left(左方)，right(右方) */

框線樣式：
實線： solid
虛線： dotted
雙線： double
凹框： inset
凸框： outset

背景樣式一覽

background-color:#000; /* 背景顏色 */
background-image:url("images/bg.gif"); /* 背景圖片 */
background-attachment:fixed; /* 背景固定，不隨捲軸移動。設為scroll則相反 */
background-repeat:repeat; /* 背景重複，也可以改成no-repeat(不重複)，repeat-x(在X軸重複)，repeat-y(在Y軸重複) */
background-position:50% 50%; /* 背景圖片X軸與Y軸的定位點。除了用%表示外，也可用top.bottom.left.right.center */

項目符號樣式一覽

項目符號，我想大家最常用到的就是「如何隱藏項目符號的編號」...但只寫這麼一行感覺很空虛，所以我把幾個編號的樣式也寫出來給大家參考~

list-type-style:none; /* 隱藏項目符號 */
list-type-style:decimal; /* 阿拉伯數字 */
list-type-style:disc; /* 實心圓形 */
list-type-style:circle; /* 空心圓形 */
list-type-style:squre; /* 實心方形 */
list-type-image:url("list.gif"); /* 圖片形式 */

邊界與間距

邊界 margin 以及間距 padding 是大家最常用來調整圖層的語法，這邊概略說明兩者的使用方法以及差別：

margin:5px; /* 邊界距離上下左右各5px */
margin-top:5px; /* 上邊界距離5px。top可以改為bottom(下方)，left(左方) ，right(右方)*/
padding:5px; /* 圖層間距距離5px */
padding-top:5px; /* 上間距距離5px。top也可以自行修改*/

以下是一張網頁示意圖(以灰底表示)，A圖層以及B圖層各放在左右兩邊。此時沒有任何的語法牽制，所以兩張圖層的大小位置相同，都緊緊貼著網頁的最上方。

這是一張網頁

這是一張網頁

而我現在想要將兩張圖層的位子往下移40px，A圖層使用margin，B圖層使用padding。
#a {margin-top:40px;}
#b {padding-top:40px;}
來猜猜最後會發生什麼事情吧:)

最後的樣子

最後的樣子

看到了嗎!!! 雖然兩個圖層的文字都往下移了40px，達到你想要的效果，但是假設你有對圖層調背景顏色，就會發現其實差多了。

A圖層使用margin控制，margin控制的是整個圖層相對於邊界而言，所以他會將整個圖層往下移動。

B圖層使用padding控制，padding控制的是裡頭的物件，他的相對點就是整個B圖層，所以相對於B圖層，物件下移40px。

瞭解margin以及padding的差別後，你就可以知道為什麼有時圖層會掉下去或是錯位了吧。原因之一就是你用了過多的margin來控制他，但是圖層都是白底所以看不出他的差別，事實上他可能已經嚴重蓋到上下的圖層或左右的圖層，一張張圖層疊加上去，光是用想的都覺得恐怖XD。

小結

不知道對各位來說東西會不會過多？總之css應該也需要時間做消化，所以今天就講到這裡。關於float還有position的語法，我會放到進階語法區(個人覺得那個比較麻煩...)，請大家期待下次吧:)

如果以上這些語法你都消化瞭解了，我建議大家看一篇基本的css語法縮寫(沒錯，也是我寫的!!)，這兩篇看完之後，我相信應該可以看懂大多數的css語法了！

最後的最後，老話一句~，如果有寫錯或是不懂的地方，歡迎留言給我

,
]]> http://blog.mukispace.com/easy-to-learn-css-iii/feed/ 11 教學 | CSS選擇器概略說明 http://blog.mukispace.com/css-selectors/ http://blog.mukispace.com/css-selectors/#comments Mon, 09 Feb 2009 10:35:00 +0000 muki http://blog.mukispace.com/?p=1198 之前在寫css教學的時候，在「不可不知篇」裡頭曾經提到id以及class的差異。其實css選擇器的範圍是很廣泛的，id.class這種屬性只佔了其中一小部分，為了怕大家以為css裡頭只有id.class的存在，所以我特地將css 2.1版的選擇器做一個概略說明，希望讀完這篇大家對於css的運用能更加靈活

繼續閱讀 »

]]> 之前在寫css教學的時候，在「不可不知篇」裡頭曾經提到id以及class的差異。其實css選擇器的範圍是很廣泛的，id.class這種屬性只佔了其中一小部分，為了怕大家以為css裡頭只有id.class的存在，所以我特地將css 2.1版的選擇器做一個概略說明，希望讀完這篇大家對於css的運用能更加靈活

根據W3C網站公佈的css 2.1 selector syntax可以得知目前有10類不同的選擇器：

1.Universal selector (通用選擇器)

使用字元「*」，代表此張網頁都要套用*{}底下的設定。

2.Type selectors (屬性選擇器)

在html文件裡，他的標籤可以直接當做css裡頭的選擇器。例如<h1>...</h1>，<p>...</p> 等等，可以直接寫成:
h1 {color:red;}
p{color:black;}

3.Descendant selectors (後代選擇器)

當某一段文字被兩個以上的選擇器包圍時，我們可以用這些選擇器彼此之間的關係來替文字做更進一步的樣式化。
<style>
h1 a {color:red} /*選擇器依序從外而內，單獨設定在h1底下的a選擇器。兩個選擇器之間用空白鍵做分隔。*/
a {color:black}
</style>
<div>
<h1><a href="http://xxx">同時被h1以及a這兩個選擇器包圍，我的連結顏色為紅色</a></h1>
<a href="http://xxx">只被a這個選擇器包圍，我的連結顏色為黑色<;/a>
</div>

4.Child selectors (子選擇器)

子選擇器有一種繼承的概念，你可以把它想成父子的關係，子一定要緊緊跟著父跑，要是中間插入任何一個元素，就不是父子關係了。 而子選擇器我們使用「>」符號，舉例如下:
<style>
div > #child {color:red}
</style>
<div>
<p>
<span id="child">我和div中間有個p，所以不會變色</span>
</p>
</div>

<div>
<span id="child">我緊緊跟著div，所以會變色</span>
</div>

5.Adjacent sibling selectors (相鄰選擇器)

如果說子選擇器是上下垂直的繼承概念，那麼相鄰選擇器就是左右平行的對等概念，而他使用的符號是「+」，只是我們很少用到這個寫法，其中一個原因是IE瀏覽器尚未支援。

我個人認為，相鄰選擇器使用的最好時機在於要對同個標籤進行不同的設置。假設今天我有三個段落都要使用h1標籤，可是我希望三個段落擁有不同的顏色(黑色、紅色、綠色)，我可以這樣寫:
<style>
h1 + h1 {color:red}
h1 + h1 + h1 {color:green}
</style>
<h1>段落一</h1>
<h1>段落二</h1>
<h1>段落三</h1>

6.Attribute selectors (屬性選擇器)

顧名思義，就是可以針對標籤裡頭的屬性做更進一步的修改。屬性選擇器總共有4種類型，分別為:
h2[class]  //符合所有含class的h2標籤即可
h2[class=title]  //符合含class=title的h2標籤
h2[class~=title]  //只要calss裡頭有包含title文字的h2標籤即可
h2[class|=title]  //class的開始值必須為title的h2標籤

7.Class selectors (Class選擇器)

使用「.」符號做宣告，後頭的屬性可以自己命名，一張網頁可以出現多個相同的class屬性值。

<style>
.value{color:red}
</style>
<div class="value">紅色文字</div>

8.ID selectors (ID選擇器)

使用「#」符號做宣告，後頭的屬性值可以自己命名，但是一張網頁僅能出現一次相同的ID (ID為唯一)

<style>
#value{color:red}
</style>
<div id="value">紅色文字</div>

9.Pseudo-classes (偽類)

偽類選擇器也許大家很少聽過，但是一說到a:link、a:visited、a:hover、a:active這四個css應該就不陌生了吧，這四個選擇器都是屬於偽類的一種喔。另外還有 :first-child ,  :foucs ,  :lang 這三種。

X:first-child 符合父標籤中的第一個X標籤者才會有效用
<style>
p:first-child { color:red}
</style>
<P> 此段會變紅色</p>
<P> 此段不會變色</p>

X:lang(E) 符合lang為E的X標籤
<style>
p:lang(fr) {color:red}
</style>
<body>
<p lang="fr">紅色</p>
<p lang="en">不會變色</p>
</body>

10.Pseudo-elements (偽元素)

偽元素包含 :first-line 以及 :first-letter。

X:first-line 符合X標籤的第一行都會受影響
<style>
p:first-line {color:red}
</style>
<body>
<p>第一行變紅色<br />
第二行不變色</p>
</body>

X:first-letter 符合X標籤的第一個字母會受影響
<style>
p:first-letter {color:red}
</style>
<body>
<p>首字變色<br />第二行</p>
</body>

(IE瀏覽器沒有支援所有的偽類以及偽元素)

CSS選擇器到此告一段落。這篇文章寫了兩天，一直在想要怎麼寫大家才可以更瞭解css，所以有看到最後的朋友，請受我一拜(笑)。因為這篇文章旨在概略說明，我只講大觀念，更細的東西幾乎都跳過了，所以如果你們希望哪一塊可以講的更詳細，請在底下投票讓我知道，我會優先考慮細講那一部分:)

Note: There is a poll embedded within this post, please visit the site to participate in this post's poll. ,
]]> http://blog.mukispace.com/css-selectors/feed/ 22 語法 | 基本的css語法縮寫 http://blog.mukispace.com/css-shorthand/ http://blog.mukispace.com/css-shorthand/#comments Tue, 03 Feb 2009 11:54:52 +0000 muki http://blog.mukispace.com/?p=1148 縮寫css語法不但可以減少css檔案的大小，讓讀取速度加快，同時也更方便閱讀。會想寫這篇文章是基於前篇介紹CSS整形與優化工具的關係，怕大家優化後也不清楚到底有什麼更動？或者是怕css出問題而不敢優化，所以在這邊我整理了幾個基本的css縮寫給大家，希望以後大家在寫css時能更瞭解他的原理。

繼續閱讀 »

]]> 縮寫css語法不但可以減少css檔案的大小，讓讀取速度加快，同時也更方便閱讀。會想寫這篇文章是基於前篇介紹CSS整形與優化工具的關係，怕大家優化後也不清楚到底有什麼更動？或者是怕css出問題而不敢優化，所以在這邊我整理了幾個基本的css縮寫給大家，希望以後大家在寫css時能更瞭解他的原理。

CSS語法縮寫 - 顏色

使用16進制的色碼，假設這6個數字裡頭每2個數字相同，就可以進行縮寫。舉例如下：
#000000 → #000
#880000 → #800
#aabbcc → #abc

CSS語法縮寫 - 區塊邊界

這邊我們最常應用的就是margin以及padding兩個屬性。根據自定邊界位置的不同，由簡入繁總共有四種寫法：
margin: 1px; (所有邊界都是1px)
margin: 3px 4px; (上&下邊界是3px，左&右邊界是4px)
margin: 3px 1px 4px; (上邊界是3px，左&右邊界是1px，下邊界是4px)
margin: 3px 4px 1px 2px; (上邊界3px，右邊界4px，下邊界1px，左邊界2px)
透過這個原理我們可以發現到，「上下」為一組，「左右」為一組。所以如果邊界剛好是同樣的單位可以將他們合併起來，但要特別注意的是，如果你的上&下邊界相同，左&右不相同，還是請乖乖寫四次吧！至於這四次的位置擺放要如何快速記憶呢？請大家把它想成一個順時針的循環，剛好就是上右下左。

CSS語法縮寫 - 0

正統的css語法裡頭，所有的單位都不能省略，因為css裡不只一個單位，有px、pt、em、%...等等。但是0這個數字非常的奇妙，只有0後面可以不用加任何單位，因為寫不寫都沒影響。

只是有時候因為習慣問題，有的人還是會順手在0後面加單位，如果次數一多，也會佔幾kb，既然我們目的就是要縮減css語法，所以還是建議大家不加單位。

CSS語法縮寫 - 同屬性

只要是同個屬性都可以加他們的語法合併在一起，像是border(邊框)、background(背景)、list(項目)

1.border的合併：
border-width: 1px;
border-style: solid;
border-color: #000;
合併後： border: 1px solid #000;

2.background的合併：
background-image: url("images/muki.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
backgruond-color: #fff;
合併後： background: #fff  url("images/muki.gif") no-repeat fixed top left;
因為background的屬性很多，所以我強烈推薦要將他們做合併，否則你要設定多個背景會拖得很長。而合併後有的屬性也可以省略不打，省略的屬性會採系統默認值。

background默認值為：
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
color: transparent

3.list的合併：
list-style-type: square;
list-style-position: inside;
list-style-image: url("images/muki.gif");
合併後：list-style: square inside url("images/muki.gif");

這邊列舉三個同屬性的合併，假設下次你碰到有類似的同屬性狀況，就可以嘗試將他們做合併喔^^

小結

以上都是基本的css縮寫，我想大家最常用到的也是這幾個語法，所以應該是夠大家使用了!!其實把握一個重點，就是「同屬性的幾乎都可以進行縮寫」，多加嘗試就會找到更多的縮寫樂趣唷~

,
]]> http://blog.mukispace.com/css-shorthand/feed/ 6 教學 | 輕鬆上手CSS(II) - 叫叫ABC篇 http://blog.mukispace.com/easy-to-learn-css-ii/ http://blog.mukispace.com/easy-to-learn-css-ii/#comments Wed, 21 Jan 2009 03:38:42 +0000 muki http://blog.mukispace.com/?p=1033 建議你先閱讀：

1.學css前要準備什麼?

2.輕鬆上手css(I) - 不可不知篇

相信大家對於「叫叫ABC」這五個字都非常的熟悉，甚至以前也有進行過相關的訓練。只是這次的「叫叫ABC」不是拿來應用於急救上，而是當成CSS教學的一部分。我想很多人應該都會對此抱持疑問，不懂「叫叫ABC」怎麼可以跟CSS做結合吧！歡迎繼續看下去，就知道其中奧妙囉~

繼續閱讀 »

]]> res1 建議你先閱讀：
1.學css前要準備什麼?
2.輕鬆上手css(I) - 不可不知篇

相信大家對於「叫叫ABC」這五個字都非常的熟悉，甚至以前也有進行過相關的訓練。只是這次的「叫叫ABC」不是拿來應用於急救上，而是當成CSS教學的一部分。我想很多人應該都會對此抱持疑問，不懂「叫叫ABC」怎麼可以跟CSS做結合吧！歡迎繼續看下去，就知道其中奧妙囉~

我這次要跟大家分享的CSS概念非常的簡單，就是如何在靜態以及動態的網頁上呼叫css，還有對自己寫的css要抱持怎樣的態度。

★叫(自定選擇器)

要呼叫css的方法有兩種，同樣的沒有說哪種方法比較好，端看大家的撰寫習慣。第一種呼叫方式就是直接在網頁裡頭呼叫css。舉例如下：

紅色字體，13號大

間距4像素
行距200%


重點在於css要被＜style＞包覆著

★叫(載入外部css檔案)

這個方法比較多人在使用，因為我們只要修改一個css檔案，就可以同時修改許多網頁的外觀樣式。前提當然是這些網頁都要引用這份css檔案啦!!

而載入外部css我們又可以分成兩種方式：

一、直接連結樣式表

1.舉例來說，假設我現在要製作一份css檔案，先將以下語法複製到記事本

.aa { /*class=aa*/
color: red; /*字體顏色*/
font-size: 13px; /*字體大小*/
}

#bb { /*id=bb*/
letter-spacing: 4px; /*文字間距*/
line-height: 200%; /*文字行距*/
}

接著存檔為style. (副檔名必須為.css)

仔細觀察，但第一種呼叫方式不同的地方在於少了＜style type="text/css"＞..＜/style＞的包覆。只要你將css存成一個獨立的檔案，都不需要有style標籤的包覆。

2.接著在要呼叫style.css的網頁裡頭加入以下語法：
(此語法需放置在＜head＞...＜/head＞標籤裡頭唷)

假設現在有三張網頁都同時載入了這個style.css的檔案，只要你修改了這份css，三張網頁都會同時變更，在效率上也大福提昇了許多。

二、匯入樣式表

同樣也是先做好一個style.css的檔案，接著在要呼叫style.css的網頁裡頭加入以下語法：
(同樣放置在＜head＞...＜/head＞標籤裡)


@import總共有三種寫法，看自己習慣哪一種就用哪種吧。

而@import這個語法有一個特別的地方，就是他除了可以在網頁裡頭使用，也可以在css檔案裡頭使用，亦即可以在css裡再呼叫一個css檔案。

★A(Active啟動)

以上步驟完成後，請打開瀏覽器觀看效果。雖然簡易的css不太會有錯誤，但是css可不是上傳之後就萬事太平阿！如果碰到複雜的圖層、定位這些css，可能就會有跑位的問題。所以寫好css記得一定要啟動觀看他的效果，邊寫邊修正以達到最好的視覺效果。

假設你是使用FireFox瀏覽器，可以下載Web Developer或者是Firebug這兩款功能強大的css在線編輯來輔助你編輯css。

★B(Believe相信)

要對自己寫出來的css有信心，不要因為一時的挫折就放棄學習css。他們不是什麼刁鑽艱深的語言，你唯一需要的就是不斷的練習、練習，以及練習。

★C(Css)

「叫叫ABC」：網頁或是連結呼叫後，請啟動，並且對自己所撰寫的css有信心！

line

這就是今天我想跟各位分享的「叫叫ABC」，其實眼尖的人都應該瞭解到重點在於前面的兩種呼叫方式。之前就在想說應該要先把怎麼呼叫css寫出來讓大家瞭解，可是光寫這樣好像又過於貧乏，恰巧腦海閃過了「叫叫ABC」，所以就張冠李戴將這個口訣移植過來XDD

當然也希望透過這個簡單的「叫叫ABC」可以讓大家對呼叫css的方式更加的熟悉瞭解。最後如果有任何問題也歡迎提出讓我們一起做討論唷^^

,
]]> http://blog.mukispace.com/easy-to-learn-css-ii/feed/ 13 教學 | 輕鬆上手css(I) - 不可不知篇 http://blog.mukispace.com/easy-to-learn-css-i/ http://blog.mukispace.com/easy-to-learn-css-i/#comments Sun, 28 Dec 2008 02:45:35 +0000 muki http://blog.mukispace.com/?p=855 我在12月初有發了一篇「學css前要準備什麼?」，如果你已經閱覽過這篇文章也準備好了，就讓我們跨出學習css的第一步吧!!!

如果你開啟了自己寫css的工具(例如記事本、DreamWeaver)，那我要在這邊跟你說聲抱歉，請先默默的將他縮小或關閉。因為對初學者來說最重要的還是概念，請先別一頭熱的想要開始寫css，否則會適得其反唷。

當然，假使你已經不是初學者，或者你有過人的慧根，這篇文章也可以選擇跳過不看啦，因為今天寫的這一篇文章完全是針對css初學者。

繼續閱讀 »

]]>

我在12月初有發了一篇「學css前要準備什麼?」，如果你已經閱覽過這篇文章也準備好了，就讓我們跨出學習css的第一步吧!!!

如果你開啟了自己寫css的工具(例如記事本、DreamWeaver)，那我要在這邊跟你說聲抱歉，請先默默的將他縮小或關閉。因為對初學者來說最重要的還是概念，請先別一頭熱的想要開始寫css，否則會適得其反唷。

當然，假使你已經不是初學者，或者你有過人的慧根，這篇文章也可以選擇跳過不看啦，因為今天寫的這一篇文章完全是針對css初學者。

★ 你知道css不能獨立生存嗎?

(Cascading Style Sheets)有一個很難記的中文名詞：串樣式列表，它是W3C經定義，用來替html以及xml這種檔案添加樣式的語言。

因此他必須要搭配html才可以產生出一張張動人的網頁，只有css的檔案充其量只是一堆語言，不具任何意義。(你硬要說他有參考價值的意義我也不反對啦:P)

★ 你知道css和html之間的關聯嗎?

首先，這邊有一張很簡單的html網頁語法

我是nav(導覽列)
我是muki
muki space*
http://blog.mukispace.com




接著以下是利用剛剛提供的html語法製成的簡易網頁圖：

以第四行< div id="header" >我是header< /div >
為例，「我是header」這段話是html的文字，他會直接秀在網頁上，而我們都知道在html裡頭，透過< >標記的標籤是不會顯示在網頁上面。

< div id="header" >以及< /div >
這段html語言的意思就是：我是一個id叫做header的圖層，圖層裡頭包含我是header這句話

我們可以把div(圖層)想像成是一個區塊，這個區塊的長寬可以隨你的意思做調整，而包含在這個區塊裡頭的內容就是靠< div >..< /div > 這個標籤做設置。如果想要針對id叫做header的這個圖層區塊做修改，可以在css裡頭這麼寫

#header {
background: #ccc; /*設置區塊的背景顏色*/
font-size: 16px; /*設置區塊裡的文字大小*/
}

「id」在css語言中不叫做「id」，他有另外一個稱呼叫做「#」
同理而言，「class」在css語言中則是叫做「.」

而css就是透過在html裡頭有標記的id=xxx 以及 class=xxx 來做設定的。

★ 你知道id和class有什麼不同嗎

其實在html裡頭設置css的標籤自由度非常的高，他不像html語言一樣，font代表的是字體、color代表的是顏色，每個標籤都有規定的意思不能更改。
css標籤他完全可以依照你自已的選擇做設定，這個區塊你想取名叫做muki，那個區塊想叫做space，all right~沒人會反對。如果真要說什麼規定，就是他的標籤只能用英文來命名吧:P

假使還要再說一項規定，就要談到id以及class的差別之處了。

id=header ：這個header在一張網頁裡頭只能出現一次(這邊指的網頁是從html開始到結束，不是像php那種include的包法)
class=header：這個header在一張網頁裡頭可以出現無數次

會撰寫java script的朋友這邊也要特別注意，id可以被js裡頭的GetElementByID 函數所運用，class則不行。
最後要提醒大家一點，在css裡頭大小寫是有差別的。你今天寫id=header以及id=Header 這是兩種不同的屬性選擇器，請多多注意唷!!!

★ 你知道div以及span的差異嗎

同樣的今天我寫了一張html網頁：

div1
div2

span1
span2


以下是呈現出來的網頁效果：

簡單的一個概念：使用span他不會有換行的效果，所以我們可以用span來做更細部的css修改。

如果還是不太清楚，這邊再舉一個例子：

span文字測試
div文字

測試


呈現出來的效果：

span文字測試 (不會換行)

div文字
測試 (他會當成兩個區塊所以會換行)

★ 瀏覽器兼容

網路上有非常多的瀏覽器，IE6、IE7、Firefox、Opera、Google..等等。我們都希望自己的網頁在每個瀏覽器瀏覽時都是最漂亮的、最符合自己理想的。無奈的是有的瀏覽器並不會乖乖照著W3C的規範去走，偏偏他又是目前市佔率最高的瀏覽器，那這該如何是好呢？

其實每個css designer都會碰到這樣的困擾，包含我自己也還在學習當中，所以如果你有志設計css樣板給大家使用，就不得不正視這個問題!! 我的建議是多裝幾套瀏覽器測試一下效果，勤做修改吧！另外就是基礎一定要穩，別被每種瀏覽器給嚇著亂了陣腳唷。

那...今天報告到此結束，謝謝大家:)

,
]]> http://blog.mukispace.com/easy-to-learn-css-i/feed/ 28 教學 | 學css前要準備什麼? http://blog.mukispace.com/prepare-for-learning-css/ http://blog.mukispace.com/prepare-for-learning-css/#comments Sun, 07 Dec 2008 04:29:24 +0000 muki http://blog.mukispace.com/?p=590
做專題之後，陸陸續續會聽到同學也想學習css，互相研究
加上有的朋友會問我該怎麼學習css，如何上手?該從哪些資料開始著手?
這邊簡單跟大家分享我的經驗，也希望對想要學習css的人有所幫助:)
繼續閱讀 »

]]>
做專題之後，陸陸續續會聽到同學也想學習css，互相研究
加上有的朋友會問我該怎麼學習css，如何上手?該從哪些資料開始著手?
這邊簡單跟大家分享我的經驗，也希望對想要學習css的人有所幫助:)

★ 學css要買相關書籍嗎??

其實這一點並沒有正確的答案，我想端看你自己學習的狀況來判定。
大家可以先試著回想自己在學習其他軟體、語言的時候，是買市面上的書籍回家研究呢？還是在網路上找大家的教學來學習？
要看你自己習慣哪種模式，就跟著一貫的學習方式走吧。

另外一種建議方式，我是認為你可以先想想你是否為「css完全初學者」?
如果以下10個問題，你有7項都符合你的狀態，那你就是css完全初學者。

1.如果不查資料，我不知道css的全名是什麼?
2.在我的印象裡頭，css就等於是讓排版美觀的意思。
3.我不懂html，也不懂怎麼把html還有css兜在一起。
4.看到很漂亮的blog(ex.muki :p)，我會發自內心的讚嘆。卻不會去思考blogger如何建構他的排版。(意思就是我不會去想他怎麼分割、怎麼寫...就只是單純欣賞.羨慕)
5.如果不查資料，我不懂margin以及padding的差別。
6.我一直不能理解標籤怎麼控制我的版面
7.打開一份css文件，我不懂要從何開始學習、觀看，甚至修改。
8.如果我成功的修改了字型大小、顏色還有超連結的狀態，我會覺得自己很厲害。
9.給我一份完全沒有css標籤的html檔案，我沒辦法獨力將他加上標籤、搭配css呈現出來。
10.我真的很想學css，可是我不知道從何學起。

測驗結束，如果你符合「css完全初學者」。
那我會建議你買一本書，但是這本書一定要從頭開始把整個css的架構都講的很清楚，讓你可以從基本的概念學起。

★ muki有沒有推薦的書籍??

這邊要跟大家說聲抱歉，我只買過一本實體書籍：「FrontPage2000」，其他html以及css都是從網路上自學而來。
所以我並沒有買過相關書籍，也無從推薦你們哪本比較好。
建議如果要買書的朋友，可以先問問週遭css學習者有沒有覺得不錯的書？
但最重要的是，希望大家可以親自到實體書店走一趟，翻翻每本書的內容，看哪一本的編排最適合你。
不過只是聽了朋友的推薦就衝動買下來，到時候如果不喜歡書本的解說、或者覺得內容太難，就欲哭無淚囉~
res1 這邊有Carrie推薦的幾本css、html書籍，大家可以去看看

★ 我要準備什麼工具??

假設你買好了書(或者從網路上蒐集到教學資訊)，你可能會躍躍欲試，馬上就要開始寫css。
但是你可能會發現無從下手？會不會因為你不知道要用什麼工具呢？
首先我們要知道一個概念，css這個文件他無法單獨在瀏覽器中讀取，就算讀到也只是文字而已。css必須搭配html才可以呈現他的效果。

我常常拿大家熟悉的「人」來做例子。
今天你要出門，你一定要穿衣服才能出門吧!!!
「裸體的你、什麼都沒穿的你」就是html
「穿在你身上的衣服、配件」就是css
要搭配衣服()穿上自己(html)的身上，才可以有美麗的效果。
所以說任何的美化一定要搭配一個實體的東西，否則就等於0。

講到這裡，相信大家應該都懂了。

你的首要工具(知識)，就是你一定要懂基礎的html，否則免談。
如果你真的不懂，可能你要買的書籍就不是純粹的css，而是要搭配html的css書籍。

假設你會基礎的html，要開始學習css，這時候你的工具選擇有兩種方式：
1.用網頁編輯器的軟體輔助你使用css (ex. DreamWeaver.FrontPage)，網路上也有許多是小型免費的網頁編輯器軟體可供下載，大家也可以用用看。
2.用文字編輯器的軟體輔助你使用css (ex. NotePad.Emeditor.UltraEdit)。

優點 缺點
網頁編輯器 快速上手，方便 檔案大
文字編輯器 檔案小不佔資源 要一個字一個字的輸入

看完這個「超簡易」的優缺表，相信大家會選擇使用網頁編輯軟體吧
我自己也是推薦大家使用網頁編輯的軟體(雖然我是用文字編輯)
因為對初學者來說，大家不可能都把每一段css背的很熟，靠軟體輔助慢慢學習會比較好。

★ 開始上手css

最後，有了好的教學書籍，有了很棒的輔助軟體，muki就要歡迎你來到css的世界囉!!
一開始你會學的很愉快，因為css普遍來說並不難。
但是當你進入了零的領域 「float的領域」，可能會有很嚴重的挫敗感。
不過請不要氣餒，因為過了這一段前途就是美好的啦XD!!!

css不是一蹴可及的東西，他需要不斷的練習、學習，你才可以將他運用自如。
而且css一直在進化，我們都需要不斷上網學習新知識，才可以讓自己的網頁排版功力一直進步唷XD。

☆延伸教學閱讀

1. 輕鬆上手css(I) - 不可不知篇

,
]]> http://blog.mukispace.com/prepare-for-learning-css/feed/ 29