Getting started with HTML and CSS-Chapter 4 understanding Cascading Style Sheets and Chapter 4 css

Getting started with HTML and CSS-Chapter 4 understanding Cascading Style Sheets and Chapter 4 css

Knowledge point:

1. How to create a basic style table

2. Use style class methods

3. Use style ID

4. build internal style sheets and embedded styles

4.1 CSS Working principle:

CSS: the abbreviation of a stacked style sheet. It is a language that defines style structures such as fonts, colors, and locations. It is used to describe the formatting and Implementation of Information on webpages.

Extension:. css

Internal style sheets, external style sheets, and inline Style Sheets

Understanding of the concept of "cascade": (helps to understand the priority of CSS) the style in the CSS style sheet forms a layered structure, and more specific styles will overwrite General styles. The priority is determined by the level structure of CSS to achieve cascading effect. It can be understood by similar inheritance relationships.

PS: the concept of an element: it indicates the label and its internal description (such as attributes, text, and images ).

4.2 A basic style sheet:

Standard Writing Method: one row and one style rule for easy reading.

The font column needs to be analyzed by capturing a time period, including the font family and font size.

Briefly list the various units of the font size:

Pt: Point. 1 inch is equivalent to 72 points.

In: inches

Cm: centimeter

Px: pixel

Em: the width of the letter m

4.3 getting started with CSS styles:

Style attributes in CSS fall into two categories:

　　　　Layout attributes: Attributes that affect the element location on the webpage.

　　　　Format attributes: Attributes that affect the visual display of elements on the website.

Display: block element of layout attributes, with clear: both

List-item: list item processing/* There is no difference with block from the current perspective */

Inline, none, other ......

Width and height of the layout attribute

Border of the formatting attribute: the border-radius is added to control the rounded corner of the rectangle.

Font for formatting attributes:

1. text-decoration is often used to delete the underline Of a link.

2. Set line-height to text line height

4.4 use style classes:

To make some text fields in a webpage different from other texts, you can create custom HTML tags.

The special format text defined here is called a style class. Therefore, it enables a set of custom formatting instructions. Example:

H1 {color: blue}

H1 is the selector, color is the style attribute, and blue is the value of this attribute.

Selector: Tag (h1), Class (. title), ID (# container ......

PS: Pay attention to the difference between "tag. Class" and "tag. Class" in the combination selector.

4.5 Use style ID:

For Layout and formatting, you can choose to use the ID for interaction with the background.

The ID must be unique on the same page.

4.6 internal style sheets and inline styles:

Internal style table: <style> label. Pay attention to the type attribute.

Inline style: style attributes

PS: external style sheet, link. Note that href, type, and rel attributes are required.