Apply CSS style sheets in DreamWeaver

Source: Internet
Author: User

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 Ctrl shift E) to bring up the Edit Style Sheet dialog box.
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.