How to Design Layout with CSS in Dreamweaver

Document on creating web pages of kangfire website construction Institute (bkjia.com)This article describes how to use Cascading Style Sheets (CSS) in Dreamweaver to design text formats on pages. You can use CSS to design text formats and locate text in ways not provided by HTML, so that you can control the layout and appearance of pages more flexibly and freely.

　　Understanding CSS

Cascading Style Sheets (CSS) are a series of format design rules that control the layout and appearance of Web page content. When CSS is used to design the page format, the content and representation are separated from each other. The page content (HTML code) is located in its own HTML file, while the CSS rules defining the code representation are located in another file (external style sheet) or another part of the HTML document (usually part). With CSS, You can flexibly and better control the layout and appearance of pages, from precise layout to specific fonts and styles.

CSS allows you to control many attributes that cannot be controlled only by HTML. For example, you can specify different font sizes and units (pixels, pounds, etc.) for the selected text ). You can use CSS to design the font size in pixels. You can also ensure that the page layout and appearance are processed in a more consistent manner in multiple browsers.

CSS format design rules are composed of two parts: Selector and declaration. A selector is a term that identifies elements of a designed format (such as P, H1, class name, or ID), and a declaration is used to define a style element. In the following example, H1 is a selector, and all content between braces ({}) is declared:

Reference content is as follows: H1 { Font-size: 16 pixels; Font-family: Helvetica; Font-weight: bold; }

The Declaration consists of two parts: attributes (such as font-family) and values (such as Helvetica ). The above example creates a style for the H1 label: The text of all H1 labels linked to this style will be 16 pixels in size and use the Helvetica font and bold.

The term "cascade" refers to the ability to apply multiple styles to the same element or Web page. For example, you can create a CSS rule to apply the color, create another rule to apply the margin, and then apply the two to the same text on a page. The defined style "cascade" to the elements on your Web page, and finally create the design you want.

The main advantage of CSS is that it is easy to update. As long as a CSS rule is updated, the format of all documents using the defined style will be automatically updated to the new style.

You can define the following rule types in Dreamweaver:

Custom CSS rules (also known as "class styles") allow you to apply style attributes to any text range or text block. All class styles start with periods. For example, you can create a class style called. red. The color attribute of the design rule is red, and then the style is applied to section text of some defined styles.

HTML Tag rules redefine the format of a specific tag (such as p or h1. When you create or change the CSS rules for the h1 tag, all texts in the format designed with the h1 tag are updated immediately.

CSS selector rules (advanced style) Redefine the format of a combination of specific elements, or other formats in the selector format allowed by CSS (for example, whenever the h2 title appears in a table cell, the application selector td h2 ). Advanced styles can also be used to redefine the format of tags containing specific id attributes (for example, the style defined by # myStyle can be applied to all tags that contain attribute/value pairs id = "myStyle ).