Dreamweaver Web Design: Colorful text links

Text link is the most common page element in the Web page, in the default state, the text link style is underlined, such a new appearance so that the page can not highlight the personality and meet the needs of the layout. In order to make text links conform to the overall effect of the page, you can use CSS (style) to achieve a variety of text links.

Effect description

When you place the mouse over the text, the text style changes, such as without underlining, text flashing, and so on. Combined with other style attributes, you can also implement button text links, as shown in the figure.

Button Type text link

Creative Ideas

The Text-decoration property is used to control hyperlinks, combined with Border-style properties, and to implement more complex styles.

Operation Steps

Step one primary link style

There are 5 cosmetic types in the Type sub option in the CSS Style Definition Settings dialog box. Click on different modifiers to easily set different primary link styles, as shown in the following figure. The following is an example of a "no" underline setting, and other styles are set similar to this example.

Link Style

(1) Create a CSS style sheet file. Press the SHIFT+F11 key to open the CSS style panel, click the New Style button, select the Advanced (ID, context selector, and so on) option in the pop-up New CSS Style dialog box, and then choose A:link from the Selector drop-down menu, click OK, as shown in the following illustration:

Create a CSS style sheet file

(2) Edit style. Save the style sheet file (file name is CSS.) CSS), begin editing the style. Set default link style is no underline, the font for the song body 12pt, other colors and other parameters are not set, as shown in the following figure:

Edit Style

(3) New and set style ". T1". Click the new Style button again and select the class (apply to any label) option in the New CSS Style dialog box. Define your own style class, and then set the name ". T1" (The Name text box is used to specify the class, and the user can fill it out as needed, in the form of ". *"), and the last click Defined in CSS. CSS, and then click OK when you have finished setting it. The next setting is the same as the second step, and then click OK, as shown in the following illustration:

New and set styles

(4) Enter the word "no underline" in the document window. Select the no underline paragraph, and then open the property settings interface and select "T1" in the list of styles, as shown in the following illustration. This applies the style to the selected page elements, which the reader can preview in the browser after saving the page file, when the text size is 12px and the hyperlink's underline is gone.

property settings

Comprehensive application of the technology described above, but also to create more complex text link style.

(1) Flat block text links. Double-click ". T1" in the CSS style surface panel to open the T1 style sheet, where you define its block link style. Click the background option to first add a background color to the link, and select "Red" here, as shown in Figure 22-7. Select border in the category bar, and then select Solid line in the top list to add a border for the four weeks of the text link to achieve a flat block text link, as shown in the following illustration:

Implement planar block text links

(2) Stereo Four-border text link. Select border in the category bar, and then set the width and height of 1px, so that the link text and button around the 1px spacing, so that the four border looks like three-dimensional, set as shown in the following figure:

Stereo Four-border text link

(3) Define special effects text links. The CSS style sheet also contains a set of special effects filters. Here you create a text link that uses the Blur filter, and the link has a border effect. Select Blur in the Filter pull-down menu (add=?,direction=?,strength=?) option, and then change the filter parameter setting to Blur (Add=ture,direction=45,strength=1), as shown in the following illustration:

Define Effects Text Links

Tip: The Blur filter has 3 parameters, Add, Direction, and strength respectively.

The add parameter has two parameter values, True and False, to set whether to add a blur effect to the picture. The Direction parameter is used to set the direction of the blur. The fuzzy operation is carried out in a clockwise direction, where 0 ° represents a vertical upward, a unit per 45°, and the default value is left 270°. The correspondence between the angles and the directions is shown in the following table:

Corresponding relation table

　　

        note : More wonderful tutorials Please pay attention to the triple Web design tutorial column,