CSS

要想更好的理解 css， 尤其是 IE 下對 css 的渲染，haslayout 是一個非常有必要徹底弄清除的概念。大多IE下的顯示錯誤，就是源於 haslayout。　　什麼是 haslayout ？　　haslayout 是Windows Internet Explorer渲染引擎的一個內部組成部分。在InternetExplorer中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。為了調節這兩個不同的概念，渲染引擎採用了 hasLayout 的屬性，

CSS的學習過程既可以說簡單又可以說是複雜。CSS的文法比較簡單，但CSS的應用中有一些概念(一可以說是原理)還是很難掌握的。今天暴風彬彬 向你推薦20個出色的CSS技術類(英語)網站幫你更好的理解和掌握CSS，其中包括各種各樣的網站，從部落格到清單風格列表甚至網站，它們都側重於研究同 一個主題，那就是CSS。1. A List Apart CSS TopicsA List

由於沒有找到自己認為完整的關於普通流、浮動和絕對位置的中文文章，於是鼓起勇氣決定自己來寫篇。為此大致啃掉了CSS2.1裡的 8 Box model 以及 9 Visual formatting model 。實話說，還真是看得有點頭大，呵呵~文檔流，其實標準雷根本就沒有這個詞。如果把文檔流直譯為英文就是 document flow ，但標準裡只有另一個詞，叫做普通流（ normal flow ），或者稱為常規流。但似乎大家更習慣文檔流的稱呼，因為很多中文翻譯的書就是這麼來的。比如《CSS

　　1. 首行縮排　　你知道的，從小學，老師就教我們，段落的開頭應該空兩格。而你使用word的時候，也有首行縮排這個功能，但在html中你的空格鍵好像起不了作用了。當然，你可以用&nbsp;來代替一個空格，但這不是理想的方式，用CSS吧，簡單，有效：　　<p

