Text links can be said to be the most common page elements on web pages. The default text link styles are underlined. This unchanged appearance may make many friends want to change it to make it fit the overall page. As a result, since style sheets have been widely used, this wish can now be realized very easily. Today I will introduce to you how to use style sheets to create colorful text link effects. I will introduce it to everyone in elementary, advanced and advanced chapters. All link style effects will be completed in the style editor of Dreamweaver. Please refer to the previous introduction for the usage of the style editor in Dreamweaver. The link style browsing effect is as shown below; for specific page browsing, please see here
1. Preparation
We will first create a basic link style, and other styles will add a custom Class class based on this.
1. Press Shift+F11 to open the style panel and click the New Style button, as shown in Figure 1;
2. Select Use CSS Selector in the Type option to create a default link style, as shown in Figure 2;
3. As shown in Figure 3, set the default link style to no underline, the font to Song Dynasty 9pt, and no other colors, etc. We will set it separately for each Class later.
4. Define the style class Class. Each of our styles below defines a separate class and assigns it to the link text. The steps are as follows: Click Add to open the new definition style panel, select Make Custom Style (class) to define your own style class. As shown in Figure 4;
5. Add a style class to the link text. Select a link text in Dreamweaver, select the label on the quick label selection bar at the bottom of the window, right-click the label, and select Set Class to assign the customized style to the link text, as shown in Figure 5;
6. The method for other link text styles is the same, and I will not introduce it again later. In this tutorial, friends can make their own link styles for defining hover status. I won’t introduce it anymore, just enter [.t1:hover] directly when prompted for definition.
2. Primary link style
We will completely complete this part of the link effect in the Type category of the style editor. I will not go into details on how to create and set it up. I will only show you the completed panel diagram and give a brief introduction.
1. Ordinary link. As shown in Figure 6;
Ordinary links are set in the first item Type in the Category category of the style editor. Color defines the color of the link font, and Decoration defines the underlining style of the link, which is divided into the following categories:
underline: underline overline: overline line-through: strikethrough blink: flashing line none: no underline
Several other link styles in this section are achieved by changing the combination of strokes.
2. No underlined links, as shown in Figure 7;
3. Double underlined link, as shown in Figure 8;
4. Strikethrough links, as shown in Figure 9;
3. Advanced link styles
Next, I will introduce an alternative link style definition method. This method mainly uses the Border attribute in the style sheet to replace the underlining of ordinary links. Since Border has more control parameters and styles, some special functions can be implemented. Effect. Let’s take a look at the panel below, as shown in Figure 10;
The Border option includes three parts: Width (line width), Color (line color), and Style (line type), and each part can set different parameters for different borders. This is a common link line. Impossible effect.
We need to remind everyone that there is a necessary condition for using this method to define link styles: the Box attribute in the style must be defined, as shown in Figure 11;
This is because Border is a block element in the style, and we must first define a block element before Border can work. We only need to arbitrarily define the Width or Height in the Box option. You can try the specific values to see the effect. I have defined the Height as 0 here. Let's see what kind of effects can be achieved.
1. Alternative link styles. The settings are as shown in Figure 12;
2. Customize the underline color. We can define a different color for the underline and the text. This is an effect that is impossible to achieve with ordinary link text. As long as the color of the Border and the color of the text are defined differently, as shown in Figure 13;
3. Customize the underline distance. We can set the distance of this kind of line in the Box category by changing the value of Padding. In this example, we set Padding—Bottom to 5pix, as shown in Figure 14;
4. Customize the scribing length and alignment. Furthermore, we can also accurately define the length and alignment of the lines. Open the Box category and set the Width to 200, as shown in Figure 15; set the Text Align of the Block category to Center, which is middle alignment, as shown in Figure 16;
5. Customize the double underline effect. Change the Style in Border to change the appearance of the underline. Set Style to Double and Bottom to 3pix to achieve a double underline effect. As shown in Figure 17;
4. Advanced link styles
By combining the techniques introduced above, we can also create more complex text link styles. Below we introduce three examples.
1. Define block links. First add a background color to the link, as shown in Figure 18;
Then add four borders to the text link to achieve a flat block text link, as shown in Figure 19;
2. Define button-like text links. Change the style of the border and define Border-Style as outset, as shown in Figure 20;
Define the Width and Height in the Box option to define the width and height of the button. Define Padding as 2pix to create a 2pix spacing between the link text and the button, as shown in Figure 21;
3. Define special effect text links. The CSS style sheet also contains a set of special effect filters. We can combine the filters with the previous parameters to create special link styles. In this example I created a text link using the Blur filter, with a border effect. As shown in Figure 22;
4. Define the effect of static background switching. This example is to achieve the effect of background switching by setting different background images for the normal state and hover state of the link text. See picture below:
5. The effect of dynamic background switching. This effect is basically the same as the above example, except that a dynamic Gif image background is defined in the Hover state. And this picture requires a little skill, which is to set the loop to once, add a frame at the end, and set the frame time to a larger value, such as 10000. This allows the animation to execute for one side and then stop. In order to improve the speed of effect execution, we also need to add a Preload /doc/webpage/images/images behavior in Dreamweaver. This requires opening the behavior panel and adding the Preload /doc/webpage/images/images behavior, as shown in the figure:
We can preload all four images required for the last two link styles, as shown below:
5. Summary
I will introduce so many link styles, and together with setting the hover status of the link text, you can achieve very beautiful effects. Please see here for specific page browsing. I hope friends can create more link text based on the above ideas. style. Remember, a style sheet is like an iceberg with treasures in web page production. Today we have only uncovered a small corner of the iceberg. More treasures are waiting for you to discover.