CSS简介优秀讲义.pptVIP

1、CSS概述 2、CSS基础语法 3、CSS选择器 4、CSS主要属性 5、CSS核心机制-盒子模型 6、CSS重点和难点-定位 7、综合示例 8、CSS注意事项、技巧 未使用CSS的页面 5、属性选择器Attribute Selectors 语法： 1. E1[attr] 2. E1[attr=value] 说明： 1. 选择具有attr属性的E1 ； 2. 选择具有attr属性且属性值等于value的E1 ； 如何判断怪异模式还是标准模式 1、对于拥有doctype声明的网页，这里有几条简单的规则可用于判断：对于那些浏览器不能识别的doctype声明，浏览器采用strict mode解析 2、 在doctype声明中，没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时，基本所有的浏览器都是使用quirks mode呈现，其他的则使用strict mode解析。 3、可以这么说，在现有有doctype声明的网页，绝大多数是采用strict mode进行解析的。 4、通过IE8的F12工具可以看出当前网页是何模式。 “高度塌陷” 当把标签设为float后，由于其脱离文档流，因此，不占据高度。当所有的子标签都是浮动，则父标签会出现高度塌陷的现象，即上页出现的结果。 解决方法：清除浮动； CSS的发展 1、1996年12月,W3C发布CSS1. 2、1999年1月,W3C发布CSS2。CSS2 在CSS1基础上添加了高级概念(比如浮动和定位)以及高级的选择器（比如子选择器、相邻同胞选择器和通用选择器）。 3、CSS3正在研究中。增加了更多的CSS选择器，可以实现更简单但是更强大的功能。CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。 （四）浮动 如何创建如下所示的文字环绕图片的样式？ 文字环绕图片 浮动本质上是用来干什么的？ 浮动出现的意义其实只是用来让文字环绕图片而已，仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情。 header bar Side bar Main content Side bar Footer bar 用浮动实现页面布局其实不是本职工作！ 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以普通流中的块框表现得就像浮动框不存在一样,将忽略该元素并填补他原先的空间。 浮动主要用于实现文字环绕图片以及页面布局。 float：none / left / right 浮动-续 例1，框1向右浮动 框1 框2 框3 不浮动的框 框1 框2 框3 框1向右浮动 当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘 Float示例 例2，框1向左浮动 框1 框3 框1向左浮动 当框 1 向左浮动，它脱离文档流并且向左移动，直到左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，框2向上移动,实际上框1覆盖住框 2，使框 2 从视图中消失。 例3，全部向左浮动 框2 框1 框3 所有框向左浮动 情形1：如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。 例3，全部向左浮动 框2 框1 框3 框3下降 情形2:如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。 情形3:如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”； 框2 框1 框3 框3被框1”卡住”了 补充：关于行框和清理 浮动框旁边的行框被缩短，从而给浮动框留出空间,行框围绕浮动框。因此,创建浮动框可以使文本围绕图像： 文字环绕图片 浮动框清理-续 要想阻止行框围绕浮动框,需要对该框应用 clear 属性。 clear :left、right、both 或 none,表示框的哪些边不应该挨着浮动框。 clear属性主要用于控制浮动元素的后继元素的行为,缺省地,后继元素将向上移动,以填补由于前面元素的浮动而空出的可用空间。 Demo-(文字环绕图片-清除浮动) Demo ： 假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。 清理浮动 .news { background-color: gray; border: solid 1px black; } .news img {float: left; } .news p { float: right; } div class=news img src=eg_smil