How do I use CSS?

Guide: This chapter focuses on how to use CSS styles and the syntax structure of CSS in HTML pages. T hrough this section, we'll learn the most basic core of CSS syntax. These will also be a must-have for us to write CSS style code in the future.

How to use CSS

The main scenario for CSS styles is in HTML pages, and their purpose is to set the display of HTML pages after they run in the browser. There are three ways to use CSS styles on HTML pages:

• Inline style
• Inline style sheets
• The outreach style sheet

Inline style

The purpose of the HTML element's style property is to style the CSS for that element. The following sample code shows how inline styles are written:

<div style="color: lightcoral;">这是测试内容.</div>

The syntax structure of the inline style is shown in the following image:

However, the disadvantages of using inline styles are also obvious, as follows:

1. HTML content is strongly coupled with CSS styles and does not effectively separate the content and style of a Web page.
2. Setting the same CSS style for different elements results in the same CSS style code being repeatedly defined, resulting in redundant code.

Inline style sheets

Elements in HTML elements can be used to style CSS for elements of the current HTML page. The following sample code shows how inline style sheets are written:

<style type="text/css">
    p {
        color: lightcoral;
        font-size: 24px;
    }
</style>

The advantage of using inline style sheets is that they solve two problems in inline styles:

• The problem of strong coupling between HTML content and CSS styles allows the content and style of Web pages to be effectively separated.
• If you set the same CSS style for different elements, you only need to define the CSS style code once.

However, inline style sheets are still written in HTML files. If an HTML page contains a large number of CSS styles, it can cause HTML files to become large, making it longer for browsers to load HTML pages.

The outreach style

CSS style code can be defined in a CSS file, effectively solving problems with embedded style sheets. The specific approach is as follows:

1. Create a file with the extension .css and write the CSS style code in that file.
2. In an HTML page, the created CSS file is introduced into the HTML page through the element in the element. T he following sample code shows how the '' element introduces a CSS file: <link rel," "stylesheet," href, "style/demo.css" >1rel property: used to define the relationship between the ingest file and the current HTML page, which must be a link type value. h ref property: The URL used to define the ingest file. Description: An HTML page allows multiple CSS files to be introduced, and multiple CSS files are loaded in the order in which HTML pages are introduced.

The loading process of the outreach style sheet

Note that the outreach style sheet is not loaded by the browser in sync with the HTML page. The exact loading process looks like this:

1. The browser loads the HTML page and resolves it.
2. Resolves to the CSS file introduced by the <link > element and reads the path to the CSS file through the href property.
3. Depending on the path read, start loading the CSS file and parse it.

The loading process for the outreach style sheet is shown in the following illustration:

CSS syntax structure

Either of the three ways to introduce a CSS style, we need to learn the syntax structure of CSS, which is the basis for learning what follows CSS. The code base structure of the CSS style is shown in the following example:

p {
    color: lightcoral;
    font-size: 24px;
}

The syntax structure of CSS and related concepts are shown in the following illustration:

The basic structure of CSS syntax can be divided into:

• Selector: Used to locate elements in the current HTML page, which can be one element or multiple elements (elements set).
• Declaration block: Used to contain one or more CSS declarations with a syntax structure of a pair of curly braces.

CSS declaration

The CSS syntax structure is declared in addition to the selector. A CSS declaration is a rule defined by CSS, and the specific syntax structure is a pair of key/value pairs.

The syntax structure of the CSS declaration can be divided into:

• Properties: The way HTML elements are styled is given by CSS. For example, the color property is the text color used to define an element, and so on.
• Property value: The style used to define HTML elements. F or example, the value of the color property can be lightcoral, and so on. N ote: The property values for different CSS properties are different. Specific reference documents can be made available from MDN.
• Separator: Is a colon (:) that separates CSS properties and values.
• End character: is a semicolon (; ) to indicate the end of a CSS declaration.

CSS comments

CSS also provides comments with HTML, and it acts like HTML comments. However, the comment syntax of CSS is different from HTML, and the syntax structure of CSS comments is shown in the following illustration:

summary

This section explains three ways to introduce CSS styles to HTML pages and the syntax structure of CSS, as well as comments and more. thereinto:

• There are three ways to introduce CSS styles, each with its advantages and disadvantages, and choose which one to use depending on the actual development.
• The syntax structure of CSS is divided into selectors and declarations, which we will continue to cover in subsequent chapters.
• CSS comments act like HTML comments, but have different syntax structures. Don't be confused in actual development.

international development situation choose which one to use to introduce the CSS style.

• The syntax structure of CSS is divided into selectors and declarations, which we will continue to cover in subsequent chapters.
• CSS comments act like HTML comments, but have different syntax structures. Don't be confused in actual development.