CSS

　　基於瀏覽器的特性檢測大家應該已經很熟悉了，特別是modernizr.js推出來之後。其實w3c也出了規範，可以基於css來做一些特性檢測，也就是@supports，這個特性已經有兩年多了，之前瀏覽器支援度不夠，現在webkit nightly也開始支援了，也就是說safari

 　　前言　　為什麼會有這篇文章，外部引入樣式有什麼好談的，不外乎就是　　CSS Code複製內容到剪貼簿　　　　就這麼簡單，還有什麼，so

 　　CSS圖片最佳化就是盡量壓縮圖片的大小，加快頁面載入速度，這對於大型網站是很有用的。不要小看它，它可以大大提高網頁載入速度。通常大家用到的方法就是css sprites。　　CSS Sprites(圖片整合技術) 的目的就是通過整合圖片，減少對伺服器的請求數量，從而加快頁面載入速度。想必很多人已經在用這個技術，我給大家簡單介紹一下，總結一下我使用css sprite時的一些技巧。　　CSS

 在前端製作的過程中會發現，一些文字/圖片連結，或者一些input控制項，在點擊時會在周圍出現虛線邊框，一般會在Firefox和IE瀏覽器下出現虛線框，Google下不會有。　　這些虛線邊框是作為對視覺設計的一種輔助，在不使用滑鼠，而用鍵盤Tab鍵進行頁面瀏覽時，會標示出當前所在的連結或控制項的位置，便於瀏覽。這對那些視覺有障礙的人士來說更是必不可少的。　　但是有些時候我們卻不想使用它們，因為瀏覽器對虛線框的解析有差異，並且不規則，所以在視覺設計上反而成為了某種缺陷。所以這種時候，我們

 　　首先在很多很多年以前我們常用的清除浮動是這樣的。　　CSS Code複製內容到剪貼簿　　.clear{clear:both;line-height:0;}　　現在可能還可以在很多老的網站上可以看到這樣的代碼，相當暴力有效解決浮動的問題。但是這個用法有一個致命傷，就是每次清除浮動的時候都需要增加一個空標籤來使用。　　這種做法如果在頁面複雜的布局要經常清楚浮動的時候就會產生很多的空標籤，增加了頁面無用標籤，不利於頁面最佳化。但是我發現大型網站中

 　　CSS是網頁設計師的基礎，對CSS的瞭解能使他們能夠設計出更加美觀別緻的網頁。使用CSS技巧來巧妙地處理CSS是非常令設計師著迷的事情。在CSS的深海世界裡有很多有意思的東西，你只需要找到最適合你的就好。當然我們不可能一下子就記住所有CSS的規則和文法，但為了以後的發展我們還是應該記住那些非常有用的CSS技巧。今天我們精心準備了10條對網頁設計師最有用的CSS技巧，如果你想設計出獨一無二脫穎而出的網頁你必須得好好注意了。這篇部落格是在與一家提供高品質印刷服務的線上印刷公司&ldq

 　　本文展示了一種技術，它能通過非同步下載樣式表，以阻止它們的下載阻塞頁面的渲染，從而儘可能快的讓訪問者擷取到資訊內容。　　警告! 我發這篇文章全是好意，但是它並不負責讓讀它的人意識到下面將會遇到的問題. 社區很快地給了我許多的反饋 (有些反饋我很感激) ，而越來越明顯的是這項技術並不如我所希望的那樣穩定. 不像我那樣的成功地對它進行了測試和利用，許多開發人員在 IE 和 Firefox 中都遇到了問題( F F測試版中直接崩潰) 而其他人則報告在 Chrome 和

　　一、理解clear: left/clear: right　　當想到clear: left的時候，自然會認為是“清除左浮動”，clear: right是清除右浮動。　　其實現在想想，這樣的理解與表示是不嚴謹的欠考慮的。　　一般，現在中文圈流傳的表述是：　　clear文法：　　clear : none | left | right | both　　取值：　　none : 預設值。允許兩邊都可以有浮動物件　　left : 不允許左邊有浮動物件　　right :

圖片尺寸過大將會影響頁面配置。最理想的解決方案自然是自動產生縮圖，涉及的後台工作較為複雜，用CSS進行控制是一個可以接受的捷徑。　　如果用width 屬性強行設定顯示尺寸似乎太不智能。幸好 Firefox/Opera/IE 7 都提供了 max-width 屬性支援。假定希望圖片顯示寬度不超過500像素，CSS可能如下：　　以下是引用片段：以下是引用片段：　　fit-image { 　　border : 0; 　　max-width : 500px; 　　}　　IE6 不支援

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

