CSS

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

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

nobr元素 代碼<html><head></head><body><div><nobr>不換行不換行<nobr></div></body></html>   nowrap元素代碼<html><head></head><body><div

xml(extensible Markup Language)的出現，結構化文檔和資料有了一個通用的、科適應的格式，不僅僅應用在web上，也可以應用在任何地方。標準稱為可能。     XHTML是The Extensible HyperText Markup Language可擴充標識語言的縮寫。在HTML4.0的基礎上，用XML的規則對其進行擴充，得到了XHTML。它實現HTML向XML的過渡。     CSS是Cascading Style

這是一個開發記錄，以後會一直更新的。首先不同的是各個元素的margin和padding的不同：咱們就都給它設定成margin:0;padding:0;第二個不同：背景圖片的background-attachment的不同IE預設是fixed,而FireFox預設是scroll;一下從其他地方總結來的：Firefox和IE對某些css樣式的認定有不少區別ul和ol的預設padding值是不一樣的，在Firefox中，padding-left預設值為40px左右，而IE中為0，一般設定ul{marg

文章目錄 方法一：特性檢測：@cc_on方法二：@media -ms-high-contrast方法三：@media 0總結： 整理自：http://www.impressivewebs.com/ie10-css-hacks/中文原文： IE10 CSS hack請尊重著作權，轉載請註明來源，多謝~~傳說Windows

      CSS 架構二月二十一日升級到 0.7.1 版本了。經過這麼長時間的這幾次版本升級，終於把按功能不同 CSS 規則在不同的 CSS 檔案中的模式改為單一檔案的模式了，所以感覺 Blueprint CSS 架構現在是一個可以用到實際項目中的 CSS 架構了。這個 CSS 架構將 html 標籤設定為如下情況：統一重設了 43 個 html 標籤（html 4.0 標籤一共 91 個）的屬性，（html, body, div, span, object, iframe, h1, h2,

    css的架構設計能幫我們快速有效建立高品質的頁面，也有助於代碼的規範性，當然每一個架構都是建立在無數前人努力的基礎上的，下面就推薦一個css架構——the Blueprint CSS FrameworkCSS Frameworks + CSS Reset: Design From

範例程式碼 [www.52css.com]  Code highlighting produced by Actipro CodeHighlighter

CSS的浮動與LaTeX的浮動體很像；在清單項目中宜用： list-style-image + list-style-type 組合配置auto的意義是：“彌補其它部分與所要求的總和之間的差異”；在複雜介面設計中只在最高架構中使用auto；浮動性的代價是：引入自身特殊性與破壞原有文檔流；而因為瀏覽器的差異，有時會引起非常糟糕的介面效果;因為瀏覽器在盒模式上的計算差異，所以儘可能少用Position:Absoluted與Position:Fixed配置注意數值配置，特別是 body{

一、CSS HACK以下兩種方法幾乎能解決現今所有HACK.1, !important    隨著IE7對!important的支援, !important 方法現在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)<style>#wrapper{}{    width: 100px!important; /**//* IE7+FF */    width: 80px; /**//* IE6 */}</style>2, IE6/IE7對FireFox    *

雖然現在div+css很流行，也是標準，但該用table的地方還是要用table，非要用div代替而花費的那個時間很不值，也不符合W3C的標準了.使用表格版面配置不符合W3C的標準其中之一就是table不能被方便的隨意布局，table的職責用來呈現資料是最理想的，但瀏覽器對table的解釋方式也會成為table在呈現時一個效能上的要點。預設瀏覽器（IE）會在整個表格都被下載後才開始全部呈現表格，以前用“貓”上網的朋友都有這種體驗，網速慢的時候頁面是一半一半顯示的。有沒有辦法讓table一行一行的

1.DOCTYPE 影響 CSS 處理2.FF: div 設定 margin-left, margin-right 為 auto 時已經置中, IE 不行3.FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可置中4.FF: 設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width5

[ 本文轉載自：Bible's Blog ]首先聲明在我這篇文章發表時，IE7.0及以上目前有四個版本，分別是Ie7.0beta1,Ie7.0beta2,Ie7.0beta3,Ie7.0

　　CSS中的屬性Background,最常見不過了。可是你真的很瞭解嗎？　　Background表達背景，可用於各種元素。作用單一，表示元素的背景，不影響元素的布局。理解起來相對單純。background屬性可以直接書寫，順序很重要，依次是：　　background-color,　　background-image,　　background-repeat,　　background-attachment,　　background-position　　下面依次介紹各屬性的具體含義。　　backgr

background：image-set（）   

在html中,引入css的方法主要有行內式、內嵌式、匯入式和連結式4種。1.行內式:即在標記的style屬性中設定css樣式，這種方式本質上沒體現出css的優勢，因此不推薦使用。2.嵌入式:在對頁面中各種元素的設定集中寫在<head>和</head>之間的，對於單個頁面來說，這種方式很方便。3.匯入式:匯入式格式如下：<style type="text/css">@import

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;

* .TTF或.OTF，適用於Firefox 3.5、Safari、Opera * .EOT，適用於Internet Explorer 4.0+ * .SVG，適用於Chrome、IPhone 比如:@font-face {    font-family: 'HansHandItalic';    src: url('fonts/hanshand-webfont.eot');    src: url('fonts/hanshand-webfont.eot?#iefix')