Ways to hide text in CSS

H1 tags to improve SEO keyword ranking role presumably is a webmaster know, but H1 label will make the text become large, sometimes in the Web page seems out of place. The following small series to share with you under the CSS hidden text method.

Below take the network teaching base logo part uses the CSS to hide the text to give everybody example:

We see from the H1 Code section is actually only a text description, but for the overall aesthetic consideration, we put the H1 tag inside a link text with CSS hidden, and set the background picture logo, so that the appearance of the logo picture

CSS hidden text code:

H1 a {

height:80px;

width:280px;

Float:left;

Text-indent: -9999px;

Background-image:url (http://www.studynb1.com/images/logo.png);

Background-repeat:no-repeat;

Display:block;

position:relative;

Outline:none; * * Remove the dotted box when Firefox clicks

}

Here we specify the text-indent: -9999px, let the text in the lowest level, and then set: background-image: Background layer logo, meaning that the text in the picture below, so simple to achieve the use of CSS hidden text, Finally set the Outline:none, is to solve the IE and Firefox browser to remove the click of the dotted box generated.

The above is small make up to you website seoer to share the CSS hidden text method, note that each page can only use a H1 oh, otherwise the risk is very big.

This article is the network teaching base original, reprint please specify: http://www.studynb1.com/css/149.html