作為 Web 設計師，你的網站在各種瀏覽器中有完全一樣的表現是很多人的目標，然而這是一個永遠無法真正實現的目標，很多人認為，完美的跨瀏覽器安全色並不必要，這樣說雖然沒錯，但在很多情形，一種近似的相容還是很容易實現的，本文講的是各種跨瀏覽器安全色的 CSS 編碼準則和技巧。理解 CSS 盒子模型如果你想實現不需要很多奇巧淫技的跨瀏覽器安全色的 CSS 代碼，透徹地理解 CSS 盒子模型是首要事情，CSS 盒子模型並不難，且基本支援所有瀏覽器，除了某些特定條件下的 IE 瀏覽器。CSS

 　　CSS 規則由 選取器 和 聲明 兩部分組成，本文將要說的是第二部分：聲明。　　一個聲明包含兩部分：屬性 和 值。　　屬性 指出要影響元素的哪個方面(顏色、高度，等等)，而 值 表示屬性設定為什麼(綠色、15px，等等)。　　CSS屬性值主要分以下三類：　　文本值　　數字值　　顏色值　　1.文本值　　文本值也叫關鍵字。所有 CSS 屬性都有文本值。　　例如，border-style 屬性有 solid、dashed 以及 insert

 　　這個菜單能居左、置中和居靠右對齊，不像之前文章提到的菜單需要靠點擊在顯示和隱藏之間進行切換。它也有一個標記顯示啟用/當前功能表項目，並且它能作用在所有移動平台和包括IE在內的所有案頭瀏覽器。　　首先，看看Demo的效果：Demo　　一、 目的　　本教程的目的是展示如何將規律的列表菜單變成一個較小的顯示下拉式功能表。　　這個技巧在由許多連結組成的導航上非常有用，例如下面的截圖，可以將所有按鈕壓縮成一個優雅的下拉。　　二、Nav HTML標記XML/HTML

 　　px像素(Pixel)。相對長度單位。像素px是相對於顯示器螢幕解析度而言的。　　em是相對長度單位。相對於當前對象內文本的字型尺寸。如當前對行內文本的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。　　任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選取器中聲明 Font-size=62.5%，這就使em值變為 16px*6

 　　計算優先順序　　優先順序是根據由每種選取器類型構成的級聯字串計算而成的。他是一個對應匹配運算式的權重。 如果優先順序相同，靠後的 CSS 會應用到元素上。　　注意：元素在文檔樹中的位置是不會影響優先順序的　　優先順序順序　　優先順序逐級增加的選取器列表：　　通用選取器(*)　　元素(類型)選取器　　類別選取器　　屬性選取器　　偽類　　識別碼選取器　　內聯樣式　　基於類型的優先順序　　優先順序是根據選取器類型進行計算的.

 　　Text　　color 設定text的顏色　　text-align 設定text的對齊　　text-decoration 設定text的底線　　text-transformation 設定字母的大小寫和單詞的首字母大寫　　line-height 設定行高　　letter-spacing 設定字元間的距離　　Font　　font-family 設定字型　　font-size 設定字型的大小　　font-style 設定字型為斜體還是正常顯示　　font-weight

 　　這篇文章主要介紹了CSS中值得記住的一些技巧,文中介紹的這些屬性在平時的應用中雖然不是經常能夠見到,但非常有效率,需要的朋友可以參考下　　Box-sizing　　儘管box-sizing在CSS3中才被引入，其有一個值是border-box，讓元素的高和寬包含了填充和邊框。　　CSS Code複製內容到剪貼簿　　.div {　　width: 150px;　　height: 100px;　　border: 1px solid #ccc;　　box-sizing:

 　　下拉式功能表　　display：block，盒子會由收縮包圍元素變為擴充填充父元素　　position：absolute是相對於父元素的絕對位置，其座標都是相對於父元素的，比如對齊下拉式功能表　　CSS Code複製內容到剪貼簿　　.mene li

 　　簡單有效，同時支援可變高度。為內容指定帶有廠商首碼的transform: translate(-50%,-50%)和top: 50%; left: 50%;樣式就可以讓內容塊置中。　　CSS Code複製內容到剪貼簿　　.is-Transformed {　　width: 50%;　　margin: auto;　　position: absolute;　　top: 50%; left: 50%;　　-webkit-transform: translate(-50%,-50%);　

平常我們要實現倒影的效果，一般的做法是使用多個DOM元素絕對位置+scale(負-1)或者rotate。這種方法的缺點是佔據空間以及DOM元素過多。在使用webkit核心的瀏覽器中(chrome,safari,移動端瀏覽器)，可以使用-webkit-box-reflect屬性來實現倒影，文法如下所示[ above | below | right | left ]? <length>?