Reading DIV + CSS business case and webpage layout development lecture _ CSS syntax _ notes, divcss

Reading DIV + CSS business case and webpage layout development lecture _ CSS syntax _ notes, divcss

1. CSSThe function is implemented through the structure language. The structure serves as a bridge to control the display effect (that is, the display effect) of the page content)

2. CSS syntax

It includes three aspects: selector, attribute, and attribute value.

Selector{Attribute: attribute value;}

Note:

(1) attributes must be included in{}Medium

(2) separate attributes and attribute values ":"

(3) Use ";" to distinguish between read attributes

(4) When writing attributes,Use spaces and line breaks between attributesAttribute display is not affected.

(5) If a property has several values, each attribute value is separated by a space.

3. Three methods of using CSS on a webpage:

(1) CSS inside the element

<Element name style = "attribute: attribute value"> </element name>

Note: CSS is directly used in elements by using the style attribute. The syntax structure of the CSS style defined by the style attribute is exactly the same as that in the independent style table.

Fill: The border is added to the outside of the image, that is, the outside

(2) CSS in the page header

<Style>

Selector {property: property value ;}

</Style>

Note:

(1) when using the header to call CSS, the corresponding calling code must exist on the page. The calling code is also written differently depending on the calling content. For example:

Call code of the class selector: <element name class = "class selector name"> </element name>

Code for calling the ID selector: <element name id = "id selector name"> </element name>

(2) All styles on the page can be written between <style> and </style>.

(3) external CSS (recommended)

Two Methods of calling CSS in the form of links:

(1) Use the link element to call CSS

<Link rel = "stylesheet" href = "css file path" type = "text/css">

Note:

Rel = "stylesheet" indicates that the style of the file to be called is a style sheet file.

Type = "text/css" indicates that the file type is style sheet text.

(2) Use @ import to call CSS

<Style type = "text/css"> @ import url (css file path); </style>

Note:

The @ import call method can also be written in the CSS file to call other CSS.

Examples of calling styles using link and @ import at the same time are as follows:

<Link href = "style/main.css" rel = "stylesheet" type = "text/css"/>

Code in mian.css:

. @ Import url(css1.css );

. Main {

Border: 1px solid #666666;

Margin: 100px auto;

Font-size: 200px;

}

By using @ import, you can call the style file again from the style sheet.