Introduction to css styles_html/css_WEB-ITnose

When a style is read, the browser will format the HTML document according to it How to insert a style sheet: We should know what a style sheet is , what are the types of style sheets? The CSS file we use to format HTML documents is the style sheet. Style sheets can be divided into three categories: External style sheet Internal style sheet Inline Style sheet So what do these three types of style sheets mean? Let’s analyze it for you through a few examples: The first is the external style sheet: When our styles want to be applied to many interfaces At this time, external style sheets are our ideal choice. Using external style sheets, we can change the appearance of multiple interfaces by changing one file. How to use external style sheets: When we want to use this external The style sheet in the web page uses the tag to connect to the external style sheet. html document: I am a paragraph

css file: #para { font-size: 7; color: red; } #b { background-color: green; } We need to know that external style sheets can be edited in any text editor. The file cannot contain any html tags, that is, it cannot use , and the like. , but elements can be used, such as p, h, and the style sheet should be saved with the .css extension Internal style sheet: Which one we just looked at is the external style sheet, in the HTML document For external definitions, you can think of internal style sheets should be defined inside the HTML document. As you can imagine, internal style sheets are in HTML documents by passing a between is defined, that is, using the tag to define an internal style at the head of the document. Below I will use an example to explain the definition of an internal style sheet

.bo { background-color: green; } .para { color: red; font-size: 7; > /* The maximum font setting is size 7*/ }

I am a paragraph

The last style is the inline style: Since the presentation and content are mainly mixed together, the inline style will destroy many of the advantages of in the style sheet. Please use this with caution. For example, the style only needs to be applied to one element . You can use inline styles at a time. What you need is to use the style attribute in the relevant tag. For example: This is a paragraph

What you need to know is that bgcolor represents an attribute of the body, but background is not its attribute

Sometimes there may be multiple styles, such as when we introduce external style, but the internal style is defined in this document. At this time, the two styles will overlap

In other words, for example, we define three attributes for p in the external style:

p{

color:green;

text-align:left;

font-size:7;

}

And we have defined two styles in the internal styles, also for the p element:

p{

text-laign:right;

font-szie:30pt;

} At this time, when we define a paragraph in an HTML document, what will it look like:

is like this:

p{

color:green;

text-align:right;

font-size:30pt;

} Obviously we can see that when used, there will be both external attributes and internal attributes, but When the external and internal are the same, the value of the attribute at this time is the internal

. That is to say, there is such a rule. When multiple styles overlap into one: and the value of the attribute is the same. What we take is this: inline styles take priority,

internal styles come second, and external styles have the lowest priority.