在百度交流區看到一個關於如何給關鍵詞添加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 轉載請註明出處!