Several cases of applying CSS stylesheets in Dreamweaver

First, remove the underline of the hyperlink and implement the mouse hover color on the hyperlink:

By default, hyperlinks in Web pages designed with Dreamweaver are underlined and look unattractive. To get rid of these annoying underscores, many newspapers are introducing a piece of code in the HTML source code, in fact, it is easy to remove the underline of the link in the Dreamweave. Start by creating a link in Dreamweaver's document windows and you can see that the link is underlined. How do I get rid of this underline?

1. On the click of the menu bar "Text" | " CSS Styles "| "Edit Style Sheet ..." (or just press the shortcut key Ctrl+shift+e) to bring up the edit style Sheet (editing style Sheet) dialog box window.

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

3. Type A in the selector column and click OK.

4. Then pops up the CSS Style Definition dialog box, in the Type class decoration (decoration), tick None, then click OK, and then click Done. You will immediately find in document windows that the underline of the link has disappeared. So how do you make the link change when the mouse hovers over the link? Repeat the first and second steps in the previous step. Then click the Drop-down arrow next to Selector, select "A:hover", and then click OK. In the "Style Definition for A:hover" dialog box that pops up, select a color in the color of the type class (for example, choose Red), then click OK, and then click Done. Press F12 Preview, put the mouse on the link, the link is not changed to red? If in the "Style Definition for A:hover" dialog box, in the Backgroud (background) class, select the Backgroud color to be green, Then when you put the mouse over the hyperlink, not only will the link turn red, but it will also have a green background. In fact, with just the CSS Style Definition dialog box, you can also achieve more special effects, interested friends may wish to think about it.

Second, create reusable external CSS style sheets

After creating a CSS style in a Web page with Dreamweaver, if you want to apply the style to another page, you don't have to create the CSS style again, as long as you create an external CSS stylesheet file (external CSS style sheet), You can call the style in the style sheet file at any future time. For ease of management, create a new folder, named CSS, in the folder where the site is located, specifically for placing an external style sheet file (with a CSS extension).

1, press Ctrl+shift+e in document window, bring up edit style Sheet (Edit Stylesheet) dialog Box window

2, click "Link".

3, in the pop-up link External style Sheet (link external style Sheet) dialog box, click Browse, find the CSS folder just created.

4. In the Select Stylesheet file (select Style sheet) window, in the File Name column, type *.CSS (* can be any name), note that in fact there is no style sheet file in the CSS folder, the "file name" The new name you type in the column will become the name of the new file for the external style sheet. For example, type Title.css, and then click Select | Ok.

5. In the Edit Style Sheet dialog window, add a new Title.css (link) and double-click it.

6, in the pop-up "title.css" window, point "New".

7, in the "New Style" dialog box, click the Make Custom Style (Class) button

8, in the Name column type a name, such as Myheadline, click OK.

9, in the next "Style definition for. Myheadline in Title.css" dialog box, the font, color, and other settings, finished click OK. If you want to create a new style, click "New", repeat steps 6, 7, 8, 9, and then the last point "save" | "Done", so title.css the external style sheet file is created. "TEXT" | On the menu bar All styles in Title.css will be listed in the CSS Styles submenu. To invoke this title.css on another Web page, simply repeat 1 to 3 steps above, and then enter TITLE.CSS in the file Name column of the Select Stylesheet File window. Point "Select" | "OK" | "Done", all the styles in the Title.css appear on the page menu bar, "Text" | CSS Styles submenu, you will be able to apply these styles to this page.