CSS简介PPT.ppt

信息管理学院 刘政敏 liuzhengmin525@163.com;本章主要内容;一、CSS概述;不用CSS，如何修改各标签的样式？;未使用CSS的页面;2、CSS作用;山经网站的CSS文件;二、CSS基础语法;2、注意事项;3、如何使用CSS?;如何使用CSS?-续;如何使用CSS?-续;注意：应用次序;三、CSS选择器;CSS选择器-续;CSS选择器-续;;CSS选择器-续;CSS选择器-续;5、属性选择器Attribute Selectors;CSS选择器-续;四、主要属性;五、CSS核心机制-盒子模型(Box Model);（一）盒子模型概述;盒子模型概述（续）;（二）盒子模型的四个要素;margin: margin-left/margin-right/margin-top/margin-bottom padding: padding-left/padding-right/padding-top/padding-bottom;Demo2 理解盒子模型;Demo2 –续;1、边框(border);边框样式(border-style)-必须设置;;Demo3 ;2、内边距(填充，padding);设置内边距(填充)的大小;3、外边距(margin);设置margin的大小;（三）、盒子大小的计算;盒子大小的计算-续;Example2;注意：;(四)、盒子外边距合并;块元素之间的垂直外边距合并;发生嵌套时,若未设父元素的边框和填充,父元素的上下margin会和子元素的上下margin发生叠加。若父元素的边框或填充不为0，不存在叠加的问题。;-续上页;行内元素之间的水平margin不会叠加;（五）、盒模型总结;盒模型总结-续;盒模型总结-续;补充：浏览器的怪异模式与标准模式;怪异模式与标准模式-续;;如何判断怪异模式还是标准模式;;;六、CSS重点和难点-定位与浮动;首先，得把浏览器窗口看成一个坐标系统;(一) 块元素与行元素;1、每个块元素都独占一行;行元素则在一行内显示; 2、可以利用元素的display属性进行转换； 3、块元素一般用作容器,可以容纳其他块元素和行元素,而行元素只能容纳文本或者其他行元素; 4、行元素的高度宽度设置无效，其宽度就是自身文字或者图片的宽度；;普通文档流(normal document stream);(二)相对定位（position:relative）;（三）绝对定位(position:absolute);绝对定位;相对定位与绝对定位的比较;（四）浮动;浮动本质上是用来干什么的？;浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以普通流中的块框表现得就像浮动框不存在一样,将忽略该元素并填补???原先的空间。 浮动主要用于实现文字环绕图片以及页面布局。;;例2，框1向左浮动;例3，全部向左浮动;例3，全部向左浮动;补充：关于行框和清理;浮动框清理-续;;Code：;解决：;“高度塌陷”;关于float的注意事项：;七、综合示例;八、CSS注意事项、技巧;注意事项与技巧-续;注意事项与技巧-续;具体应用技巧;关于路径;具体应用技巧-续;附：CSS优先权规则;例如：;CSS的发展