css相的技巧整理

1、2022-4-3CSS屬性簡寫，為網(wǎng)頁加載提速通過使用CSS 縮寫以及其他的一些簡單技巧，你可以在很大程度上減少樣式表的大小，以有效的為網(wǎng)頁加載提速。同時將字體的六個屬性簡寫為一行，這樣便節(jié)省下了五行代碼；2022-4-3在css樣式里-如何極限提升網(wǎng)站速度網(wǎng)站的速度是一個站長最為頭疼的事，但是如何極限提升網(wǎng)站速度呢？這里來說下div+CSS布局的時候怎樣做到最精簡的代碼，以達到極限提升網(wǎng)站速度的目的。1、 css樣式盡量合并成一個外部文件，采用link方式導入到網(wǎng)頁中來，可以減少不少內(nèi)嵌在網(wǎng)頁中的css代碼。 2、多用全局樣式， 比如網(wǎng)頁中只有一個h1標簽，那么直接在css文件中定義h1的樣

2、式，如h1.，而不要給h1標簽加class或者id來定義樣式，這樣一 來就可以省略class=或id=，整個網(wǎng)頁精簡下來就可以簡潔不少代碼。3、多采用父級繼承樣式控制，在div中盡量使 用不同標簽來控制網(wǎng)頁表現(xiàn)形式，比如一個div中需要有3個不同顏色的文字，這樣做同樣可以減少不少的class和id。2022-4-3body font-size:12px; font-family:宋體,Arial, Helvetica, sans-serif;color:#363636;background:#e5e5e5 url(./images/bpbg.jpg) center top no-repeat;

3、html, body, div, span, h1, h2, h3, h4, h5, h6, em, img, strong, sub, sup, tt,dd, dl, dt, form, label, table, caption, tbody, tfoot, thead, tr, th, td,ul,li,p,a margin: 0; padding: 0; .cbody margin:0 auto;width:982px; position:relative;background:#FFF;input,select,textarea vertical-align:middle;img b

4、order:0;ul,li list-style-type:none;a:link,a:visitedtext-decoration:none;color:#010101;a:hovertext-decoration:underline;color:#ED0909;.overhideoverflow:hidden;text-indent:-100em; .clear clear: both;.clearfix:after clear: both;content: ;display: block;font-size: 0;line-height: 0;visibility: hidden;wid

5、th: 0;height: 0;.clearfixzoom:1 每一個用css控制的網(wǎng)站，都需要有一個默認的全局定義的css樣式，今天寫了一份，分享給大家，以后作為默認的使用，具體細節(jié)需要略微調整，這樣可以省很多事。CSS全局樣式基礎代碼全局樣式基礎代碼2022-4-3css解決英文字符與阿位伯數(shù)字自動換行word-wrap是控制換行的,可?。簑ord-wrap:break-word | normal | break-all | keep-all break-word：它主要用來是控制是否將強制把單詞換行，對于中英中文沒有任何問題，但是對于長串的英文無效。 normal：英文單詞不被拆開，它是

6、默認值。 break-all，主要解決了長串英文的問題。主要用來是斷開單詞。在單詞到邊界時，下個字母自動到下一行。 keep-all，是指對于中、日、單詞之間不斷詞。即只用此時，不用word-wrap，中文就不會換行了。（英文語句正常。） IE下：使用word-wrap:break-word;所有的都正常。 FF下：如這2個都不用的話，中文不會出任何問題。英文語句也不會出問題。但是，長串英文會出問題。 為了解決長串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式會導致，普通的英文語句中的單詞會被斷開（ie下也是）。 最好的方式是 w

7、ord-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; word-break:break-all; 也不是 word-wrap:break-word; overflow:auto; （Firefox瀏覽器）連續(xù)的英文字符和阿拉伯數(shù)字的斷行,Firefox的所有版本的沒有解決這個問題,我們只有讓超出邊界的字符隱藏或者,給容器添加滾動條 #wrapword-break:break-all; width:200px; overflow:auto; abcdefghijklmnabcdefghijklmnabcdefghijklm

