css伪类和logo部分效果实现

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;