CSS

　　瞭解 CSS 　　層疊樣式表 (CSS) 是一系列格式設定規則，它們控制 Web 頁面內容的外觀。使用 CSS 設定頁面格式時，內容與表現形式是相互分開的。頁面內容(HTML 程式碼)位於自身的 HTML 檔案中，而定義代碼錶現形式的 CSS 規則位於另一個檔案(外部樣式表)或 HTML 文檔的另一部分(通常為 部分)中。使用 CSS 可以非常靈活並更好地控制頁面的外觀，從精確的布局定位到特定的字型和樣式等。　　CSS 使您可以控制許多僅使用 HTML

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

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

採用 Webkit 核心的瀏覽器主要有蘋果的 Safari 和 Google 的 Chrome，Webkit 核心有著良好的效能，並且在某些細節對使用者非常友好，頁面輸入框（input 標籤）聚焦高亮和文字框（textarea 標籤）縮放功能就是其中的兩個對使用者非常友好的設計。可是這兩個設計在對方便使用的同時，卻會對頁面設計產生影響。CSS 屏蔽 Webkit 輸入框高亮下面是預設情況下，Webkit 瀏覽器裡輸入框擷取焦點時的情況。我們可以發現 Webkit

對於前端工作者,最痛苦的事莫過於瀏覽器安全色性的調試,而這最痛苦的事中,最變態的莫過於微軟的三個版本IE6.0/IE7.0/IE8.0. 為了讓所寫代碼在各主流瀏覽器中正常運行，我們不得不為各種瀏覽器寫對應的樣式。本文，青鳥將為你總結CSS針對各瀏覽器的相容HACK(以IE6/IE7/IE8 /FF為主),以及IE特有的條件注釋使用方法.一、通用區分方式：IE6、IE7能識別*，標準瀏覽器（如FF）不能識別*；IE6能識別*，但不能識別 !important；IE7能識別*，也能識別

白雙邊距是一個極容易誤解的CSS特性.它不是CSS的bug,但如果我們一旦誤解,將會給你帶來很多麻煩.先看如下demo代碼: <!doctype html> <html> <head> <meta charset="utf-8">

瞭解CSS的尋找匹配原理，讓CSS更簡潔、高效用了這麼多年的CSS，現在才明白CSS的真正匹配原理，不知道你是否也跟我一樣？看1個簡單的CSS：DIV#divBox p span.red{color:red;}，按習慣我們對這個CSS

　1. CSS Reset/重設　　你也許需要先瞭解什麼是css重設。然後怎麼樣寫css重設呢。　　你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下來應該根據你的項目改成你自己的reset.　　不要使用* { margin: 0; padding: 0; } 。我個人很愛用，原作者提到使用這句並不適用一些元素比如選項按鈕。不過俺部落格裡面也沒有選項按鈕，如果有，又重新給選項按鈕重設就好了嘛。　　2.

一，用CSS讓DIV層水平置中對需要水平置中的DIV層添加以下屬性:margin-left: auto;margin-right: auto; 這樣在FF中已經置中了,可是在IE中看還是沒有置中!問題並不在CSS而在XHTML網頁本身.需要加上這樣的代碼才能使得上述設定有效果:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

預設字型樣式會因為瀏覽器不同，版本不同，甚至作業系統不同的設定不同導致如果直接利用預設樣式的頁面在各個瀏覽器下顯示非常不一致，於是就有了類似YUI的reset之類用來盡量重寫瀏覽器的預設設定保證各個瀏覽器樣式一致性的做法。拿字型來說，各個瀏覽器預設的字型種類、字型大小和字型行高都不一樣，比如IE8的中文版在Windows XP下顯示網頁時預設字型是宋體，而英文版肯定不會如此。所以我們需要統一設定預設的字型樣式，以便實現一致的顯示效果來保證設計的一致性和提高開發效率。樣式優先順序通常使用

<style type="text/css">.textBottom {color: #0000cc;position: absolute;left: 3em;top: 1em;font: 26px Century Gothic,Arial, Helvetica, sans-serif;clip: rect(18px auto auto auto);}.textTop {color: #ff0000;position: absolute;left:

　　CSS學起來並不難，但在大型項目中，就變得難以管理，特別是不同的人在CSS書寫風格上稍有不同，團隊上就更加難以溝通，為此總結了一些如何?高效整潔的CSS代碼原則： 1. 使用Reset但並非全域Reset　　不同瀏覽器元素的預設屬性有所不同，使用Reset可重設瀏覽器元素的一些預設屬性，以達到瀏覽器的相容。但需要注意的是，請不要使用全域Reset：*{ margin:0; padding:0;

1.想要how are you 中的空格有效：需加 word-spacing:20px;2.固定div的寬度後，裡面的文本是否想要溢出or隱藏： 需要設定 text-overflow:ellipsis;overflow:hidden;        text-overflow:ellipsis;

CSS圖片的縮放：在CSS中圖片的縮放是通過width和height兩個屬性來實現的。Width和height屬性：可以設定為相對大小，也可以設定為絕對大小。Width和height屬性設定為相對大小時，當拖動縮放瀏覽器時視窗改變其寬度時，圖片的大小也會相應地發生變化。如果僅僅只設定了圖片的width屬性，而沒有設定height屬性時，圖片本身會自動給縱橫比例縮放，如果只設定height屬性也是一樣的道理。只有當同時高設定width和height屬性時才會不等比例縮放。CSS圖片的縮放樣本：&l

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

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

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

 　　簡單有效，同時支援可變高度。為內容指定帶有廠商首碼的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%);　

前一陣看到一篇文章《使用css3仿造window7的開始菜單》，文中僅使用CSS3 實現了Windows 7 開始菜單的動態效果，很久以來一直被WPF/Silverlight 山上的風景所吸引，未成想其他的山也同樣引人入勝。於是心血來潮也嘗試著做了一個Windows 7 案頭效果，先來看幾張截圖吧。傳統型程式滑鼠Hover 效果：工作列程式滑鼠Hover 效果：開始菜單效果：傳統型程式表徵圖案頭背景及程式表徵圖的結構如下： &

 　　學習本系列教程需有一定html和css基礎，也就是指您之前做過網頁，會用表格版面配置。如果您剛開始學習網頁製作，不知道什麼是表格版面配置及html和css，建議您先去充電，否則學習本教程會非常吃力或者根本就聽不懂。　　由於時間關係，本教程只講解一些基礎知識，讓您從原來的表格版面配置跨入到web標準(div+css)布局，會使用web標準製作出常見的頁面，這也達到了本教程的目的。　　本教程多以執行個體形式循序漸進講解，執行個體涉及到哪些關鍵點或痛點就講解什麼，較少講解概念。因為概念