CSS Style
Inline
- It is also called inline style, inline style and embedded style
<!-- style Write directly after the label as an attribute, style Property can contain any CSS attribute -->
<div style="font-size: 40px; color: #FF0000; "> I'm div < / div >
<div style="font-size: 40px; color: blue;">I am div2 number</div>
<p style="font-size: 40px; color: orange;">I'm a paragraph</p>
- Inline styles are used when styles need to be applied only once on an element
- shortcoming
- The performance and content are mixed together, and the structure style is not separated, which is not conducive to later maintenance
- Styles cannot be reused (not recommended)
Internal type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Internal style sheet</title>
<!-- 2,stay head Create one in the middle style label -->
<style type="text/css">
/* 3,In the style tab, you can write css code directly for modification */
p {
color: red;
font-size: 30px;
/*
When writing css, if there are no special regulations,
The value must be in units (html is not necessary), px: pixels
*/
}
div{
color: blue;
font-size: 80px;
}
</style>
</head>
<body>
<!-- 1,First create the object you want to decorate -->
<div>CSS Basic learning</div>
<p>I'm a paragraph</p>
</body>
</html>
- Use internal style sheets when a single document requires special styles
- Suitable for case and short page development
- Use the < style > tag to define an internal style sheet at the document header
- < style > labels can be placed anywhere, not necessarily in < head >. The reason why it is placed in < head > is to let the browser load CSS first when loading. In this way, the browser will know who wants to modify it into what style. After loading it into html, it can directly give the style to relevant objects.
- Advantages: structure style separation, easy maintenance
- Disadvantages: CSS styles can only be used in one page
External type
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>External style sheet</title>
<!-- 3,utilize<link>Label or import introduce css file -->
<!-- css External introduction mode 1(Recommended use) -->
<!--
rel: relationship;
rel Property is required, Specify the current document and the linked document/Relationship between resources
stylesheet:style sheet
-->
<link rel="stylesheet" type="text/css" href="External style.css" />
<!-- link Another use of, link title<title>Small icon in front -->
<link rel="icon" href="images/icon.jpg" />
<!-- css External introduction mode 2 -->
<style type="text/css">
@import url("demo.css"); /* @import: Import, import; */
</style>
</head>
<body>
<!-- 1,First create the object you want to decorate -->
<div>CSS Basic learning external styles</div>
<div>CSS Basic learning external styles</div>
<p>I'm a paragraph</p>
<p>I'm a paragraph</p>
<!-- 2,Create a new css file -->
</body>
</html>
- When styles need to be applied to many pages, external style sheets are ideal
- Suitable for whole station development and long page development
- In the case of using external style sheets, you can change the appearance of the whole site by changing a file. Each page uses the < link > tag to link to the style sheet. The browser will read the style declaration from the CSS file and format the document according to it
- advantage
- Structured style separation, easy maintenance
- Style reuse, which can be used by multiple pages
- The difference between < link > and import
- In essence, < link > is an HTML tag, and import is a way provided by CSS
- Loading sequence
- < link > is when the page (the content in the body) is loaded (that is, when it is browsed by the browser), the CSS introduced by < link > will be loaded at the same time
- The CSS introduced by import will be loaded after the page is loaded. If this loading method is used, the flickering effect will appear when the network speed is relatively slow, affecting the user experience
- Compatibility differences
- @Import is CSS2 1, so the old browser does not support @ import, which can be recognized only if it is above IE5
- The < link > tag does not have this problem
- Using DOM
- When using JavaScript to control DOM to change style, you can only use the < link > tag
- Because @ import is not controlled by DOM
Multiple style priority
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple style priority</title>
<link rel="stylesheet" type="text/css" href="demo.css"/>
<style type="text/css">
div{
color: blue;
}
p{
color: blue;
}
</style>
<!--
demo.css inside p The label is set in red
here<style>distance<p>Label ratio<link>Near, so the font is blue
-->
</head>
<body>
<div style="font-size: 50px; color: orange;">
First test of parsing rules
</div>
<p>
The second test of parsing rule: external and internal style sheets are used at the same time
</p>
</body>
</html>
- Multiple style priority
- When using internal, external and inline style sheets to decorate the same label at the same time, the highest priority is the inline style sheet, that is, the display result is the inline style
- When external and internal style sheets are used at the same time, which css style is close to the label will eventually display which style
