【教學】分享9個網頁製作常用技巧

作者：佚名類型:轉載來源: 網頁教學網

 

本篇總結了一些css常用技巧，為網站重構打下基礎，但願您能學到一點有用的東西。

一、使用css縮寫

使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫的主要規則請參看《css基本語法》。

二、明確定義單位，除非值為0

忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以只寫;100，但是在CSS中，你必須給一個準確的單位，比如：" width:100em。只有兩個例外情況可以不定義單位：行高和0值。除此以外，其他值都必須緊跟單位，注意，不要在數值和單位之間加空格。

三、區分大小寫

當在XHTML中使用CSS，CSS裡定義的元素名稱是區分大小寫的。為了避免這種錯誤，我建議所有的定義名稱都採用小寫。

class和id的值在HTML和XHTML中也是區分大小寫的，如果你一定要大小寫混合寫，請仔細確認你在CSS的定義和XHTML裡的標籤是一致的。

四、取消class和id前的元素限定

當你寫給一個元素定義class或者id，你可以省略前面的元素限定，因為ID在一個頁面裡是唯一的，鴆las s可以在頁面中多次使用。你限定某個元素毫無意義。例如：

div#content { /* declarations */ } 
fieldset.details { /* declarations */ }

可以寫成

#content { /* declarations */ } 
.details { /* declarations */ }

這樣可以節省一些字節。

五、默認值

通常padding的默認值為0，background-color的默認值是transparent。但是在不同的瀏覽器默認值可能不同。如果怕有衝突，可以在樣式表一開始就先定義所有元素的margin和padding值都為0，像這樣：

* { 
margin:0; 
padding:0; 
}

六、不需要重複定義可繼承的值

CSS中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經在父元素中定義過的，在子元素中可以直接繼承，不需要重複定義。但是要注意，瀏覽器可能用一些默認值覆蓋你的定義。

七、最近優先原則

如果對同一個元素的定義有多種，以最接近(最小一級)的定義為最優先，例如有這麼一段代碼

Update: Lorem ipsum dolor set

在CSS文件中，你已經定義了元素p，又定義了一個classupdate

p { 
margin:1em 0; 
font-size:1em; 
color:#333; 
} 
.update { 
font-weight:bold; 
color:#600; 
}

這兩個定義中，class="update將被使用，因為class比p更近。你可以查閱W3C的《" Calculating a selector's specificity》 了解更多。

八、多重class定義

一個標籤可以同時定義多個class。例如：我們先定義兩個樣式，第一個樣式背景為#666；第二個樣式有10 px的邊框。

