CSS learning notes 1 - basic syntax and style sheet

1, Basic introduction to CSS

CSS (Cascading Style Sheets) Cascading Style Sheets is a presentation standard language in WEB standards. It is mainly used to modify the display style of WEB information. At present, it is recommended to follow CSS 3.0 released by W3C. The most basic thing is to learn the writing method of CSS 2.0.

2, Basic grammar

Each CSS style consists of two parts: selector and declaration, which are divided into attribute and attribute value;
Attributes must be placed in curly braces, and attributes and attribute values are connected by colons;
Each statement ends with a semicolon;
When an attribute has multiple attribute values, the attribute values and attribute values are separated by spaces regardless of order;
In the process of writing style, operations such as space and line feed do not affect the style operation;

3, Style sheet

1. Internal style

Change the style through the style label.
Method: write the style tag under the head tag of the html code file.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css Internal style -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
    <!-- html object -->
    <h1>123</h1>
</body>
</html>

2. External style

It is most commonly used to change the style by introducing foreign css files.
Steps: create an html object - create a css file - use the link tag 1 (recommended) or @ import 2 Importing css files

The HTML code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- css External style introduction method 1 -->
    <link rel="stylesheet" type="text/css" href="css File path">

    <!-- css External style introduction method 2 -->
     <style>
        @import url(css File path);
    </style>
</head>
<body>
    <!-- html object -->
    <h1>123</h1>
</body>
</html>

3. Inline style

Inline style is also called inline style and embedded style. When using, you can directly add the style attribute to the start label. Its advantage is that you can set the style for a single label.

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- html object+inline style  -->
    <h1 style="color: red;">123</h1>
</body>
</html>

4. Style priority

Style priority: inline style > internal style > external style

Note: (1) priority only refers to the comparison between the same attributes in the same object;
(2) add after attribute value! When important, the priority of this style will become the highest;

4, Conclusion

This learning note is mainly used to record the front-end learning process of bloggers. At present, learning resources come from b station Qianfeng front-end 1000 set teaching , if there are mistakes in the notes, I hope you can point out. At the same time, welcome to the friends of Bowen to study with me!

link tag
Belong to link label
The attribute rel is used to define the relevance and indicates how to treat the imported file. The common values are stylesheet (style sheet)
The attribute type indicates the type of file introduced
The href attribute indicates the path of the imported file ↩︎
The difference between link and import
(1) Essential difference: link belongs to XHTML tag, and @ import is a way provided by CSS
(2) Difference in loading order: when a page is loaded, that is, browsed, the CSS referenced by link will be loaded at the same time, while the CSS referenced by @ import will be loaded after all the pages are downloaded. Therefore, sometimes when browsing the page loaded with CSS by @ import, there will be no style (flashing form) at the beginning, especially when the network speed is slow.
(3) Compatibility difference: @ import is proposed in CSS 2.1, so old browsers do not support it. @ import can only be recognized when it is above IE5, but the link tag does not have this problem. ↩︎

Keywords: Front-end css

Added by v1ral on Sat, 22 Jan 2022 21:30:17 +0200

Programming VIP