CSS

架構就是一個你可以用於你的網站項目的基本的概念上的結構體。 css架構通常只是一些css檔案的集合，這些檔案包括基本布局、表單樣式、網格或簡單結構、以及樣式重設。比如：typography.css 基本排版規則grid.css 基於網格的布局layout.css 通常的布局form.css for 表單樣式general.css 更多通用規則 您還可以參考以下前端開發/CSS相關資源:《推薦12款可用於前端開發的免費文字編輯器》《Web前端開發必備手冊下載》

在進行CSS網頁布局時會遇到許多奇怪的問題，這些問題可能是瀏覽器的bug，也可能是我們對CSS屬性不夠瞭解，雖然52CSS.com介紹了大量的知識，但多動手編碼，掌握到了技巧才是自己的。　　今天談談CSS外邊距疊加的問題，邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。　　合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。　　外邊距合并（疊加）是一個相當簡單的概念。但是，在實踐中對網頁進行布局是，它會造成許多混淆。　　簡單地說，外邊距合并指的是，當兩個垂直外邊距相遇時，

1、大大縮減頁面代碼，提高頁面瀏覽速度,縮減頻寬成本; 　　2、結構清晰，容易被搜尋引擎搜尋到，天生最佳化了seo 　　3、縮短改版時間。只要簡單的修改幾個CSS檔案就可以重新設計一個有成百上千頁面的網站。 　　4、強大的字型控制和排版能力。CSS控制字型的能力比糟糕的FONT標籤好多了，有了CSS，我們不再需要用 FONT標籤或者透明的1 px GIF圖片來控制標題，改變字型顏色，字型樣式等等。 　　5、CSS非常容易編寫。你可以象寫html代碼一樣輕鬆地編寫CSS。 　　6、提高易用性。使用

 DIV+CSS 命名規範常用的CSS命名規則:頭：header　　內容：content/container　　尾：footer　　導航：nav　　側欄：sidebar欄目：column　　頁面外圍控制整體布局寬度：wrapper　　左右中：left right

1. 首行縮排你知道的，從小學，老師就教我們，段落的開頭應該空兩格。而你使用word的時候，也有首行縮排這個功能，但在html中你的空格鍵好像起不了作用了。當然，你可以用&nbsp;來代替一個空格，但這不是理想的方式，用CSS吧，簡單，有效：<p style="text-indent:2em;">你的內容</p>這樣的話，這個有style="text-indent:2em;"段落就會顯示兩個字元的縮排了。縮排更多? 修改2em,

1.直接添加在HTML的標識符(tag)裡　　< Tag style="properties"> 網頁內容< /tag> 　　例如： 　　<p style="font-family:Geneva, Arial, Helvetica, sans-serif; font-size:9px;

文章目錄 1.重設2.排序3.組織4.一致性5.從正確的地方開始總結 當然，每個人都可以編寫CSS代碼，甚至你現在已經讓它為你的項目工作了。但是CSS還可以更好嗎？開始用這5個Tips改進你的CSS吧！1.重設首先，很認真的告訴你，總是要重設某些分類。無論你是使用 Eric Meyer Reset、YUI Reset或者你自己編寫的重設代碼，只要使用就對了。它能很簡單的移除所有元素的填充（padding）和邊距（margin）：html,

