CSS样式表格.doc

上次课程复习：
1．CSS样式定义：selector{property1:value1；property2:value2；…}
（1）样式符为HTML标记
（2）样式符为用户自定义类CLASS
（3）样式符为用户自定义ID
（4）虚类
2．CSS样式应用
（1）在HTML标记中直接插入CSS
<标记符style=“属性1:值1;属性2:值2;……”>
（2）在HTML文档的头部插入CSS
（3）链接外部CSS样式文件
<LINKrel="stylesheet"type="text/css"href="*.CSS">
3．CSS的常用属性
（1）CSS单位属性
（2）字体属性
（3）文本属性
（4）颜色和背景属性
（5）边框属性
边界属性
填充属性

本次课程主要内容：
1.进一步掌握CSS常用属性的用法
2.使用CSS样式化页面
第3章CSS技术
3.4CSS的常用属性
1．CSS的单位属性
2.字体属性
3.文本属性
4.颜色和背景属性
5.边框属性
(1)边界属性
例3-14CSS边界属性应用。
margin-left分别定义页面元素左、右、上、下边界的宽度.margin-left:20px
margin-right:20%
margin-top:atuo取值是长度、百分比、
auto（相对于父元素的百分比）margin-rightmargin-topmargin-bottommargin按上－右－下－左的顺序设置4个边界宽度margin:10px
margin:10px20px

margin:10px20px30px

margin:10px20px30px40px4个边界相同宽度
第一个用于上－下，第二个用于左－右
第一个用于上，第二个用于左－右，第三个用于下
(2)填充属性
padding-left分别定义页面元素左、右、上、下填充区的宽度padding-left:20px
padding-right:20%
padding-top:atuo取值是长度、百分比、
auto（相对于父元素的百分比）padding-rightpadding-toppadding-bottompadding按上－右－下－左的顺序设置4个填充区宽度padding:10px
padding:10px20px

padding:10px20px30px

padding:10px20px30px40px4个填充区宽度
第一个用于上－下，第二个用于左－右
第一个用于上，第二个用于左－右，第三个用于下
(3)边框属性
例3-16CSS边框属性应用
类型属性值示例边框宽度属性border-left-width
border-right-width
border-top-width
border-bottom-widththin、medium、thick、lengthborder-left-width:12px
border-width按上、右、下、左的顺序同时设置4个边框的宽度border-width:10px20px30px边框颜色属性border-left-color
border-right-color
border-top-color
border-bottom-colorborder-left-color：red
border-color按上、右、下、左的顺序同时设置4个边框的颜色border-color：redblue边框样式属性border-left-style
border-right-style
border-top-style
border-bottom-styleNone、dotted、dashed、solid、double、groove、ridge、inset、outsetborder-style按上、右、下、左的顺序同时设置4个边框的样式border-style：soliddotted边框样式border-left
border-right
border-top
border-bottom分别设置左、右、上、下边框宽度、颜色、样式。border-left：2pxredsolid边框border用来一次性在4个方向上设置边框的宽度、颜色和样式思考练习1：将例3-16CSS边框属性应用中green样式设计为：左右边框宽度4px，边框样式为虚线。
思考练习2：将例3-16CSS边框属性应用中green样式应用于P标记。

6.浮动属性
设置文本环绕方式。
例3-17浮动属性应用
(1)float属性
将元素的内容浮动到页面的左边缘或右边缘。取值left、right、none(默认)
(2)clear属性
指定一个元素是否允许有元素漂浮在它的旁边。取值let、right、both、none(默认)
思考练习1：将例3-17种s