By default, the hyperlink text is displayed in blue with an underline effect. When the mouse pointer moves over the hyperlink, it is displayed as a hand shape. The visited hyperlink text is displayed in purple; while the list items are indented and displayed by default. Show bullets on the left. In web design, you can generally redefine the default styles of hyperlinks and lists as needed.
1. Hyperlink style
1.1, dynamic pseudo-class
Dynamic pseudo-class selectors can define four state styles of hyperlinks. A brief description is as follows:
- a:link: Defines the default style of hyperlinks.
- a:visited: Define the style after the hyperlink is visited.
- a:hover: Defines the style when the cursor pointer moves over a hyperlink.
- a:active: Defines the style when the hyperlink is activated.
[Example] Define all hyperlinks on the page to have a red underline effect by default. After the hyperlink is visited, it will display a blue underline effect. When the mouse moves over, it will display a green underline effect. When the hyperlink is clicked, it will display a green underline effect. It is displayed as a yellow underline effect:
a:link {<!-- -->color: #FF0000; /* Red */} /* Default hyperlink style */
a:visited {<!-- -->color: #0000FF; /* blue */} /* style after the hyperlink is visited */
a:hover {<!-- -->color: #00FF00; /* Green */}/* The style of the hyperlink when the mouse moves over it */
a:active {<!-- -->color: #FFFF00; /* Yellow */}/* Style when the hyperlink is activated */
Tip: The order of the four status styles of hyperlinks is fixed and generally cannot be exchanged at will. The correct order is: link, visited, hover and active. If you only want the hyperlink to display two status styles, use the a:link pseudo-class to define the default style, and use the a:hover pseudo-class to define the style when the mouse passes over it.
1.2. Define underline style
Hyperlink text displays an underline style by default, which can be cleared using CSS3 text-decoration:
a {<!-- -->/* Completely clear the underline effect of hyperlinks */
text-decoration:none;
}
From the perspective of user experience, after canceling the underline, you should ensure that the viewer can correctly identify the hyperlink, such as bold font, color change, zoom, highlight background, etc. You can also design to add an underline when the mouse passes over it. , because the underline is a good reminder:
a:hover {<!-- -->/* Display underline effect when mouse passes over */
text-decoration:underline;
}
The underline style is more than just a solid line, and the design can be customized as needed. The main design ideas are as follows:
- This is achieved with the help of the bottom border of the
tag. - This is achieved using background images, which can be used to design more sophisticated underline styles.
[Example 1] Design that when the mouse passes over the hyperlink text, it will be displayed as a dotted line, bold font, and highlighted color:
a {<!-- -->/* Default style of hyperlink */
text-decoration:none; /* Clear hyperlink underline */
color:#999; /* light gray text effect */
}
a:hover {<!-- -->/*Style when the mouse passes over */
border-bottom:dashed 1px red; /* Display a dashed underline effect when the mouse passes over */
color:#000; /* Enhanced color display */
font-weight:bold; /* Bold font display */
zoom:1; /* Solve the problem that IE browser cannot display */
}
1.3. Define special effect styles
This example uses the depth of the border color to simulate the three-dimensional effect of convex and concave changes. The specific implementation method is as follows:
- Set the right border and bottom border to the same color, and set the top border and left border to the same color, using a combination of light and dark colors to simulate a three-dimensional effect.
- Set the background color of the hyperlink text to a dark effect to create a raised effect. When the mouse moves over, define a light background to create a concave effect.
[Example] Define the hyperlink to display gray right and bottom border lines, white top and left border lines by default. When the mouse moves over, clear the right and bottom border lines and define the left and top border line effects:
body {<!-- --> background:#fcc; } /* Light web page background */
ul {<!-- -->list-style-type: none; } /* Clear bullet points */
li {<!-- --> margin: 0 2px; float: left;} /* Side by side display */
a {<!-- -->/* Default style of hyperlink */
text-decoration:none; /* Clear hyperlink underline */
border:solid 1px; /* Define a 1 px solid border */
padding: 0.4em 0.8em; /* Add hyperlink padding */
color: #444; /* Define gray font */
background: #f99; /* Hyperlink background color */
border-color: #fff #aaab9c #aaab9c #fff; /* Assign border color */
zoom:1; /* Solve the problem that IE browser cannot display */
}
a:hover {<!-- -->/* Style when the mouse passes over */
color: #800000; /* Hyperlink font color */
background: transparent; /* Clear hyperlink background color */
border-color: #aaab9c #fff #fff #aaab9c; /* Assign border color */
}
1.4. Define cursor style
By default, the mouse pointer appears as a hand when it passes over a hyperlink. This default effect can be changed using the cursor attribute of CSS3. The cursor attribute defines the pointer style when the mouse moves over the object. The attribute value is as follows:
[Example] Define multiple mouse pointer class styles in the style sheet, and then apply different class styles to table cells:
.auto {<!-- --> cursor: auto; }
.default {<!-- --> cursor: default; }
.none {<!-- --> cursor: none; }
.context-menu {<!-- --> cursor: context-menu; }
.help {<!-- --> cursor: help; }
.pointer {<!-- --> cursor: pointer; }
.progress {<!-- --> cursor: progress; }
.wait {<!-- --> cursor: wait; }
…
Tip: Use a custom image as the cursor type. IE and Opera only support specific image formats such as *.cur; while Firefox, Chrome and Safari support specific image types as well as common *.jpg, .gif, .jpg and other image formats.
The cursor attribute value can be a sequence. When the browser cannot handle the first icon, it will try to handle the second, third, etc., and so on. The last one can be set as a universal cursor. For example, the following style defines 3 custom animated cursor files, and finally defines a universal cursor type.
a:hover {<!-- --> cursor:url('images/1.ani'), url('images/1. cur'), url('images/1.gif'), pointer ;}
2. List style
2.1. Define bullet type
You can use the list-style-type attribute of CSS3 to define the type of list bullets or cancel the bullets. The value of this attribute is shown in the following table:
Use the CSS3 list-style-position property to define the display position of bullets. The value of this attribute includes outside and inside, where outside means that the bullet is displayed outside the text line of the list item. The list symbol is displayed as outside by default, and inside means that the bullet is displayed within the text line of the list item.
Note: If you want to clear the indentation display style of list items, you can use the following style to achieve it:
ul, ol {<!-- -->
padding: 0;
margin: 0;
}
[Example] Define bullets to be displayed as hollow circles and displayed inside the list row, as shown in the following figure:
body {<!-- -->/* Clear page margins */
margin: 0; /* Clear borders */
padding: 0; /* Clear padding */
}
ul {<!-- -->/* Basic style of list */
list-style-type: circle; /* hollow circle symbol*/
list-style-position: inside; /* Display inside */
}
Tip: When defining the list bullet style, you should pay attention to the following two points.
- Different browsers have slightly different interpretations of bullet points and their display locations. If you want to be compatible with the display effects of different browsers, you should pay attention to these differences.
- Displaying bullets inside or outside affects the distance between the bullet and the list text, as well as the indentation effect of the list items. Different browsers will have differences in parsing.
2.2. Define bullet images
Bullets can be customized using the CSS3 list-style-image property. This property allows specifying an external icon file to meet personalized design needs. Usage is as follows:
list-style-image: none | <url>
The default value is none.
[Example] Design an internal style sheet, add custom bullets, and design the bullets as external icons bullet_main_02.gif. The effect is as shown in the figure below:
ul {<!-- -->/* Basic style of list */
list-style-type: circle; /* hollow circle symbol*/
list-style-position: inside; /* Display inside */
list-style-image: url(images/bullet_main_02.gif); /* Customize list bullets */
}
Tip: When defining both a bullet type and a custom bullet, the custom bullet overrides the default bullet type. However, if the list-style-type attribute value is none or the specified external icon file does not exist, the list-style-type attribute value is valid.
2.3. Simulate bullet points
You can use the background attribute of CSS3 to simulate the symbols of list items. The implementation method is as follows:
【Design ideas】
Step 1, first use list-style-type:none to hide the default bullets for the list.
Step 2, use the background attribute to define a background image for the list item and precisely position its display position.
Step 3. Use the padding-left attribute to define the left margin for the list item to prevent the background image from being obscured by the item text.
[Example] First clear the default bullets of the list, then define a background image for the item list, and position it vertically in the center on the left. In order to prevent the list text from covering the background image, define the left padding to be one character wide, so that you can List information is displayed indented to the right:
ul {<!-- -->/* Clear column default style */
list-style-type: none;
padding: 0;
margin: 0;
}
li {<!-- -->/* Define the style of list items */
background-image: url(images/bullet_sarrow.gif); /* Define background image */
background-position: left center; /* Precisely position the background image */
background-repeat: no-repeat; /* Disable background image tile display */
padding-left: 1em; /* Extrude white space for the background image */
}
