CSS日常公用樣式與一些解決方案

由于XHTML+CSS是自己自學的，所以有的地方術(shù)語不太對的地方，各位酷友要提出來啊。

一、自己總結(jié)的公用樣式解析

html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }

img { border: 0 none; vertical-align: top; }

ul, li { list-style-type: none; }

h1, h2, h3, h4, h5, h6 { font-size: 14px; }

body, input, select, button, textarea { font-size: 12px; font-family: Tahoma, Geneva, sans-serif; }

button { cursor: pointer; }

i, em, cite { font-style: normal; }

body { background: #fff; color: #363636; line-height: 1.2; }

a, a:link { color: #222; text-decoration: none; }

a:visited {}

a:active, a:hover { text-decoration: underline; }

a:focus { outline: none; }

.fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }

.fixed { display: block; min-height: 1%; }

*html .fixed { height: 1%; }

.clear { diplay: block!important; float: none!important; clear: both; overflow: hidden; width: auto!important; height: 0!important; margin: 0 auto!important; padding: 0!important; font-size: 0; line-height: 0; }

.more { float: right; }

.more a { font-weight: normal; font-size: 12px; }

.fl, .fr { display: inline; float: left; }

.fr { float: right; }

這是我做網(wǎng)頁制作近三年來經(jīng)過參考和自己研究出來的公用樣式，大體就是這樣，樣式會根據(jù)網(wǎng)頁具體的效果進行微調(diào)。

注：在這里寫這些注解就是為了讓剛接觸到CSS的朋友明白一些東西不至于繞彎路，知道這些代碼都是怎么回事的就可以跳到第三條了，可能寫的有些啰嗦。呵呵！

第一行html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td 樣式大家應(yīng)該都明白這樣是把原先的選擇器自帶的外填充和內(nèi)填充去掉歸0

也許有人還在用“* ”通配符，但是這樣是有缺點的會讓代碼變得冗余尤其是子父級嵌套關(guān)系越深越麻煩，建議大家要盡量減少使用，在這里建議大家多使用我在第一行里寫的通用樣式，可能選擇器還比較少，但是我日常用到的選擇器就這么些，如果大家有用到pre fieldset blockquote 這些選擇器或是其他的選擇器一樣可以寫到里面。

第二行里img 圖片標簽的樣式大家是各有不同，目的都是一個讓瀏覽器里默認圖片是沒有邊框的，還有ie6里圖片底部出現(xiàn)的空白間隔消失掉。有的愛用display:block; border: none;

但是這樣寫的話，都會有這樣或那樣的缺點，display: block; 這樣寫的話你要讓圖片左右居中于一個盒子內(nèi)的時候你怎么辦？margin: auto; 這樣嗎？但是你要讓外面的盒子有一個實際的寬度，如果是換成vertival-align: top; 或是vertival-align: middle; 的話那么這個實際的寬度就不必寫了，只用加一個text-align: center;圖片也不用加外填充了。

還有就是有的酷友會奇怪我寫的border: 0 none; 這里要寫0 再加一個none，這個問題我還是想說一下是因為我在寫文本框input 的時候，發(fā)現(xiàn)在不同的windows 系統(tǒng)外觀下，你光寫border: none 或是border: 0; 都不行，文本框的邊框還是在的，所以就必須寫border: 0 none; 這個習慣也就留到了img 上，所以大家還是可以寫成border: none; 但是寫input 的時候，要邊框沒有的時候還是要寫border: 0 none;

第三行ul, li 里就不用解釋了吧，大家都明白怎么回事。

第四行h1, h2, h3, h4, h5, h6 還是根據(jù)要搭的頁面標題字體大小來修改，或是把h1 h2 h3 h4 這些選擇器分開來寫各自的字體大小。

第五行body, input, select, button, textarea 是因為我搭頁面的時候發(fā)現(xiàn)ie6里的文本框和下拉菜單等... 里的字體大小不是正常的12號字體，所以在兼容性上不是很好，所以我就寫了字體的大小為12號，然后在firfox 里這些標簽的字體默認又是宋體，所以我就又寫上了字體，然后body 也要寫字體大小和大小，所以就在input 的前面加上了body，所以后面就不用再寫了。

第六行button 這個按鈕的鼠標觸發(fā)屬性是默認的箭頭，在用戶體驗上不是特別好，所以我把鼠標觸發(fā)的屬性改成了小手。

第七行就是在寫一些不是特別重要或是裝飾的標簽時我就是用到這些選擇器由于他們都有文字的默認屬性，所以我去掉了，在用到的時候不至于出問題。

第八行body 寫背景色是因為有的windows 系統(tǒng)外觀會把瀏覽器背景色也改成別的色，所以為了不會問題，就加上背景白色了，然后再加上文字顏色，字體大小和字體我在前面已經(jīng)寫了。

第九行到第十一行a:link 這些大家寫的都差不多吧?

第十二行點擊鏈接時出現(xiàn)的虛線框消失，就是消除焦點。（描述不太專業(yè)，見諒！）

在下面我寫了.fixed 和.clear 這兩個清除浮動的樣式

具體這兩個我都用在什么地方呢？我畫了兩張示意圖看了后大家就會明白了！

.fixed 的例子

.clear 的例子

還有就是講解一下關(guān)于.clear 里面很多屬性我要寫!important 的問題

因為我們在寫子級盒子浮動的時候肯定會寫到float: left; margin或是padding，還有width 等等，我也在.clear的屬性里把盡可能會發(fā)生沖突的屬性加了!important，瀏覽器就會把這些屬性的優(yōu)先級排到最前，并且ie6也是支持讀取!important的，大家會想到，ie6瀏覽器只要讀到相同的屬性，以最后的屬性為優(yōu)先級，但是他是對于在同一樣式內(nèi)的，而不是同一樣式內(nèi)的屬性他就不會以最后的屬性為優(yōu)先了看下面這段代碼

大家看完這兩段代碼后就會明白了！

.more 這個樣式搭頁面的過程中欄目或是標題欄肯定會有更多這個鏈接，所以我就在前面加了這個樣式，在后面就減少了float: right 這個屬性，這個的意義不是很大。

.fl .fr 這兩個我是在一些需要向左或是向右浮動的盒子上附加的，這樣寫靈活性很高，也可以省掉一部分css代碼。

二、講一些自己對ie6瀏覽器顯示bug的一些兼容樣式

我想現(xiàn)在大家都在用jquery 或是其他一些的js框架吧？

我們在用到這些框架開發(fā)出的燈箱相冊時（就是點擊圖片后圖片彈出圖片與網(wǎng)頁之間有一層遮罩類的）。

有的燈箱相冊代碼寫的不是很完善，例如：ie6下，當內(nèi)容的高度不足以撐滿整個頁面時，再點擊相冊中的一張圖片時，我們發(fā)現(xiàn)圖片后面的遮罩層并沒有把整個瀏覽器占滿。

如下圖：

這時候我們會想到要不要換一個代碼來用，但是這個相冊代碼除了遮罩這個外其他都很完善，找不到其他的完善的相冊時。我們怎么辦？

下面就是我寫的css 解決方案！瀏覽器分辨率目前測試最高的是1050px。

代碼如下：

*html body { overflow-x: hidden; position: relative; height: 99%; margin-top: -1.5%; padding-top: 1%; }

*html { padding-top: 1.5%; }

*html body { overflow-x: hidden; position: relative;height: 99%; margin-top: -1.5%; padding-top: 1%; }

*html { padding-top: 1.5%; }

*html body { overflow-x: hidden; position: relative;height: 99%; margin-top: -1.5%; padding-top: 1%; }

*html { padding-top: 1.5%; }

接下來我來做一下解釋

overflow-x: hidden; position: relative; margin-top: -1.5% 這三個屬性是為了讓高度為99%的時候不在右側(cè)出現(xiàn)滾動條，而padding-top: 1%; 這個是為了讓在高分辨率顯示器下右側(cè)不出現(xiàn)滾動條

而*html { padding-top: 1.5%; } 則是為了添補上面樣式中寫到的margin-top: -1.5%; 這個負值。

大家可以在用jquery或是其他js框架的開發(fā)出來有缺陷的代碼中測試一下這段代碼

三、寫css時和程序員之間的溝通

各位酷友在搭完頁面后與程序員溝通時會有些小問題。

注：下面的建議里寫的都是關(guān)于和asp.net程序員之樣式命名的問題。

例如我們在寫子級樣式時，會這樣寫：.wraper form {}，這樣寫的時候，我們要考慮這個頁面內(nèi)有沒有分頁之類的代碼了，因為asp.net程序員會在有分頁的頁面內(nèi)加一個form 控件這樣我們寫在里面的form 就會被去掉，所以我們要把.wraper form {} 改成.wraper .formWraper {} 就可以，這樣問題就會解決了

還有就是復選框和單選框的地方。

類似于這樣的寫法在asp.net里大部分程序員還是愛拿服務(wù)器控件，輸出到前臺頁面后，就會變成

變成這樣后，前臺頁面就會變亂，所以我們碰到類似的情況時還是要更改一下寫法

還有一個就是button {}

在asp.net 里也會用到服務(wù)器控件，輸出到前臺，就會就成這樣的話我們的樣式又無效了，所以要給這個按鈕起一個樣式名，而不能用選擇器，例：.message_btn {}

差不多就這些問題。以后有了會繼續(xù)更新的！

四、一些自己對大家的建議。

由于自己是自學的css樣式，還有就是沒有英語基礎(chǔ)，所以在這里建議和我一樣也沒有什么英語基礎(chǔ)的也在自學或是有一部分基礎(chǔ)的酷友們在寫樣式的時候盡量手寫，不要用軟件自帶的聯(lián)想功能，當你沒有這個軟件的時候，你就會有些困難了，還有就是樣式的名稱盡量用英文，就算你不明白這個名字是什么意思，也可以先翻譯一下，知道大概的意思，以后用的多了自然也就知道是什么意思了，對于以后學習其他的東西是有幫助的。

推薦剛剛學習和有了一部分基礎(chǔ)的酷友們一本CSS的進階書籍，精通CSS：高級Web標準解決方案這本書的封面是青灰色的。大家可以上網(wǎng)看看！

文章名稱：CSS日常公用樣式與一些解決方案
本文地址：http://jinyejixie.com/news/212745.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、網(wǎng)站改版、網(wǎng)站導航、云服務(wù)器、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)