** 1 , CSS concept **
The full name of Cascading Style Sheets (Cascading Style Sheets), proprietary file support - extension ".css"
Action: The structure of the HTML (HTML tags i.e. html) and specifications (i.e., display style css) isolated
² CSS syntax structure
Syntax: Selector {Property Name: Property Value ; Attribute name: Property Value ; }
² CSS comments
To explain the code, and it can be edited in the browser will ignore it. Format: / content /
2 ** How to use ** CSS
- Inline style
Achieved (<body> in) by style attributes of HTML elements, i.e. <p style = "css properties: css attribute value">
Note: HTML is not effective separation of structure and style, and this CSS styles only for the current active elements
- Outreach style
a. the <head> element defines <style> element, i.e., <style type = "text / css">
Selector {property name: Property Value}
</style>
b. define CSS style file, by the <link> element into an external file in the HTML page css
I.e. <Link the href = "CSS file path" rel = "file type, which is a fixed value stylesheet" type = "text / css " />
[Note: The inline style priority level higher than outreach style]
3 ** , ** block-level elements
Concept: exclusive page row (the next block element on a new line)
* <H1>, <p>, <ul> and <table> elements, etc., having good semantic (concrete elements having a specific meaning)
[NOTE: <p> tag can not contain any block-level element]
* <Div> element: the meaning of itself does not have any effect. <Div> </ div> height must be set, otherwise it can not be displayed
Role: Implement layout (similar to the <table> table elements) page
4 ** , row ( inner联) element **
Concepts: not exclusive (only text content region) line; as <td>, <a> and <img> element and the like
Note: If you can not accommodate all of the elements in one line, it will wrap to the next line, continue from left to right.
<a> labels can not contain <a> label, but may contain any other element
[Block element usually contains inline elements]
<Span> element: itself does not have any meaning. Features: When the inline elements occupy the entire width of the page, wrap
eg:
eg:
** 5 , CSS selectors **
² common selector
- Ø ID selector
Positioning an HTML page by an id attribute value of the element, the syntax structure #ID
- Ø class (class) selector
It is positioned by the class attribute value HTML page elements, grammatical structure for the .class
Note: You can not define the class name beginning with a pure digital or digital; not recommended to use Chinese characters to define the name of the class
- Ø element selector
By positioning element name HTML page elements, grammatical structure element name
- Ø attribute selectors
By positioning attributes HTML page elements, grammatical structure [** attribute name **] .
[Priority selector: inline style> ID selector> class attribute selector and selector>] Selector element
[Important -! Highest priority level set the current selector (to disrupt the order of priority) --- not recommended]
² relations selector
- Ø descendant selectors
It refers to the descendants of matching elements according to the target element
Format: target element descendant elements eg: # t1 div {color: red;}
- Child element selector Ø
Refers to a child element matches the target element
Format: target element > subelement eg: # t1> div {color : red;}
- Ø adjacent sibling selectors
It refers to the target element matching a sibling adjacent according to
Format: target element + the next adjacent sibling eg: # t1 + div {color : red;}
² combination selector
* The first - result of the intersection (in parallel using a plurality of selectors, there is no intermediate partition)
* A second - and the result set (in parallel using a plurality of selectors, the use of an intermediate "," separated)
u selector wildcard (*)
Action: all the elements that match the current eg HTML page: * {color: red;}
Question: matching speed is not very fast (the number and complexity of the page elements)