此頁面上的內容需要較新版本的 Adobe Flash Player。

獲取 Adobe Flash Player

網站首頁   |   關于伊維   |   網站建設   |   軟件開發   |   案例欣賞   |   配套服務   |   新聞動態   |   技術支持   |   聯系我們
  新聞動態 News
  伊維觀點
 
 
  虛擬空間 域名注冊
  優化推廣 網站推廣
  企業郵箱 短信平臺
  平面設計 定制印刷
  戶外廣告  
 
伊維互聯的成長歷程與資質
為您解答售
前的一切問題
最新客戶與公司動態
伊維互聯的
成長歷程與資質
給我們發送郵件
最新客戶與
公司動態
首頁 新聞動態 最新動態
重構中的模塊化設計: 樣式的作用域
  

很久沒有更新 blog 了,這段時間實在是發生了很多的事,累身累心。但還是有很多想做的事,比如更新merceCSS、把一直以來所總結的有關模塊化的內容整理出來跟大家分享、參加交流會等等。

模塊化設計我已經提過很多了,像《 從宜家的家具設計講模塊化 》、《 頁面重構中的模塊化思維 》、《 頁面重構中的組件制作要點 》都是跟模塊化相關的,不過之前一直沒有講到具體實現方面的內容,只是一些思維。這次重點講一下實現方面的內容,權當到目前為止我對模塊化的一些總結整理。

要做好模塊化,我覺得理解好樣式的作用域是很重要的,所以將這部分作為這個系列的第一篇。

寫過程序的同學應該都知道,變量是有作用域的(不知道的同學自己去問谷歌,這里就不作解釋了),樣式的定義也同樣存在著作用域的問題,即定義的作用范圍,很容易就能理解,如下面的p的作用域:

/*作用域:全局*/ p{text-indent:2em;}

/*作用域:.demo這個類中*/ .demo p{color:#000000;}

樣式選擇器的優先級是學習樣式的基礎知識,一起簡單回顧下:

標簽的權值為0,0,0,1
類的權值為0,0,1,0
屬性選擇的權值為0,0,1,1
ID的權值為0,1,0,0
important的權值為最高1,0,0,0
使用的規則也很簡單,就是 選擇器的權值加到一起,大的優先;如果權值相同,后定義的優先 。雖然很簡單,但如果書寫的時候沒有注意,很容易就會導致CSS的重復定義,代碼冗余。

從上面我們可以得出兩個關鍵的因素:

權值的大小跟選擇器的類型和數量有關
樣式的優先級跟樣式的定義順序有關
了解樣式的權值后有什么作用呢?比如可以這樣用:舉一個最簡單的例子,

body{color:#555555;}.demo{color:#000000;}

這里的文字顏色受全局定義的影響


這里的文字顏色受類demo定義的影響


這里的文字顏色受類demo定義的影響

 
分享到:
 
 
珠海網站建設·最新動態伊維互聯 竭誠為您服務!
建站熱線:0756-2611167 (總機)

相關網站建設鏈接:
珠海做網站|最新動態|珠海網站制作
(聲明:本文部分資料參考來源網絡,如有侵權請及時告之)

 
北京vr赛车体验 中国福利彩票官方网站 彩票大赢家 网络棋牌游戏挣钱吗 3d试机号后分析 纺织袋赚钱吗 新疆11选5开奖纪录 重庆百变王牌官方网站 电脑小说赚钱的软件 体彩河南11选5开奖查询今天 3d今日预测号码预测分析 泰拉瑞亚最赚钱 云南11选5规律 浙江飞鱼实业有限公司 线上代还信用卡怎么赚钱 最新棋牌游戏平台 快乐扑克3遗漏查询