.one{;background:#666;} 
.two{border:10px solid #F00;}

在頁面代碼中，我們可以這樣調用

＜div class="one" two＞＜/div＞

這樣最終的顯示效果是這個div既有#666的背景，也有10px的邊框。是的，這樣做是可以的，你可以嘗試一下。

九、使用子選擇器(descendant selectors)

CSS初學者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節約大量的class定義。我們來看下面這段代碼：

＜div id="subnav＞" 
＜ul＞
＜li class="subnavitem＞" ＜a href=# class="subnavitem＞"Item 1＜/a＞＜/li＞＞
＜li class="subnavitemselected＞" ＜ a href=# class="subnavitemselected＞" Item 1＜/a＞ ＜/li＞
＜li class="subnavitem＞" ＜a href=# class="subnavitem＞" Item 1＜/a＞ ＜/li＞
＜ /ul＞
＜/div＞

這段代碼的CSS定義是：

div#subnav ul { /* Some styling */ } 
div#subnav ul li.subnavitem { /* Some styling */ } 
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } 
div#subnav ul li .subnavitemselected { /* Some styling */ } 
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代碼

＜ul id="subnav＞" 
＜li＞ ＜a href=#＞ Item 1＜/a＞ ＜/li＞
＜li class="sel＞" ＜a href=#＞ Item 1＜/a＞ ＜/li ＞
＜li＞ ＜a href=#＞ Item 1＜/a＞ ＜/li＞
＜/ul＞

樣式定義是：

#subnav { /* Some styling */ } 
#subnav li { /* Some styling */ } 
#subnav a { /* Some styling */ } 
#subnav .sel { /* Some styling */ } 
#subnav .sel a { /* Some styling */ }

用子選擇器可以使你的代碼和CSS更加簡潔、更加容易閱讀。

[推到噗浪]

【教學】如何在網頁中插入CSS樣式表

作者：greengnn類型:轉載來源: 藍色理想

 

本例為CSS入門系列教程，在這一課中我們將學習如何在網頁中插入CSS樣式表，主要學習在頁面中插入鏈入外部樣式表、內部樣式表、導入外表樣式表和內嵌樣式的四種方法，另外作者還講解了多重樣式表的疊加的運用以及如何在xml中插入CSS，希望能給對網頁製作感興趣的朋友帶來幫助~~

CSS入門教程之如何在網頁中插入CSS樣式表

前面我們了解了CSS的語法，但要想在瀏覽器中顯示出效果，就要讓瀏覽器識別並調用。當瀏覽器讀取樣式表時，要依照文本格式來讀，這裡介紹四種在頁面中插入樣式表的方法：鏈入外部樣式表、內部樣式表、導入外表樣式表和內嵌樣式。

1. 鏈入外部樣式表

鏈入外部樣式表是把樣式表保存為一個樣式表文件，然後在頁面中用<link>標記鏈接到這個樣式表文件，這個<link>標記必須放到頁面的<head>區內，如下：

<head> 
…… 
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all"> 
……  
</head>

上面這個例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=”stylesheet”是指在頁面中使用這個外部的樣式表。type=”text/css”是指文件的類型是樣式表文本。href=”mystyle.css”是文件所在的位置。media是選擇媒體類型，這些媒體包括：屏幕，紙張，語音合成設備，盲文閱讀設備等。

一個外部樣式表文件可以應用於多個頁面。當你改變這個樣式表文件時，所有頁面的樣式都隨之而改變。在製作大量相同樣式頁面的網站時，非常有用，不僅減少了重複的工作量，而且有利於以後的修改、編輯，瀏覽時也減少了重複下載代碼。

樣式表文件可以用任何文本編輯器（例如：記事本）打開並編輯，一般樣式表文件擴展名為.css。內容是定義的樣式表，不包含HTML標記，mystyle.css這個文件的內容如下：

hr {color: sienna} 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")} 
/*定義水平線的顏色為土黃；段落左邊的空白邊距為20像素；頁面的背景圖片為images目錄下的back40.gif文件*/

2. 內部樣式表

內部樣式表是把樣式表放到頁面的<head>區裡，這些定義的樣式就應用到頁面中了，樣式表是用<style>標記插入的，從下例中可以看出<style>標記的用法：

<head> 
…… 
<style type="text/css"> 
hr {color: sienna} 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")} 
</style> 
…… 
</head>

注意：有些低版本的瀏覽器不能識別style標記，這意味著低版本的瀏覽器會忽略style標記裡的內容，並把style標記裡的內容以文本直接顯示到頁面上。為了避免這樣的情況發生，我們用加HTML註釋的方式（<!--註釋-->）隱藏內容而不讓它顯示：

<head> 
…… 
<style type="text/css"> 
<!-- 
hr {color: sienna} 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")} 
--> 
</style> 
…… 
</head>

3.導入外部樣式表 

導入外部樣式表是指在內部樣式表的<style>裡導入一個外部樣式表，導入時用@import，看下面這個實例：

<head> 
…… 
<style type=”text/css”> 
<!-- 
@import “mystyle.css” 
其他樣式表的聲明
--> 
</style> 
…… 
</head>

例中@import “mystyle.css”表示導入mystyle.css樣式表，注意使用時外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導入外部樣式表輸入方式更有優勢。實質上它相當於存在內部樣式表中的。注意：導入外部樣式表必須在樣式表的開始部分，在其他內部樣式表上面。

4. 內嵌樣式

內嵌樣式是混合在HTML標記裡使用的，用這種方法，可以很簡單的對某個元素單獨定義樣式。內嵌樣式的使用是直接將在HTML標記裡加入style參數。而style參數的內容就是CSS的屬性和值，如下例：
  

<p style="color: sienna;margin-left: 20px;"> 
這是一個段落
</p> 
<!--這個段落顏色為土黃，左邊距為20像素-->

在style參數後面的引號裡的內容相當於在樣式表大括號裡的內容。
注意： style參數可以應用於任意BODY內的元素（包括BODY本身），除了BASEFONT、PARAM和SCRIPT。

5. 多重樣式表的疊加

上一章裡我們已經提到樣式表的層疊順序，這裡我們討論插入樣式表的這幾種方法的疊加，如果在同一個選擇器上使用幾個不同的樣式表時，這個屬性值將會疊加幾個樣式表，遇到衝突的地方會以最後定義的為準。例如，我們首先鏈入一個外部樣式表，其中定義了h3選擇符的color 、text-alig和font-size屬性：

 h3 
{ 
color: red; 
text-align: left; 
font-size: 8pt; 
} 
/*標題3的文字顏色為紅色；向左對齊；文字尺寸為8號字*/

然後在內部樣式表裡也定義了h3選擇符的text-align和font-size屬性：

h3 
{ 
text-align: right; 
font-size: 20pt; 
} 
/*標題3文字向右對齊；尺寸為20號字*/

那麼這個頁面疊加後的樣式就是：

color: red; 
text-align: right; 
font-size: 20pt; 
/*文字顏色為紅色；向右對齊；尺寸為20號字*/

字體顏色從外部樣式表裡保留下來，而對齊方式和字體尺寸都有定義時，按照後定義的優先而依照內部樣式表。注意：依照後定義的優先，所以優先級最高的是[s]內嵌樣式[/s]，[s]內部樣式表[/s]高於[s]導入外部樣式表[/s]，[ s]鏈入的外部樣式表[/s]和[s]內部樣式表[/s]之間是最後定義的優先級高。

如何在xml中插入CSS

A brief CSS2 tutorial for XML——翻譯自Cascading Style Sheets, level 2

CSS可以被應用​​於任何形式的結構化文檔，比如可擴展性標記語言XML，因為製作者可以自定義沒有任何表現的標記，比起HTML，XML的表現依賴於更多的樣式。

下面是一個XML的片段。

<ARTICLE> 
<HEADLINE>Fredrick the Great meets Bach</HEADLINE> 
<AUTHOR>Johann Nikolaus Forkel</AUTHOR> 
<PARA> 
One evening, just as he was getting his 
<INSTRUMENT>flute</INSTRUMENT> ready and his 
musicians were assembled, an officer brought him a list of 
the strangers who had arrived. 
</PARA> 
</ARTICLE> 

為了讓XML文檔擁有普通的視覺效果，我們首先必須定義標籤元素的樣式是內嵌（inline-level）的還是塊級（block-level）的。

例子：

INSTRUMENT { display: inline }/*定義標籤樣式為內嵌元素*/ 
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }/*定義標籤樣式為塊級元素*/
 

