国产激情久久久久影院小草_国产91高跟丝袜_99精品视频99_三级真人片在线观看

CSS教程:語義化方法替代結(jié)構(gòu)化方法介紹

時間:2024-11-04 19:51:35 CSS 我要投稿
  • 相關(guān)推薦

CSS教程:語義化方法替代結(jié)構(gòu)化方法介紹

  CSS代碼的命名慣例一直是大家熱門討論的話題。今天教程網(wǎng)想通過分析一個流行三欄布局中的必要元素,來為大家講解關(guān)于使用語義化方法替代結(jié)構(gòu)化方法來命名CSS類的建議和指導(dǎo)。CSS類命名的語義化VS結(jié)構(gòu)化方式

  一般而言,CSS類名的語義化聲明方式應(yīng)當(dāng)考慮你的頁面中某個相對元素的”用意”,獨(dú)立于它的”定位”或確切的特性(結(jié)構(gòu)化方式)。像left-bar, red-text, small-title…這些都屬于結(jié)構(gòu)化定義的例子。

  讓我們看看下面這個例子:

  …而現(xiàn)在我們想把頁面中的元素調(diào)換一下位置,如果你使用的是結(jié)構(gòu)化方式(1),那么你就要把所有CSS類名重新進(jìn)行定義,因為它們的位置變了。在布局(3)中,我們看到元素都倒轉(zhuǎn)了:right-bar 現(xiàn)在成了 “l(fā)eft-bar”,而left-content 成了 “right-content”。如果你使用語義化方式則避免了此類問題。

  換句話說,使用語義化方式的話,你在修改網(wǎng)站布局的時候可以僅僅修改相關(guān)CSS類的屬性即可,而不用修改它們的類名了,如果網(wǎng)站的代碼很龐大,這將節(jié)省大量的時間。

  教程網(wǎng)會經(jīng)常更新前端開發(fā)/網(wǎng)頁設(shè)計等相關(guān)技術(shù)及教程文章,歡迎及時瀏覽教程網(wǎng)的最新教程及資源。關(guān)于語義化的一些建議:

  在開始之前,我想推薦兩種簡單的編寫較好的CSS代碼的指導(dǎo)方針: 為CSS類名定義的時候,盡量使用小寫字母,如果有兩個以上的單詞,在每個單詞之間使用”-”符或單詞首字母大寫(第一個單詞除外)。如:”main-content”或”mainContent”。 優(yōu)化CSS代碼,僅創(chuàng)建關(guān)鍵主要的CSS類并重新為子元素使用符合HTML標(biāo)準(zhǔn)的標(biāo)簽(h1, h2, p, ul, li, blockquote,…),例如,不要使用這種哦你那個方式:

  而要這樣寫:

  …

  …

  三欄布局中使用語義化方式的例子

  讓我們來通過這個簡單的例子講解一下如何為經(jīng)典的三欄布局使用語義化方式命名:

  使用語義化方式為CSS命名可以像這樣:

  #container{…}

  /*—- Top section —-*/

  #header{…}

  #navbar{…}

  /*—- Main —-*/

  #menu{…}

  #main{…}

  #sidebar{…}

  /*—- Footer —-*/

  #footer{…} Container

  “#container“就是將你頁面中的所有元素包在一起的部分,這部分你還可以命名為:“wrapper“, “wrap“, “page“. Header

  “#header”是網(wǎng)站頁面的頭部區(qū)域,一般來講,它包含網(wǎng)站的logo和一些其他元素。這部分你還可以命名為:”top“, “l(fā)ogo“, “page-header” (或 pageHeader). Navbar

  “#navbar“等同于橫向的導(dǎo)航欄,是最典型的網(wǎng)頁元素。這部分你還可以命名為:“nav”,“navigation”,“nav-wrapper”. Menu

  “#Menu”區(qū)域包含一般的鏈接和菜單,這部分你還可以命名為:“sub-nav“, “l(fā)inks“. Main

  “#Main”是網(wǎng)站的主要區(qū)域,如果是博客的話它將包含你的日志。這部分你還可以命名為:“content“, “main-content” (or “mainContent”)。 Sidebar

  “#Sidebar”部分可以包含網(wǎng)站的次要內(nèi)容,比如最近更新內(nèi)容列表、關(guān)于網(wǎng)站的介紹或廣告元素等…這部分你還可以命名為:“sub-nav“, “side-panel“, “secondary-content“. Footer

  “#Footer”包含網(wǎng)站的一些附加信息,這部分你還可以命名為:“copyright“.

【CSS教程:語義化方法替代結(jié)構(gòu)化方法介紹】相關(guān)文章:

實現(xiàn)html方法結(jié)構(gòu)化10-01

CSS教程之重置默認(rèn)樣式與IE兼容圓角的解決方法07-18

常用Word教程方法09-30

css屬性定位教程07-23

CSS入門教程01-25

杠鈴的部分健身方法教程09-03

CSS閉合浮動元素教程06-26

CSS選擇器教程06-05

CSS教程之盒模型10-17

分享Excel VBA教程 Excel多個表格匯總的方法教程05-15