I. Introduction to CSS
1. what is CSS
Cascading style sheets.
Cascade: Layer Overlay, if there is conflict application priority high, non-conflicting part of the joint role
Style sheet: is a collection of CSS property styles;
2. role
A. Modifying HTML to make HTML styles look better
B. Improving the reusability of style codes
C.html content and style separation, easy to post-maintenance
3.css the Introduction method
1. inline style
Embed CSS code in HTML tags
Style= "attribute: property value; Property: Property Value "
Grammar:
1. Use the style attribute;
2. Attribute: attribute: attribute value;
3. Multiple styles using ";" separate;
2. Internal Style
<style type= "Text/css" >
div{color:red; font-size:100px;}
</style>
Grammar:
1. Use the style tag attribute to introduce;
2. Attribute: attribute: attribute value;
3. Multiple styles using ";" separate;
3. external style----recommended
The CSS style is a separate CSS file, who uses it to refer to this file;
<link rel= "stylesheet" style= "Text/css" href= "CSS file Address ">
Grammar:
1. Create CSS file to write CSS properties,
2. Use the link tag attribute in head to introduce;
3. Attribute: attribute: attribute value;
4. Multiple styles using ";" separate;
Two. Selector
1. Basic selector (priority class selector >id selector > tag Selector)
A. Tag Selector
Grammar : HTML tag name {CSS Property}
B. class Selector
. +class name
class The value can be repeated
c.id Selector Selector
#+id name
ID only uniqueness, cannot repeat
2. Property Selector
Syntax: Basic Selector [Property = property Value ']{css property: property value;}
3. Pseudo element Selector
Pseudo element selector for a tag
Quiesce state: A:link{css Property}
Suspended state: a Hover{css Property}
Trigger Status: A:active{css Property}
Completion Status A:visited{css Property}
4. Hierarchy Selector
Select by hierarchy
Three. CSS Properties
1. text attributes:
span{color:red; font-size:100px;font-family: Boldface}
Font-size: size;
Font-family: Font type
Font-weight:bold ; Bold
2. Text properties:
Color: Colors
Text-decoration: Underline (a tag can go off the dash)
Attribute value: none;underline;
Text-agin: Alignment
Properties: Left; Center Right
Line-high: line height between fonts
3. Background properties:
">background-image: Background image
Property:
URL (" picture address")
Background-repeat: Tiling mode
Property: no-repeat; do not repeat repeat-x; transverse repetition
repeat-y; longitudinal repeating repeat; horizontal vertical tiling
4. List properties:
List-style-type : The small flag before the list item
Properties: Too many, can look up the dictionary
List-style-image: the small picture before the list item;
Properties: URL ("picture address");
5. Dimension Properties:
width : Width
Height : Height
6. Display Properties:
Display :
Properties: None Hidden
Block Block level display
inline row level display (row level becomes block level)
7. Floating Properties:
float : Floating
Property value: Left Right
Clear : Clear Floating left right both
Tip: After a floating div, add a div to clear the float
Four. Box model
Slightly
CSS Basic Content notes (learn to organize)