Web Standards Solutions 網頁設計標準規格

把標記縮到最短

藉著CSS內使用「後代選擇子」(DESCENDANT SELECTORS)，能消除<div>,<span>與分類屬性。

以網路標準技術製作網站時，如何把標記縮到最短?

方法A:高興地分類
  <div id="sidebar">
   <h3 class="sideheading">About This Site</h3>
   <p>Tis is my site.</p>
   <h3 class="sideheading">My Links</h3>
   <ul class="sidelinks">
   <li class="link"><a href="archives.html">Archives</a></li>
   <li class="link"><a href="about.html">About Me</a></li>
   </ul>
  </div>
  
  .sideheading{
   font-family: Georgia, serif;
   color: #c63;
   border-bottom: 1px solid #ccc;
  }
  .sidelinks{
   list-style-type: none;
  }
  .link{
   font-weight: bold;
  }

方法B:自然地選擇
  <div id="sidebar">
   <h3>About This Site</h3>
   <p>Tis is my site.</p>
   <h3>My Links</h3>
   <ul>
   <li><a href="archives.html">Archives</a></li>
   <li><a href="about.html">About Me</a></li>
   </ul>
  </div>
  
  #sidebar h3{
   font-family: Georgia, serif;
   color: #c63;
   border-bottom: 1px solid #ccc;
  }
  #sidebar ul{
   list-style-type: none;
  }
  #sidebar li{
   font-weight: bold;
  }

不只用在側邊
越少分類越好維護
不必要的<div>
方法A:使用<div>
  <div id="nav">
   <ul>
   <li><a href="archives.html">Archives</a></li>
   <li><a href="about.html">About</a></li>
   </ul>
  </div>
  ul與div一樣是個區塊層級的標籤，為什麼不直接為它指定id呢?

方法B:丟掉<div>
  <ul id="nav">
   <li><a href="archives.html">Archives</a></li>
   <li><a href="about.html">About</a></li>
  </ul>

其他例子
  <div id="myform">
   <form>
   ...
   </form>
  </div>
改寫為
  <form id="myform">
  ...
  </form>


  <div id="footer">
   <p>Copyright 1999-2004 Dan Cederholm</p>
  </div>
改寫為
  <p id="footer">Copyright 1999-2004 Dan Cederholm</p>

更多技巧
  <ul>
   <li>Weblog</li>
   <li>Articles
   <ul>
   <li>How to Beat the Red Sox</li>
   <li>Pitching Past the 7th Inning
   <ul>
   <li>Part I</li>
   <li>Part II</li>
   </ul>
   </li>
   <li>Eighty-Five Years Isn't All Taht Long, Really</li>
   </ul>
   </li>
   <li>About</li>
  </ul>
加上樣式
  <ul id="sitemap">
   <li>Weblog</li>
   <li>Articles
   <ul>
   <li>How to Beat the Red Sox</li>
   <li>Pitching Past the 7th Inning
   <ul>
   <li>Part I</li>
   <li>Part II</li>
   </ul>
   </li>
   <li>Eighty-Five Years Isn't All Taht Long, Really</li>
   </ul>
   </li>
   <li>About</li>
  </ul>
  #sitemap{
   font-size: 140%;
   font-weight: bold;
   color: #f63;
  }
  #sitemap li ul{
   font-size: 90%;
   color: #000;
  }
  我們不需為第三層指定更小的字型，因為它會自動使用90%的90%
  
自訂圓點符號
  #sitemap li{
   list-style: none;
  }
  /*第三層*/
  #sitemap li ul li ul li{
   font-weight: normal;
   padding-left: 16px;
   background: url(bullet.gif) no-repeat 0 50%;
  }
  
加上框線
  #sitemap li ul{
   font-size: 90%;
   color: #000;
   margin: 6px 15px;
   padding: 0 15px;
   border-left: 1px dotted #999;
  }
  /*第三層*/
  #sitemap li ul li ul{
   border: none;
  }