文档介绍：第七章
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>
<li><a href="#">家用电器</a></li>
<li><a href=“#”>手机数码</a></li>
……
1、先定义共有样式:<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/" type="text/css" />
三类应用样式的方式
内部样式表
外部样式表
行内样式表
如何应用样式3-3
<li>
<a href=""#" style="color:red;font-size:10px;">日用百货</a>
</li>
单独定义某个元素的样式,灵活方便。但因为内容与样式混写在一起,应尽量少用或不用
各类样式有继承
各类样式的优先级
浏览器默认设置
外部样式表文件
内部样式表
行内样式表
ID选择器
类选择器
标签选择器
样式的优先级3-1
由低到高,“近者优先”原则