分享H1標簽如何結合CSS使用

  在百度交流區看到一個關於如何給關鍵詞添加h1、h2標簽進行修飾的帖子,從回復中看到很多朋友對於h1的使用、特別是h1和css的結合使用方法還是很模糊,不知如何通過css樣式控制h1的字體大小,為此,在這裡寫下詳細步驟,希望對大傢有所幫助。

  可能以前關於h1的帖子有不少,但是還是寫下來吧,如有雷同,就把本帖當成一般的 rabish 貼吧。

  下面將通過我的站來測試,以收錄查詢這個關鍵詞來做試驗。

  沒加.h1>之前的超鏈接代碼:.a href=/ target=_blank>收錄查詢./a>

  加.h1>後的超鏈接代碼:.h1>.a href=/ target=_blank>收錄查詢./a>./h1>

  下面是加入到css文件中的css代碼:

  h1{font-size=12px;font-weight=100;display : inline;}

  說明:如果在h1的前面加上英文句點.,則需將.h1>改為.h1>

  css代碼解釋:

  font-size 為字體大小;

  font-weight為加粗的程度,取值范圍是100-1000,100表示不加粗;

  display : inline; 表示不換行,這個一定要加上,不然h1默認會強制換行的,強制換行就會使佈局錯亂;

  我們來看看效果:下圖一是沒有用css修飾h1的效果;圖二是css中隻用font-size,不加font-weight、display:inline 的效果;圖三是css中加入以上完整代碼後修飾h1的效果;

  從以上效果圖可以看出,圖一不用任何css樣式修飾h1,字體見變得很大,同時加粗、換行;圖二隻是用font-size控制字體大小,所以字體比圖一變小,但是依然沒有解決加粗、換行的問題;圖三同時使用瞭font-size、font-weight、display:inline ,字體變小、不加粗、不換行!達到預期效果。

  以上就是通過css樣式來修飾h1標簽的使用方法。

  本文由一站式 站長工具提供,原文地址 /blog/index.php/archives/407 轉載請註明出處!