18th section CSS Styles

Css

CSS, or cascading stylesheets, is used to make up for the many deficiencies in the HTML language of writing pages, making the page format easier to control. CSS is used for almost every page. This section is mainly about the application of CSS in Dreamweaver, as for the details of CSS, please refer to the relevant CSS information.

Click the Fourth icon on the left of the Launcher panel, or click the Window/css style on the menu bar, or use the shortcut key F7 directly, which pops up the CSS style panel.

(CSS style panel)
Click the icon at the bottom right of the CSS styles panel and the new Style dialog box pops up.

(New CSS Style dialog box) you can see from the New Style dialog box that there are three ways to define CSS in the page with Dreamweaver--make custom Style (Class), Redefine HTML tag, and use CSS Selector.
Make Custom Style (class) applies a CSS style to the selected range, and to apply CSS styles to the relevant area of the entire page, you choose redefine HTML tag and use CSS selector.
Make custom Style (class) compares settings similar to HTML styles, and the use of CSS styles defined with the make custom style is also similar to HTML style.
Redefine HTML tag, which is to redefine the HTML tag in the page source file. When the CSS style defined with redefine HTML tag is set, the CSS style takes effect immediately. The
Use CSS Selector is a CSS style that is used at this time for a specific HTML tag combination or ID name. You can choose from the selector selection box, which has four options--a:active, A:hover, A:link, and a:visited, representing the activation status of the hyperlink, the mouse moving to the hyperlink state, The link state of the hyperlink and the State visited by the hyperlink. You can also insert some HTML tag combinations directly into the marquee. For example, if you are filling in TD p, this CSS style will be used for the scope of P tags within all TD tags on a Web page. You can also fill in the ID name that starts with the symbol #, for example, if you can fill in the #abc, the CSS style will be used for all HTML tags with id= "abc" on the Web page.

Regardless of which one is selected, click the OK button to eject the CSS Style Setup dialog box.

(CSS Style Settings dialog box)

The

dialog box is divided into eight modes. Click on the left to select. The item in the dialog box preceded by a symbol *, which indicates that the effect is not displayed in the Dreamweaver window, and you need a browser preview to view the effect. The
type pattern is primarily a setting for text properties. The
background mode is the setting for the Background property. The
Block mode, the area mode, is the setting of the various voids for text within a range.
Box mode is the container setup mode. The
Border mode is the property that sets the container border. Border, or a border, is also an integral part of a container. The Microsoft Internet Explore does not support border properties. The
List mode is the property that sets the list. The
Positioning mode positioning positioning is the use of CSS to accurately and conveniently place page elements into page pages. The extentions mode is some extension of CSS. Where page break is associated with print printing. Cursor is the effect that the mouse displays when you move the mouse over the defined page element. Filter is a CSS filter effect. When the

setting is complete, the CSS style created with the redefine HTML tag and the use CSS selector is immediately effective, and the style created with make Custom style (class) is added before it takes effect. Setting methods is similar to the way HTML styles are set. The


next describes using external CSS files. External CSS files, that is, the CSS style definition in an external file, rather than defined in the page file, so many Web pages common to the same style. It is recommended that you use CSS style, the best way to link the external CSS file, so that the style of the site can be unified and easy to update.
to make a new external CSS file, click the icon on the CSS panel to pop up the edit CSS dialog box.

(CSS Style Editing dialog box)

Click the link button on the Edit CSS dialog box to eject the dialog box that introduces the external CSS file. Select an external CSS file.


Finally, a simple example. This CSS setting is very common. We want to achieve this effect by making the text size 9 points, removing the underscore of the hyperlink, and underlining when the mouse moves to the hyperlink.

Fixed text to the most commonly used 9-pound size first. Click the New Style button, select the middle item in the pop-up dialog box, and select P in the Drop-down selection box. Click the OK button to eject the CSS Properties Settings dialog box. Size is the font size, select 9 in the following, and the unit is selected as points, which sets the font to 9 points. Click the OK button when the setting is complete. Well, now the text of the page has reached the effect we require. The above is marked for p, and then repeat for TD, input, Li, select, and so on.
Next, remove the underline of the hyperlink and change its color. Click the New Style button, select the middle item in the pop-up dialog box, and select a In the dropdown box. Click the OK button to eject the CSS Properties Settings dialog box. Select None after decoration. Set the color again. Then click the OK button. At this point, the hyperlink on the page becomes the effect we need.
Finally, you can set the underline to appear when you move the mouse over the hyperlink. Click the New Style button, select the following item in the pop-up dialog box, and select A:hover in the dropdown box. Click the OK button to eject the CSS Properties Settings dialog box. Select Under-line after decoration. Set the color again. Then click the OK button. Press F12 to preview this page and move the mouse over the hyperlink to show an underscore.