HTML CSS Style Basics

First, CSS
　　1. What is CSS?
　　　　Cascading style Sheet Cascading style sheet
Change the style of a tool, plainly, just to make our page look good,
The HTML underlying encapsulates a tool like CSS.

　　2. How to use CSS
　　　　A, style, style
This keyword is written inside the label, you can change the style of the label

Note: Write inside the label! That's > inside.

　　3.CSS style, divided into three types
A, in-line style sheet
<p style= "color: #0FC" >111111111111</p>
Where: style= "color: #0FC" is to change the current label style.
b, Internal style sheet
Selector: Tell the program which style we want to change.
ID selector:
1. Add id attribute to tag
2, before writing, to add the #
　　　　　　　　

 1  <!--  write in source code  -->  2   =" www " >  Wang Lushan waterfall </ h1  >  3  4  <!--  write within CSS style  -->  5   #www {   background-color: #0CF;  7 } 

ID Selector Demo

Class selector:
1. Add Class attribute to tag
2, class selector, before writing, to add.

 1  <!--  write in source code  -->  2  <  p  class  = "QQQ"  >  111111111111</ p  >  3  4  <!--  write within CSS style  -->  5   6  background-color: #0F9;  7 } 

Class Selector Demo

Note: Start with.

Tag Selector:

1 <styletype= "Text/css">//style Keywords2 P{//p tags, tag selector, find all the corresponding labels3 Color:#F33;//The style to change. 4 }5 </style>

Tag Selector Demo

Note: 1, style inside to write the type attribute, identifies this is to change the CSS
2, after the selector to add a pair of {},
3, after each sentence changes the style, must add;
C, external style sheet
It's written on the outside of our page.
1. Create a new CSS
2. Write the corresponding style in CSS
3. Import CSS styles into a Web page
A, <link href= "1.css" rel= "stylesheet" type= "Text/css"/>
B, <style type= "text/css" > @import url ("CSS path"); </style>

D. precedence of Style sheets
Inline style sheet > internal style sheet > external style sheet

E, the priority of the selector
ID selector > class selector > tag Selector

F, and set selector
To find a specific label or group of labels by a detailed description or address.
P, #id,. class{}
Changes the label styles that are covered by all p, ID, and class, separated by the "," number in the English input method

G, intersection selector
h3.cecond{}
Looks for the H3 tag first, and then finds all tags in the H3 tag that have the class name second modified properties
There's nothing connected in the middle.
H, descendant selector

1 table tr. qq{2background-color: #F00; 3 }

descendant Selector Demo

A layer of search is performed based on the label or selector you have written, until you finally find the
The label, separated by "" in the Middle

Summary:
Tag Selector is applied directly to all HTML tags
Class selector can be used multiple times in a page
The ID selector can only be used 1 times in the page

I, CSS properties
1. Font style:
Font-style: Setting font style
Font-weight: Setting Font weight
Font-size: Setting the font size
font-family: Set Font family
Font: Set all of the above settings in one property

2. Text style:
Color: Set the font color
Line-height: Set Row height
Text-align: Setting the alignment of text
Text-decoration: Set the decoration of the text, for example: underline, none, Line-through

3. Background properties:
Background-color: Setting the background color
Background-image: Setting a background picture
Background-position: Setting the position of the background
Background-repeat: Setting the fill of the background
Background set the background, set all of the above settings in one property

4. List properties:
List-style-image: Set list as List ID
List-style-type: Sets the identity type of the list, disc a solid circle, Circle Hollow Circle,
Square Squares
List-style: Set all of the above settings in one property

5, hyperlink Pseudo-Class
a:link{Non-visited links
Color: #F00;
}
A:visited{visited links
Color: #6F6;
}
a:hover{Mouse hover Change style
Color: #FCC;
}
a:active{Mouse long Press to change style
Background-color: #0FF;
}

6. Cursor Property
URL Settings Custom mouse style
Default cursor
Pointer a pointer to a hyperlink
Wait program is busy
Help indicates the available assistance
Text indicates literal
Crosshair Cross Type
Move movable pointer

4. Box Model
A, what is a box model?
The corresponding elements are placed in a container and can be processed accordingly.
While moving or working with the box model, the entire element in the box model follows
Be processed.

Margin:
Inner margin:
Padding:top,left,right,bottom
Outer margin:
Margin:top,left,right,bottom
B, floating
What is floating?
Actually, the principle is align.

Properties of the float:
Left: Floating
Right: Floating
None: Not floating

Clear property: Clears floating, both all clear

C, Overflow properties
What to do when there is an element overflow

The Visible default
Auto-Automatic
Hidden hidden
Scroll plus scroll bar

D, IFRAME label
Inline frame.
You can import something else.

<iframe src= "1.html" width= "1366px" height= "$" scrolling= "no"
frameborder= "0" >
SRC: Importing additional page paths
Width: Adjust the size of the imported page, PX is the unit, can not add, the default is PX
Height: Adjusts the width of the imported page
Scrolling: Whether scroll bars are displayed
Frameborder: Whether the border is displayed, 1 is displayed, and 0 means no display

E, Position properties
Positioning.
Relative positioning:
Relative, moving relative to his original position.

Absolute positioning:
Absolute

Fixed
Navigate to a place on the Web page and remain unchanged.
Static

Setting of the offset value
X-axis (left, right property) and y-axis (top, bottom property)
Desirable values: pixels or percentages

HTML CSS Style Basics