使用CSS和字體控制屬性建立優(yōu)秀網(wǎng)站_Web標(biāo)準(zhǔn)教程
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      

      過去，修改一個網(wǎng)頁的字樣通常是指把相關(guān)的文本嵌套到<tag>標(biāo)簽中，并用屬性來控制它的顏色、大小和式樣。現(xiàn)在，人們已不再認(rèn)同這種方法，因為它將視覺式樣和實際的內(nèi)容標(biāo)記混合起來。如今我們推薦使用將字樣式樣信息集中到一個叫做層疊式樣表（CSS）的單獨文件中的方法。
      

      將字體信息集中到一個CSS文件中具有許多明顯的優(yōu)點：它易于操作，不需要任何特殊的軟件，并且能夠在大多數(shù)主流瀏覽器中統(tǒng)一運行。更重要的是，由于信息集中到一個單獨的位置，修改網(wǎng)頁的視覺外觀相當(dāng)方便：你只需簡單修改主式樣表的字體或顏色，相關(guān)改變就會立即“層疊”到你的整個網(wǎng)站中。
      

      聽起來很有趣，是嗎？那么請繼續(xù)閱讀下去，因為我將在本文中探討CSS font屬性，它旨在替代舊有的<font>元素，如果你需要對HTML頁面的字樣、顏色、文字大小和間距進(jìn)行集中控制，它是一個可利用的強大工具。
      

      控制字樣
      

      字體屬性定義了對應(yīng)元素所使用的字體。這個屬性通常包含一個由逗號隔開的字體名稱列表；并可以用引號來封套那些包含空白的名稱。應(yīng)用時，瀏覽器將使用它在列表中找到的第一個字體，或如果沒有找到有效字體，就使用默認(rèn)的標(biāo)準(zhǔn)瀏覽器字體。
      

      列表A中是這個指示的一個應(yīng)用實例：
      

      列表A
      

      

    
        
            
            
      <html>
      
            
      <head>
      
            
      <style type="text/css">
      
            
      .quote {
      
            
      font-family: "Bookman Old Style", "Verdana";
      
            
      }
      
            
      </style>
      
            
      </head>
      
            
      <body>
      
            
      <div class="quote">To be or not to be, that is the question.</div>
      
            
      </body>
      
            
      </html>
      
            
        
    


      

      圖A顯示輸出結(jié)果。
      

      圖A
      

       
      

      Font_family
      

      記住重要的一點，這個指示十分依賴于客戶端系統(tǒng)所顯示的字體；在上面的例子中，如果系統(tǒng)沒有顯示Bookman Old Style和Verdana字體，就將使用默認(rèn)的瀏覽器字體。要避免這個問題，最好是在特殊字體名稱列表后增加一個通用字體名稱列表，如serif、sans-serif或cursive；這告訴瀏覽器使用那個字體類別中最相匹配的字體。列表B是上面實例的一個修訂版本，它正好解決上述問題。
      

      列表B
      

      

    
        
            
            
      <html>
      
            
      <head>
      
            
      <style type="text/css">
      
            
      .quote {
      
            
      font-family: "Bookman Old Style", "Verdana", "cursive";
      
            
      }
      
            
      </style>
      
            
      </head>
      
            
      <body>
      
            
      <div class="quote">To be or not to be, that is the question.</div>
      
            
      </body>
      
            
      </html>
      
            
        
    


      

      


      

      



      


      來源：模板無憂//所屬分類：Web標(biāo)準(zhǔn)教程/更新時間：2008-05-29


      

      



      


      



      相關(guān)Web標(biāo)準(zhǔn)教程：