1.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>
<!-- 引用外部的CSS样式表文件 -->
<link rel="stylesheet" href="css/demo01.css">
</head>
<body>
<!--
<p><font color="red">这里是段落一</font></p>
<p><font color="red">这里是段落二</font></p>
-->
<p>这里是段落一</p>
<p>这里是段落二</p>
<p class="f20">这里是段落三</p>
<p id="p4">这里是段落四</p> <!-- id属性在整个HTML文档中,尽量保持唯一(虽然重复也不会报错) -->
<div>
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
<span class="f32">World</span>
<p class="f32">!!!</p>
</div>
</body>
</html>
<!--
1. 为什么需要CSS
2. CSS的最基本的分类: 标签样式表、类样式表、ID样式表
3. CSS从位置上的分类:嵌入式样式表、内部样式表、外部样式表
-->
2.CSS盒子模型
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1{
width:400px;
height:400px;
background-color:greenyellow;
/* 1. border 边框样式 */
border-width:1px; /*边框粗细*/
border-style:solid; /*边框样式:solid(实线) , dotted(点状线) ... */
border-color:blue; /*边框颜色*/
/* border:4px double blue;*/
/* border-top : 4px dotted blue;*/
}
#div2{
width:150px;
height:150px;
background-color:darkorange;
margin-top:100px;
margin-left:100px;
/*margin:100px 100px 50px 150px;*/ /* 一个值,四个方向统一;两个值:上下、左右;三个值:上、左右、下;四个值:上右下左 */
/* padding : 填充 */
padding-top:50px;
padding-left:50px;
}
#div3{
width:100px;
height:100px;
background-color:aquamarine;
/*
margin-top:50px;
margin-left:50px;
*/
}
#div4{
width:200px;
height:200px;
margin-left:100px;
background-color:greenyellow;
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"> </div>
</div>
</div>
<div id="div4"> </div>
</body>
</html>
<!--
IE浏览器:实际尺寸 = width
chrome浏览器:实际尺寸= width+左右borderwidth+padding
CSS盒子模型:
1.border 边框
2.margin 间距
3.padding 填充
-->
3.CSS布局
<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
-->