s1/using HTML language and CSS to develop a commercial site/04-the first knowledge of CSS

CSS is all called Cascading style sheets.

CSS BASIC Syntax structure

CSS rules consist of two parts: selectors and declarations. The declaration must be placed in curly braces {}, and the declaration can be one or more, and each declaration consists of a property and a value separated by a colon, with each statement ending with a semicolon. as shown below.

h1{

font-size:12px;

Color: #F000;

}

font-size:12px; and color: #F000; represents two declarations in which font-size and color represent properties, while 12px and #f000 are corresponding property values.

Note: In the last statement of CSS, the ";" is used to end Can be written without writing, but based on the standard specification, the end of the last statement is proposed; write it down.

Recognition <style> Labeling

Introduce CSS styles in HTML by using <style> tags. <style> tags are used to define style information for HTML documents. The <style> tag is located in the

CSS Selector

In CSS, there are 3 of the most basic selectors, namely the tag Selector, class selector, and ID selector.

1, Tag Selector.

p{font-size:16px;}

2, class selector.

. class{font-size:16px;}

3. ID selector.

The ID selector is used in the same way as the class selector, except that the ID selector can only be used once in an HTML page.

#id {font-size:16px;}

The ID selector differs from the class selector in that the same id attribute can only be used once in the same page.

NOTE: The ID selector can only be used once in a page, meaning that the same id attribute can be set only once in the same page, and the class selector may be used more than once in the page.

Introducing CSS styles in HTML

1, inline style.

The inline style is the CSS style that is set directly in the HTML tag using the Style property. The Style property provides a common way to change the style of all HTML elements. The use of the Style property is shown below.

<p style= "Font-size:14px;color:green;" > styles that are set directly in the HTML tag </p>

This use of the Style property to set the CSS style only works on the current HTML tag, and is written in the HTML tag, so this method can not be the content and performance of the separation, essentially does not reflect the advantages of CSS, so it is not recommended.

2, internal style sheet.

As with all the examples mentioned earlier, the CSS code is written in the

This method is convenient to modify the style in the same page, but it is not conducive to the sharing of reusable code and maintenance of multiple pages, the separation of content and style is not complete. The actual development, after the end of the page development, will be saved to a separate CSS file, the style and content completely separated, that is, the external style sheet described below.

3, external style sheet.

The external style sheet is to save the CSS code as a separate stylesheet file with a. css file name extension and an external style sheet in the page. HTML files refer to external style sheets in two ways, linked and imported, respectively.

1. Link an external style sheet

Linking an external style sheet is an external style sheet that is linked to an HTML page using the </link> tag, which must be placed in the

......

<link href= "Style.css" rel= "stylesheet" type= "Text/css"/>

......

where rel= "stylesheet" refers to the use of this external style sheet in the page, type= "text/css" refers to the type of the file is the style sheet text; href= "Style.css" is where the file is located.

The external style sheet implements a thorough separation of styles and structures, and an external stylesheet file can be applied to multiple pages.

2. Import an external style sheet

Importing an external style sheet is the use of @import to import an external style sheet in an HTML page, the statement that imports the style sheet must be placed in the <style> tab, and the <style> tag must be placed in the

......

<style type= "Text/css" >

<!--

@import url ("Style.css");

-

</style>

Where @ represents the import file, preceded by an @ sign, and the URL ("Style.css") represents the style sheet file location.

3. The difference between the link type and the import type

The/1/<link/> label belongs to XHTNL Odor control, and @import is unique in CSS2.1.

/2/use <link/> link CSS is the client to browse the Web page when the external CSS files are loaded into the Web page, and then compile the display, so that the display of the page as the user expected effect, even slow speed is the same effect.

/3/using @import imported CSS files, the client when browsing the Web page, the HTML structure is presented, and then the external CSS files loaded into the Web page, of course, the final effect is the same as using <link/> linked file effect, Only when the network speed is slow to show the HTML page without CSS Unified layout, this will give users a very bad feeling. This is also the main reason why most Web sites use linked external style sheets today.

/4/because @import is CSS2.1 halfway through, it is not valid for browsers that are incompatible with CSS2.1.

Combined with the above factors, you can find that most websites now prefer to refer to external CSS files in a way that links external style sheets.

Priority of Style

Inline style > Internal style sheet > external style sheet

ID selector > class selector > tag Selector

Inline style > Internal style sheet > external style sheet, or nearest principle. If style declarations cascade in the same selector, then the write overrides the first-written style, i.e. the post-write style takes precedence over the first-written style.

Advanced application of CSS

1. Descendant Selector

The descendant selector is written with the outer label in front, and the inner label written behind, separated by a space. When a tag is nested, the inner label becomes the descendant of the outer label.

Common use cases are as follows:

/1/the nested relationships of tags, such as the

/2/by the nesting relationship of selectors, when the outermost class selector name is head, he innermost nested class selector, ID selector, which is written directly by the nested relationship of the style, such as head. Menu or head #menu.

/3/3 are nested with each other, and when the outermost ID selector name is NAV, it is nested within the class selector and tag selector, such as #nav. Title or #nav li.

2. Intersection Selector

The intersection selector is a direct connection of two selectors, with the result of selecting the intersection of their respective element ranges. The first one must be a tag selector, and the second must be a class selector or an ID selector. There can be no spaces between the two selectors and must be written consecutively.

The selector, which is made up of this method, will select the element that satisfies both the previous and the previous definitions, the label type defined by the former, and the element of the latter's type or ID, so called the intersection selector.

3. Set Selector

As opposed to the intersection selector, there is also a selector, which results in selecting the range selected by each base selector at the same time. Selectors of any kind, including tag selectors, class selectors, ID selectors, and so on, can be used as part of the set selector.

The set selector is a comma-connected selection, when declaring various CSS selectors, if the style of some selectors is exactly the same, or part of the same, then you can use the set selector to declare the same style CSS selectors.

CSS Inheritance Features

The concept of inheritance in the CSS language is not complicated, simply to think of each HTML tag as a container, in which a small container will inherit the style of the large container containing it, also known as the inclusion of the tag is a parent-child relationship, that is, the child tag inherits the parent tag style, which is the inheritance in CSS.

Inherited apps

CSS inheritance refers to all the styles of sub-tags, can be modified on the basis of the style of the parent tag style, resulting in a new style, and the child tag style style does not affect the parent tag at all.

s1/using HTML language and CSS to develop a commercial site/04-the first knowledge of CSS