IE8 (下文中的 IE8 暫時僅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的屬性選取器（substring matching attribute selectors），具體規則與正則中的匹配很相似：E[att^=’val’] //子串以’val’ 開始 E[att$=’val’] //子串以’val’ 結束 E[att*=’val’] //子串中包含’val’ IE8 支援絕大多數基本的 CSS2.1 選取器：:before and :after

很早在 藍色論壇 做過一個調查《你使用的CSS命名規則 (單選) 》，調查結果如下（參與投票人數為83人）：helloworld 2 (2.41%) hello-world 9 (10.84%) hello_world 52 (62.65%) helloWorld 19 (22.89%) HelloWorld 1 (1.20%) 其他 0 (0.00%) 從結果中可以看出使用率最好的為底線命名法（ hello_world

     在公司用DIV+CSS布局有半年了，使我認識到DIV+CSS比table布局好用（易於維護），程式效能比table好。使我對DIV+CSS產生了興趣。      下載：CSS2.0中文冊     方便對DIV布局的學習，我推薦微軟的一個IE外掛程式，用這款外掛程式可以很方便的顯示頁面配置，簡單的說明一下，這款外掛程式的使用方法：安裝完外掛程式後，點擊菜單View DOM就可以很方便的看頁面配置。      下載：IE外掛程式       

用Table布局可以很容易的實現文字和圖片的垂直置中，但是在div的布局中呢，要實現定高容器裡面的內容的垂直置中不是太簡單的事情。在DOM標準中 在IE中 綜合Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->#boxOuter{    display:table;    height:300px;    width:500px;    border:

運用CSS進行靈活的列布局 一、開篇現在的網站的主體部分很多都採用了列布局，常見的情形如下： 在ASP.NET中，每個頁面重複的部分可以寫在MasterPage中去（比如中header、footer以及body的外框）。那麼body裡面的列布局到底寫到MasterPage裡面還是在每個頁面都寫一次呢？在我看來有三種方式：1、在MasterPage中唯寫body的外框，body裡面的列布局由每個頁面自己來寫，這種方法看起來很靈活（每個頁面的寬度都可以隨便定），但是對於以後的修改來說是非常不方便的；

關於CSS的一些注意事項1 注釋不能嵌套，不然會出現問題2 能設高度的要把高度設起3 另外聲明最好加上：免得瀏覽器差異<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4 a標籤（其它標籤要關閉）關於name和id的區別表單name與id的區別和相似之處發表日期：2007-12-9

在CSS中有一個Alpha濾鏡，這個濾鏡可以設定目標元素的透明度。還可以通過指定座標，從而實現各種不通範圍的透明度。具體文法如下：引用內容：{filter： alpha(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,starty=starty,finishx=finishx,finishy=finishy)}具體參數：opacity 透明度。預設的範圍是從0 到

jQuery的選取器是CSS

如今做網頁為了使網站豐富多彩，富於表現力，往往需要應用大量的圖片/表徵圖。如何處理這些圖片，使其盡量不影響網頁載入，解析等速度，是一個不大不小的問題。如果你的網站用各種表徵圖圖案裝飾的靚麗無比，但是需要等待較長的時間載入，那麼相信很多使用者會等不及而離開。盡量將圖片做的小些，可能是大部分人選擇的解決之道。但是100張1kb的圖片載入與一張100kb的圖片載入，這之間又是不同的，這涉及到網站伺服器的同時串連數，網路品質等。但是，顯然，載入一張圖片要遠比載入多張圖片簡便的多。     

　　段落前面空兩個字的距離，不要再使用空格了。應該使用首行縮排text-indent。　　text-indent可以使得容器內首行縮排一定單位。比如中文段落一般每段前空兩個漢字。　　在這裡我們需要瞭解一種長度單位em。em是相對長度單位。相對於當前對象內文本的字型尺寸。　　我們中文段落一般每段前空兩個漢字。實際上，就是首行縮排了2em。　　看下面的例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

在中國，很多前端開發初學者都會把xHTML+CSS頁面製作說成DIV+CSS，甚至很多人都還不知道xHTML+CSS是什麼意思，只知道盲目的追求DIV+CSS，但在國外，是沒有DIV+CSS這個概念的，很明顯如果單從字面上去理解，DIV+CSS的網頁就要全都是 div，很明顯是無法達到語義化標準的。在國外xHTML+CSS（DIV+CSS）也可以叫做PSD2XHTML。以下是43個PSD to XHTML及CSS教程：1.將 PSD 源檔案轉換 XHTML 教程

1.class選取器　　<html>　　<head>　　<title>class選取器</title>　　<style type="text/css">　　<!--　　.one{　　    color:red;            /* 紅色 */　　    font-size:18px;        /* 文字大小 */　　}　　.two{　　    color:green;        /* 綠色 */　　  

background: -moz-linear-gradient(center top,#4F4F4F,#373737);background: -webkit-gradient(linear,0% 0%,0% 100%,from(#4F4F4F),to(#373737));background: -webkit-linear-gradient(center top,#4F4F4F,#373737);background: -o-linear-gradient(center top,#4F4F4