CSS

原文

     用了這麼多年的CSS，現在才明白CSS的真正匹配原理，不知道你是否也跟我一樣？看1個簡單的CSS：    DIV#divBox p span.red{color:red;}，按習慣我們對這個CSS 的理解是，瀏覽器先尋找id為divBox的DIV元素，當找到後，再找其下的所有p元素，然後再尋找所有span元素，當發現有span的class為red的時候，就應用該style。多麼簡單易懂的原理，可是這個理解卻是完完全全相反、錯誤的。匹配原理：    

CSS選取器：1、標記選取器：給html的所有相同標記設定同樣的CSS格式。2、類別選取器：例如 .class { color:green;font-size:20px} class是類別名稱，color和font-size是屬性，green和20px分別是屬性對應的值。3、ID選取器：用於頁面中某一個特殊的標記。 例如 #id { color:green;font-size:20px }4、選取器的集體聲明：不同類別的選取器使用相同的CSS樣式。5、CSS選取器的嵌套聲明：例如 p b{

1、DIV與span標記：<div>簡單而言是一個區塊容器的標記。即<div>...</div>之間相當於一個容器，可以容納段落、標題、表格、圖片乃至章節、摘要和備忘等各種html元素。span標記也是一個容器標記。DIV與span的卻別：div標記類似與p標記，不同的div會換行。span標記是行內標記，不同的span不會換行顯示。2、盒子模型：一個盒子由content（內容）、border(邊框)、padding（空隙）內容與邊框的距離、margin（間隙

azimuthbackground-attachment -- 背景圖片隨捲軸的移動方式background-color -- 背景顏色background-image -- 背景映像background-position -- 背景圖片的位置background-repeat -- 背景圖片的顯示方式background -- 統一背景border -- 統一邊框所有屬性border-bottom -- 統一下邊框border-bottom-color --

單行文本的控制，以前是由程式員完成的，實現截字效果。今天介紹的方法相容IE和FF，看下面的詳細介紹。為了更符合實際，用一個div裝起要調試的內容，並為這個div定義一個寬度。例如：單行文本的控制，以前是由程式員完成的，實現截字效果。今天介紹的方法相容IE和FF，看下面的詳細介紹。為了更符合實際，用一個div裝起要調試的內容，並為這個div定義一個寬度。例如：css代碼：div{width:200px;} html代碼：<div><span>中國站長天空，站長建站樂園 -

最簡化常用的reset * { padding: 0; margin: 0; border: 0; }   YUI Reset CSSbody,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; }

css中對於文字溢出時的控制可以通過text-overflow:clip|ellipsis作溢出控制；其中clip只是作簡單的裁切；ellipsis在裁切的同時添加"..."，這種方式比js截取字元的方式要好些（針對搜尋最佳化seo）。但是text-overflow:clip|ellipsisFirefox下是不支援的。那麼我們如何來控制Firefox下文字溢出呢？在這裡介紹兩種方法：方法一：你可以看到Firefox下被截取的文本後面也添加了"..."，那麼這是如何做到的呢，代碼如下：View

錨偽類在支援 CSS 的瀏覽器中，連結的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和滑鼠移至上方狀態。a:link {color: #FF0000} /* 未訪問的連結 */a:visited {color: #00FF00} /* 已訪問的連結 */a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */a:active {color: #0000FF} /* 選定的連結

1 <SCRIPT> 2 function switchSysBar(){ 3 if (switchPoint.innerText==3) 4 { 5 switchPoint.innerText=4 6 document.all("frmTitle").style.display="none" 7 } 8 else 9 {10 switchPoint.innerText=311

英文原文：http://www.smashingmagazine.com/2008/08/18/ 譯文原文：http://blog.bingo929.com/7-principles-optimized-css.html

一.使用css縮寫使用縮寫可以協助減少你CSS檔案的大小，更加容易閱讀。css縮寫的主要規則請參看《常用css縮寫文法總結》，這裡就不展開描述。 二.明確定義單位，除非值為0忘記定義尺寸的單位是CSS新手普遍的錯誤。在HTML中你可以唯寫width=100，但是在CSS中，你必須給一個準確的單位，比如：width:100px

      說起CSS Reset，大家都會知道。有時候簡單一個*{ margin:0 padding:0}就能完事了。要說要選哪個，各有鞦韆也不能一概而論。之前不知道用了哪個，字型有點不正常，後來換了YUI的Reset。一切就正常了！    

CSS架構之一 YAML大家比較熟悉的是js架構，例如prototype、jQuery呀。其實XHTML+CSS也是有架構的，最著名的可能就是YUI了，是yahoo開發 小組的。但是那個稍微有點龐大，而且牽扯到一些的JS架構。所以剛開始研究的時候可能稍微有點累。而這個yaml就比較單純了。可能是現在還在發展初期所 以架構很簡單，東西不多，對XHMTL+CSS架構感興趣的可以去看看哦。在國內好像還沒有那個朋友在做這個東西，如果你有興趣，自己鑽研一下說不定中國

CSS命名規則 頭：header  內容：content/containe  尾：footer  導航：nav  側欄：sidebar  欄目：column  頁面外圍控制整體布局寬度：wrapper  左右中：left right center  登入條：loginbar 

上一篇《前端代碼標準最佳實務：javascript》發表後，大家討論還是很熱烈，從側面體現了前端工程師對寫標準的前端代碼的重視程度很高。這些最佳標準實踐並不是那個權威組織發布的，而是由大量的前端工程師們在實踐過程中的經驗總結，目的在於提高代碼的可讀性，可維護性和效能。那麼接著上一篇，我們再來談談CSS代碼的一些標準實踐。1，命名和其他語言規範一樣，css的命名也講究命名要有意義，命名要儘可能短但是要足夠表達含義；命名的詞用連字號串連。不規範的命名：#navigation{}.demoimage{

強制不換行 Html代碼 {dp.sh.Toolbar.CopyToClipboard(this);return false;}" title="複製代碼">div { white-space:nowrap; }  div { white-space:nowrap; }自動換行 Html代碼 {dp.sh.Toolbar.CopyToClipboard(this);return false;}"

1.使用簡寫 如果你現在還對簡寫一點都不瞭解，那你就又寫落伍了，不過幸好，學起來並不是很難。使用簡寫是一種讓代碼減少的最簡單方法。沒有比現在更適合實踐代碼簡寫的時候了，還等什麼，一起來看看吧。Margin、border、padding、background、font、list-style和outline 都是可以進行簡寫的屬性。CSS簡寫就是不再使用不同的相類似屬性的聲明…p { margin-top: 10px;      margin-right: 20px;     

 代碼:Code highlighting produced by Actipro CodeHighlighter

十六進位的顏色值對位元與大小寫十六進位的顏色值預設標準是大寫及6位元標註。在未知情況下不希望冒險而降低了渲染的效率。 不贊成 - color:#f3a;建議用 - color:#FF33AA; display與visibility的差異display隱藏對象不保留物理空間，visibility為隱藏對象保留佔據的物理空間。當瀏覽器渲染被佔據的物理空間時，會有所消耗資源。 不贊成 - visibility:hidden;建議用 - display:none;