Web前端开发任务驱动式教程（HTML5+CSS3+JavaScript）（第2版）（微课版） 课件汇总 任务7--12 链接伪类和CSS样式面板---元素的定位.pptx

任务7链接伪类和CSS样式面板主讲老师：汪婵婵第四单元CSS3基础

链接伪类CSS样式面板掌握学习目标

网页中常见的超链接样式了解:学习目标

任务目标实战演练——制作散文欣赏网页

任务目标实战演练——制作热点新闻列表

知识准备1.链接伪类默认的超链接样式：链接伪类：a标签的伪类超链接状态a:link未访问过的超链接a:visited已经访问过的超链接a:hover鼠标经过或悬停在超链接上a:active鼠标按下而未放开时的超链接定义顺序：遵循“爱恨原则”，即“LoVe-HAte”原则

知识准备示例：链接伪类的使用styletype=text/cssa:link{color:#F60;text-decoration:none;}a:visited{color:#F60;text-decoration:none;}a:hover{color:#00F;text-decoration:underline;}a:active{color:#690;text-decoration:none;}/stylebodyahref=#商城首页/aahref=#潮流饰品/aahref=#母婴童装/aahref=#家装家纺/aahref=#手机数码/a/body

知识准备2.CSS样式面板类别视图列表视图设置属性视图附加样式表新建CSS规则编辑样式删除CSS规则

实战演练制作散文欣赏网页案例描述：设计并制作散文欣赏网页，网页效果如下。其中光标图标设置成了“help”样式，锚点链接的四种状态（a:link、a:visited、a:hover、a:active）均设置了不同的样式。

强化训练案例描述：设计并制作热点新闻列表，网页效果如下（左）。当鼠标悬停在新闻标题上时，样式效果如图（右）。制作热点新闻列表

任务小结0102链接伪类CSS样式面板

课后实训设计并制作“帮助中心”页面，效果如图所示。默认效果鼠标悬停超链接效果鼠标激活超链接效果

谢谢观看主讲老师：汪婵婵

任务8id选择器、伪选择器和表格样式主讲老师：汪婵婵第四单元CSS3基础

id选择器表格掌握学习目标

伪选择器了解:学习目标

任务目标实战演练——制作鞋子尺码对照单强化训练——制作婴儿身高体重标准表

知识准备1.id选择器id属性：用于唯一标识某个标签元素。id属性值不能重复，它在当前文档页面中必须是唯一的。id选择器：为标有特定id的HTML元素指定特定的样式。语法格式：#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

知识准备示例：id选择器的使用styletype=text/css#one{color:#FFF;background-color:#06C;}#two{font-size:20px;color:#F00;}/stylebodypid=one背景颜色为蓝色，字颜色为白色/ppid=two文字大小为20像素，颜色为红色/p/body

知识准备元素名示例描述:linka:link选择所有未访问的链接:visiteda:visited选择所有访问过的链接:hovera:hover选择鼠标悬停链接上的状态:activea:active选择鼠标单击链接时的状态2.伪选择器伪类选择器

知识准备2.伪选择器伪类选择器元素名示例描述:rootroot 选择文档的根元素，通常是返回html:first-childp:first-child匹配属于任意元素的第一个子元素的p元素:last-child p:last-child选择所有p元素的最后一个子元素:only-childp:only-child选择所有仅有一个子元素的p元素:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素:nth-child(n)p:nth-child(2)选择所有p元素的父元素的第二个子元素:nth-last-child(n)p:nth-last-chi