表達它

另一個快速嘖嘖。 下面是一些簡單而漂亮的使用CSS的權力，但困難concieve（肯定不是我）開始。 添加陰影效果，對於我們許多人可能是一個大蛋糕peice，使用一些圖像編輯工具，如Photoshop ANF煙花等
為什麼，我選擇了使用CSS的下拉陰影的原因是，通常在創建網頁設計/ HTML應用程序，要求保持迭代。 我的意思是在現有的網站與許多圖片，像顯示freinds列表或圖片庫的，將很難重新處理整個負載已經卸載已添加或刪除的陰影圖像，該問題。
所以，如果你做了一些前瞻性思維，而創造的HTMLS添加這些額外的部門或通常的情況是，你有一個循環邏輯在XSL，PHP生成這些圖標/縮略圖。 JAVA或任何其他的編程/腳本語言，你可以隨時添加，然後僅僅是為客戶不斷變化的需求，使用CSS的顯示屬性，這些陰影顯示和隱藏的問題...我沒有帶這種前瞻性思維在此之前......但ahev現在開始！

在下面的例子中，原始圖像是無陰影和應用需要的dropshadows！ 僅此外，我已經走了一點點額外的，使用約我剛才圖坦卡蒙過關（Well!這些可能是最短的各種教程，所以它是唯一的理由叫他們“嘖嘖”的）， 使用CSS clip屬性為炫耀

原始圖像

CSS陰影效果結果

查看演示 | 下載源文件

置於頂端的樣式表

如果你想一個頁面加載逐步的，我們希望瀏覽器顯示的任何內容，盡快付諸表決，在文檔的HEAD內頁的頂部的CSS。 這使得網頁出現被載入速度更快，這有利於逐步呈現的頁面。 很多內容和較慢的互聯網連接上的用戶頁面，這一點尤為重要。

這是一個記錄的事實，以提高整體用戶體驗，重要的是提供進度指標和視覺反饋。 為了避免重繪頁面元素的情況下，如果他們的風格變化，一些瀏覽器，包括IE，阻止頁面的渲染，直到CSS是滿載。 正因為如此，用戶是得到 一個空白頁。

W3的HTML規範“還規定，CSS，我必須包括在HTML頁面的HEAD部分。 at the bottom of the page, so it's best not to use it.還注意到@import行為，在IE瀏覽器使用的是相同<link>在頁面的底部，所以最好不要使用它。

避免使用特定功能的瀏覽器

過濾器：過濾器的使用 增加內存消耗，並且每個元素的應用，而不是每幅圖像，這樣的問題，乘以。 此外，過濾器是IE專有的，因此不會工作打算在其他瀏覽器。 如果你想透明或漸變的背景，用圖像1Pixel。
表現形式：CSS表達式是在CSS中有一個很好的功能，但仍然是IE瀏覽器的特定功能。 此外，重要的是要注意的是，這些表達式 評估時，頁面呈現和調整，滾動，甚至當用戶移動鼠標在頁面。 不用說，這可能會影響你的頁面的性能。 因此，在簡單的話，應避免使用CSS表達式，除非你覺得它的優點，重量超過其利弊'

外化你的CSS

使用外部CSS會導致更快的加載 ，因為是由瀏覽器的JavaScript和CSS文件緩存的網頁。 內嵌在HTML文檔中的CSS得到下載的HTML文件要求的時間。 這實際上可能降低的HTTP請求的數量，但後來增加了HTML文檔的大小。 外部CSS瀏覽器緩存的HTML文檔的大小沒有增加HTTP請求的數量減少。

請注意，如果您的網站上的用戶，每個會話有多個頁面訪問量和您的網頁重新使用相同的腳本和樣式很多，有更大的緩存外部文件的潛在利益。

包你的CSS文件

包裝或吱嘎你的CSS是從代碼中刪除不必要的字符，以減少其大小，從而提高加載時間的做法。

CSS可以我嘎吱嘎吱消除所有的意見和任何不必要的字符，如空格，換行符等

一個CSS復位/ CSS來設置元素樣式到一個特定的基線，創建跨各種瀏覽器的一致性。

我們都已經通過編寫跨瀏覽器的CSS的惡夢。 所以，當我們開始編寫我們的CSS，這是一個實踐重置它首先刪除/重設任何跨瀏覽器不一致性。 CSS的復位，是簡單的幾行的CSS，你開始你的CSS，給你一個乾淨的基地開始建設讓你的。

我通常傾向於使用的CSS重置看起來像這樣

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

OL，UL {
列表樣式：無;
}

H1，H2，H3，H4，H5，H6 {
字體大小：100％;
字體重量：正常;
}

重置瀏覽器的字體大小
還注意到，已被應用到瀏覽器中的下面一行字體大小復位...

html {font-size: 76%;}

上述的CSS重置瀏覽器的字體大小為10像素，這使得它可以使用相對字體大小（這是每一個圍合規的重要何衛青）
例如，在下面的定義，跨度字體大小設置為10像素，在paragarph被設置為14像素...

span {font-size: 1em;}
p {font-size: 1.4em;}

例如。
像這樣指定一個CSS屬性，

保證金：5PX 0;

實際上意味著，

保證金：5PX 0px 5PX 0px;

意味著，第一margin屬性：

頂部和底部的保證金= 5PX | |左邊和右邊距= 0px

因此將“不再速記”

保證金：5PX 0px 5PX 0px;（T，R，早，午）

你甚至可以用3個值

保證金：5PX 0 5PX;

這意味著

頂部= 5PX | |左，右= 0px | |底部= 5PX

Internet Explorer會自動填充到HTML表單按鈕。
這個空間根據按鈕的文本的長度延伸。

解決的辦法是增加其風格的溢出.... 即

。按鈕{
溢出：可見;
填充左：！10px重要
填充右：！10px重要;
任何其他樣式此按鈕...
}

或

< input type="submit" value="Internet explorer respects my padding" style="overflow:visible; padding-left:10px !important; padding-right:10px !important;" >;