css相的技巧整理

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

2、式，如h1.，而不要給h1標(biāo)簽加class或者id來定義樣式，這樣一 來就可以省略class=或id=，整個(gè)網(wǎng)頁(yè)精簡(jiǎn)下來就可以簡(jiǎn)潔不少代碼。3、多采用父級(jí)繼承樣式控制，在div中盡量使 用不同標(biāo)簽來控制網(wǎng)頁(yè)表現(xiàn)形式，比如一個(gè)div中需要有3個(gè)不同顏色的文字，這樣做同樣可以減少不少的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 每一個(gè)用css控制的網(wǎng)站，都需要有一個(gè)默認(rèn)的全局定義的css樣式，今天寫了一份，分享給大家，以后作為默認(rèn)的使用，具體細(xì)節(jié)需要略微調(diào)整，這樣可以省很多事。CSS全局樣式基礎(chǔ)代碼全局樣式基礎(chǔ)代碼2022-4-3css解決英文字符與阿位伯?dāng)?shù)字自動(dòng)換行word-wrap是控制換行的,可?。簑ord-wrap:break-word | normal | break-all | keep-all break-word：它主要用來是控制是否將強(qiáng)制把單詞換行，對(duì)于中英中文沒有任何問題，但是對(duì)于長(zhǎng)串的英文無(wú)效。 normal：英文單詞不被拆開，它是

6、默認(rèn)值。 break-all，主要解決了長(zhǎng)串英文的問題。主要用來是斷開單詞。在單詞到邊界時(shí)，下個(gè)字母自動(dòng)到下一行。 keep-all，是指對(duì)于中、日、單詞之間不斷詞。即只用此時(shí)，不用word-wrap，中文就不會(huì)換行了。（英文語(yǔ)句正常。） IE下：使用word-wrap:break-word;所有的都正常。 FF下：如這2個(gè)都不用的話，中文不會(huì)出任何問題。英文語(yǔ)句也不會(huì)出問題。但是，長(zhǎng)串英文會(huì)出問題。 為了解決長(zhǎng)串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式會(huì)導(dǎo)致，普通的英文語(yǔ)句中的單詞會(huì)被斷開（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ù)的英文字符和阿拉伯?dāng)?shù)字的斷行,Firefox的所有版本的沒有解決這個(gè)問題,我們只有讓超出邊界的字符隱藏或者,給容器添加滾動(dòng)條 #wrapword-break:break-all; width:200px; overflow:auto; abcdefghijklmnabcdefghijklmnabcdefghijklm

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

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

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

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

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

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

14、素中設(shè)置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屬性實(shí)現(xiàn)三角2022-4-3這樣就有上下左右四個(gè)三角形了，再把除了要用的三角外的其他3個(gè)三角（border）顏色設(shè)置為背景色就ok了。例如這樣就能得到一個(gè)顏色為#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代碼時(shí)樣式命名的規(guī)則命名一直是個(gè)讓我頭痛的問題，特別是那些看上去差不多的模塊，所以就得想辦法啦，我總結(jié)了下面的方法，雖然還在試驗(yàn)中。希望對(duì)大家有幫助。歡迎大家提出改進(jìn)的意見。具體如下：要注意的內(nèi)容：一，命名所選用的單詞應(yīng)選擇不過于具體表示某一狀態(tài)（如顏色、字號(hào)大小等）的單詞，以避免當(dāng)狀態(tài)改變時(shí)名稱失去意義。二，樣式類名由以字母開頭的小寫字母（a-z）、數(shù)字（0-9）、下劃線（_）、減號(hào)（-）組成。I

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

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