内容包括四个知识点，每一个知识点均对应一个实例。实例放在文章最后。
一、CSS层叠样式表的使用
1.三种使用方法：内部、外部、内联
内部样式写在<head>中的<style>标签中，作用于当前文档
例如：
<head>
<style type="text/css">
</style>
</head>
外部样式写在<head>中的<link>标签中,引入外部CSS文件，推荐使用，多个页面文档可以共享一个CSS文件
例如：
<link rel="stylesheet" type="text/css" href="static/css/style.css">
内联样式写在标签中，作用于当前元素，在大型项目中较少使用，会导致页面加载量大，代码难维护
例如：
<body style="color: red;">
2.优先级：内联>内部>外部
3.常用CSS选择器
选择器是需要改变样式的HTML元素
（1）标记选择器
例如：body{}
（2）*号选择器，*号是通配符，表示所有标签都要遵循的样式
例如：*{}
（3）id选择器，以#来定义，具备唯一性，即id不能重复
例如：#box{
width: 200px;
height: 200px;
background: red;
}
<div id="box">123</div>
（4）class类选择器，以"."来定义，用于描述一组元素的样式，class可以在多个元素中使用，又分为单类与多类
单类：
例如：.main{
width: 198px;
height: 100px;
border: 1px solid red;
}
<div class="main"></div>
多类：可以使元素同时拥有多个class的样式，class属性可能不止包含一个单词而是一串单词，每个单词可以表述一类属性，各个单词之间用空格隔开
例如：.l{
box-shadow: 2px 2px 10px blue;
}
.r{
color: red;
}
<p class="l r" >多类的使用</p>
（5）选择器的分组：选择器可以分享相同的声明，用逗号将分组中的选择器分隔
例如：h1,h3,#box{
color: blue;
}
（6）派生选择器：通过元素在文档中位置的上下文关系来定义样式，可以使标记更加简洁，又分为后代选择器与子元素选择器
后代选择器，空格隔开元素：
例如：p span{
color: #ff6500;
}
子元素选择器：使用大于符号（子结合符）
例如： p>span{
color: red;
}
二、行内边距与元素显示
1.内外边距：margin/padding
内边距：padding，元素的内边距在边框和内容之间，特点是会撑开元素框。可以设置单边边距padding-left。
（1）复合写法padding:上 右 下 左;
（2）复合写法padding:上下 左右;
（3）复合写法padding:上 左右 下;
外边距：margin，围绕在元素边框的空白区域是外边距。也可以设置单边边距margin-top。
（1）复合写法margin:上 右 下 左;
（2）复合写法margin:上下 左右;
（3）复合写法margin:上 左右 下;
（4）复合写法margin:0px auto;块级元素居中效果，auto意思为设置等宽空白
2.元素的显示：行内、块级、行内块(display:none/block/inline-block/inline)
（1）块级元素：能够识别宽高，独占一行，多个块级元素标签写在一起，默认排列方式为从上至下。例如：div p h1
（2）行内元素：设置宽高无效，对margin仅设置左右方向有效，上下无效，不会自动进行换行。例如：span b
（3）行内块：综合了行内元素和块级元素的特点，但是各有取舍，不自动换行，能识别宽高。例如：img input
3.块级、行内、行内块元素相互转换
display属性规定元素应该生成的框的类型，display:inline，转换为行内元素，display:inline-block，转换为行内块元素，display:block，转换为块级元素
三、浮动（难点）
float属性，实现元素的浮动，属性值有left right
浮动的框可以水平方式移动，直到它的外边缘碰到包含框或另外一个浮动框为止
浮动让元素的位置与文档流无关，因此不占据空间，浮动元素变成块级框
做个浮动一定要清除浮动，很重要。.clear{clear: both;}
四、案例
写了几次，对框架布局的概念有所了解。对CSS的应用以及浮动理解较大。
实例一
<!-- CSS层叠样式表：内部、外部、内联
优先级：内联>内部>外部
常用CSS选择器
选择器：需要改变样式的HTML元素
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用CSS选择器</title>
<!-- 外部样式,引入外部CSS文件，推荐使用，多个页面文档可以共享一个CSS文件 -->
<link rel="stylesheet" type="text/css" href="static/css/style.css">
<!-- 内部样式，作用于当前文档 -->
<style type="text/css">
/*基础选择器：*/
/*标记选择器*/
body{}
/* *号是通配符，表示所有标签都要遵循的样式*/
*{}
/*id选择器，以#来定义，具备唯一性，即id不能重复*/
#box{
width: 200px;
height: 200px;
background: red;
}
/*类选择器class，以"."来定义，用于描述一组元素的样式，class可以在多个元素中使用*/
/*单类：*/
.main{
width: 198px;
height: 100px;
border: 1px solid red;
}
p.main{
border: 1px solid red;
}
/*多类，可以使元素同时拥有多个class的样式，class属性可能不止包含一个单词而是一串单词，每个单词可以表述一类属性，各个单词之间用空格隔开*/
.l{
box-shadow: 2px 2px 10px blue;
}
.r{
color: red;
}
/*选择器的分组：选择器可以分享相同的声明，用逗号将分组中的选择器分隔*/
h1,h3,#box{
color: blue;
}
/*派生选择器：通过元素在文档中位置的上下文关系来定义样式，可以使标记更加简洁*/
/*CSS后代选择器*/
p span{
color: #ff6500;
}
/*子元素选择器，使用大于符号（子结合符）*/
p>span{
color: red;
}
</style>
</head>
<!-- 内联样式，作用于当前元素，在大型项目中较少使用，会导致页面加载量大，代码难维护 -->
<body style=" ">
<div id="box">123</div><br>
<div class="main">456</div><br>
<p class="main l r" >多类的使用</p>
<h1>1</h1>
<h2>2</h2>
<h3>3</h3>
<span>span</span>
<div>
<span>欢迎来到php中文网</span>
</div>
<p>
<span>欢迎来到php中文网</span>
<b><span>欢迎来到php中文网</span></b>
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例二
<!-- 内外边距：margin/padding -->
<!-- 元素的显示：行内、块级、行内块(display:none/block/inline-block/inline) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素的显示以及内外边距</title>
<style type="text/css">
div,p,h1,h2{
width: 200px;
height: 40px;
background: red;
margin-top: 5px;
}
/*块级、行内、行内块元素相互转换*/
/*display属性规定元素应该生成的框的类型*/
/*display:inline，转换为行内元素，display:inline-block，转换为行内块元素，display:block，转换为块级元素*/
div,p{display: inline-block;}
/*span{display: block;}*/
/*内外边距
内边距：padding，元素的内边距在边框和内容之间，特点是会撑开元素框。可以设置单边边距padding-left。复合写法padding:上 右 下 左;
复合写法padding:上下 左右;
复合写法padding:上 左右 下;
外边距：margin，围绕在元素边框的空白区域是外边距。也可以设置单边边距margin-top。
复合写法margin:上 右 下 左;
复合写法margin:上下 左右;
复合写法margin:上 左右 下;
复合写法margin:0px auto;块级元素居中效果，auto意思为设置等宽空白
*/
</style>
</head>
<body>
<!-- 块级元素：能够识别宽高，独占一行，多个块级元素标签写在一起，默认排列方式为从上至下。div p h1
行内元素：设置宽高无效，对margin仅设置左右方向有效，上下无效，不会自动进行换行。span b
行内块：综合了行内元素和块级元素的特点，但是各有取舍，不自动换行，能识别宽高。img input
-->
<div>123</div>
<p>123</p>
<h1>3</h1>
<h2></h2>
<span style="margin-left: 100px;">123</span>
<b>123</b>
<img src="static/images/p1.jpg" style="width: 500px;"><br>
<span style="padding: 5px;background: red;margin: 15px;">123</span>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例三
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
/*float属性，实现元素的浮动，属性值有left right
浮动的框可以水平方式移动，直到它的外边缘碰到包含框或另外一个浮动框为止。
浮动让元素的位置与文档流无关，因此不占据空间。浮动元素变成块级框。
*/
.box{
border: 1px solid pink;
}
.right,.left{
width: 200px;
height: 200px;
background:red;
margin-top: 10px;
}
.l{
float: left;
}
/*做个浮动一定要清除浮动，很重要*/
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="left l"></div>
<div class="right l" style="background:blue;"></div>
<div class="clear"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例四
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优酷-这世界很酷</title>
<link rel="icon" type="image/x-icon" href="static/images/1.ico">
<style type="text/css">
*{margin: 0;padding: 0;}
.clear{clear: both;}
a{
text-decoration: none;
color: #000;
}
li{
list-style: none;
float: left;
}
.mr{
margin-right: 10px;
}
.l{
float: left;
}
.contents{
width: 1750px;
margin: 0 auto;
}
.content{
width: 100%;
margin-top: 20px;
}
.contentUL{
line-height: 60px;
}
.hot_tv img{
width: 240px;
height: 360px;
}
.tab li{
margin-left: 20px;
}
.tv_show img{
height: 318px;
}
.tv_tab img{
width: 240px;
height: 135px;
}
</style>
</head>
<body>
<div class="contents">
<div class="content">
<div class="contentUL"><h2>正在热播</h2></div>
<ul class="hot_tv">
<li class="mr">
<a href="">
<img src="static/images/a.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/b.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/c.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/d.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/e.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/f.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/g.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="content">
<div class="contentUL">
<h2 class="l mr">剧集 ></h2>
<ul class="tab">
<li>
<a href="">最新</a>
</li>
<li>
<a href="">大陆剧</a>
</li>
<li>
<a href="">日韩剧</a>
</li>
<li>
<a href="">港台剧</a>
</li>
<li>
<a href="">英美剧</a>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="tv_show l mr">
<a href="">
<img src="static/images/tv.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</div>
<ul class="tv_tab">
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv2.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv3.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv4.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li>
<a href="">
<img src="static/images/tv5.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<br>
<li class="mr">
<a href="">
<img src="static/images/tv1.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv2.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv3.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv4.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
<li class="mr">
<a href="">
<img src="static/images/tv5.jpg"><br>
<span>瞰中国</span><br>
</a>
<small>低调的宁夏 美了四季</small>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例