How to use css in dw-Front-end Q&A-php.cn

DW is a commonly used web page production software, and its css function is very powerful. Using css in DW can make the style of the web page more standardized and beautiful. Here are some ways to use css in DW.

1. Definition of css style

There are three ways to define css style in DW, namely internal style sheet, external style sheet and inline style.

1. Internal style sheet:

In DW, the way to use the internal style sheet is to add the tag inside the tag, and then add the tag Define styles in . The definition method of style is the same as that of ordinary CSS style sheet, but it is important to note that the scope of the style is the entire web page.

2. External style sheet:

Defining css styles in an external style sheet can make the structure of the web page clearer and achieve unified management of styles. In DW, external style sheets can be edited and managed with the help of panels. The specific operations are as follows:

(1) In the "Style" panel, click the "New Style Sheet" button to create a new style sheet file.

(2) To edit the style file, you can choose to manually enter the style code, or you can use the style editor that comes with DW to edit.

(3) Link the style sheet to the web page. Use the tag within the tag to link the style sheet to the web page.

3. Inline style:

In some cases, you need to make quick style changes to an element in the web page, you can use inline style. In DW, for a specific element, select the element in the "Style" panel, and then make related changes to the style in the "Style" panel. This method will directly affect the style of the element and can quickly implement style changes.

2. CSS selector

CSS selector is used to select elements that need to be styled. DW also supports multiple css selectors.

1. Tag selector:

The tag selector is one of the most commonly used selectors. It can select all elements of a certain type of tags and set styles for these elements.

2. Class selector:

Use the class selector to select all elements of a certain type of elements and set the same style for them. This class selector must be preceded by "." prefix.

3.id selector:

Use the id selector to select an element and set the style for this element. This id selector must be prefixed with "#".

4. Descendant selector:

The descendant selector can select the descendant elements of a certain element and set styles for these elements. This selector can make the style more refined.

In DW, you can use the code view or the "Style" panel to set the css selector. The specific methods are as follows:

(1) Select an element at will in the code view, Then set the style selector in the "Style" panel.

(2) Select a selector in the "Style" panel, and then enter the name of the element to be selected in the "Selector" input box.

3. Common css style attributes

The following introduces some common css style attributes, which can add more styles to web pages in DW.

1. Text attributes:

You can use attributes such as font, size, color, etc. to set styles for text in web pages.

2. Background attributes:

You can use attributes such as background image, color, and repetition to set styles for the background of the web page.

3. Box model attributes:

You can use attributes such as width, height, padding, and margins to set styles for the box model in the web page.

The above are some common css style attributes, which can achieve more style settings. In DW, style settings can be made intuitively through the "Styles" panel.

In general, the use of CSS in DW is relatively simple and easy to understand. Through the use of these methods and attributes, the style of the web page can be made more standardized and beautiful. Of course, in actual use, continuous exploration and practice are required to better realize the style setting and management of web pages.