电竞公司排行榜前十名
專注于網站建設和搭建網絡營銷體系
商視互聯,北京做網站公司
北京做網站,商視互聯 您的位置:網站首頁 > 商視動態 > 網頁設計 > 正文
如何寫出更加規范高效的DIV+CSS樣式呢?
作者:商視互聯   來源:北京網絡公司   日期:2012/10/25 21:35:54   熱度:℃   [ 標簽:網頁設計 **** CSS ]

關于如何規范正確的去寫CSS樣式代碼在這里我給大家做一個詳細的解說,有不明白的地方可以與我聯系,有寫的不對的地方也請批評指出,下面開始教程學習:

讓我們來看看4個關鍵點

1、高效的CSS

2、可維護的CSS

3、組件化的CSS

4、hack-free CSS

一、書寫高效CSS

1、不推薦使用行間樣式:

商視互聯

2、不推薦使用內嵌樣式:

商視互聯

3、推薦使用外聯樣式:

商視互聯

 

--------------------------------------------------------------------------------------------------------------------------

二、為了兼容老版本的瀏覽器,建議使用link引入外部樣式表的方來代替@import導入樣式的方式.
PS:譯者注:@import是CSS2.1提出的所以老的瀏覽器不支持,點擊查看@import的兼容性。@import和link在使用上會有一些區別,利用二者之間的差異,可以在實際運用中進行權衡。關于@import和link方式的比較有幾篇文章可以拓展閱讀:@import vs link、don’t use @import 、Flash of Unstyled Content (FOUC)

不推薦@import導入方式:

商視互聯

推薦引入外部樣式表方式:

商視互聯

--------------------------------------------------------------------------------------------------------------------------

三、使用繼承

低效率的:

商視互聯

高效的:

商視互聯

商視互聯

四、使用多重選擇器

低效率的:
h1 { color: #236799; } 
h2 { color: #236799; }
h3 { color: #236799; }
h4 { color: #236799; }

高效的:
h1, h2, h3, h4 { color: #236799; }

五、使用多重聲明

低效率的:
p { margin: 0 0 1em; }
p { background: #ddd; }
p { color: #666;}

高效的:
p{margin: 0 0 1em;background: #ddd;}

 

六、使用簡記屬性

低效率的:

商視互聯

高效的:

商視互聯

本文網址:

电竞公司排行榜前十名 时时彩包胆技巧 孔帕尼 时时彩倍投会赚钱吗 快速时时正规吗 北京pk10骗局全过程 韩国美女视频美女集中营 冠通乐翻麻将 九洲娱乐平台登录 850通比牛牛作弊手法 彩票大小单双能赚钱吗