CSS

[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行] [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

一、長度單位 長度單位是Web頁設計中最常用的一個單位。一個排列無序、雜亂無章的頁面不可能給人們留下什麼好的印象。於是，在設計的時候需要為元素的位置、尺寸精確地定義一些值，以使其達到預期的效果。

轉自 藍色理想 作者 bias 原文地址 http://www.blueidea.com/tech/site/2006/3296.asp 之前找了幾個不同版本的可獨立啟動並執行IE瀏覽器，正好拿來試試頁面的相容性問題。不試不知道，在IE6和FF中沒問題的頁面在IE5和IE5.5中亂成一團，一直聽說IE5是WEB標準製作的一個“釘子戶”，現在不得不相信了。

數月來學習web標準，並遵循標準設計和製作web頁面。一直想寫點什麼，整理一下自己的心得體會。寫這篇文章，主要是針對中文排版設計，英文排版因為很少做，所以不涉及。 先介紹如何設定字型、顏色、大小、段落空白等比較簡單的應用，後面再介紹下比如首字下沉、首行縮排。最後講一些常用的web頁面中文排版，比如中文字的截斷、固定寬度詞內折行（word-wrap和word-break）等等。因為只是寫一些應用方面的心得，如果需要完整的CSS屬性介紹，請參考CSS手冊。 1、如何設定文字字型、顏色、大小 ——

在編寫css樣式表的時候常常會碰到一寫瀏覽器安全色的問題，象是不同核心的瀏覽器顯示就不一定相同，不同版本的的瀏覽器也會產生上下相容的問題，如何解決這些問題成了我們苦惱的問題，如果你對css hack技術很瞭解的話，那這就是太簡單不過了，不過對於那些不怎麼解的人來說可真成了他們所苦惱的事。在這就從 趙磊官方部落格 引來一篇文章來介紹相容各個瀏覽器的技巧。但是你也不要認為只要是瀏覽器顯示出現差錯就事瀏覽器的問題，也很可能是你的結構不好，建議你好好去學習一下語義結構，畢竟蓋房子要先搭鋼筋的。

scrollWidth,clientWidth與offsetWidth的區別_經驗交流scrollWidth 是對象的實際內容的寬，不包邊線寬度，會隨對象中內容的多少改變（內容多了可能會改變對象的實際寬度）。 clientWidth 是對象可見的寬度，不包捲軸等邊線，會隨視窗的顯示大小改變。 offsetWidth 是對象的可見寬度，包捲軸等邊線，會隨視窗的顯示大小改變。 一個scrollWidth和clientWidth的例子： <html> <head>

最近在做網站的時候碰到了一個問題：我用 ul 標籤和 li 標籤構建的導覽列想要在不確定 li 數量和 li, ul 寬度的情況下置中，但是給 ul 使用了 text-align:center 之後卻沒有起到應有的效果。 原來的頁面結構是： 複製代碼 代碼如下: Firede Style5 樣式表結構是： 複製代碼 代碼如下: 這樣本來也是沒有什麼問題的，但是因為要實現一個功能卻定義了一個ID（menu）和兩個CLASS（menu_ul, menu_li）

關於超連結中的底線這個及細節的問題，想必大家都有過討論和思考，大家都知道，把握一個原則即可：“讓使用者清楚的區分超連結文本和其他文本形式，並潛意識知道可以點擊。”；但對於是否可以潛意識知道可以點擊，還是有爭議的，不同的人，不同的環境會有不同的見解。不妨分幾個情境討論一下：1. 導航地區，潛意識我會去點擊。即便有底線也是個“古老形式”的擺設，所以一般沒有底線；好的設計不僅滿足點擊，還滿足視覺的層級關係。2.

SPAN 和 DIV 的區別在於，DIV(division)是一個區塊層級元素，可以包含段落、標題、表格，乃至諸如章節、摘要和備忘等。而SPAN 是行內元素，SPAN 的前後是不會換行的，它沒有結構的意義，純粹是應用樣式，當其他行內元素都不合適時，可以使用SPAN。 　　下面以一個執行個體來說明這兩個屬性的區別。 　　代碼：

一、關於注釋 在建立xhtml+CSS網站時，CSS中的注釋非常重要。在建立CSS樣式時，應當保持隨手注釋的習慣。一般的，我習慣於使用“/* 注釋內容 */”的格式來寫注釋，因為在EditPlus等具有高亮功能的編輯器裡，使用C語言中常用的“/***************/”之類的注釋是無意義的，沒有必要填充大量無意義內容作為分隔。帶有注釋的文檔作為網站的原始CSS文檔，在發布網站的時候，可以使用CSS壓縮公用程式壓縮CSS，在輸出的CSS中去掉注釋以提高檔案傳輸效率。 二、關於命名

1 針對firefox ie6 ie7的css樣式 現在大部分都是用!important來hack，對於ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導致頁面沒按要求顯示！找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏覽一下，應該沒有問題了。 現在寫一個CSS可以這樣： #1 { color: #333; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 {

CSS網頁布局入門教程3：一列固定寬度置中_基礎教程頁面整體置中是網頁設計中最普遍應用的形式，在傳統表格版面配置中，我們使用表格的align="center"屬性來實現，。p本身也支援align="center"屬性，也可以讓p呈現置中狀態，但css布局是為了實現表現和內容的分離，而align對齊屬性是一種樣式代碼，書寫在XHTML的p屬性之中，有違背分享原則（分離可以使你的網站更加利於管理），因此應當css的方法實現內容的置中，我們以固定寬度一列布局代碼

學習任何東西都是一樣，從小學、中學、大學，除了學習知識外就是去學習方法！ 　　要想掌握CSS,

從二列固定寬度入手，開始嘗試二列布局的情況下，左右欄寬度能夠做到自適應，從一列調適型配置中我們知道，設定自適應主要通過寬度的百分比值設定，因此在二列寬度自適應的布局中也同樣是對百分比寬度值的設計，繼續上面的CSS代碼，我們得新定義二列的寬度值： 複製代碼 代碼如下:#left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px;

在實際應用中，有時候需要左欄固定寬度，右欄根據瀏覽器視窗大小自動適應，在CSS中實現這樣的布局方式是簡單可行的，只需在設定左欄的寬度即可，如上例中左右欄都採用了百分比實現了寬度自適應，而我們只需要將左欄寬度設定為固定值，右欄不設定任何寬度值，並且右欄不浮動，代碼如下： 複製代碼 代碼如下:#left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 30

從1990年代初HTML被發明開始樣式表就以各種形式出現了，不同的瀏覽器結合了它們各自的樣式語言，讀者可以使用這些樣式語言來調節網頁的顯示方式。一開始樣式表是給讀者用的，最初的HTML版本只含有很少的顯示內容，讀者來決定網頁應該怎樣被顯示。 但隨著HTML的成長，為了滿足設計師的要求，HTML獲得了很多顯示功能。隨著這些功能的增加外來定義樣式的語言越來越沒有意義了。 1994年哈坤·利提出了CSS的最初建議。伯特·波斯（Bert

一.區分大小寫 當在XHTML中使用CSS，CSS裡定義的元素名稱是區分大小寫。為了避免這種錯誤，我建議所有的定義名稱都採用小寫。 二.不需要給背景圖片路徑加引號 為了節省位元組，我建議不要給背景圖片路徑加引號，因為引號不是必須的。例如： background:url("images/***.gif") #333; 可以寫為 background:url(images/***.gif) #333; 如果你加了引號，反而會引起一些瀏覽器的錯誤。 三.用正確的順序指定連結的樣式

[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

1.取消按鈕按下時的虛線框 　　在input裡添加屬性值 hideFocus 或者 HideFocus=true 2.唯讀文字框內容 在input裡添加屬性值 readonly 3.防止退後清空的TEXT文檔(可把style內容做做為類引用) 　　 4.ENTER鍵可以讓游標移到下一個輸入框 　　 5.只能為中文(有閃動) 　　 6.只能為數字(有閃動) 　　 7.只能為數字(無閃動) 　　57)) event.returnValue=false">

通過css來更改所有的form的樣式的方法，可以在css中定義input{color:red}textarea{border:1px solid #333}這樣的格式，一般如果不需要更改所有的文本樣式，可以通過下面的方法來定義文字框和密碼框等樣式 建立網頁 1 [Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]