HTML/CSS from scratch-css basics (2), css-css
I. css Definition
Cascading style Sheet
Standard Language of performance, control the display of webpage Information
Ii. css creation 2.1 internal Creation(Use the label <style> In the head) Syntax:
<Head>
<Style type = "text/css">
Div {widtn: 300px; height: 300px; border: 1px solid red ;}
</Style>
(1) div is the selector, {} is the declaration, width/height is the attribute, and 300px is the attribute value.
(2) border is an attribute. It has three attribute values: 1px border width, red border color,
Solid line (dotted line/dashed dotted line/double line );
(1) create a new css file and write <link rel = "stylesheet" type = "text/css" href = "css file path"/>
(2) create a css file and write <style> @ import url (css path) </style> in
Note: What is the difference between import and link?
A. Essential differences
Link is an html Tag. The import method is provided by css.
B. Loading Sequence
Link synchronous loading; import first loads the structure, in the loading Style
C. Compatibility differences
@ Import applies to 2.1; link is not limited
D. Use the doc (document object model) Text object model
Use JavaScript to control doc and only link
@ Import is not controlled by doc (document object model)
<Tag> 3. Priority
1. Maximum inline, internal and external proximity principle
4. selector 4.1 class selectorA. Change the default style of an element.
B. Uniform Element Style
For example:
Div {attribute; attribute value ;}
P {attribute; attribute value ;}
A. Define <div id = "div1"> </div> in html.
B. Use # div1 {} in css {}
Note: It is applicable to creating peripheral structure styles.
A. Define <div class = "div1"> </div> in html.
B. Use. div1 {} in css {}
* {Property: property value ;}
* {Margin: 0; padding: 0;} // reset the style
Syntax: Selector 1 selector 2 {attribute: attribute value;} selector 1/2 uses a unified style
Selector 1 selector 2 {attribute: attribute value ;}
Note: The selector 1 (parent level) contains the selector 2 (child level) in the structure );
(Css defined selector. You cannot customize the selector name)
Syntax:
A: link {property: property value;} initial status of the hyperlink
A: visited {property: property value;} the access status of the hyperlink
A: hover {property: property value;} the status of hovering the cursor over the hyperlink
A: action {property: property value;} the status in which hyperlink B is activated and clicked.
Common Syntax: a {color: blue ;}
A: hover {color: red ;}
{Margin-before :;}
{Margin-before :;}
{Font-weight: bold ;}
Type separator 0001
Class selector 0010
Id separator 0100
Inline style 1000
After all the delimiters are included
Pseudo-class selector 0010
Pseudo element selector 0010
Inherit style 0000 // ul {color: red; }= ul li {color: red ;}
Sub-Selector character 0000
NOTE: For the same weight selector, the style follows the proximity principle. The final definition of the selector is the style and the sequence is defined according to the sequence of css styles.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
