Controlling the overall style of web pages with CSS

css| Control | Web page design We usually need to unify the overall style of the Web page, the unified style mostly related to the page text attributes, background color and link text attributes, and so on, if we apply CSS to control these attributes, will greatly improve the speed of web design, more unified Web page overall effect.

In order to modify the entire Web page, we need to edit an external CSS document. Define and modify different CSS properties based on this document and call it in pages with the same or similar page elements.

overall change in page style

Now the 9pt and 10.5pt fonts in the popular song in the Web page, press the shortcut key "Shift+f11" to open the CSS Style Control Panel, click the "New Style" button, pop-up "New Style" dialog box, check "Redefine HTML Tag" Type "" Body "," BR "," cite "and so on at the tag, select" Body "after confirmation. This allows us to set up an external CSS document, save the dialog box as all and then go to the "Style Definition for the body in All.css" dialog box (Figure 1). Select the "Type" item in "Category", define "Font" as "Arial", "Size" argument is "9", and then Drop-down box to select "Points" and "color" to customize it as a preference color. Of course, you can also select the "Background" item in "Category" to define "Background" colors and other background properties. At this point you will see the overall change in the content on the page.

Figure 1

change of preference element style

Through the above changes sometimes unavoidably bring you some trouble, if you encounter an element of the page, such as highlighting the text font, size and color how to do! Here we need to define a new CSS style forms to control it, right-click the page edit area, click on the "CSS style/edit style Sheet" command in the pop-up shortcut menu, pop-up "Edit Style Sheet" dialog box, Select the all.css in the list, click the "New" button, and select "type" of "Make custom Style" in the pop-up "New style" dialog box to define a CSS control of your preference. If you want to change the properties of an element on a page, select it and then right-click the CSS that you just defined in the "Apply Styles" in the CSS Styles panel, and then execute the Apply command (Figure 2).

Figure 2

Unified Control Super Link

Hyperlinks are often used in Web pages, and the link color of the page by default are blue, although you can change, but the single color in different background colors on the page is not so effective, we look at how to use the CSS control page to achieve different personality link color. In the New Style dialog box, select the type of Use CSS Selector, and the Selector drop-down box lists the A:link (link properties), A:hover (mouse move to properties on the link), a:visited (the link is accessed after the property) "," a:active (properties under Link focus State) "4 options (Figure 3), the settings of these 4 options control all the links in the page properties, we can define these 4 properties, and then add to the CSS Style In the panel with the default settings in different CSS control, and then the "Apply" to the need to change the link on the implementation. If the "Hover" font settings than "link" slightly larger, it will appear when the mouse moved to the link font larger effect, try it is not very wonderful!

Figure 3

The noun explanation: CSS is the cascading style sheet (cascading style Sheet) is commonly used in the process of Web page production technology. Using CSS technology-controlled web pages, designers can more easily and effectively control the overall layout of the page, colors, fonts, links, backgrounds and the different parts of the same page, the appearance and format of different pages and other effects to achieve more precise controls. Dreamweaver MX launched, its improved CSS rendering and design tools, through the enhanced CSS panel to clearly display the internal and external definition of style, so that users can build a site that conforms to the latest CSS standards.