Web Standards Solutions 網頁設計標準規格

標題HEADING

標記文件標題最好的方法

方法A:有意義嗎?
<span class="heading">Super Cool Page Title</span>

方法B:p與b的組合技
<p><b>Super Cool Page Title</b></p>

方法C:樣式與實體
<h1>Super Cool Page Title</h1>
  容易加上樣式
  討厭的預設值
  搜尋引擎親和力
  標題順序附帶一提


更多技巧
簡單的樣式
  h1{
   font-family: Arial, sans-serif;
   font-size: 24px;
   color: #369;
   padding-bottom: 4px;
   border-bottom: 1px solid #999;
  }
  加上背景
  h1{
   font-family: Arial, sans-serif;
   font-size: 24px;
   color: #fff;
   padding: 4px;
   background-color: #696;
  }
  背景與框線
  h1{
   font-family: Arial, sans-serif;
   font-size: 24px;
   color: #666;
   padding: 4px;
   background-color: #ddd;
   border-bottom: 2px solid #ccc;
  }
  平鋪背景圖
  h1{
   font-family: Arial, sans-serif;
   font-size: 24px;
   color: #369;
   padding-bottom: 14px;
   background: rul(10x10.gif) repeat-x bottom; 
  }
  方便抽換的圖檔
  h1{
   font-family: Arial, sans-serif;
   font-size: 24px;
   color: #369;
   padding-left: 30px;
   background: rul(icon.gif) no-repeat 0 50%;
  }
  容易更新
  
  變色龍效果:使用兩種顏色的圖檔，一個有色、一個透明
  <h3><img src="http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" />
FIRST IMPRESSION</h3>
  h3 img{
   background: #696; /*設定背景色，透過圖片的透明*/
   vertical-algin: middle; /*讓圖片與文字對齊*/
  }
  概念：以CSS指定背景色彩會出現在任何頁面內指定的圖檔的後面
  h1{
   font-family: Arial, sans-serif;
   font-size: 24px;
   color: #fff;
   padding-left: 30px;
   background:#696 rul(transparent_icon.gif) no-repeat 0 50%;
  }