I'm talking to my girlfriend. Programming CSS Series (1) – 3 ways to add CSS styles and precedence for style sheets

If the original ecology is beauty, then we have no need to dress.

What is a webpage?

To put it bluntly, a Web page is a bunch of "HTML tags" in an orderly fashion, let "CSS attribute value" full capacity, please "JavaScript language" to handle the event.

A person's cosmetic effect, to a large extent depends on Ta himself, that is, raw materials, for Web pages, raw materials are HTML tags, so design excellent HTML tag structure is very important.

Plastic Surgeon's role is also crucial, cut eyelid, plastic surgeon's basic skills, different doctors cut out the effect is different.

As a web designer, we should not pursue perfection, try our best to make the webpage beautiful.

I know, we often call ourselves "Dick wire programmer", sometimes they do not see their own writing out of things, I used to do so, but I am in pursuit of progress, like this article, is not better than the previous few?

What is CSS?

CSS is the abbreviation for cascading style sheets, meaning "cascading style sheets".

Below, we learn 3 ways to add CSS styles and their priorities through a "beauty pageant".

Contestant number 1th: the original ecology

(1) Photo of the Sun, as follows:

(2) Look at the code:

Create a new page a.html, copy and paste the following content:

3 ways to add CSS styles and their precedence </body>
Open with a browser and see what it looks like.
(3) Knowledge interpretation
Each browser has its own default settings, and the default value is used when the HTML tag is not cosmetic.
"Black and white" is the most typical of the default settings, the background of the Web page is displayed as a blank, and the font is displayed in dark.
Not all browsers default values are the same, the same content, in different browsers may display different, this is the browser differences.
Summary:
The default value of the browser is the lowest in the style setting and is displayed only when there is no style decoration.
Contestant number 2nd: Red Girl
(1) Photo of the Sun, as follows:
(2) Look at the code:
Create a new file Css.css, and a.html in the same folder, copy and paste the following content:
body{background-color:red;}
Add a line of code to a.html and add the following:
"css.css"  rel= " Stylesheet"  type="text/css"> 3 ways to add CSS styles and their precedence </body>
Open with a browser and you'll see the "Red Girl".
(4) Knowledge interpretation
A:
The body in css.css is a type selector (professionally called).
Type selector: The type selector is the document language object (Element) type as the selector. That is, the HTML tag directly as a selector.
I think, called "tag Selector" better, a listen to know how to use, simple and clear.
Style property key-value pairs are typically placed in curly braces {}, with a semicolon interval in the middle of multiple property pairs, and a colon in the middle of properties and values.
The set body background is red.
Background-color is a combination of background and color, background is also OK, background can also set the background map, plus color is specifically used for setting background color.
B:
<link href= "Css.css" rel= "stylesheet" type= "Text/css" >
This sentence is to link the style file Css.css to a.html, the professional term is "external style sheet (link style Sheets)".
Note that link words are links, not style Ah, don't write wrong.
Be sure to remember the attribute href, which specifies the path to the style sheet css.css, which in this case is directly written with the file name in the same folder.
Another mandatory attribute Rel,rel attribute specifies the relationship between the current document and the linked document. When the value is stylesheet, the browser will take css.css as the style sheet, if you do not write rel or the property values are wrong, then the external style sheet will not work, you will not see the red Girl.
Summary:
The external style sheet has a second-to-last priority, and the browser defaults to the lowest value.
Player number 3rd: Green vegetables
(1) Photo of the Sun, as follows:
(2) Look at the code:
Add a piece of code inside the head tag of a.html and add it as follows:
"css.css"  rel= " Stylesheet  "type="text/css"> <style type=" Text/css ">body{background-color:green;} </style>3 ways to add CSS styles and their precedence </body>
Open with your browser and you'll see "green vegetables".
(5) Knowledge interpretation
A:
The use of selectors and property values is exactly the same, the general design page is used in this way to write the style, and then in the common style copy cut into a CSS file, you need to use this style of the page with link links on the line.
B:
This is called by adding styles: An embedded style sheet (Embedded style Sheets), which is the embedding of styles into the head of a Web page.
But there are a lot of things in the head, in order to distinguish which part is the style, you need to put all the styles uniformly in the <style type= "Text/css" ><style>.
I made up the above two paragraphs to make it easier for beginners to understand.
It is found that when an external style sheet and an inline style sheet exist, the embedded one is displayed. This is the priority issue.
Summary:
Priority order: Inline style sheet > external style sheet > browser default style
Player number 4th: Blue Sky
(1) Photo of the Sun, as follows:
(2) Look at the code:
Add a piece of code inside the body tag of a.html and add it as follows:
"css.css"  rel= " Stylesheet  "type="text/css"><style type=" Text/css ">body{background-color:green;} </style>"background-color:blue">  3 ways to add CSS styles and their precedence </body>
(6) Knowledge interpretation
This is called an inline style sheet (inline style).
Use the Style property to write the CSS directly in the HTML tag. That is, style= "", the Inner write attribute and the value of quotation marks.
The in-line style sheet has the highest priority. When there are several other stylesheets and it exists at the same time, you have to stand aside, no matter what.
Summary:
Priority order: Inline style sheet > inline style sheet > external style sheet > browser default style
The pageant now starts to vote:
1: Support "Original Ecology" click on the "Good text to top" or "recommended" below
2: Support "Red Girl" click below "Follow Me"
3: Support "green vegetables" click "Bookmark this article" below
4: Support "Blue Sky" click on the following Weibo icon "share to Sina Weibo"
Think this article is very rotten, delayed your valuable time, please click the "objection" below, if you can delay a little valuable time, you can leave a message, I strive for the next improvement.
Thank you for your cooperation.