中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

適合在所有項(xiàng)目通用的reset.css

2024-03-21    分類: 網(wǎng)站建設(shè)

引言 每每有新項(xiàng)目,第一步就是應(yīng)當(dāng)使用一個reset.css來重置樣式。濫用不如不用,直接拿個現(xiàn)成的reset.css過來將導(dǎo)致后期各種離奇bug的發(fā)生。所以最好還是自己寫一個reset.css,并且要明白每一條reset都是用來做什么的。reset.css本意就是重置樣式,我始終建議把.clearfix放入layout.css,而把h1、h2之類的定義放進(jìn)typography.css。 具體如何規(guī)劃網(wǎng)站CSS結(jié)構(gòu),不在文本討論之列,可以參考Smashing Magazine上的文章,國內(nèi)有差強(qiáng)人意的中文譯版。注意,本文把reset分成了兩個部分,一個是純reset.css,可以用于任何項(xiàng)目。另一個是用于特定項(xiàng)目的“reset”,自定義修改的內(nèi)容,這些內(nèi)容可以放在layout.css、typography.css之類的文件中,他們共同導(dǎo)入到一個base.css形成一個項(xiàng)目的基礎(chǔ)樣式。本文就是來介紹如何寫一個合適所有項(xiàng)目的通用的reset.css,以及介紹在設(shè)置玩reset.css之后需要針對不同項(xiàng)目要首先要設(shè)置的內(nèi)容。

1,基礎(chǔ) 牛頓是站在巨人伽利略的肩膀上的,我們也可以這么做。首先我們要選定一個前進(jìn)的基礎(chǔ)。 請永遠(yuǎn)不要使用

* { margin: 0; padding: 0; } 這問題太多了,在此不多加表述。

目前比較流行的有Eric Meyer的重置樣式和YUI的重置樣式。另有Condensed Meyer Reset簡化Eric Meyer的樣式。有趣的是,Eric的重置樣式也是源于YUI的。而那份簡化版又把Eric的樣式簡化回YUI的樣式了 。但同時,糟糕的是,網(wǎng)上流傳的比較廣的(尤其是國內(nèi))都不是最新的版本。上面兩個頁面里直接看到的都不是最新的,Eric專門為有一個reset.css頁面。而YUI當(dāng)前版本(2.7.0)的reset.css實(shí)際地址里,比上面的頁面中還多一些東西。此外,我們還可以基于一些常見的框架,比較著名的比如Blueprint或者Elements CSS Framework(這個的reset也是源自于Eric Meyer的)。OK,準(zhǔn)備工作就差不多了。以上這些都可以作為參考資料來組織我們自己的reset。我這里主要采用YUI,兼帶Eric的reset。

2,默認(rèn)色彩 對于頁面是不是有默認(rèn)背景色和前景色,YUI和Eric有著不同的看法。 YUI重置背景色為白色而文字顏色為黑色。

html { color: #000; background: #FFF; } 而Eric在當(dāng)前最新版中讓所有顏色為透明,他認(rèn)為透明才是最原始的顏色。雖然他曾一度認(rèn)為也應(yīng)當(dāng)設(shè)置白色背景色、黑色文字顏色。至于最后為什么改了,Eric并沒有給出具體理由。

這個問題我基本認(rèn)為是用戶自定義的更重要還是你的設(shè)計(jì)更重要的問題。我個人的觀點(diǎn)是,如果你的設(shè)計(jì)本身就是白色背景,那么不要設(shè)置背景。一小部分中高水平的用戶,他們會自定義網(wǎng)頁默認(rèn)背景色。設(shè)置成他們喜歡的背景色,比如淺藍(lán)色?;境R姷臑g覽器都提供了這個簡單的功能。而我們的背景色重置則會破壞用戶的選擇——盡管這樣能保證你的設(shè)計(jì)原汁原味的呈現(xiàn)給所有用戶。當(dāng)然我知道,更高端的用戶會用Stylish之類的Firefox擴(kuò)展來自定義頁面。但不得不說,只會用“選項(xiàng)”來調(diào)背景色的用戶更多,不是么?而同時,如果設(shè)計(jì)本身就有其他背景色,比如黑色、藍(lán)色、綠色之類的,OK,這些設(shè)計(jì)當(dāng)然可以設(shè)置背景色。但請不要放進(jìn)reset.css里。這里是重置樣式的地方,不是你設(shè)計(jì)的地方。請把你的設(shè)計(jì)放在更廣袤的土地上。 所以,簡單說來,NO,不要在reset中設(shè)置背景色。

那么,文字顏色呢?原則上來說,也是不應(yīng)該設(shè)置文字顏色的。但是IE中的表單元素中l(wèi)egend這個對象比較特別,跟主題結(jié)合的比較緊密。legend會默認(rèn)有自己的顏色(跟當(dāng)前的主題有關(guān))而不會繼承父元素的顏色(即便設(shè)了color:inherit;)。 從某些角度來說,可以想當(dāng)然地認(rèn)為設(shè)置字體顏色人數(shù)遠(yuǎn)小于設(shè)置背景色的人數(shù);以及認(rèn)為就算設(shè)置了背景色,人們看到legend元素是黑色的也不會覺得奇怪。因此,YUI在其reset中設(shè)置了legend {color: #000;}是無可厚非的。 但反過來說,把這個放到typography.css或者form.css里豈不是更好?不同的頁面設(shè)計(jì),其對legend的色彩要求很可能是不同的,放在reset.css里重復(fù)定義是沒有必要的。因此這條CSS規(guī)則可以作為在reset.css之后首先應(yīng)當(dāng)設(shè)置的規(guī)則。

3,padding和margin 曾經(jīng)一度流行的* { margin: 0; padding: 0; }也就是出于這個目的。讓各個元素的padding和margin都?xì)w零,尤其是那些h1和p以及ul/ol/li之類的元素,還有,body本身也是有margin的。清除元素的padding和margin是很有用的。 YUI這樣做:


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; } 而Eric這樣做:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } 可以看到,Eric把幾乎所有的元素都寫上了規(guī)則。而YUI只把有padding和margin的元素清空樣式,而其他元素則不動。我個人比較偏好YUI的做法,因?yàn)樗@樣可以避免給一些無關(guān)元素帶上不必要的樣式。導(dǎo)致元素過多時的性能下降。但Eric的也有可取之處,他這樣寫,整個reset.css可以小上不少字節(jié),對服務(wù)器的壓力會小一些。但進(jìn)一步想,這種做法跟用 * 來選擇所有元素還有什么區(qū)別呢?這已經(jīng)幾乎囊括了所有元素了!你怎么用呢?看你自己喜好了。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!

新聞標(biāo)題:適合在所有項(xiàng)目通用的reset.css
文章地址:http://m.rwnh.cn/news48/321048.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、軟件開發(fā)做網(wǎng)站、微信公眾號、電子商務(wù)、虛擬主機(jī)

廣告

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

成都網(wǎng)頁設(shè)計(jì)公司
绥化市| 会同县| 醴陵市| 镇雄县| 琼海市| 绥阳县| 鄢陵县| 永宁县| 亚东县| 桑日县| 甘德县| 揭西县| 营山县| 班戈县| 东宁县| 雷山县| 芮城县| 邵东县| 华蓥市| 普洱| 桃江县| 宜君县| 商洛市| 乡城县| 宜城市| 永吉县| 黑龙江省| 凤阳县| 北川| 大姚县| 贵港市| 商都县| 琼结县| 怀来县| 德惠市| 东乡族自治县| 营口市| 重庆市| 民乐县| 太湖县| 东辽县|