Two tips on applying CSS style sheets in DreamWeaver
Author：Eve Cole
Update Time：2009-05-31 21:17:47
1. Remove the underline of the hyperlink and change the color when the mouse hovers over the hyperlink:
By default, hyperlinks in web pages designed with DreamWeaver are underlined, which does not look very beautiful. To remove these annoying underlines, the method introduced in many newspapers and magazines is to manually add a piece of code to the HTML source code. In fact, it is easy to remove the underlines of links in DreamWeave. First, create a random link in DreamWeaver's Document Windows. You can see that this link will be underlined. How to remove this underline?
1. Click "Text" | "CSS Styles" | "Edit Style Sheet..." on the menu bar (or directly press the shortcut key Ctrl+shift+E) to bring up the Edit Style Sheet dialog window.
2. Click "New", and then in the "New Style" dialog box, click the "Use CSS Selector" button.
3. Type a in the Selector field, and then click OK.
4. Then the "CSS Style Definition" dialog box pops up. In the decoration of the Type class, check none, then click OK, and then click Done. You will immediately notice that the link's underline has disappeared in Document Windows. So how do you make the link change color when the mouse hovers over it? Repeat steps one and two 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, 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 to preview and place the mouse on the link. Does the link turn red? If in the "Style definition for a: hover" dialog box just now, in the Backgroud class, you select the backgroud color to be green, then when you place the mouse on the hyperlink, not only will the link turn red, And there will also be a green background. In fact, through the CSS style definition dialog box just now, you can also achieve more special effects. Friends who are interested may wish to think about it.
2. Create a reusable external CSS style sheet. After using DreamWeaver to create a CSS style in a certain web page, if you want to apply the style to another web page, you do not have to re-create the CSS style. As long as you create an external CSS style sheet file (external CSS style sheet), you can call the styles in this style sheet file at will in the future. In order to facilitate management, first create a new folder in the folder where the site is located, named CSS, which is specially used to place external style sheet files (its extension is css).
1. Press Ctrl+shift+E in the Document Window to bring up the Edit Style Sheet dialog window. 2. Click "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 actually no style sheet file in the CSS folder at this time. The new name you type in the "File Name" field will become the name of the new external style sheet file. For example, type title.css, and then click Select | OK.
5. In the Edit Style Sheet dialog window, title.css (link) will be added, double-click it.
6. In the pop-up "title.css" window, click "New".
7. In the "New Style" dialog box, click the "Make Custom Style (class)" button. 8. Type a name in the Name column, 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 when completed. If you want to create a new style, click "New" again, repeat steps 6, 7, 8, and 9, and finally click "save" | "done", and the external style sheet file title.css will be created. All styles in title.css will be listed in the "TEXT" | "CSS Styles" submenu on the menu bar. If you want to call this title.css in other web pages, just repeat steps 1 to 3 above, and then enter title.css in the "File Name" column of the Select Stylesheet File window. Click "select" | "ok" | "done", all the styles in title.css will appear in the "Text" | "CSS Styles" submenu on the menu bar of the web page, and you will be able to apply them to this web page these styles.
