网页制作案例教程HTML5+CSS3 课件 项目9 CSS高级选择器_第1页
网页制作案例教程HTML5+CSS3 课件 项目9 CSS高级选择器_第2页
网页制作案例教程HTML5+CSS3 课件 项目9 CSS高级选择器_第3页
网页制作案例教程HTML5+CSS3 课件 项目9 CSS高级选择器_第4页
网页制作案例教程HTML5+CSS3 课件 项目9 CSS高级选择器_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

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

文档简介

HTML5CSS3项目9CSS高级选择器网页制作案例教程（HTML5+CSS3）教学目标熟悉理解掌握掌握2理解CSS关系选择器，能够准确判断元素与元素间的关系。3掌握常见的伪类和伪对象选择器。能够综合使用各种选择器设置网页样式。4熟悉CSS属性选择器，能够运用属性选择器为页面中的元素添加样式。11属性选择器2关系选择器3伪类选择器4伪对象选择器任务分解5制作电视剧介绍网页PART0101属性选择器属性选择器可以根据元素的属性及属性值来选择元素。属性选择器属性选择器a[target]{background-color:yellow;}…<ahref="">w3school</a><ahref=“”target=“_blank”>百度</a>例语法格式E[attribute]{属性1：属性1值；属性2：属性2值}E代表元素，attribute代表属性描述。属性选择器选择器描述[attribute]用于选取带有指定属性的元素。a[class]{color:#f00;}[attribute=value]用于选取带有指定属性和值的元素。a[class="abc"]{color:#f00;}[attribute~=value]用于选取属性值中包含指定词汇的元素。a[class~="abc"]{color:#f00;[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。li[class|="abc"]{color:#f00;}[attribute^=value]匹配属性值以指定值开头的元素。li[class^="a"]{color:#f00;}[attribute$=value]匹配属性值以指定值结尾的元素。li[class$="a"]{color:#f00;}[attribute*=value]匹配属性值中包含指定值的元素。li[class*="a"]{color:#f00;}属性选择器动手实践demo1<ul><liclass="abc">列表项目</li><liclass="acb">列表项目</li><li>列表项目</li><liclass="bca"name="last">列表项目</li></ul>li[class=abc]{background:#ccc;}li[name]{text-decoration:underline;}li[class$=c]{font-weight:bolder;}PART0202关系选择器关系选择器子代选择器兄弟选择器后代选择器关系选择器后代选择器后代选择器选择其后代的所有元素。语法格式EF{属性1：属性1值；属性2：属性2值}选择所有被E元素包含的F元素，并为F元素赋予后面的属性值。关系选择器动手实践.testlia{font-weight:bolder;text-decoration:none;}…<ulclass="test">

<li> <ahref=“#">列表项目1</a> <ul>

<li><ahref=“#">项目列表1.1</a></li> <li><ahref=“#">项目列表1.2</a></li> </ul>

</li>

<li><ahref=“#">列表项目2</a></li></ul>例demo2关系选择器子代选择器子代选择器主要用来选择某个元素的第一级子元素。语法格式E>F{属性1：属性1值；属性2：属性2值}选择所有作为E元素的一级子元素F。关系选择器.test>li>a{font-weight:bolder;text-decoration:none;}…将【demo2】案例中的第7~10行代码改为使用子代选择器关系选择器兄弟选择器E+F选择紧贴在E元素之后F元素。E~F选择E元素所有兄弟元素F。例语法格式E+F{属性1：属性1值；属性2：属性2值}E~F{属性1：属性1值；属性2：属性2值}兄弟选择器包含相邻兄弟选择器和相邻兄弟组选择器关系选择器动手

实践<style>h3+p{text-decoration:line-through}</style><body><divclass="test"> <h3>这是一个标题</h3>

<p>这是一个文字段落</p> <p>这是一个文字段落</p> <h3>这是一个标题</h3>

<p>这是一个文字段落</p> <h3>这是一个标题</h3>

<p>这是一个文字段落</p> <p>这是一个文字段落</p></div></body>例demo3关系选择器思考例将【demo3】中样式代码中的“+”号改为“~”之后，显示结果什么样？PART0303伪类选择器伪类选择器选择器描述E:link选择所有未被访问的链接。E:visited选择所有访问过的链接。E:hover选择鼠标悬停其上的链接。E:active选择活动的链接。E:focus选择获得焦点的<input>元素。E:not(s)选择不含有s选择符的元素E。:root选择文档的根元素。E:first-child选择父元素的第一个子元素E。 E:last-child选择父元素的最后一个子元素E。E:only-child选择父元素的唯一子元素E。E:nth-child(n)选择父元素的第n个子元素E，假设该子元素不是E，则选择符无效。伪类选择器<style>*{padding:0;margin:0;}div{width:160px;border:1pxsolid#dddddd;}a{display:block;width:150px;height:35px;line-height:35px;text-decoration:none;padding-left:10px;color:#996600;}p:nth-child(2n+1)>a{ background-color:#dddddd;}</style><body><div> <p><ahref="#">女装</a></p> <p><ahref="#">男装</a></p> <p><ahref="#">家电</a></p> <p><ahref="#">手机</a></p> <p><ahref="#">图书</a></p></div></body>例动手

实践demo4PART0404伪对象选择器伪对象选择器选择器描述:first-letter/::first-letter设置对象内的第一个字符的样式。:first-line/::first-line设置对象内的第一行的样式。:before/::before设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用。 :after/::after设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用。::placeholder设置对象文字占位符的样式。::selection设置对象被选择时的样式。伪对象选择器的标准写法中使用的是双冒号，但在实际使用时也支持使用单冒号。伪对象选择器:before伪对象选择器用于在被选元素的内容前面插入内容，:after用于在被选元素的内容后面插入内容，必须配合content属性来指定要插入的具体内容。语法格式E:before{ content:文字/url();}E:after{ content:文字/url();}伪类选择器<style> p:before{content:url(img/head.jpg);} p:after{content:"";width:60px;height:60px;border-radius:50%;

background-color:#95A5A6;display:inline-block;} </style><body><p>Hi,你好</p></body>例动手

实践demo5PART0505制作电视剧介绍网页制作电视剧介绍网页我们经常会看到一些影视网站，里面有剧情介绍，推荐，选集等内容。下面我们来制作电视剧介绍网页。制作电视剧介绍网页动手实践.introduce>p>span:first-of-type：左边界为0div.bannerroductiondiv.select.banner：相对定位，relati

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

温馨提示

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

最新文档

评论

0/150

提交评论