css偽類和logo部分效果實現

標籤：mic   小知識點   seo   soft   hid   方法   選取器   重複   jpg   

css偽類及logo插入圖

關於css的一些小知識點

• 偽類 
  偽類的權重與類的權重相同。 
  偽類有權重，a:link---a:visited---a:hover---a:active 
  工作中為了使用者體驗，link和visited狀態一樣，hover狀態不同，active不寫。 
  a選取器：color, text-decoration兩個屬性不能去繼承更改。

• 文字換插入圖 
  background-image背景圖片: 
  重複載入在border以內的地區。 
  background: url(pic.jpg) no-repeat left top fixed

  例如網站導航部分logo位置

  .logo {
        width:100px;
        height:100px;
        background:url(logo.png) no-repeat;
  }

<h1 class="logo"><a href="">我是網站標題<a></h1>

h1標籤裡不加入文字的缺點：

h1標籤中沒有標題文字，本身h1權重最大，可以提高搜尋引擎最佳化，在搜尋方塊裡輸入的都是文字關鍵字，需要按照關鍵字去匹配，h1中有相關文字就能提升排名，但是內部載入一張插入圖，沒有任何的關鍵字存在，相當於放棄h1標籤去做SEO。 

解決方案：h1中a標籤之內不要放插入圖，書寫相關的關鍵字。圖片可以用背景圖代替。 
隱藏文字方法：如果設定font-size:0px;會存在相容性問題 
所以給a內文字設定縮排，同時overflow:hidden;

css偽類和logo部分效果實現