html和CSS入门4.ppt

《html和CSS入门4.ppt》由会员分享，可在线阅读，更多相关《html和CSS入门4.ppt（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、电信淘宝俱乐部电信淘宝俱乐部html选择器选择器类型类型选择器类选择器ID选择器后代选择器子元素选择器相邻同胞选择器伪类选择器通用选择器后代与子元素的区别后代元素选择器对应的是父元素所包含的子元素、子元素的子元素也就是说包括非直接的子元素。子元素选择器将使用“”字符来指定直接子元素。IE6不支持子元素选择器！相邻同胞选择器相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素。可以使用相邻同胞选择器让h1标题之后的第一个段落以蓝色字体显示。h1+pbackground-color:blue;测试测试测试测试测试 这段文字将显示为红色！同样这段文字也那样！伪类选择器-1有时候需要根据文档结果之

2、外的其他条件对元素应用样式，例如表单元素和链接的状态。这要使用伪类（pseudo-class）选择器来完成。a:linkcolor:blue;/*格式化未访问的链接颜色为蓝色*/a:visitedcolor:lime;/*格式化访问过的链接颜色为绿色*/a:hovercolor:yellow;/*格式化悬停上午链接颜色为黄色*/a:activecolor:red;/*格式化正在加载的链接颜色为红色*/伪类选择器-2l:link和:visited称为链接伪类，只能用于锚元素。l:hover、:active和:focus称为动态伪类，理论上可以应用于任何元素。不幸的是，目前不是所有的浏览器都支持这

3、种功能。通用选择器通用选择器可能是所以选择器中最强大却又最少使用的。通用选择器的作用就像是通配符，它匹配所有的元素。与其他语言中通配符一样，通用选择器由一个*号表示。*margin:0;padding:0;选择器类型【回顾一下】类型选择器类选择器ID选择器后代选择器子元素选择器相邻同胞选择器伪类选择器通用选择器电信淘宝俱乐部电信淘宝俱乐部htmlCSS布局可视化格式模型要掌握的三个最重要 的CSS概念是浮动（float）、定位（position）和盒模型（box model）。这些概念控制了页面上安排和显示元素的方式，形成了CSS的基本布局。哈哈！提醒大家的是：从这部分开始，浏览器越来越难以控

4、制了！盒模型-1盒模型-2在CSS中，width和height指的是内容区域的高度很宽度。增加填充和空白边不会影响内容区域的尺寸，但是会增加元素框的总尺寸。填充、边框和空白边可以应用于一个元素的所有边，也可以应用于单独的边。空白边还可以是负值，并且在多种技术中都要使用负值的空白边。空白边叠加bug？#div1margin:30px#div2margin:30px 123412341234567856785678怎么会会这么显示呢？空白边叠加bug？#box#boxmargin:10px;background-color:red;p p margin:20px;background-color:

5、blue;测试测试测试测试测 为什么会这么显示呢？空白边叠加的意义空白边叠加初看上去有点匪夷所思，但是它还是自己的实际意义的。比如有几个段落组成的典型文本，第一段的上面空间等于段落的顶空白边。如果没有空白边叠加，后续的段落之间的空白将是相邻顶空白边和底空白边的和！这意味着段落之间的空白是页面顶部的两倍。如果空白边叠加了，显示就一致了！定位概述CSS中有三种基本的定位机制：普通流（normal flow）、浮动和绝对定位。(x)html默认的是普通流。定位positionposition：relative|absolute|fixed|static|inherit配合的属性有：top|right

6、|bottom|left它们负责控制偏移量相对定位-1还好！相对定位是一个比较容易理解的概念！如果对一个元素进行相对定位，它将出现在它所在的位置上，然后通过设置水平或垂直的偏移量，让这个元素“相对于”它的起点进行移动。例如：如果设置top为20px，那么框将出现在原位置顶部下面的20像素的地方。注意：注意：在使用相对定位时，无论是否进行移动，元素仍占据原来的空间。因此，移动元素会导致它覆盖到其他的元素。怎么控制来使相对定位的元素被覆盖？相对定位-2怎么控制来使相对定位的元素被覆盖？z-index属性用来控制元素的堆放次序。z-index值越高，框在堆中的位置就越靠前！绝对定位-1相对定位实际上

7、还是属于普通流定位模型的一部分，因为元素的位置相对于它在普通流当中的位置。绝对定位与之相反，绝对定位使元素的位置与文档流无关，因此不占据空间。普通流中的元素布局完全无视绝对定位元素的存在！也就是说，绝对定位的元素开辟了一个单独属于自己的文档流，这个文档流是和普通流平行的。绝对定位-2绝对定位最重要的问题：什么地发是绝对定位元素的初始位置？绝对定位的元素的位置相对于自己最近的已定位的祖先元素！如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。绝对定位-3与相对定位一样，绝对定位的框可以从它的包含块向上下左右移动。这提供了很大的灵活性。可以直接将元素定位在页面的任何位置。绝对定位的元素

8、的位置相对于最近的已定位祖先元素，为此我们可以实现一些非常有意思的效果。比如：假设希望让一个文本段落对准一个大框的右下角。只需要对包含框进行相对定位，然后相对于这个框对段落进行绝对定位。绝对定位-4#brandingwidth:700px;height:100px;position:relative;#branding.telright:10px;bottom:10px;text-align:right;position:absolute;我的电话号码：1389864*固定定位固定定位是绝对定位的一个子集。通过固定定位，我们能创建总是出现在窗口同样位置的浮动元素！注意的是：固定定位相对的祖先元素就是窗口！浮动-1浮动是最后一种定位模型。浮动的框可以左右移动，直到它的外边缘碰到包含框或另一个浮动框的边缘。因为浮动框不在文档的普通流中，所以文档的普通流中的框也完全无视浮动框的存在。浮动-2浮动-3浮动-4浮动-5浮动-6如果容器总宽度不够容纳三个框？浮动-7如果第一个框高度很大？浮动-8文字环绕的效果！浮动带来的问题起因：浮动的元素不占据普通文档流的空间！thank you！