Introduction to CSS style sheets_html/css_WEB-ITnose

1. Style selection in CSS

1) Inner style (inline style)

style=””;

2) Inline style

3) External style

4) Import style

@import url();

Note: Priority inline> Link> Embedded> Import (proximity principle)

2. Commonly used selectors in CSS

1) Tag selector

directly uses the tag name to define a tag attribute. All tags throughout the document will have the same attribute defined.

2) Type selector

Use .ClassName to define the attributes of a type. When the label element contains the class="" attribute, it has its defined style.

3) ID selector

Use #IdName to define the attributes of an ID element. When the ID within a tag element is the same as its defined ID, the tag has its defined attributes.

Note: Priority ID>Type> Tag

3. Special selector in CSS (used in special circumstances)

Sub-object selector

Syntax: E1 > E2. Expressed as selecting all as all sub-objects under object E1.

Attribute selector 1

Syntax: E1[attr]. Represents all E1 objects with the [attr] attribute.

Attribute selector 2:

Syntax: E1[attr=value]. Select the E1 object with the [attr] attribute whose attribute value is equal to value

4. Common attributes in CSS

Font Font

1) The font attribute provides overall control over the font. (Multiple attributes can be set at one time)

2) color attribute, modify and control the color of the font.

3) font-family, modify the font of the text.

4)font-size, defines the font size of the text.

5)font-stretch: Define and modify the boldness of the text font (normal: normal, narrower: thinner, wider: bold)

6)text-decoration: Set the modification of the text , decorative content.

text text

1)vertical-align: Set or retrieve the vertical alignment of the object content.

2) text-align: Set or retrieve the alignment of text in the object.

Background background

1) background: Control the overall properties of the background and set its composite properties.

2) background-color: Set the background color of the object.

3) background-image: Set the background image of the object

4) background-repeat: Set the arrangement of the background image of the object.

Positioning Postioning

1)position: Set the positioning method of the object.

2) top bottom left right: Set the object positioning distance in pixels.

Borders

1) border: Control the overall properties of the border and set its composite properties

2) border-color: Set the color of the object border.

3) border-style: Set the style of the object border.

4) border-width: Set the width of the object border.

Lists

list-style: Control the overall attributes of the list and set its composite attributes

Layout

1) float: The value of this attribute indicates whether the object and how to float.

2) clear*: Do not allow objects to float. both: No objects are allowed to float on both sides. left/right: No objects are allowed to float on the left/right. none: No floating value.

3)display: Set or retrieve whether and how the object is displayed.

Margin/Padding

Margin: Set the outer margin of the object

Padding: Set the inner margin of the object

5. Pseudo selector

Commonly used pseudo-selector

a:link sets the style attribute of a before it is accessed.

a:hover Sets the style properties of the object when it is hovered.

a:active Sets the stylesheet properties of the object when it is activated.

a:visited Sets the attribute of an object when its link has been visited.

a:focus Set the style sheet properties when the object becomes focus.