一、块元素和内联元素
1、块元素
独占一行
可以定义宽度和高度
常用div、p、ul、li
2、内联元素
一行排列显示
不能定义宽度和高度
常用span、a、label
3、div和span标签
最大优点：没有任何的默认样式渲染
最大区别：div标签是块元素，span标签是内联元素
作用：
1、结构化HTML元素
2、DIV+CSS网页布局
3、提高网页加载速度
经验：
div和span标签可以相互转换（display属性）
规范角度而言，span标签中不能内嵌div标签
CSS
1、什么是CSS
Cascading Style Sheet级联样式表
表现HTML或XHTML文件样式的计算机语言
包括对文字、颜色、边距、高度、宽度、背景图片、网页定位等设定
2、CSS的作用
能控制页面的样式和分布
网页文件与样式文件相分离，提高开发效率
CSS语法
style标签
<html>
<head>
<style type="text/css" > h1 { font-size:12px; color:#F00;
}
</style>
</head>
….
注意：
1、应写在head标签之间；
2、加上type="text/css"属性
语法2
选择器 {
声明1;
声明2;
……
}
例：
h1 {
font-size : 12px; color : red;
}
1、CSS的最后一条声明后的“;”可写可不写， 建议都要写上；
2、CSS的多条声明可写在同一行，但开发时便于阅读建议分行写并缩进；
CSS选择器
1、标签选择器
HTML标签作为标签选择器的名称
p { font- size:16px;}
2、类选择器
<标签名 class= "类名称">标签内容</标签名>
注意：网页中可以给不同标签相同的class
.class { font-size : 16px; }
3、ID选择器
<标签名 id= "id名称">标签内容</标签名>
注意：网页中标签的ID不能重复，唯一存在
#id { font- size:16px;}
CSS复合选择器
1、并集选择器
p , #id , .class { font-size : 14px; color : green; }
多个选择器之间可以是多个不同或相同类型；
多个选择器之间必须用英文半角输入法逗号“,”隔开；
2、交集选择器
h3.second{ font-size : 14px; color : green; }
格式为：标签 + 类选择器 或 标签 + ID选择 器
选择器之间不能有空格；
3、后代选择器
p a {
font-size : 14px;
color : green;
}
选择器之间可以是多个不同或相同类型并有层级关系的；
选择器之间用空格隔开；
总结
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
灵活运用并集、交集、后代选择器
二、CSS的引入方式
1、行内样式 ：使用style属性引入CSS样 式
<h1 style="color:red; " >style属性的应用</h1>
<p style="font-size:14px; color:green; " >直接在HTML标签中设置的样式 </p>
2、内部样式表 ：style标签中书写CSS代码
<head>
<style type="text/css">
h3{ color: red; }
</style>
</head>
3、外部样式表：
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方 式：链接式和导入式
链接式：
<link type="text/css" rel="styleSheet" href="CSS文件路径 " />
导入式：
<style type ="text/css">
@import url("css文件路径" );
</style>
链接式与导入式的区别
link：
1、属于XHTML
2、优先加载CSS文件到页面
@import：
1、属于CSS2.1
2、先加载HTML结构再加载CSS文件
CSS中的优先级
行内样式 > 内部样式表 > 外部样式表
ID选择 器 > 类选择器 > 标签选择器
总结
CSS选择器分标签选择器、类选择器和ID选择器
CSS的复合选择器：交集选择器、并集选择器和后代选择器
在HTML中引入CSS样式的三种方式 ：行内样式、内部样式表和外部样式表
注意CSS的优先级
三、CSS的属性
文字、文本属性
背景属性
列表属性
盒子模型
浮动属性
定位属性
字体属性
文本属性
背景属性
列表属性
超链接伪类
a:link {color: red} /* 未访问的链接 */
a:visited {color: blue} /* 已访问的链接*/
a:hover {color: green} /* 当有鼠标悬停在链接上 */
a:active {color: yellow} /* 被选择的链接*/
经验：
1、在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
2、在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的
3、记忆方法： love hate !
鼠标形状控制
cursor属性，其值：
盒子模型
外边距
margin:
margin-top
margin-right
margin-bottom
margin-left
margin
实例：
margin-top: 3 px margin-right : 5 px margin-bottom : 7 px
margin-left : 4 px
margin :3px 5px 7px 4px;
margin :3px 5px 7px (5px);
margin :3px 5px (3px 5px);
margin :8px (8px 8px 8px);
注意：margin：上右下左（顺时针方向）
边框
borde
内边距
padding
padding-left
padding-right
padding-top
padding-bottom
padding
实例：
padding-left:10px;
padding- right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:30px 8px 10px (8px) ;
padding:10px5px;
padding:10px;
注意：
padding：上右下左（顺时针方向）
小结
盒子模型总尺度
盒子模型总尺度 = border + padding +margin + 内容尺寸（宽/高）
外边距可用于网页居中显示
margin-left: auto;
margin-right:auto;
块元素才能完全适用于盒子模型
使用display属性来相互转化
none（元素隐藏，不可见）
block（转为块元素，独占一行）
inline（转为内联元素，不换行）
浮动属性
float属性
取值：
left：左浮动
right：右浮动
none：不浮动
作用：
块元素同行排列显示，一般用于排版、分栏显示
设置浮动属性后，脱离文档流向指定的左或右边对齐 直到父元素的边界或浮动的元素
注意：
使用浮动后要及时清除，以免影响其后的网页元素
清除浮动
清除浮动必要性：
浮动后，脱离了文档流不占网页空间
浮动后的网页元素会影响同级元素
clear属性清除浮动：
取值：
left
right
both
none
表明容器框的哪边不挨着浮动框
overflow属性
作用：定义溢出元素内容区的内容会如何处理
取值：
visible（默认）
auto
hidden
scroll
定位属性
position属性
relative（相对定位）：
相对它原来的位置，通过指定偏移，到达新的位置。
仍在标准流中，它对父级盒子和相邻的盒子都没有任何影响
absolute（绝对定位）：
相对已设定非static定位属性的父元素计算偏移量
fixed（相对浏览器固定定位，IE6不支持）
static（默认）：
偏移量设置
X轴(left、right 属性)与Y轴（top、bottom属性）
可取值：像素或百分比
定位图解
定位图解示例图：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