8、n111111111 2022-4-3IE6下CSS定義DIV高度小于12IE6下默認的字體尺寸大致在 12 14px 之間，當你試圖定義一個高度小于這個默認值的 div 的時候， IE 會固執(zhí)的認為這個層的高度不應該小于字體的行高。所以即使你用 height:4px; 來定義了一個 div 的高度，實際在 IE 下顯示的仍然是一個 12 px 左右高度的層。添加overflow: hidden解決問題。在IE6中，使用CSS定義DIV的高度的時候經(jīng)常遇到這個問題，就是當DIV的最小高度小于一定的值以后，就會發(fā)現(xiàn)，無論你怎么設置最小高度，Div的高度會固定在一個值不再發(fā)生變動，這個問題很是煩人

9、。如下面的情況。HTML代碼 這是因為在IE6中，系統(tǒng)默認的并非是Div有一個默認的高度，而是你沒有解決一個隱藏的參數(shù)，font-size，這個是ie6中對于Div屬性中的font-size大小和你系統(tǒng)css中定義的font-size有很大關系，因此必須單獨定義這個Div的font-size，這樣才能解決這個問題。更改后的代碼如下。HTML代碼 2022-4-3如何使用CSS Sprites技術進行圖片合并通過CSS Sprites技術將多個圖片整合到一個圖片中可以有效減少網(wǎng)站的HTTP請求數(shù)，從而實現(xiàn)減少網(wǎng)站加載時間，下面細講解如何操作：2022-4-31、注意：不要等到你完成切片之后才開始

10、sprite.如果你邊切圖邊寫CSS，然后等你完成了整個網(wǎng)站之后再來拼接這些圖片到一個Sprite中，你就不得不完全重寫你的CSS，你也必須要花費很多的時間來用PS拼接大量的圖片這是件令人倍感糾結的事情。但是如果邊切圖邊整合，就會比較容易些。把圖片放到它要顯示的地方的相對的地方這個小技巧貌似比較難理解。我直到創(chuàng)建一個比較大的sprite的時候才理解到這一點。比如，如果我們希望一個圖片出現(xiàn)在一個元素的左側：2022-4-32、將那個圖片放到sprite圖片的右邊(本文開始的那個sprite圖片)。這樣的話，當你通過CSS移動背景圖片的位置的時候，基本上不可能有其它的小圖片意外的出現(xiàn)在它的附近。使

11、用Sprite的時候常常遇到的一個問題是圖片會出現(xiàn)在它不該出現(xiàn)的位置。定位時避免使用bottom或right等當使用CSS sprite的時候，只用background-position: bottom -300px或background-position: right -200px;非常容易。這剛開始的時候是可行的，但是問題是，當你在寬度上或高度上擴展相關sprite圖片的時候，原先設置的位置可能是錯的，因為那個圖片已經(jīng)不再Sprite圖片的底部或右部了。使用確切的位置來避免這個問題。給每個圖片足夠的空間就像你在本文頂部的實例圖片看到的那樣，那些小圖片都被預留了足夠的空間。為什么不把他們?nèi)?/p>

12、一塊來讓sprite圖片更小 因為使用這些圖片的元素通常都會有大量的內(nèi)容而且可能會需要擴展的間距，以至于其它圖片不會意外出現(xiàn)。例子：2022-4-33、例子中的每個條目都有個帶數(shù)字的圖片作為背景圖片。如果你仔細看了上面的那張圖片，你可以看到這三個數(shù)字圖片是如何錯開排列的，這樣如果內(nèi)容增多，其它圖片就不會意外出現(xiàn)。不用擔心Sprite圖片的像素大小如果你的網(wǎng)站經(jīng)過良好的設計，那么你將會有一大堆的圖片來整合進到sprite里面，這樣你就需要你個非常大的sprite來恰當?shù)姆胖眠@些圖片。這是很不錯的。sprite里的空白不會占用太多的文件大小。上使用的Sprite

