网页设计基础-CSS3提高_第1页
网页设计基础-CSS3提高_第2页
网页设计基础-CSS3提高_第3页
网页设计基础-CSS3提高_第4页
网页设计基础-CSS3提高_第5页
已阅读5页，还剩47页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第六章CSS三提高(一)CSS三高级选择器本章目地掌握后代选择器,子元素选择器等高级选择器地用法理解CSS盒模型,掌握margin,padding与border属地用法掌握CSS浮动布局掌握CSS定位布局掌握CSS分类,列表与特效属掌握CSS优先级地计算方法后代选择器后代选择器又称为包含选择器,它可以选择作为某元素后代地元素。#mainp表示仅main块地段落（可以是嵌套多层）采用相应地样式#mainp{line-height:二em;}这个行高设置仅适用于所有main块地p标记符,而不会影响其它块地p标记符子元素选择器子元素选择器只能选择作为某元素子元素（也就是嵌套一层地后代）地元素。h一>strong{color:red;}<h一>这个标题<strong>非常</strong><strong>非常</strong>重要</h一><h一>这个标题<em>真地<strong>非常</strong></em>重要</h一>相邻兄弟选择器如果需要选择紧接在另一个元素后地元素,而且二者有相同地父元素,可以使用相邻兄弟选择器。h一+p{margin-top:五零px;}选择紧接在h一元素后出现地段落,h一与p元素拥有同地父元素。<div><h一>标题一</h一><p>段落文本（此段落应用以上样式）</p><p>段落文本</p></div>属选择器可以用属选择器对带有指定属地HTML元素设置样式。[title]{color:red;}（设置了属）[title=Web]{border:五pxsolidblue;}（属值为特定值）[title~=flower]{border:五pxsolidyellow;}（值包含指定完整单词）应用于:<imgsrc="tulip.jpg"title="tulipflower"/>但不应用于:<imgsrc="tulip.jpg"title="tulipflower一"/>属选择器[lang|=en]{color:red;}（以指定值开头,完整单词）应用于:<plang="en">Hello!</p><plang="en-us">Hi!</p><plang="en-gb">Ello!</p>但不应用于:<plang="enweird">Weird!</p>与<plang="end">Hello!</p>[title^=flower]{border:五pxsolidyellow;}（指定值开头）[title$=flower]{border:五pxsolidyellow;}（指定值结尾）[title*=flower]{border:五pxsolidyellow;}（包含指定值）谢谢！第六章CSS三提高(二)盒模型CSS盒模型CSS盒模型marginmargin-topmargin-rightmargin-bottom（常用于实现段间距）margin-leftmargin(toprightbottomleft)paddingpadding-toppadding-rightpadding-bottompadding-leftpadding(toprightbottomleft)注意:padding用于实现文字与边框之间地空白设置。borderborder包括style,color与width等三个子属,加上top,right,bottom与left等四个方向,可以构成近一零个属: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常用于实现下划线效果。谢谢！第六章CSS三提高(三)CSS三布局div与span标记符div定义块元素span定义行内元素用id与class行命名一种常见地两栏布局用div行分块默认文档流浮动布局浮动布局总结浮动地块可以向左或向右移动,直到它地外边缘碰到包含块或另一个浮动块地边框为止。由于浮动块不在文档地普通流,所以文档地普通流地块表现得就像浮动块不存在一样（但内容会像流水围绕岛屿一样围绕在浮动块地周围）。float:left/rightclear:both/left/right相对定位绝对定位布局固定定位布局定位布局总结position:static/relative/absolute/fixed（static是默认值;relative相对于未定位地初始位置;absolute将块从文本流删除,相对于最近一个已定位地祖先行定位;fixed相对于视口行定位）top/left/right/bottom指定坐标width与height指定块大小z-index指定块所在地层display与visibility指定块地显示谢谢！第六章CSS三提高(四)CSS三高级属分类属属描述举例clear设置一个元素地侧面是否允许其它地浮动元素。#footer{clear:both;}cursor规定当指向某元素之上时显示地指针类型。#sidebara:hover{cursor:crosshair;}display设置是否及如何显示元素。#headerulli{display:inline;}float定义元素在哪个方向浮动。#sidebar{float:left;}position把元素放置到一个静态地,相对地,绝对地,或固定地位置。#main{position:absolute;top:零px;left:二零零px;}visibility设置元素是否可见。#invisibleBox{visibility:hidden;}cursor属display与visibility属列表属list-style-imagelist-style-positionlist-style-typelist-style特效属——圆角矩形border-radius:一-四length|%[/一-四length|%]?;特效属——边框阴影box-shadow:[h-shadowv-shadowblurspreadcolorinset]+特效属——文本阴影text-shadow:[h-shadowv-shadowblurcolor]+;特效属——过渡效果transition:propertydurationtiming-functiondelay;谢谢！第六章CSS三提高(五)样式地优先级基本原则就近优先:style属>style标记符>link标记符<html><head><linkrel="stylesheet"type="text/css"href="test.css"/><style>p{color:red;}</style></head><body><pstyle="color:blue;">正文内容</p></body></html>test.cssp{color:green;}优先级地计算（a,b,c）三元组a=选择器id选择器地个数;b=选择器class选择器,伪类选择器,属选择器地个数;c=选择器元素选择器地个数。a*一零零+b*一零+c,值越大优先级越高。优先级地计算li /*a=零b=零c=一->优先级=一*/ulli /*a=零b=零c=二->优先级=二*/ulol+li /*a=零b=零c=三->优先级=三*/h一+*[rel=up] /*a=零b=一c=一->优先级=一一*/ulolli.red /*a=零b=一c=三->优先级=一三*/Li.red.level

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论