《网页设计与制作》第7章概要1.ppt

* 解释：.nav li a的含义，限定范围 * 强调：顺时针赋值 * 强调：顺时针赋值 * 强调：顺时针赋值 * * 说明重点讲解前两者的样式修饰，后两者的样式美化比较简单。 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 商品类目的内容不要求。 第七章 CSS样式表（三） 制作贵美横向主导航条 制作贵美顶部菜单 制作贵美新品上架板块 本章任务 使用div-ul-li实现局部布局 使用div-dl-dt-dd实现图文混编 使用伪类样式控制超链接样式 本章目标 超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式 超链接样式的特点 加链接后，图片/文本样式的变化 超链接样式的四种状态 未访问状态（a:link ） 已访问状态（a:visited ） 鼠标移上状态（a:hover ） 激活选定状态（a:active ） 可以分别设置链接的四种状态的样式 超链接伪类样式 超链接伪类样式 伪 类 示 例 说 明 a:link a:link{color:#999;} 未访问状态 a:visited a:visited {color:#333;} 已访问状态 a:hover a:hover {color:#ff7300;} 鼠标移上状态 a:active a:active {color:#999;} 激活选定状态（鼠标点击未释放时） 采用选择器：状态的方式分别定义样式，一般称为伪类 如何设置超链接的样式 style type=text/css .nav li a { padding:8px 15px;} .nav li a:hover { color:#ff7300;font-size:20px; } /style body div class=nav ul lia href=#家用电器/a/li lia href=“#”手机数码/a/li …… 1、先定义共有样式：表示.nav类下li标签中的链接样式 设置超链接样式的步骤： 1、确定页面所有链接样式是否相同，否则分开定义 2、先定义四个状态共有样式，再分别定义其他状态 2、再单独定义某个状态特有的样式 导航版块的链接样式一般和页面样式不同，需单独定义 三类应用样式的方式 内部样式表 外部样式表 行内样式 如何应用样式3-1 head style type=text/css ….. //样式定义 /style /head body ……//HTML内容 /body HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用 三类应用样式的方式 内部样式表 外部样式表 行内样式 如何应用样式3-2 .nav li a{padding:8px 10px;} ….. //CSS样式定义 head…… body ……//HTML内容 /body 分别定义*.css和*.html文件，样式和内容彻底分离，多个网页可共享同一CSS link rel=stylesheet href=css/layout.css type=text/css / 三类应用样式的方式 内部样式表 外部样式表 行内样式表 如何应用样式3-3 li a href=# style=color:red;font-size:10px;日用百货/a /li 单独定义某个元素的样式，灵活方便。但因为内容与样式混写在一起，应尽量少用或不用 各类样式有继承 各类样式的优先级 浏览器默认设置 外部样式表文件 内部样式表 行内样式表 ID选择器 类选择器 标签选择器 样式的优先级3-1  由低到高，“近者优先”原则 “日用百货”链接 样式的优先级3-2 head …… style type=text/css .nav ul li a:link{color:blue;} /style link rel=stylesheet href=css/layout.css type=text/cs