Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "CSS style sheet application method in Dreamweaver". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1. Remove the underline of the hyperlink and implement the mouse hover color change on the hyperlink:

By default, hyperlinks in web pages designed with DreamWeaver are underlined, making them unattractive. To remove these annoying underscores, many newspapers introduce methods that manually add a piece of code to the HTML source code. In fact, it is easy to remove the underlined links in DreamWeave. First create a random link in DreamWeaver Document Windows. You can see that the link will be underlined. How do I remove this underline?

1. Click "Text" on the menu bar| "CSS Styles"|"Edit Style Sheet…"(or press Ctrl+shift+E) to bring up the Edit Style Sheet dialog window.

2. Click New, then in the New Style dialog box, click the Use CSS Selector button.

3. Type a in the Selector field and click OK.

4. Then pop up the CSS style definition dialog box, in the Type class decoration(decoration), check none, then click OK, then click Done. You will immediately notice that the underline for the link has disappeared in Document Windows. So how do you change the color of a link when you hover over it? Repeat the first and second steps above. Then click the drop-down arrow next to Selector, select "a:hover", and click OK. In the "Style definition for a: hover" dialog box that pops up later, select any color in the color of the Type class (for example, select red), then click OK, and then click Done to complete. Press F12 Preview and place the mouse over the link. Does the link turn red? If in the Style definition for a: hover dialog box, you select green for the background class, then when you place the mouse over the hyperlink, not only will the link turn red, but it will also have a green background. In fact, through the CSS style definition dialog box just now, you can also achieve more special effects, interested friends may wish to think about it.

Creating reusable external CSS style sheets

After creating a CSS style on a web page with DreamWeaver, if you want to apply that style to another web page, you don't have to create the CSS style from scratch. As long as you create an external CSS style sheet file, you can call the styles from that style sheet file at will in the future. For ease of management, create a new folder in the site folder, named CSS, dedicated to external style sheet files (with the extension css).

1. Press Ctrl+Shift+E in Document Window to bring up the Edit Style Sheet dialog box window.

2. Click on "link."

3. In the pop-up Link External Style Sheet dialog box, click BROWSE and find the CSS folder you just created.

4. In the File Name column of the Select Stylesheet File window, type *.css (* can be any name). Please note that there is no style sheet file in the CSS folder at this time. The new name typed in the File Name column will become the name of the new external style sheet file. For example, type title.css, and click Select.| OK。

5. In the Edit Style Sheet dialog box window, a new title.css (link) will be added, double-click it.

6. In the pop-up "title.css" window, click "New."

In the New Style dialog box, click the Make Custom Style (class) button.

Type a name in the Name field, such as myheadline, and click OK.

9. In the following "Style definition for .myheadline in title.css" dialog box, make various settings such as font and color, and click OK after completion. If you want to create a new style, click "New" again, repeat steps 6, 7, 8, 9, and finally click "save"|"done", and the title.css external stylesheet file is created. "TEXT" on the menu bar| The CSS Styles submenu lists all styles in title.css. To invoke this title.css on another page, simply repeat steps 1 through 3 above and enter title.css in the File Name field of the Select Stylette File window. Click "select"| "ok"| All styles in "done", title.css will appear in "Text" on the menu bar of the page| CSS Styles submenu, you will be able to apply these styles to this page.

"Dreamweaver CSS style sheet application method" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.