学習CSS基礎
/*
flaot， none， flaot left right， ，
， ， ， 。
*/
body{
margin:15px;
font-family:Arial;font-size:12px;
}
.father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
}
.father div{
padding:10px;
margin:15px;
border:1px dashed #111111;
background-color:#90baff;
}
.father p{
border:1px dashed #111111;
background-color:#ff90ba;
clear:left;
}
.son1{
float:left;
/* son1 ，box-2 box-1 ，
box-1 ， box-2 box-1
box-1
*/
}
.son2{
float:left;
}
/*
， HTML box-3 。
， ， 。
*/
.son3{
float:right;}
/*
：
html ， CSS ， html ，
，
：1. ， ，
2. CSS ， ， HTML
， ， ，
。
*/
/* ，float ， clear
： ， 。
， 。
：clear right，left ，both（ ）
clear
clear ， ， float ， 。
*/
/*
： div ， 。
， div div， ：
1. div div（ clear）， div ， margin padding
border 。
.father .clear{
margin:0;
padding:0;
border:0;
clear:both;
}
*/
<!--
position( )
：
static： ， 。
relative：1、 。
2、 ， 。
3、 。 “ ” （ ）
absolute:1、 （ “ ” “ ”） ，
“ ” ，position ， static
2、 ，
3、 。
4、 。
fixed: ， 。
， 。
-->
<!--
position ：
1、 ， 。
2、 ， ， 。
-->
<!--
z-index ，z-index ，
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>float </title>
<link href="CSS_third_ .css" rel="stylesheet" type="text/css"
</head>
<body>
<div class="father">
<div class="son1">box-1</div>
<div class="son2">box-2</div>
<div class="son3">box-3<br />box-3<br />box-3<br /></div>
<p> ， ， ， ， ，
， ， ， ， ，
， ，</p>
</div>
</body>
</html>
/*CSS _CSS
. .ID
*/
p{
color:blue;
}
p.special{
color:red;
}
.special{
color:green;
}
/*" "
" "
： ， 。
*/
/*
： HTML ， <p> <span>
： ， ，
， ID ，
，
*/
p span{ /* p span html p span */
color;red;
}
span{
color:blue
}
/* ，
： ，
：
IE6
*/
p>span{
color:blue;
}
/*
1. -
2. -
3. -
4. -
5. -
6.
7.
8.
9. ，
10. - ，
11. - ， ，
*/
/*css ：
"DOCTYPE"( ) ， ，
XTHML 1.0transitional
XHTML “ ” “ ” <p> <td>
/*CSS （zen garden）
： ：Dave Shea
*/
/* CSS
1： __
*/
<style type="text/css">
@import "mystyle.css";
</style>
/*
2： __
*/
<link href="mystyle.css" rel="stylesheet" type="text/css" />
/*
css “ ”，
“ ” ，
*/
<style type ="text/css">
p{color:green;}
.red{color:red;}
/*
red ， :
， ？
： 1. ，
2.ID
3. ID
4. ， 。class="purple red"
： ， ！
*/