CSS
CSS (Cascading Style Sheets) beautify the style.
CSS is usually called a CSS style sheet or a cascading style sheet (cascading style sheet), which is mainly used to set the text content (font, size, alignment, etc.) in the HTML page, the shape of the picture (width height, border style, margin Etc.) as well as the layout of the layout and other appearance display styles.
CSS is based on HTML and provides rich functions, such as font, color, background control and overall layout, and it can also set different styles for different browsers.
Three style sheets for CSS
Inline style (inline style)
All HTML tags have the attribute style, which can be used to set the style of the element. This method is called inline style.
The style consists of one or more statements, separated by a semicolon ";";
Each declaration consists of an attribute and its value, separated by a colon ";";
If the attribute has multiple values, separate the values with spaces "".
Features: There is no separation of structure and performance.
<div style="width: 200px;height: 50px;border: 5px solid maroon;" >
通过style属性可以设置<span style="color: red;font-size: 20px;">内联样式!</span>
</div>
<div style="width: 60px;height: 30px;border: 5px solid green;"></div>
Internal style
The CSS code is written in the head tag of the HTML document and is defined by the style tag. This writing is called internal style.
CSS specification: all lowercase codes
Comments can be added in CSS, the comment method is: / * This is the content of the comment * /
Features: There is no separation of structure and performance.
<head>
<style type="text/css">
内部样式;
</style>
</head>External style
1. Imported style
<style type="text/css">
@import url(外部样式表的路径);
</style>Features: Separation of structure and performance is achieved, and the grammar is more complicated.
2. Linked style
<link href="CSS样式表的路径" type="text/css" rel="stylesheet"/>Features: The separation of structure and performance is achieved, and the grammar is relatively concise.
The difference between @import and link
The link is loaded when the HTML is loaded, and @import is loaded after the HTML is loaded;
The link is an HTML tag and can only be used in HTML. @import can be seen as a CSS style and can also be used in CSS.
Priority of style sheets: principle of proximity
External styles, internal styles and inline styles apply to the same element, priority relationship:
The concept of cascading in CSS (Cascading Style Sheets) refers to the process by which a browser superimposes multiple style sources to finalize the results. It includes:
- Selector priority
- Priority of style source
- ! important sets the priority of the attribute
In general, the "-" sign appears in the CSS style attribute, the corresponding style attribute is to remove the "-" sign, capitalize the first letter of the word after the "-" sign, if there is no "-" sign, then The same:
The difference between three style sheets
| Style sheet |
advantage |
Disadvantages |
Usage |
Control range |
| Inline style sheet |
Easy to write, high weight |
No separation of style and structure |
less |
Control a label (less) |
| Internal style sheet |
Partial structure and style are separated |
Not completely separated |
More |
Control a page (middle) |
| External style sheet |
Complete separation of structure and style |
Need to introduce |
Mostly, highly recommended |
Control the entire site (more) |
