<html>
<head>
<meta charset="utf-8">
<!-- 内部样式表 -->
<style type="text/css">
/* 被style标签包围的范围是CSS环境,可以写CSS代码 */
/* 标签样式表 */
p{
color:red;
}
/* 类样式 */
.f20{
font-size:20px;
}
</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从位置上的分类:嵌入式样式表、内部样式表、外部样式表
-->
demo01.css
/* 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">
<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 填充
-->
效果:
<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_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;
}
</style>
</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>
效果:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/demo05.css">
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>榴莲</td>
<td>3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
demo05.css
*{
color: threeddarkshadow;
}
body{
margin:0;
padding:0;
background-color:#808080;
}
div{
position:relative;
float:left;
}
#div_container{
width:80%;
height:100%;
border:0px solid blue;
margin-left:10%;
float:left;
background-color: honeydew;
border-radius:8px;
}
#div_fruit_list{
width:100%;
border:0px solid red;
}
#tbl_fruit{
width:60%;
line-height:28px;
margin-top:120px;
margin-left:20%;
}
#tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
border:1px solid gray;
border-collapse:collapse;
text-align:center;
font-size:16px;
font-family:"黑体";
font-weight:lighter;
}
.w20{
width:20%;
}
.delImg{
width:24px;
height:24px;
}
.btn{
border:1px solid lightgray;
width:80px;
height:24px;
}
效果: