CSS style Sheets

I. Definition and classification
1.what:
Cascading style sheets are a computer language used to represent file styles such as HTML (an application of the standard universal editing language) or XML (a subset of the standard Universal Markup Language).
2.why:
The CSS standard has redefined the original text display style in HTML, and added some new concepts, such as class, layer, etc., can overlap the text, positioning and so on. Before the CSS has been introduced to the page design, the traditional HTML language, such as the implementation of the page to beautify the design is very troublesome, for example, to design the style of the page text, if the use of traditional HTML statements to design the page will have to design the text on every need to define the style. The advent of CSS has changed this traditional pattern.
3.how:
The CSS includes three parts: selectors, attributes, property values
Selector {property: property value;}
1. Selectors: Also known as selectors, all tags in the HTML language are controlled by different CSS selectors.
2. Properties: Mainly include font properties, text attributes, background properties, layout properties, Boundary properties, list item properties, table properties, and so on. Some of these properties are supported only by some browsers, so the use of CSS properties becomes more complex/
3. Attribute value: A valid value for a property. The attribute is separated from the property value with a ":" Semicolon. When there are multiple properties, use the ";" Separated.
Example:
<style>
h2{
Font-family: Song body;
color:red;
}
</style>
Note: H2 is the selector; Font-family is a property; Arial is a property value

1.CSS selector: Commonly used tag Selector, category selector, ID selector, etc.
1). Tag Selector: (also called element selector, type selector)
what:html pages are made up of a number of tags, such as tag , hyperlink marker <a>, table marker <table>, and so on. The CSS Tag Selector is the markup in the declaration page that uses CSS styles.
How:
Example:
<style>
a{
font-size:9px;
Color: #F93;
}
<style>
2). Category selector:
What: Point (.) + Category Name
Why: There are limitations to using tag selectors. If you declare a tag selector, all the markup content in the page changes. If you have 3 How:1. The HTML tag of the category selector, simply declare it using the class attribute.
2. In HTML tags, you can apply a variety of category selectors, which allows HTML to load multiple category selector styles at the same time. Split with spaces between multiple category selectors, for example:

Note: 1. The browser reads each style sheet in the order of HTML documents, and the following style sheet overrides the style of the same property of the previous style sheet.
2. In previous versions of IE7, Internet Explorer on different platforms did not handle multi-class selectors correctly.
Example:

Operation Result:

3). ID Selector
The What:id selector is the same as the category selector by selecting the Add style from the id attribute in the HTML page.
How:1. " # "+id Property value
The named ID selector starts with the "#" sign and then adds the id attribute value in the HTML tag.
2. Because the HTML page cannot contain two identical ID tags, the defined id selector can only be used once.
Note: This can happen here, and many friends may not understand it. :

Examples of ID selectors:

Operation Result:

Relationship:
1. When to use the ID selector, when to use the class selector?
Answer: According to their characteristics. In this case, the ID object with the same name is not allowed to appear on the same page, but the class with the same name is allowed. In this way, the general Web site is divided into head, body, and foot parts, because considering that they will only appear once on the same page, so with the ID. If you define a class that has a color of red, it is used many times on the same page and is defined by class. In addition, when the page used to JS or dynamic call object, the use of the ID, so according to their own situation to apply.
2. Three principles, priorities, etc.

Four ways to introduce CSS in HTML (inline style, inline, link, import)
1. Inline style:
Inline styles are a straightforward style that is defined directly within HTML tags and is implemented using the Style property. (This way beginners are easy to accept, but not flexible)
Example:

Operation Result:

2. Inline type:
Inline style sheets are the use of <style></style> tags in a page to include CSS styles in a page. It has no inline markup style tags that behave directly, but can make the page more structured.
Example:

Operation Result:

3. Link:
Linking an external CSS style sheet is the most common way of referencing, and it is the most efficient way to use CSS styles by defining CSS styles in a separate file and then referencing them through <link> tags in HTML.
The syntax structure of the <link> tag is as follows:
<link rel= ' stylesheet ' href= ' path ' type= ' Text/css ' >
Parameter description:
Rel: Defines the relationship between the external document and the calling document.
The absolute or relative path to the HREF:CSS document.
Type: Refers to the MIME type of the external file. (Multi-purpose Internet Mail extension type.) Is the type of file that sets the extension of an application to be opened by an app, and when the extension file is accessed, the browser automatically opens with the specified application. Many are used to specify some client-customized file names, as well as some ways to open media files. )

Example:

Operation Result:

4. Import style (not recommended)
Import style and link style are similar, import CSS style sheet with @import style, when HTML is initialized, it will be imported into HTML or CSS file, become part of the file, similar to the second kind of inline style.
@import used in HTML, as follows:
<style type= "Text/css" >
@import URL (style.css);
</style>

@import reference CSS in a CSS file using the following:
@import "Css.css";

Comparison of four methods:
1. Inline style: Relatively easy for beginners to receive, but not strong flexibility. and will lead to HTML page is not clean, large file size, not conducive to spider crawling, later maintenance is not convenient.
2. Inline: Inline styles are easier to maintain than in-line styles. But each site cannot be made up of a single page, and the same HTML markup in each page requires the same style, which is cumbersome to use inline styles. A linked style sheet solves this problem.
3. The implementation of the page framework code and performance of the CSS code completely separated, making pre-production and post-maintenance is very convenient

The precedence of the four types of CSS introduced:
1. Principle of proximity
2. Theoretically: inline > Inline > Link > Import
3. Actually: embed, link, import in the same file header, who is close to the corresponding code, who has high priority

CSS style Sheets