CSS Basic Content notes (learn to organize)

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)