Use CSS style sheets to define link styles on blogs

Source: Internet
Author: User
Tags define
css| Blog | link | style sheet <style type= "Text/css" >
A {text-decoration:none; color: #51bfe0}
a:hover {font-weight:bold;color: #990099}
<style>

When the mouse is placed on the link font, the link font becomes thicker and the color changes, as this blog looks like. Which color: #990099表示链接字体改变的颜色, can be modified according to personal preferences, the other do not need to change.

<style type= "Text/css" >
A{text-decoration:none Color: #51bfe0}
a:hover{font-size:23 background: #ffd306; color: #990099}
</style>
Mouse mouse over the link font, the link font size changes, color changes, there is background color. FONT-SIZE:23 indicates the font size; background: #ffd306表示背景颜色color: #990099表示字体颜色, can change according to individual hobby, others do not need to change.

<style type= "Text/css" >
A:link{text-decoration:none}
A:hover{text-decoration:none}
A:visited{text-decoration:none}
</style>

Remove the underline of the linked font.

<style type= "Text/css" >
A {text-decoration:none; color: #51bfe0}
a:hover {border-bottom:1px Dashed #51bfe0}
<style type= "Text/css" >

When the mouse is placed on the linked font, the link font is dotted.

<style type= "Text/css" >
A {text-decoration:none; color: #51bfe0}
a:hover {position:relative; left:10px; top:10px;}
</STYLE>
When the mouse is placed on the link font, the link font will move, its left:10px indicates the distance of the font upward movement, top:10px indicates the distance of the font upward movement, can modify the specific value according to individual hobby, others do not need to change.

<style type= "Text/css" >
a {text-decoration:none; padding-bottom:4px; white-space:nowrap;}
a:hover {Background:url (background picture address) repeat-x 100% 100%;}
</style>
When the mouse is placed on the link font, the link font appears in the picture background.

<style type= "Text/css" >
a{text-decoration:none; white-space:nowrap; padding-bottom:10px;}
a:hover {background:url (' http://blog.sina.com.cn/pic/4723cdbf020002nm ') repeat-x 100% 100%;}
</style>

When the mouse is placed on the link font, the effect of the flower underline appears.

<style type= "Text/css" >
a {text-decoration:none; white-space:nowrap; padding-bottom:5px;}
a:hover {background:url (' http://blog.sina.com.cn/pic/4723cdbf020002nn ') repeat-x 100% 100%;}
</style>
When the mouse is placed on the linked font, the effect of the scroll arrow underline appears.

Note: Some code should be very used, if the use of bad instead will backfire, affect the beautiful effect of the page! This code can be used to add a blank panel. Also is that these are CSS code, can not be placed in a completely empty blank panel, you could put it into the existing content of the panel.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.