<style>    .graph {         position: relative; /* IE is dumb */        width: 200px;         border: 1px solid #ff0000;

 用css實現網頁背景漸層的代碼如下：一、從上往下漸層 Example Source Code:body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);}二、從左上至右下漸層 Example Source Code:body{FILTER: Alpha(

Web效能最佳化最佳實務中最重要的一條是減少HTTP請求，它也是YSlow中比重最大的一條規則。減少HTTP請求的方案主要有合并JavaScript和CSS檔案、CSS Sprites、影像地圖（Image Map）和使用Data URI來編碼圖片。CSS Sprites和影像地圖現在已經隨處可見了，但由於IE6和IE7不支援Data

CSS條狀圖表是我們在網頁設計中常常會遇到的一種形式。條狀圖表可以將數量，以條狀圖形的形式直觀的表示出來。　　CSS基本條狀圖表的實現方法是什麼?我們看下面的執行個體介紹：以下是引用片段：<div class="graph">     <strong class="bar" style="width: 24%;">24%</strong>

     處理HTML元素最關鍵的一個竅門，沒有任何特別的，就是理解他們是如何工作的。大部分頁面都可以使用一點點的標籤組合起來，你可以為每一個你選定的標籤樣式化。瀏覽器預設的可視化樣式元素由變化的字型樣式、邊界、補白和，和重要的，顯示類型。  最基本的顯示類型是內聯inline、塊block和清除none，他們分別可以用inline、block和none的值賦予display屬性來操作。 

 　　map標籤　　定義一個用戶端影像對應。影像地圖(image-map)指帶有可點擊地區的一幅映像。　　area元素永遠嵌套在map元素內部。area元素可定義影像地圖中的地區。　　img標籤中的usemap屬性可引用的map標籤中的id或name屬性(取決於瀏覽器)，所以我們應同時向map標籤添加id和name屬性。　　樣本　　例如我們想在下面一張圖實現九個作用區，不切圖，就使用map標籤。　　首先用 ps 得到幾個座標：　　然後代碼實現：     

真心覺得寫出 CSS 並不難，但是要寫出可被維護的 CSS 比其他程式語言都還難。所幸已經有許多大師級的人物，提出許多設計模式和思維，藉由站在巨人的肩膀上可以讓事情事半功倍。這篇文章就來說說 OOCSS、SMACSS 和撰寫 CSS 時應該注意的規範。（本文的例子用的是 SCSS 文法）OOCSSOOCSS 不是什麼新技術，只是一種撰寫 CSS 的設計模式，或者可以說是一種「道德規範」，大致上我覺得重點只有兩個： 減少對 HTML 結構的依賴 增加 CSS class

1、什麼是字型　　字型是文字的外在形式，就是文字的風格，是文字的外衣。比如行書、楷書、草書，都是一種字型。同樣一個字每個人寫起來都會有差異，可以說每個人都有一套潛在的字型庫。對於web頁面來說，字型就是電腦上儲存的一套文字顯示方式。通過對文字進行一些特殊處理（比如末端加強）來提高不同環境中文字的可讀性。　　比如同樣大小的文字，在不同字型下的可讀性是不同的。一般來講，一款字型檔的誕生，要經過字型設計師的創意設計、字型製作人員一筆一划的製作、修改，技術開發人員對字元進行編碼、添加程式指令、裝庫、開發

 1.　　基本文法CSS的定義是由三個部分構成：選擇符（selector），屬性（properties）和屬性的取值（value）。 基本格式如下： selector {property: value} （選擇符 {屬性：值}） 選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開： body {color: black}

實現滑鼠經過背景變色的方法有很多，今天我們介紹的是用CSS+DIV實現的方法。方法一 #div:hover{background:#000000;}     解釋:滑鼠經過id為div的元素時背景變色    IE6.0、Firefox2.0、Opera 9.23都不行    方法二

 一、在 <div class=tzh>I am TZH!</div> 這段語句中有什麼錯誤？　　標點符號問題。這其實也是大家最容易忽視的問題，其實就是小小的兩個引號，就造成了這個錯誤。雖然很多瀏覽器在不加引號的情況下仍然能正確識別渲染。但是這樣想要通過嚴格的W3C XHTML國際標準是不可能的，請大家記住等號後面一定要接引號。正確寫法：<div class="tzh">I am

 stylesheet英文翻譯為樣式表，不錯這條代碼的作用就是告訴瀏覽器需要引用外部樣式表檔案為那個，例如：<link href="css/xue51_com_style.css" rel="stylesheet"

 　　要注意的內容：　　一，命名所選用的單詞應選擇不過於具體表示某一狀態(如顏色、字型大小大小等)的單詞，以避免當狀態改變時名稱失去意義。　　二，樣式類名由以字母開頭的小寫字母(a-z)、數字(0-9)、底線(_)、減號(-)組成。　　ID名稱由不以數字開頭的小寫字母(a-z)、數字(0-9)、底線(_)組成。　　可使用類似下面的規則:　　[模組首碼|類型|作用]_[名稱]_[狀態|位置]　　約定模組、類型、狀態、位置等的所使用的單詞或其縮寫，保持上面的順序，盡量保持在兩到三個單詞說清

 一下是利用CSS濾鏡效果實現漸層翻轉的代碼，有需要的朋友可以參考下。代碼如下:<span style="font-size:14px;"><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style

普通文本段落的換行案例說明：在實際應用中我們常遇到這樣的問題，就是一段文本，有了明確的寬度，需要文本自動換行。（如下圖）案例分析：上面兩個圖，沒有使用任何排版的CSS屬性，也就是預設情況下，塊元素裡的文本，達到邊緣以後會自動換行。但是這裡有個特例：就是內容全部為英文字母（沒有單詞句子，沒有詞和詞之間的空格），此時文本就不自動換行了（見下圖）特殊情況：有時候你寫的東東，預設情況下並不自動換行，這多半是由於你在其他的CSS屬性設定裡，無意中關聯了那個段話。比如你的 p 元素無意中有了 white-

1. CSS的文法：CSS的定義是由三個部分構成：選擇符（selector），屬性（properties）和屬性的取值（value）。文法： selector {property: value} (選擇符 {屬性：值})說明：·選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE……，你可以通過此方法定義它的屬性和值，屬性和值要用冒號隔開：例子：body {color: black}，此例的效果是使頁面中的文字為黑色。&