<!--CSS styles:
When you read a style, the browser formats the HTML document according to it
How to insert a style sheet:
We should know what a style sheet is, and what kinds of stylesheets we use to format the HTML document.
CSS files are style sheets that can be divided into three categories:
External style sheet
Internal style sheet
Inline style sheet
So what do these three types of stylesheets mean, and let's go through a couple of examples to explain it to you:
The first is the external style sheet:
When our style wants to apply to a lot of interfaces, the external stylesheet is our ideal choice, using an external stylesheet we can change the appearance of multiple interfaces by changing a file.
How to use the external style sheet:
We use the <link> tab to connect to an external style sheet in a Web page that wants to use that external style sheet.
HTML Document:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<link rel= "stylesheet" type= "Text/css" href= "External.css" >
<title></title>
<body id= "B" >
<p id= "Para" > I was a paragraph </p>
</body>
CSS file:
#para
{
Font-size:7;
color:red;
}
#b
{
Background-color:green;
}
We want to know that an external style sheet can be edited in any text editor, and the file cannot contain any
HTML tab, that is, can not use <p>,Internal style sheet:
What we just looked at is an external style sheet, defined outside the HTML document, and can be thought of inside
The stylesheet should be defined inside the HTML document, and as you would expect, the internal style sheet in the HTML document is
By defining the internal style in the document's header using the <style> tag, defined by a <style> between
<! DOCTYPE html>
<meta charset= "Utf-8" >
<style type= "Text/css" >
, B-
{
Background-color:green;
}
. para
{
color:red;
Font-size:7;
/* The font is set to the maximum font size 7th */
}
</style>
<title></title>
<body class= "Bo" >
<p class= "Para" > I am paragraph </p>
</body>
Finally, there is a style that is inline:
Because the main manifestation and content are mixed together, the inline style will damage the missing style sheet
Many advantages, please use this approach with caution, for example, style is only needed to apply an element
Once you can use the inline style, you need to use the Style property in the relevant tag
Like what:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<body bgcolor= "Red" >
<p style= "color:siena;margin-left:20px" >this is a paragraph</p>
</body>
To know is that bgcolor represents the property of the body, but background is not his property.
Sometimes there may be multiple styles, such as the introduction of external styles, but also in this document defines the internal style, this time the two styles will overlap
In other words, for example, we define three properties for p in the external style:
p{
Color:green;
Text-align:left;
Font-size:7;
}
And we define both styles in the inner style as well as the P element:
p{
Text-laign:right;
font-szie:30pt;
This is the time we define paragraphs in an HTML document:
That is true:
p{
Color:green;
Text-align:right;
font-size:30pt;
It is obvious that we can see that when used, both external and internal properties are available, but when the external and internal are the same, the value of the property is taken internally.
That is, when multiple styles overlap one: and the value of the property is the same, this is what we take: inline style takes precedence,
The inner style is second, and the external style has the lowest precedence.
Introduction to CSS styles