13、圖片有1,000px2,000 px那么大，但是圖片的大小僅僅16.7kb2022-4-34、 當用戶往U盤中拷200張圖片，會等很久。但是如果弄成一個文件，再拷貝就會快很多。CSS Sprites 的目的就是通過整合圖片，減少對服務器的請求數(shù)量，從而加快頁面加載速度。2022-4-35、實現(xiàn)方法：首先將小圖片整合到一張大的圖片上然后根據(jù)具體圖標在大圖上的位置，給背景定位。background-position:-8px -95px;2022-4-3仔細琢磨了一下運用的還是很巧妙的，在現(xiàn)實的前端開發(fā)中也很有用，至少可以減小圖片的字節(jié)。先看看應用實例吧：實現(xiàn)的原來就是：在一個寬高為0像素的塊狀元

14、素中設置border屬性，例如boxwidth:0px;height:0;border-bottom:50px #F00 solid;border-left:50px #03F solid;border-right: 50px #F90 solid;border-top:50px #6C0 solid;用CSS的border屬性實現(xiàn)三角2022-4-3這樣就有上下左右四個三角形了，再把除了要用的三角外的其他3個三角（border）顏色設置為背景色就ok了。例如這樣就能得到一個顏色為#CCC的向上的三角：to-top display:block; overflow:hidden;width:0p

15、x;height:0px;border:6px solid #ccc;border-color:#ccc #fff;border-width:0 6px 6px 6px; 2022-4-3編寫CSS代碼時樣式命名的規(guī)則命名一直是個讓我頭痛的問題，特別是那些看上去差不多的模塊，所以就得想辦法啦，我總結了下面的方法，雖然還在試驗中。希望對大家有幫助。歡迎大家提出改進的意見。具體如下：要注意的內(nèi)容：一，命名所選用的單詞應選擇不過于具體表示某一狀態(tài)（如顏色、字號大小等）的單詞，以避免當狀態(tài)改變時名稱失去意義。二，樣式類名由以字母開頭的小寫字母（a-z）、數(shù)字（0-9）、下劃線（_）、減號（-）組成。I

16、D名稱由不以數(shù)字開頭的小寫字母（a-z）、數(shù)字（0-9）、下劃線（_）組成?？墒褂妙愃葡旅娴囊?guī)則:模塊前綴|類型|作用_名稱_狀態(tài)|位置約定模塊、類型、狀態(tài)、位置等的所使用的單詞或其縮寫，保持上面的順序，盡量保持在兩到三個單詞說清用途。2022-4-3例：通用名詞縮寫設置 set成功 suc提示 hint操作 op密碼 pw菜單 menu按鈕 bt文本 tx顏色 c背景 bg邊框 bor居中 center圖標 icon彈出 pop文本輸入框 .input_tx密碼輸入框 .input_pw登錄密碼輸入框 .input_pw_login日志設置成功提示 .hint_suc_blogset相冊彈出

17、的設置層 .pop_set_photo公共提示 .hint_bg文本顏色 .c_tx段落文本顏色 .c_tx_p針對CSS新手整理的CSS技巧2022-4-3 1、不要使用過小的圖片做背景平鋪。這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的區(qū)域，需要 200*200=40, 000 次，占用資源。 2、無邊框。推薦的寫法是 border:none;，哈哈，我一直在用這個。 border:0; 只是定義邊框寬度為零，但邊框樣式、顏色還是會被瀏覽器解析，占用資源。 3、慎用 * 通配符。所謂通配符，就是將 CSS 中的所有標簽均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的占用資源。要有選擇的初始化標簽。 4、CSS 的十六進制顏色代碼縮寫。習慣了縮寫及小寫，這才知道，原來不是推薦的寫法，為的是減少解析所占用的資源。但同時會增加文件體積。孰優(yōu)孰劣，有待仔細考證。 5、樣式放頭上，腳本放腳下。不內(nèi)嵌，只外鏈。 6、堅決不用 CSS 表達式。 2022-4-3 7、使用 引用樣式表，而不是通過 import 導入。 8、一般來說，P