Html/css Starting from scratch-css Foundation (ii)

First, the CSS definition

(cascading style sheets) cascading style Sheets

Performance of standard language, control of the display of web information

second, the establishment of CSS2.1 Internal Establishment

(built in head with tag <style>) syntax:
<style type= "Text/css" >
div{widtn:300px;height:300px;border:1px solid Red;}
</style>
Description: (1) div is a selector, {} is a declaration, Width/height is a property, 300px is a property value
(2) Border is a property, it has three attribute values, 1px border width, red border color,
Solid solid line (dotted dotted line/dashed dashed/double double line);

2.2 External build (new CSS file)

(1) Create a new CSS file and then write the <link rel= "stylesheet" type= "text/css" href= "path to the CSS file" in (2) Create a new CSS file, write <style> @import url (CSS path) in
Description: What is the difference between import and link?
A, the essential difference
Link belongs to HTML tag import is the way CSS provides
B. Load order
link synchronous loading; Import loads the structure, loads the style
C, Compatibility differences
@import applicable 2.1;link Unlimited
D. Using Doc object model
Use JavaScript to control doc only with link
@import is not a Doc object model control

2.3 Inline style (embed tag directly)

< tag style= "Attribute 1: Property value 1; Property 2: Property value 2;" >

Third, priority

1, the highest in the United, internal and external proximity to the principle

Iv. SelectorsClass 4.1 Selectors

A. Change the default style of an element
B. Unify a class of element styles
Such as:
div{property; property value;}
p{property; property value;}

4.2id Selector (named unique)

A, defined in HTML <div id= "Div1" ></div>
b, using #div1{} in CSS
Description: For creating a perimeter structure style

4.3class Selector

A, defined in HTML <div class= "Div1" ></div>
b, in CSS. div1{}

4.4 Wildcard Characters

*{Property: property value;}
*{margin:0;padding:0;} Reset Style

4.5 Group Selector

Syntax: Selector 1 Selector 2{attribute: property value;} Selector 1/2 using a uniform style

4.6 include selectors

Selector 1 Selector 2{property: property value;}
Description: The selector 1 (parent) contains the selector 2 (child) on the structure;

4.7 Pseudo-class selectors

(CSS has defined selectors and cannot customize selector name)

Grammar:
A:link{Property: property value;} The initial state of the hyperlink
A:visited{Property: property value;} The state of the hyperlink being accessed
A:hover{Property: Property value, mouse hover over hyperlink status
A:action{Property: property value;} The status of the hyperlink B is activated, the state of the mouse pressed

Common syntax: A{color:blue;}
a:hover{color:red;}

4.8 Pseudo-objects (?? )

{margin-before:;}
{margin-before:;}
{font-weight:bold;}

Five, the weight

Type selector 0001
Class selector 0010
ID Selector 0100
Inline Style 1000
Contains selectors after all selectors
Pseudo-Class selector 0010
Pseudo-Element Selector 0010
Inherit style 0000//ul{color:red;} =ul li{color:red;}
Sub-selector 0000
Description: The same weight selector, the style follows the nearest principle, which selector is the last definition of which style, the order is based on the CSS style defined by the order.

Html/css Starting from scratch-css Foundation (ii)