如何將定義好的CSS應用到XML文檔中呢？使用下面這段代碼。

<?XML-stylesheet type="text/css" href="style.css"?>

為了讓這個XML片段有更好的視覺表現，下面是一個完整的CSS文件。

INSTRUMENT { display: inline;} 
ARTICLE, HEADLINE, AUTHOR, PARA { display: block ;} 
HEADLINE { font-size: 1.3em; } 
AUTHOR { font-style: italic; } 
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5 em; } 
ARTICLE{background:#f5f5f5;border:1px #eee solid;} 
INSTRUMENT{font-weight:bold;}

 

[推到噗浪]

【教學】10個最容易犯的HTML標籤錯誤

作者：佚名類型:轉載來源: 盒子UI

保持良好的代碼風格是每個Coder必學的課程,同樣在HTML設計的時候也要特別注意代碼的規範性,雖然說不規範的代碼不會直接造成嚴重的後果,但很有可能對用戶體驗造成一定的干擾,同時也會降低搜索引擎對網站的好感度.這份列表包含了10個最容易犯的HTML標籤錯誤,記下他們,能夠讓我們避免犯此常見錯誤,讓我們的HTML標籤符合語義,和標準的要求。

罪行1:把塊級元素放入了行內元素內

HTML 元素的表現方式不外乎就兩種:塊級和行內.每一個標籤都有默認的表現方式不是塊級就是行內.像div和p 就是塊級元素,他們用來形成文檔結構.行內元素只能在快級元素內.

罪行2: img 標籤沒有包含alt屬性

alt屬性是所有顯示在網頁中圖片的必須屬性,它能夠幫助人們知道這是什麼圖片.或者在網速比較慢的時候顯示圖片的含義是什麼.它的主要目的是,說明圖片的含義,想這樣的說明alt=”image”是很糟糕的.如果,有些圖片的確只是裝飾作用而已,那麼建議你寫成alt=”".

罪行3:在必要的時候沒使用list

罪行4：使用<b>和<i>顯示黑體字和斜體

可以用css樣式定義font-weight和font-style.如果必須在頁面中寫標籤的話,用<strong>或<em>標籤來替換.<b><i>的沒有任何語義可言,但是,為了更簡潔的頁面,還是選擇css定義樣式吧罪行5：使用太多<br/>

<br />換行標記只應該用於插入是在第一個文本流換行符敲到一個新行一個特別字了。它不應該被用來製造元素之間的差距，而是分裂成不同的段落，或調整的幅度CSS樣式的文本。罪行6:使用錯誤的

 Strikethrough 標籤

在昔日，<S>和<strike>允許用來定義網站文字。不過，現在他們被定義為不推薦使用的標籤 ,當他們任然可以有效果.現在用新的標記集- <del>和<ins>。來替換<s><strike> 罪行7:使用內聯樣式

css最重要的目的只是為了區分文檔和样式,如果,你把style寫到頁面裡面,那麼完全沒有css的作用可言.所以,記住把你的樣式放在它該放的位子。

罪行8: 把border添加到HTML中

罪行9: 沒有使用header標籤<h1>-<h6>

罪行10: 沒有語義的<blink> 或<marquee>

不被w3推薦，<blink>和<marquee> (閃動,滾動)標籤是純粹的醜陋。不要使用這個標籤,如果一定要用這樣的效果,相信,你會有其他更好的效果。

[推到噗浪]

如何寫出不會讓你頭疼的CSS?

為什麼我們的CSS變得一團糟——我們真的很容易陷入這樣的困惑中。有時這是一開始就馬虎編程的結果，有時是由於後期多重的附加代碼（hacks)和修改造成的。無論是哪種原因，這都不是無法避免的。寫出乾淨，超級可管理的CSS很簡單，只要你走對了路，你的代碼會更便於今後的維護和編輯。寫出更輕巧、更快並且更不會讓你頭疼的CSS，以下這10個技巧將會提高你這方面的能力。

