Shulou(Shulou.com)06/01 Report--

This article will give you a detailed explanation on how to use CSS. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

How to use CSS

The main application scenario of CSS style is in the HTML page, and its function is to set the display effect of the HTML page after the browser runs. There are three ways to use CSS styles on HTML pages:

Inline style

Embedded style sheet

Outreach style sheet

Inline style

The style attribute of the HTML element sets the CSS style for the element. The inline style is shown in the following sample code:

This is the content of the test.

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

However, the disadvantages of using inline styles are also obvious, including the following:

HTML content is strongly coupled with CSS style, which does not effectively separate the content and style of web pages.

If you set the same CSS style for different elements, it will cause the same CSS style code to be repeatedly defined, resulting in redundant code.

Inline style sheet

The elements in the HTML element can be used to set the CSS style for the elements of the current HTML page. The following sample code shows how to write an embedded style sheet:

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

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

The strong coupling between HTML content and CSS style makes the content and style of web pages separate effectively.

If you set the same CSS style for different elements, you only need to define the CSS style code once.

But the embedded style sheet is still written in the HTML file. If a HTML page contains a large number of CSS styles, it will cause the HTML file to become very large, so that the browser takes longer to load the HTML page.

Outreach style

CSS style code can be defined in an CSS file, which effectively solves the problem in embedded stylesheets. The specific practices are as follows:

Create a file with a .css extension and write the CSS style code in this file.

In the HTML page, the created CSS file is introduced into the HTML page through the elements in the element. The following sample code shows how the ``element is introduced into the CSS file: the 1rel attribute: used to define the relationship between the incoming file and the current HTML page, and the attribute value must be a link type value. Href attribute: used to define the URL of the incoming file. Note: a HTML page allows the introduction of multiple CSS files, and the loading order of multiple CSS files is in the order in which the HTML page is introduced.

The loading process of outreach stylesheets

It is important to note that the outreach stylesheet will not be loaded by the browser synchronously with the HTML page. The specific loading process is as follows:

The browser loads the HTML page and parses it.

Parses to the CSS file introduced by the element and reads the path to the CSS file through the href attribute.

According to the read path, the CSS file is loaded and parsed.

The loading process of the outreach stylesheet is shown in the following figure:

CSS grammatical structure

No matter which of the above three ways to introduce the CSS style, we all need to learn the syntax structure of CSS, which is also the basis for learning the follow-up content of CSS. The basic CSS-style code structure is shown in the following example:

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

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

The basic structure of CSS syntax can be divided into:

Selector: used to locate elements in the current HTML page, either one element or multiple elements (set of elements).

Declaration block (Declaration block): used to contain one or more CSS declarations whose syntax structure is a pair of curly braces.

CSS statement

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

The grammatical structure of a CSS declaration can be divided into:

Attribute (Properties): the way in which HTML element styles are defined is given by CSS. For example, the color attribute is used to define the text color of an element, and so on.

Value of the attribute (Property value): used to define the style of the HTML element. For example, the value of the color attribute can be lightcoral, and so on. Note: different CSS attributes have different attribute values. For details, you can refer to the reference documentation provided by MDN.

Delimiter: is a colon (:) that separates the CSS attribute from the value.

Terminator: is a semicolon (;) that indicates the end of a CSS declaration.

CSS comment

CSS and HTML also provide annotations, which are similar to HTML's annotations. However, the annotation syntax of CSS is different from that of HTML. The syntax structure of CSS comments is shown in the following figure:

This is the end of the article on "how to use CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.