什么是CSS
CSS：Cascading Style Sheet 层叠样式表，是一组样式设置的规则，用于控制页面的外观样式。
CSS参考手册
代码部分（完全注释）
CSS样式表介绍
<html>
<head>
<meta charset="UTF-8">
<title>CSS语法基础
</title>
<style> /*style标签所包围的就是CSS环境。
</style>
<!--表示引用外部的CSS样式表文件-->
<link rel="stylesheet" href="CSS外部引用.css">
</head>
<body>
<h1>标签样式表测试</h1>
<!-- 引用类标签，写在标签中 -->
<p class="c1">类样式表测试 </p>
<!-- id属性尽量保持唯一-->
<p id="p1">ID样式表测试 </p>
<div>
<p style="font-size:20px;"><span style="color:blue">混合样式标签测试</span></p>
</div>
</body>
</html>
- CSS外部引用.css
/*CSS的三种基本样式表：标签样式表，类样式表，ID样式表。
/*标签样式表*/
h1{
color:brown;
}
/*类样式表*/
.c1{
font-size:20px;
}
/* ID样式表 */
#p1{
font-size:40px;
font-family:"华文彩云";
font-style:italic;
font-weight:bolder;
}
/* 混合样式标签 */
div p{
color:red;
}
CSS盒子模型
主要介绍三种模式：
- border：边框模式。
- margin：间距模式。
- padding：填充模式。
<html>
<head>
<meta charset="UTf-8">
<style>
/*Chrome的实际大小：width+padding+左右boderwidth。*/
#div1{
width:500px;
height:500px;
background-color:aqua;
/* border边框模式 */
border-width:1px; /*边框粗细*/
border-style:solid; /*边框类型*/
border-color:brown; /*边框颜色*/
/*或写成以下形式：
border:1px solid aqua;*/
}
#div2{
width:200px;
height:200px;
background-color:yellow;
/*margin间距模式*/
margin:150px; /*表示和其父类的间距*/
overflow:hidden /*某些浏览器，子层使用margintop时，可能出现问题，加上这一句即可。*/
}
#div3{
width:100px;
height:100px;
background-color:red;
margin:50px;
}
#div4{
width:100px;
height:100px;
background-color:green;
/*padding 填充 */
padding:200px; /*每边各填充200px;最后与div1相等。*/
}
/* 取消网页预留间距*/
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>
CSS页面布局
<html>
<head>
<style >
/*所有的div标签都是相对模式*/
div{
position:relative;
}
body{
margin:0px;
padding:0px;
}
/*使窗口居中，不填满整个页面。*/
#div_center{
margin-left:10%;
margin-right: 10%;
}
/*不标明宽度，表示占一行*/
#div_top{
width:100%;
height:20%;
background-color:greenyellow;
float:left; /*是否浮动不影响，因为已经占满一行了（标明宽度）*/
}
#div_left{
width:15%;
height:80%;
background-color:yellow;
float:left; /*设置浮动，可以让main和bottom占位。*/
}
#div_main{
width:85%;
height:70%;
background-color:bisque;
float:left; /*向左浮动，直到碰到边框,不理解时可以尝试取消left*/
}
#div_bottom{
width:85%;
height:10%;
background-color:blue;
float:left;
}
</style>
<head>
<body>
<div id="div_center">
<div id="div_top"> </div>
<div id="div_left"> </div>
<div id="div_main"> </div>
<div id="div_bottom"> </div>
</div>
</body>
</html>
<!--
position: absolute -- 绝对定位 , 相对于父元素的定位（父元素也要设置position）。需要配合使用 left （x轴）, top（y轴）
relative -- 相对定位 (不允许对象重叠), 所以一般会和 float , margin , padding .... 一起使用
float ：浮动。直至遇到边框为止。但是已经不占位了。
-->