1.保持條理性

像任何事情一樣，讓自己保持條理性（有組織）是值得的。採用清晰的結構，而不是隨心所欲地組織id和class（別想到啥就寫啥）。

這會有助於你在心裡記住CSS的級聯性，並讓你的樣式表能夠利用樣式繼承。

首先聲明最通用的item（id class或者是html element），接下來是稍微不那麼通用的……依此類推。這讓你的CSS能適當地繼承屬性，當需要的時候，重寫一條特殊的樣式會更容易。將來編輯CSS時也會更快，因為它遵循著一個易於閱讀的邏輯結構。

用一個對你來說最好使的結構，同時在心裡想著將來的編輯和其他開發人員。

• 重置和重寫
• 鏈接和字體
• 主佈局
• 二級佈局結構
• 表單元素
• 其他雜項

2.標題、日期和簽名

讓其他人知道誰寫了你的CSS，什麼時候寫的，以及如果有問題可以聯繫誰。在設計模板或主題時這非常的有用。

稍等片刻…那些色標數字是咋回事？多年以來，我發現，簡單列舉出我的樣式表裡常用的顏色，在初次開發和後期編輯時真的非常有幫助。

這節約了你打開Photoshop從設計圖裡吸一個顏色，或者在這個網站的風格指南（如果這個東東存在）裡查顏色。如果你需要那個特定的藍色的HTML代碼，只需要翻到註釋處複製它就行了。

3.搞一個模板庫

一旦你選定了用一個結構，剝掉所有不通用的並把文件存成一個CSS模板，以便將來使用。

你可以為多種用途保存多個版本：兩欄佈局、博客佈局、打印、移動等等…… Coda (OSX的編輯器)有一個優秀的Clips特性能讓你很簡單的做到這些。很多其他的編輯器也有類似的特性，不過甚至是一批簡單的文本文件也能很好地工作。

每次都從頭開始重寫每一個樣式表是很瘋狂的，特別是每個都是採用一樣的約定和方法。

4 有用的命名習慣

你會注意到上面我聲明了兩個列的id，我管他們叫col-alpha和col-beta，為什麼不叫col-left和col-right？請總是考慮到將來的編輯。

下一年你可能需要重新設計你的站點，把左邊的列移到右邊，你不該就為了調整位置而在HTML中重命名這個元素並在樣式表中重命名id。

當然，你可以就把左邊的列移動到右邊並且保留#col-left的id，但是那多讓人困惑？如果id是“左”，人們應該會希望它將一直在左邊。之後這沒為你留下太多空間去移動周圍的東西。

CSS的一個主要優點就是分離樣式和內容的能力。你可以完全不用碰HTML，只修改CSS，就能重設計站點，所以不要用限制性的名字弄髒了CSS。用更通用的命名習慣，並保持一致。

讓具體的位置或者樣式的詞語原理你的樣式和id，一個.link-blue同樣會讓你話費更的工作，或者在客戶要求你把那些藍色的鏈接修改成橙色的時候讓你的樣式變得真的很糟糕。

按照他們是什麼，而不是他們看起來的樣子為元素命名。例如，.comment-blue和.comment-beta比起來就不太通用了，.post-largefont比.post-title更局限一些。

5. 用連字符取代下劃線

比較老的瀏覽器可能對CSS中的下劃線支持不太好，或者完全不支持。為了更好的向後兼容，請養成使用連字符的習慣。用#col-alpha而不是#col_alpha。

6. 不要重複自己

用組合元素代替重新聲明樣式來盡可能的重用樣式。如果你的h1和h2都用同樣的字體大小、顏色和邊距，用逗號組合他們。

7. 優化為輕量級的樣式表

遵照上面的技巧，你能真的減少樣式表的體積。體積越小，加載越快，並且更易於維護更新。

刪掉那些不需要的，盡可能的用組合來合併樣式。小心使用封裝好的css框架，你很可能繼承了一大堆不會用到的東西。

另一個為css瘦身的快速技巧是：你不需要為0指定單位。如果一個margin設置為0，你不需要寫0px或者0em。0就是0，不需考慮丈量單位，css能夠明白。

8. 為Gecko編寫你的基本樣式，然後為Webkit和IE做調整

把你自己從排除故障的頭疼中拯救出來，先為Gecko瀏覽器（Firefox, Mozilla, Netscape, Flock, Camino)寫css。如果你的css在Gecko中工作得很好，它也很可能在Webkit（Safari, Chrome）和IE中也沒有問題。

9. 驗證

請使用W3C的免費CSS驗證。如果你遇到問題，你的佈局不像你想要的那樣工作，CSS驗證器會在指出錯誤方面給你很大的幫助。

10.保持屋內整潔

為特定瀏覽器寫的CSS分別放到各自獨立的樣式表，用Javascript／服務器端代碼或者條件註釋按需加載。用這個方法避免在主樣式表出現骯髒的CSS hacks。這將保持基本的CSS乾淨且易於管理。

[推到噗浪]

【教學】CSS 文字溢出 自動省略符號

過去在編寫有後台網站的網頁時，經常碰到會碰到後台輸入文字過多，造成前台版面的問題，因為常會用到這自動省略符號的語法。

text-overflow: ellipsis屬性僅是註解，當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢出時產生省略號的效果。還必須定義：強製文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣才能實現溢出文本顯示省略號的效果。

p {
      white-space: nowrap;
      width: 100%;                  /* IE6 需要定義宽度 */
      overflow: hidden;             
 
      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
   }

[推到噗浪]

免費的CSS網頁版型下載

現今的網頁設計主流該是HTML+CSS+JavaScript，
過去使用表格加上巢狀表格的呈現方式，會阻礙搜尋引擎到你的網站拜訪！
如果你的網站已稍具知名度，當然不用擔心。

但是，新建立的網站最迫切希望的就是被網友是用關鍵字找到，
在這方面，CSS的版面呈現因為都是使用文字，占了先天優勢。

所以，以下提供幾個CSS的網頁版型下載網站。

http://www.freecsstemplates.org/

http://ramblingsoul.com/

http://www.oswd.org/

http://www.free-css-templates.com/

[推到噗浪]

螞蟻的 CSS

提供許多CSS上的範例及應用，學習上可以多加利用參考，是很棒的教學網站。

http://ant4css.blogspot.tw/

[推到噗浪]

【分享】Portal 版面設計基礎說明

原作出處：http://blog.powercam.cc/help/folder/702

以下列出常用的樣式設定方式 (以 /* ... */ 標註者為說明文字):

