Chila css< 12 >

DIV+CSS Foundation

One, external style <!--external style can make the Web page and style separation, division of work

1, write Web pages, mainly provide content, generally there will be fixed structure, with ID and other attributes of the label including specific content

2. Save as CSS suffix file according to the structure write style

3. Add a style sheet to the head tag in the HTML page

<link type= "Text/css" rel= "stylesheet" href= "Sss.css" >

-

<p id= "P2" > External styles

</p>

<!--styles can be used for any element, learning to use a div to learn--

<div style= "color:red;background-color:blue;width:200px;height:200px;font-size:50px;font-family: imitation;

Text-align:center ">

Haha, I've become handsome again.

</div>

--"When to write style, what format to use

attribute: value;

--"Learning attributes, check, use

Second, Tag Selector

Use inline styles or external styles

Label name {

Style

}

All labels that define the tag's suspension have the same style

--"class selector"

1. Define syntax

. class Name {

Style

}

If you need to add a class attribute to the label that needs the attribute, the value is the class name of the property

--"ID selector"

1. Define syntax

#id号 {

Style

}

Add the id attribute to the location you want to use

Note: When using the ID can only have one, and class can have multiple, for the use of three selectors, there is a specification

1. The same style with labels

2. Different styles with class

3. Unique style with ID (often used with JS)

2, the selector declaration

--"collective statement

Declares a selector that writes all tokens that require this property in front separated by commas

p,a,span,h1{

Style

}

--"Global statement"

Start with the * sign

*{

Style

}

--"nested statement

A nested selector can

--Change the style of a table

#tbl TR td{

Style

}

<table id= "TBL" >

<tr>

<td>

</td>

</tr>

</table>

--"pseudo selector (currently only available on the A label)

Is the way to add a style to a state of a label.

Grammar:

Style

}

Link says that when you put it up,

Visited Click later

When active clicks

Hover when the mouse is put up

a:link,a:active{

font-size:30px;

Color:blue

Text-decoration:none;

}

a:hover{

font-size:30px;

Text-decoration:underline; color:red;

}

a:active{

font-size:30px;

Text-decoration:none;

Color:green;

font-family: Chinese Xingkai;

}

Iv. document Flow, positioning

Document flow is a stack from left to right from top to bottom

Position:fixed out of document flow

--Relative positioning absolute

Relative positioning out of the document flow, can be positioned according to the coordinates anywhere, the position will only stay in place before the change, as the scroll bar drag also upward downward offset.

#myid1 {

BORDER:1PX solid;

border-color:red;

width:80px;

height:50px;

Background-color:pink;

Position:absolute;

Right:0em;

Bottom:0em;

}

--"Absolute positioning fixed

Absolute positioning out of the document flow, can be located in accordance with the coordinates of any place, but changes in the browser need JS to control,

No matter how the scrollbar drags its position, it doesn't change.

#myid1 {

border:1px Groove Red;

Background-color:orange;

width:100px;

height:50px;

position:fixed;

left;0px;

bottom:0px;

}

-->relative

Coordinates are offset from the position before the document flow.

#myid4 {

border:1px outset cyan;

Background-color:azure;

width:150px;

height:100px;

position:relative;

left:100px;

top:100px;

}

Chila css< 12 >