第6章 CSS3提高（35）（课件)-《网页设计与制作》同步教学（人民邮电出版社）

第 6 章 CSS3提高 1 第 6 章　CSS3提高 知识要点 （1）掌握后代选择器、子元素选择器等高级选择器的用法 （2）理解CSS盒模型，掌握margin、padding和border属性的用法 （3）掌握CSS浮动布局 （4）掌握CSS定位布局 （5）掌握CSS分类、列表和特效属性 （6）掌握CSS优先级的计算方法 本章目标 1 第 6 章　CSS3提高 （1）CSS3高级选择器 后代选择器又称为包含选择器，它可以选择作为某元素后代的元素。 1．后代选择器 #main p 表示仅main块中的段落（可以是嵌套多层）采用相应的样式 #main p{line-height:2em;} 这个行高设置仅适用于所有main块中的p标记符，而不会影响其他块中的p标记符 1 第 6 章　CSS3提高 （1）CSS3高级选择器 子元素选择器只能选择作为某元素子元素（也就是嵌套一层的后代）的元素。 2．子元素选择器 h1 > strong {color:red;} <h1>这个标题<strong>非常</strong><strong>非常</strong>重要</h1> <h1>这个标题<em>真的<strong>非常</strong></em>重要</h1> 1 第 6 章　CSS3提高 （1）CSS3高级选择器 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。 3．相邻兄弟选择器 h1 + p {margin-top:50px;} 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素。 <div><h1>标题1</h1> <p>段落文本（此段落应用以上样式）</p> <p>段落文本</p> </div> 1 第 6 章　CSS3提高 （1）CSS3高级选择器 可以用属性选择器对带有指定属性的 HTML 元素设置样式。 4．属性选择器 [title] { color:red; }（设置了属性） [title=Web]{ border:5px solid blue; }（属性值为特定值） [title~=flower] { border:5px solid yellow; }（值中包含指定完整单词） 应用于：<img src="tulip.jpg" title="tulip flower" /> 但不应用于：<img src="tulip.jpg" title="tulip flower1" /> 1 第 6 章　CSS3提高 （1）CSS3高级选择器 [lang|=en] { color:red; }（以指定值开头，完整单词） 应用于：<p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <p lang="en-gb">Ello!</p> 但不应用于：<p lang="en weird">Weird!</p> 和 <p lang="end">Hello!</p> [title^=flower] { border:5px solid yellow; }（指定值开头） [title$=flower] { border:5px solid yellow; }（指定值结尾） [title*=flower] { border:5px solid yellow; }（包含指定值） 1 第 6 章　CSS3提高 （2）盒模型 1．CSS盒模型 1 第 6 章　CSS3提高 （2）盒模型 2．margin margin margin-top 01 margin-right 02 margin-bottom（常用于实现段间距） 03 margin-left 04 margin(top right bottom left) 05 1 第 6 章　CSS3提高 （2）盒模型 3．padding 01 padding-top 02 padding-right 03 padding-bottom 04 padding-left 05 padding(top right bottom left) 注意：padding用于实现文字与边框之间的空白设置。 1 第 6 章　CSS3提高 （2）盒模型 4．border border包括style、color和width等3个子属性，加上top、right、bottom和left等4个方向，可以构成近10个属性： border、border-bottom、border-bottom-color、border-bottom-style、border-bottom-width、border-color、border-left、border-left-color、border-left-style、border-left-width、border-right、border-right-color、border-right-style、border-right-width、border-style、border-top、border-top-color、border-top-style、border-top-width 以及 border-width 等 注意：border-bottom常用于实现下划线效果。 1 第 6 章　CSS3提高 （3）CSS3布局 1．div与span标记符 div 定义块元素 span 定义行内元素 用id和class进行命名 1 第 6 章　CSS3提高 （3）CSS3布局 一种常见的两栏布局 用div进行分块 1 第 6 章　CSS3提高 （3）CSS3布局 默认文档流 浮动布局 1 第 6 章　CSS3提高 （3）CSS3布局 2．浮动布局总结 浮动的块可以向左或向右移动，直到它的外边缘碰到包含块或另一个浮动块的边框为止。由于浮动块不在文档的普通流中，所以文档的普通流中的块表现得就像浮动块不存在一样（但内容会像流水围绕岛屿一样围绕在浮动块的周围）。 float:left/right clear:both/left/right 1 第 6 章　CSS3提高 （3）CSS3布局 相对定位 绝对定位布局 1 第 6 章　CSS3提高 （3）CSS3布局 固定定位布局 1 第 6 章　CSS3提高 （3）CSS3布局 3．定位布局总结 position:static/relative/absolute/fixed top/left/right/bottom指定坐标 width和height指定块大小 z-index指定块所在的层 display和visibility指定块的显示 （static是默认值；relative相对于未定位的初始位置；absolute将块从文本流中删除，相对于最近一个已定位的祖先进行定位；fixed相对于视口进行定位） 1 第 6 章　CSS3提高 （4）CSS3 高级属性 1．分类属性 属性 描述 举例 clear 设置一个元素的侧面是否允许其他的浮动元素。 #footer{ clear:both; } cursor 规定当指向某元素之上时显示的指针类型。 #sidebar a:hover { cursor:crosshair; } display 设置是否及如何显示元素。 #header ul li { display:inline; } float 定义元素在哪个方向浮动。 #sidebar { float:left; } position 把元素放置到一个静态的、相对的、绝对的、或固定的位置。 #main{ position:absolute; top:0px; left:200px; } visibility 设置元素是否可见。 #invisibleBox{ visibility:hidden; } 1 第 6 章　CSS3提高 （4）CSS3 高级属性 cursor属性 1 第 6 章　CSS3提高 （4）CSS3 高级属性 display和visibility属性 1 第 6 章　CSS3提高 （4）CSS3 高级属性 列表属性 list-style-image list-style-position list-style-type list-style 1 第 6 章　CSS3提高 （4）CSS3 高级属性 特效属性——圆角矩形 border-radius: 1-4 length|% [/ 1-4 length|%]?; 1 第 6 章　CSS3提高 （4）CSS3 高级属性 特效属性——边框阴影 box-shadow: [h-shadow v-shadow blur spread color inset ]+ 1 第 6 章　CSS3提高 （4）CSS3 高级属性 特效属性——文本阴影 text-shadow: [h-shadow v-shadow blur color]+; 1 第 6 章　CSS3提高 （4）CSS3 高级属性 特效属性——过渡效果 transition: property duration timing-function delay; 1 第 6 章　CSS3提高 （5）样式的优先级 1．基本原则 就近优先：style属性 > style标记符 > link标记符 <html><head> <link rel="stylesheet" type="text/css" href="test.css" /> <style>p {color: red;}</style > </head> <body><p style="color:blue;">正文内容</p></body> </html> test.css p{color:green;} 1 第 6 章　CSS3提高 （5）样式的优先级 2．优先级的计算【（a,b,c）三元组】 a 选择器中id选择器的个数 b 选择器中class选择器、伪类选择器、属性选择器的个数 c 选择器中元素选择器的个数 a*100+b*10+c，值越大优先级越高 1 第 6 章　CSS3提高 （5）样式的优先级 li /* a=0 b=0 c=1 -> 优先级 = 1 */ ul li /* a=0 b=0 c=2 -> 优先级 = 2 */ ul ol+li /* a=0 b=0 c=3 -> 优先级 = 3 */ h1 + *[rel=up] /* a=0 b=1 c=1 -> 优先级 = 11 */ ul ol li.red /* a=0 b=1 c=3 -> 优先级 = 13 */ Li.red.level /* a=0 b=2 c=1 -> 优先级 = 21 */ #box /* a=1 b=0 c=0 -> 优先级 = 100 */ #box #bread p /* a=2 b=0 c=1 -> 优先级 = 201 */ 1 第 6 章　CSS3提高 （5）样式的优先级 1 第 6 章　CSS3提高 （5）样式的优先级 3．Chrome开发者模式 Ctrl + Shif + i 1 第 6 章　CSS3提高 （6）综合实例 1．主页 1 第 6 章　CSS3提高 （6）综合实例 2．二级页面 1 第 6 章　CSS3提高 （6）综合实例 3．三级页面 1 第 6 章　CSS3提高 THANKS 1 第 6 章　CSS3提高 $$