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

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

由于XHTML+CSS是自己自學(xué)的，所以有的地方術(shù)語(yǔ)不太對(duì)的地方，各位酷友要提出來(lái)啊。

一、自己總結(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)頁(yè)制作近三年來(lái)經(jīng)過(guò)參考和自己研究出來(lái)的公用樣式，大體就是這樣，樣式會(huì)根據(jù)網(wǎng)頁(yè)具體的效果進(jìn)行微調(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

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

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

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

還有就是有的酷友會(huì)奇怪我寫的border: 0 none; 這里要寫0 再加一個(gè)none，這個(gè)問(wèn)題我還是想說(shuō)一下是因?yàn)槲以趯懳谋究騣nput 的時(shí)候，發(fā)現(xiàn)在不同的windows 系統(tǒng)外觀下，你光寫border: none 或是border: 0; 都不行，文本框的邊框還是在的，所以就必須寫border: 0 none; 這個(gè)習(xí)慣也就留到了img 上，所以大家還是可以寫成border: none; 但是寫input 的時(shí)候，要邊框沒(méi)有的時(shí)候還是要寫border: 0 none;

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

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

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

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

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

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

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

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

在下面我寫了.fixed 和.clear 這兩個(gè)清除浮動(dòng)的樣式

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

.fixed 的例子

.clear 的例子

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

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

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

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

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

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

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

我們?cè)谟玫竭@些框架開(kāi)發(fā)出的燈箱相冊(cè)時(shí)（就是點(diǎn)擊圖片后圖片彈出圖片與網(wǎng)頁(yè)之間有一層遮罩類的）。

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

如下圖：

這時(shí)候我們會(huì)想到要不要換一個(gè)代碼來(lái)用，但是這個(gè)相冊(cè)代碼除了遮罩這個(gè)外其他都很完善，找不到其他的完善的相冊(cè)時(shí)。我們?cè)趺崔k？

下面就是我寫的css 解決方案！瀏覽器分辨率目前測(cè)試最高的是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%; }

接下來(lái)我來(lái)做一下解釋

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

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

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

三、寫css時(shí)和程序員之間的溝通

各位酷友在搭完頁(yè)面后與程序員溝通時(shí)會(huì)有些小問(wèn)題。

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

例如我們?cè)趯懽蛹?jí)樣式時(shí)，會(huì)這樣寫：.wraper form {}，這樣寫的時(shí)候，我們要考慮這個(gè)頁(yè)面內(nèi)有沒(méi)有分頁(yè)之類的代碼了，因?yàn)閍sp.net程序員會(huì)在有分頁(yè)的頁(yè)面內(nèi)加一個(gè)form 控件這樣我們寫在里面的form 就會(huì)被去掉，所以我們要把.wraper form {} 改成.wraper .formWraper {} 就可以，這樣問(wèn)題就會(huì)解決了

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

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

變成這樣后，前臺(tái)頁(yè)面就會(huì)變亂，所以我們碰到類似的情況時(shí)還是要更改一下寫法

還有一個(gè)就是button {}

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

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

四、一些自己對(duì)大家的建議。

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

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

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

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

廣告

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