1)CSS的角色:页面显示的美观风格
2)CSS的基础语法:标签样式、类样式、ID样式、组合样式、嵌入式样式表、内部样式表、外表样式表;
3)盒子模型:border、margin、padding;
4)定位和浮动:position、float、DIV+CSS布局
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/* 被style标签包围的范围是CSS环境,可以写CSS代码 */
/*标签样式*/
p{
color:red;
}
/*类样式*/
.f20{
font-size:20px;
}
/*ID样式*/
#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
font-style:italic;
font-family:"华文彩云";
}
/*组合样式*/
div p{
color:blue;
}
div .f32{
font-size:32px;
font-family:"黑体";
}
</style>
</head>
<body>
<p>这是段落一</p>
<p class="f20">这是段落三</p>
<p id="p4">这是段落四</p><!--id属性在整个HTML文档中,尽量保持唯一-->
<div>
<!--嵌入式样式表-->
<p><span style="font-size:60px;color:yellow;">HELLO</span></p>
<span class="f32">World</span>
<p class="f32">!!!!!</p>
</div>
</body>
</html>
<!--
<style> 内部样式表 体内注解:/*....*/
CSS的最基本的分类: 标签样式表、类样式表、ID样式表
CSS从位置上的分类:嵌入式样式表、内部样式表、外部样式表
引用外部样式表
/*标签样式*/
p{
color:red;
}
/*类样式*/
.f20{
font-size:20px;
}
/*ID样式*/
#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
font-style:italic;
font-family:"华文彩云";
}
/*组合样式*/
div p{
color:blue;
}
div .f32{
font-size:32px;
font-family:"黑体";
}
<html>
<head>
<meta charset="utf-8">
<!-- 引用外部的CSS样式表文件 -->
<link rel="stylesheet" href="css/demo01.css">
</head>
<body>
<p>这是段落一</p>
<p class="f20">这是段落三</p>
<p id="p4">这是段落四</p><!--id属性在整个HTML文档中,尽量保持唯一-->
<div>
<!--嵌入式样式表-->
<p><span style="font-size:60px;color:yellow;">HELLO</span></p>
<span class="f32">World</span>
<p class="f32">!!!!!</p>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
}
#div1{
width:200px;
height:50px;
background-color:greenyellow;
/* 绝对定位 */
position:absolute;
left:100px;
top:100px;
}
#div2{
width:200px;
height:50px;
background-color:pink;
position:relative;
float:left;
margin-left:20px;
}
#div3{
height:50px;
background-color:darkorange;
}
#div4{
width:200px;
height:50px;
background-color:aqua;
float:left;
}
#div5{
width:200px;
height:50px;
background-color:olivedrab;
float:left;
}
div{
position:relative;
}
</style>
</head>
<body>
<!--
<div id="div1"> </div>
<div id="div2"> </div>
-->
<div id="div3">
<div id="div4"> </div>
<div id="div5"> </div>
</div>
</body>
</html>
<!--
position: absolute -- 绝对定位 , 需要配合使用 left , top
relative -- 相对定位 , 一般会和 float , margin , padding .... 一起使用
float
-->
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
background-color:#808080;
}
div{
position:relative; /*div全是相对布局*/
}
#div_top{
background-color: orange;
height:20%;
}
#div_left{
background-color: greenyellow;
height:80%;
width:15%;
float:left;
}
#div_main{
background-color: whitesmoke;
height:70%;
float:left;
width:85%;
}
#div_bottom{
background-color: sandybrown;
height:10%;
width:85%;
float:left;
}
#div_container{
width:80%;
height:100%;
border:0px solid blue;
margin-left:10%;
float:left;
}
</head>
<body>
<div id="div_container">
<div id="div_top">div_top</div>
<div id="div_left">div_left</div>
<div id="div_main">div_main</div>
<div id="div_bottom">div_bottom</div>
</div>
</body>
</html>