1. 設定網誌背景 (圖片與顏色)
透過 body 內的 background 屬性設定，例如：
body { background:#000000; } /* 將背景設成黑色 */
body { background:url(圖片網址); } /* 將圖片網址設成背景 */

2. 設定網誌文字 (字型、大小與顏色)
透過 body 內的 font-family、font-size 與 color 屬性設定。例如：
body {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

3. 設定網誌位置 (置左、置中、置右)
透過 body 內的 text-align 屬性設定置左(left)、置中(center)、置右(right)。例如：
body { text-align: left;} /* 網頁置左 */

4. 設定標題圖片 (顏色、圖片)
透過 #banner 內的 background 屬性設定，來控制標題的顏色或圖片。例如：
#banner { background:#000000; } /* 將標題設成黑色 */
#banner { background:url(圖片網址); } /* 將圖片網址設成標題 */

5. 設定標題文字 (字型、大小與顏色)
透過 #bannerTitle 中 font-family、font-size 與 color 屬性設定。例如：
#bannerTitle {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

6. 設定副標題文字 (字型、大小與顏色)
透過 #bannerNote 中 font-family、font-size 與 color 屬性設定。例如：
#bannerNote {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

7. 設定標題大小 (長、寬)
透過 #banner 內的 height 與 width 屬性設定，來控制標題圖片的長與寬。例如：
#banner {
    width: 1000px;
    height: 100px;
}

8. 設定選單區塊圖片 (顏色、圖片)
透過 .navi 內的 background 屬性設定，變更選單區塊顏色或圖片。例如：
.navi { background:#000000; } /* 將連結圖設成黑色 */
.navi { background:url(圖片網址); } /* 將圖片網址設成連結圖 */

9. 設定選單區塊在滑鼠經過變換的圖片 (顏色、圖片)
透過 .naviOver 內的 background 屬性設定，變更選單區塊滑鼠經過時的顏色或圖片。例如：
.naviOver { background:#000000; } /* 將連結圖設成黑色 */
.naviOver { background:url(圖片網址); } /* 將圖片網址設成連結圖 */

10. 設定連結文字 (字型、大小與顏色)
更改背景後，連結文字可能因為顏色相近的關係看不太清楚，透過 a 中的 font-family、font-size 與 color  屬性設定變更。例如：
a:link { color:#0000FF; } /* 連結字體變藍色 */
a:visited { color:#00FF00; } /* 點擊連結過文字變成綠色 */
a:hover { color:#FF0000; } /*  滑鼠移動到連結時字體變紅色 */
a:active { color:#FFFFFF; } /* 執行中連結變白色 */

11. 設定側欄標題文字 (字型、大小與顏色)
透過 .menuBlockTitle 中加入 font-family、font-size 與 color 屬性設定。
例如：
.menuBlockTitle  {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

12. 設定側欄中非連結文字 (字型、大小與顏色)
透過 .menuBlockBody 中 font-family、font-size 與 color 屬性設定。例如：
.menuBlockBody {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

13. 設定 logo 位置
透過 #bannerTitle 中 left、top 的屬性設定，可改變上標題 logo 的位置。例如：
#bannerTitle { left:10px; top:10px; } /* 左上各平移10px */

14. 設定選單位置
透過 #navi 中的 left、top 的屬性設定，例如：
#navi { left:10px; top:10px; } /* 左上各平移10px */

15. 設定文章的標題文字 (字型、大小與顏色)
透過 .Subject 中 font-family、font-size 與 color 屬性設定。例如：
.Subject {
    font-family: Arial;
    font-size: 15px;
    color: #FF0000;
}

指定背景顏色
Tag: background-color
範例：
body { background-color: #000000 ;} /* 將背景設成黑色 */
指定背景圖片
Tag: background-image
範例：
body { background-color: url(圖片路徑) } /* 將圖片路徑設為背景 */
指定背景水平或垂直方向以重複的方式填滿
Tag: background-repeat設定值：皆填滿 repeat (預設)、水平填滿 repeat-x 、垂直填滿 repeat-y 與不填滿 no-repeat。範例：
body {
    background-repeat: repeat-x;   /* 將背景作水平方向重複 */
    background-image:url(圖片路徑); /* 將圖片路徑設為背景 */
}
設定背景固定或移動
Tag: background-attachment設定值：網頁捲動時背景跟著移動 scroll (預設)、背景不隨捲軸移動 fixed。範例：
body {
    background-attachment: fixed;  /* 讓背景不隨捲軸移動 */
    background-image:url(圖片路徑); /* 將圖片路徑設成背景 */
}
設定背景位置
Tag: background-attachment
設定值：左上方 left top (預設)、上 top 、中 center 、下 bottom 、左 left 、右 right。範例：body { background-position: top right; } /* 背景固定在右上角 */


設定文字字體
Tag: font-family範例：body { font-family:arial; } /* 字型設為arial */
設定文字大小
Tag: font-size
body { font-size:15px; } /* 文字大小設為15px */
設定文字粗細
Tag: font-weight
設定值：從100到900，也可設定為厚 bold 、較厚 bolder 、及正常 normal
範例：body { font-weight:bold; } /* 字體設為粗體 */
設定字體是否為斜體字
Tag: font-style
設定值：斜體 italic
範例：body { font-style:italic; } /* 字體設為斜體 */
設定文字顏色
Tag: font-weight
範例：body { color:#ff0000; } /* 文字設為紅色 */

設定邊框留白Tag: padding (上留白值 右留白值 下留白值 左留白值)

留白設定是在內容外，邊框內的部分，善用留白可讓文章的排版不會與邊框太過接近，較為清潔與美觀，對應區塊的四個方向可以個別設定外，也可同時作設定，範例：
div { padding: 5px 10px 5px 10px; }
/* 上邊框留白5px、右邊框留白10px、下邊框留白5px、左邊框10px */

div { padding: 5px; }
/* 四邊皆留白5px */

div { padding-top:5px;  padding-right:10px; padding-bottom:5px; padding-left:10px; }
/* 上邊框留白5px、右邊框留白10px、下邊框留白5px、左邊框10px */

[推到噗浪]

【分享】20個初學者實用的CSS技巧

過去就連一個鏡像站點，我們都依靠大量的開發人員和程序員進行維護。得益於CSS和它的靈活性使得樣式能夠從代碼中被獨立抽離出來，從而讓一個只具備基本CSS理論的初學者都能夠輕易地改變網站的樣式。

不論你是對用CSS建站感興趣還是僅僅拿它讓你的博客更有feel，打好基礎才能蓋高樓。下面讓我們來看看一些對於初學者實用的CSS常識：

1、使用reset.css

火狐和IE這兩種不同的瀏覽器，在繪製CSS樣式方法上截然不同。這種情況下，使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。

這兒有一些常用的reset.css框架——Yahoo Reset CSS、Eric Meyer's CSS Reset和Tripoli。

2、CSS縮寫
CSS縮寫簡化了你的CSS代碼，更重要的是，它讓你的代碼更加整潔易懂。

不是像這樣創建CSS

.header {
  background-color: #fff;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left;

}

而是像這樣創建CSS

.header {
  background: #fff url(image.gif) no-repeat top left
}


3、理解class和id
這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點“.”和井號“#”來標識。簡單來說id就是用來標識那些單獨不重複的樣式，而class是可以重複使用的。


4、實用的<li>
<li>也叫鏈接列表，在與<ol>或<ul>正確搭配的時候非常好用，尤其是用在導航菜單樣式上。


5、少用<table>多用<div>
CSS最大的優勢之一是使用<div>達到樣式上的靈活多變。不同於<table>，<div>裡的內容不會被鎖在單元格<td>中。可以說幾乎所有的表格佈局都可以在<div>和样式的正確使用下完成。當然，有大量表格內容時，還是用<table>吧。


6、CSS調試工具
在設計CSS時，能夠得到頁面佈局的預覽對於優化CSS樣式和糾錯是很有幫助的。
這裡有一些免費的CSS調試工具推薦給你，你可以把它裝在瀏覽器上：FireFox Web Developer、DOM Inspector、Internet Explorer Developer Toolbar、Firebug


7、避免多餘的選擇器
有時你的CSS聲明可以更簡單，特別是你發現你的代碼和下面的類似:

ul li { ... }
ol li { ... }
table tr td { ... }

它們可以簡化為：

li { ... }
td { ... }

如上是因為<li>會且只會與<ul>或<ol>連用，就像<td>只能存在於<tr>和<table>中一樣，這兒真沒有把它們重複一次的必要。

8、!Important
所有被!important 標記的樣式，即使它後來被重寫，瀏覽器也只會採用被標記的那條。

.page {
  background-color:blue !important;
  background-color:red;
}

比如上面的例子，因為background-color:blue 被標記為!important ，即使後來有把背景改成紅色的語句，也只採用被標記的那條。 !important 用來強制使一個樣式避免在之後的編碼中被修改，遺憾的是IE不支持。


9、圖像替代文本
這招經常被用來把一個基於文本的<h1>title</h1>標題換成圖片。按照如下所示：

h1 {
  text-indent:-9999px;
  background:url("title.jpg") no-repeat;
  width:100px;
  height:50px;
}

解釋說明： text-indent:-9999px; 利用縮進把文本撤掉，然後用指定了背景和長寬的圖片代替。

10、理解CSS的定位position

以下內容，歡迎參考原文出處，原作寫得非常仔細豐富，能夠幫助到很多初學者！

原出處：http://www.w3cplus.com/css/20-useful-css-tips-for-beginners.html

[推到噗浪]

超棒CSS3漸層工具

Ultimate CSS Gradient Generator

A powerful Photoshop-like CSS gradient editor from ColorZilla.

http://www.awcore.com/url/aHR0cDovL3d3dy5jb2xvcnppbGxhLmNvbS9ncmFkaWVudC1lZGl0b3Iv

有興趣的朋友可以使用看看，很方便的工具。

[推到噗浪]

快速編寫CSS的方法

原文出處：http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/
參考翻譯：http://blog.mukispace.com/5-ways-write-better-css/

1.Reset

我們在編寫CSS時，一定要使用某些CSS重置的方法，無論你是用Eric Meyer Reset，YUI Reset，或者是你自己習慣的重置表，就是一定要使用，因為不同的瀏覽器對CSS預設的初始值都不相同，藉由CSS重置的設定，可以讓這些瀏覽器按照同樣的規則解讀CSS，可以大量減少之後針對瀏覽器不同，而做個別修改的時間。

它可以簡單移除元素中margin以及padding :
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

Eric Meyer以及YUI所提供的重置表都很不錯，但對我來說他們太遙不可及了。我希望你可以重新定義每個元素的屬性，最後重置一切。這也是為什麼Eric Meyer建議，如果要更有效使用它，你就不應該直接拿他提供的重置表放入你自己的css裡頭。請調整它修改它，在基礎上重新建置它，並且把重置表變成你自己的。

對了，請停止使用這個語法吧！
* { margin: 0; padding: 0; }

它被使用在太多地方了，你想想如果將一個單選按鈕(Radio Button)的padding給移除會發生什麼事情？

我們常利用表單元素做些華麗的效果，所以建議就讓他保持原狀吧。

2. Alphabetize

一個簡單的小測試：

你覺得下面兩個例子中，哪一個例子可以最快找到margin-right的屬性值？

例1：
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

例2：
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

能不能告訴我，例2是不是更快。按字母順序排列你的CSS屬性，你創建的一致性，這將有助於你減少你花費的時間尋找一個特定的屬性。

我知道有的人是用這種方法來排序，但有的人卻有另一套排序方法。不過在我的公司，我們一致決定要使用字母作為排序方式，假設你要和別人共同開發程式碼，這種方法對你會比較好。

3. Organization

建議你應該組織樣式表，這樣你會容易找到想要的內容以及相關的項目。可以有效的使用注釋，舉例來說，以下是我替我的樣式表所做的結構：
/*****Reset*****/
移除元素裡的margin以及padding

/*****Basic Elements*****/
定義基本元素的樣式: body, h1-h6, ul, ol, a, p, 等等

/*****Generic Classes*****/
定義像是邊欄的浮動，移除元素底部的margin間距等單純的樣式
也許他們不像我們一般認知的語意化，但是他們對編碼的有效化是必要的。

/*****Basic Layout*****/
定義基本的模版: header, footer, 等等，元素可以幫助網站定義基本的圖層

/*****Header*****/
定義所有header的元素

/*****Content*****/
定義所有content的區塊內容

/*****Footer*****/
定義所有footer的元素

/*****Etc*****/
繼續一對一的定義其他部分

4. Consistency

無論你用什麼方法定義你的程式碼，請繼續下去。我實在厭惡以及厭倦討論單行vs.多行的議題，這是無庸置疑的！每個人都有他們自己的主張，所以就選擇一種你覺得對的或習慣的方式保持下去就可以了。

就個人而言，我通常是使用混合的方式，如果一個樣式超過三種屬性，我就會使用多行:
div#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }

會用這種方式是因為我使用的編輯器在換行前，單獨一行正好能容納3種屬性。所以你就只要描繪好哪種方法最適合你，並且保持下去。

5. Start in the right place

在你寫好你的html標籤前，不要動你的樣式表！

當我準備做一個網站時，在寫css樣式表之前，我會先檢查<body>...</body>裡所有的標記語言，這時候我不會添加多餘的div，id，以及class。我只會加入基本的圖層像是header、content，footer，因為我知道這些東西是必須存在的。

透過標記後的文件，就會避免碰到多div症以及多class症，這些通常是致命的毛病。你只需要在開始寫css時，當你需要加入額外的效果時再加入他們即可。

有效的使用後代選擇器來定義你的子元素，不要自動給元素增加id和class。記住一點，如果一個文件沒有良好的格式標記，那這份css是毫無價值的。

*編輯註: 我必須要再強調這點，就像Trevor說的，在你還沒有100%標記好你的html時，請不要動css文件。

[推到噗浪]