H5. Getting Started with CSS 2.CSS basics

CSS Basic Learning Goals

• 1. Introduction to CSS
• 2. CSS Syntax
• 3. Creation of styles
• 4. Differences between the two types of external style sheets introduced
• 5. Style sheet priority and scope
• 6. CSS Selector
• 7, the weight of the selector
• 8. Simple application of floating properties
• 9. HTML, CSS Annotations

First, CSS introduction English full name: Cascading Style Sheets (baidu encyclopedia) = = = Cascading Style sheet
Cascading style sheets, web standards in the performance of the standard language, the performance of the standard language in the Web page is mainly to control the display of information, simply say is how to decorate the page information display style.
The current recommendation is to follow the CSS3.0 published by the publishers.
A computer language used to display style files such as XHTML or XML.
May 21, 1998 by the official launch of the css2.0 two, CSS syntax

CSS Syntax: selector {attribute: property value; Property: property value;}

A selector represents an object to define a style, either the element itself or a class of elements or an element that makes a name.
Property: Property is the property of the specified selector, it is the core of the CSS, CSS2 has more than 150 properties
Property values: Property values include legal attribute values and common values plus units, such as 25px, or color values.
Description
1) Each CSS style consists of two parts, namely the selector and the Declaration, and the declaration is divided into attributes and attribute values;
2) The attribute must be placed in curly braces, and the property and property values are concatenated with a colon.
3) Each declaration ends with a semicolon.
4) When an attribute has multiple attribute values, the attribute value is not in order with the attribute value.
5) in the writing style process, the space, line wrapping and other operations do not affect the property display.

Iii. creation of styles (inline styles for inner style external styles), two different ways to introduce external style sheets

A, internal style

Grammar:
<style type= "Text/css" >
/*CSS statement */
</style>

Note: When creating a style with a style tag, it is best to write the tag in

B, external style

* Method One: Creation of an external style sheet:
<link rel= "stylesheet" type= "Text/css" href= "the path and filename of the destination file"/>
Description
When you import an external style sheet using the link element, you write the element in the document header, which is between Rel (relation): Used to define the document association, representing the associated style sheet;
Type: Defines the document type;

* Method Two: Import of external style sheet
<style type= "Text/css" >
@import URL (the path of the destination file and the full file name);
</style>
Note: There is no space between @ and import, there is no space between the parentheses, and must end with a semicolon;

C, inline style (inline style, inline style, inline style)

Syntax:< tag style= "Property: Property value; Property: property value;" ></label >

The difference between the introduction of the external style sheet link and import

Extended Knowledge Points: The difference between link and import importing external styles:

Difference 1: The Essential difference: link is an XHTML tag, and @import is completely a way to provide CSS.

Difference 2: The load order difference: When a page is loaded (when viewed by the browser), the CSS referenced by the link will be loaded at the same time, and the CSS referenced by @import will wait until the page has been downloaded and loaded. So sometimes browsing @import loading CSS page when there will be no style (that is flashing), the speed of the slow time is quite obvious.
Difference 3: Compatibility difference: @import is CSS2.1 proposed, so the old browser does not support, @import only in IE5 above the ability to identify, and link tag does not have this problem.
Difference 4: Use the DOM (Document Object model) to control the difference between styles: When using JavaScript to control the DOM to change styles, you can only use the link tag, because @import is not controlled by the DOM.

Five, style sheet priority A, inline style sheets have the highest precedence
B, the internal style sheet is related to the order of precedence and writing of the external style sheet, and the precedence of the writing is high. Vi. CSS Selectors (selectors)

There are 10 kinds of commonly used selectors
Type selector, ID selector, class selector, wildcard character, group selector
Contains selectors, pseudo-class selectors (selectors that are already defined in the pseudo-class selector CSS, cannot be named arbitrarily), pseudo-object selectors (what happens after the object is set). Used in conjunction with the Content property)

1) Element selector/Type selector (element selector)

