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

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

由于XHTML+CSS是自己自學(xué)的，所以有的地方術(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 圖片標(biāo)簽的樣式大家是各有不同，目的都是一個讓瀏覽器里默認圖片是沒有邊框的，還有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; 這個習(xí)慣也就留到了img 上，所以大家還是可以寫成border: none; 但是寫input 的時候，要邊框沒有的時候還是要寫border: 0 none;

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

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

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

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

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

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

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

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

在下面我寫了.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 這個樣式搭頁面的過程中欄目或是標(biāo)題欄肯定會有更多這個鏈接，所以我就在前面加了這個樣式，在后面就減少了float: right 這個屬性，這個的意義不是很大。

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

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

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

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

有的燈箱相冊代碼寫的不是很完善，例如：ie6下，當(dāng)內(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 {} 就可以，這樣問題就會解決了

還有就是復(fù)選框和單選框的地方。

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

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

還有一個就是button {}

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

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

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

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

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

網(wǎng)頁標(biāo)題：CSS日常公用樣式與一些解決方案
轉(zhuǎn)載來于：http://www.bm7419.com/news45/212745.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、全網(wǎng)營銷推廣、品牌網(wǎng)站制作、外貿(mào)建站、網(wǎng)站內(nèi)鏈、網(wǎng)站導(dǎo)航

廣告

聲明：本網(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)