Apply CSS style sheets in Dreamweaver

1. Remove the hyperlink underline and hover the mouse over the hyperlink to change color:

By default, the hyperlinks on the webpage designed with DreamWeaver all have underscores, which do not look beautiful. To remove these annoying underlines, many newspapers and periodicals introduce the method by manually adding a piece of code in the HTML source code. In fact, it is easy to remove the underline Of the link in DreamWeave. First, create a link in DreamWeaver Document Windows. You can see that the link is underlined. How can I remove this underline?

1. Click "Text" | "CSS Styles" | "Edit Style Sheet... "(Or press the shortcut key Ctrl + shift + E) to bring up the Edit Style Sheet dialog box window.

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

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

4. Then, the "CSS style definition" dialog box is displayed. In the decoration (decoration) of the Type class, select none, click OK, and click Done. In Document Windows, you will immediately find that the underline Of the link has disappeared. So how can we achieve link color change when the mouse is hovering over the link? Repeat the first and second steps in the preceding steps. Click the drop-down arrow next to Selector, select "a: hover", and click OK. In the pop-up "Style definition for a: hover" dialog box, select any color (such as red) in the color of the Type class, and click OK, click Done. Press F12 to preview and place the mouse over the link. Is the link red? In the "Style definition for a: hover" dialog box, in the Backgroud (background) class, select the backgroud color as green, when you place the mouse over the hyperlink, the link will not only become red, but also have a green background. In fact, through the CSS style definition dialog box just now, you can achieve more special effects. If you are interested, you may wish to think about it.

2. Create an external CSS style sheet that can be used repeatedly

After a CSS style is created in a webpage using DreamWeaver, If you want to apply the style to another webpage, you do not have to create the CSS style again, as long as you have created an external CSS style sheet file (external CSS style sheet), you can call styles in this style sheet file at will in the future. To facilitate management, create a folder named CSS in the folder where the site is located, and place the file with the extension css ).

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

2. Click "link ".

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

4. In the Select Stylesheet File window "File name", type *. css (* can be any name). Note that, in fact, there is no style sheet file in the CSS folder, the new name entered in the "file name" column will become the name of the new file in the external style table. Click Select | OK.

5. In the Edit Style Sheet dialog box, title.css (link) is added and double-click it.

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

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

8. Type a Name in the Name column, such as myheadline. Click OK.

9. in the next "Style definition for. myheadline in title.css" dialog box, set the font and color, and click OK. To create a New style, click "New" and repeat steps 6, 7, 8, and 9, finally, click "save" | "done". The external style table file title.css is created. All Styles in title.css are listed in the "TEXT" | "CSS Styles" menu bar. To use this title.css in other pages, you only need to repeat steps 1 to 3 and enter title.css in the Select Stylesheet File window "File name. Click "select" | "OK" | "done". All Styles in title.css appear in the "Text" | "CSS Styles" submenu on the menu bar of the webpage, you can apply these styles on this webpage.