Syntax: element name {attribute: property value;}

Description

A) The element selector is to use the document language object type as the selector, that is, the element name in the structure as the selector. such as body, Div, p,img,em,strong,span ... such as

b) All the page elements can be used as selectors;

Usage:
1) If you want to change the default style of an element, you can use the type selector;
(eg: change a div, p, H1 style)

2) You can use a type selector when the display effect of an element in a unified document
(e.g. change all P-paragraph styles in the document)

2) ID Selector

Syntax: #id名 {property: property value;}
Description
A) When we use the ID selector, we should define an id attribute for each element
such as: <div id= "Div1" ></div>
B) The syntax format of the ID selector is "#" plus the custom ID name
such as: #box {width:300px; height:300px;}

C) name to be taken in English, not keyword: (all tags and attributes are keywords)
such as: Head tag
D) An ID name can only correspond to a specific element object in the document, because the ID can only define one of the unique element objects in the page.
E) Maximum use: Create the perimeter structure of the Web page.

3) class Selector

Syntax:. Class Name {property: property value;}
Description
A) When we use class selectors, we should first define a class name for each element
B) The syntax format of the class selector is: "For example: <div class=" Top "></div>"
Usage: Class selector is more suitable for defining a class of styles;

4) * Wildcard characters

Syntax: *{property: property value;}
Description: The wildcard selector is written as "*", meaning that it is all elements.
Usage: Often used to reset styles.

5) Group Selector

Syntax: selector 1, selector 2, selector 3{attribute: property value;}
Description: When you have multiple selectors that apply the same style, you can combine selectors in a set of "," separators.

6) contains selectors

Syntax: selector 1 Selector 2{attribute: property value;}
Note: The selector 1 and selector 2 are separated by a space, meaning that the selector 1 contains all the selectors 2;
Usage: When the parent element of my element is present, I want to change my own style, and I can resolve it directly with the selector without additional selectors.

7) Pseudo-class selector (pseudo-class selector)

Grammar:
A:link{Property: property value;} The initial state of the hyperlink;
A:visited{Property: property value;} The state after the hyperlink is accessed;
A:hover{Property: property value;} Mouse hover, that is, when the mouse over the hyperlink state;
A:active{Property: property value;} The state of the hyperlink when it is activated, that is, the state of the hyperlink when the mouse is pressed;
Let them abide by a principle of love and hate love/hate, that is, link--visited--hover--active.
Description
A) When these 4 hyperlink pseudo-class selectors are used together, they should be noted in their order, in the normal order:
A:link,a:visited,a:hover,a:active, the wrong order sometimes invalidates the style of the hyperlink;
B) in order to simplify the code, the same declaration in the pseudo-class selector can be proposed to be placed in a selector;
For example: a{color:red;} A:hover{color:green; The three states of the hyperlink are the same, only the mouse is changed color.

Seven, CSS selector weight css with four-digit weight, weight expression such as: 0,0,0,0
The weight of the type selector is 0001
The class selector has a weight of 0010
The weight of the ID selector is 0100
The weight of the child selector is 0000
The weight of the property selector is 0010
Pseudo-class selectors have a weight of 0010
Pseudo-element selectors have a weight of 0001
Contains the weight of the selector: the sum of the weights that contain the selectors
The inline style has a weight of 1000
Inherited styles have a weight of 0000

* The style of the high-weight selector overrides the style of the low-weight selector when there are conflicting style settings for different selectors.

For example: B. The weight of the demo is 1+10=11
The weight of the demo is 10.
So it happens a lot. Demo Style invalidation

* The same weight selector, style follows the nearest principle: Which selector is last defined, which selector style to use.

(Note: The selector is defined in the CSS style, not in HTML.)

Viii. comments in the page Expand knowledge Points:
HTML annotations
<!--I'm a div page comment--
Comments for CSS
/* I'm a comment for CSS */

Back to Top

H5. Getting Started with CSS 2.CSS basics