听觉样式表可把语音合成与音响效果相组合，使用户可以听到信息，而无需进行阅读。
听觉呈现可用于：
视觉能力低弱的人士
帮助用户学习阅读
帮助有阅读障碍的用户
家庭娱乐
在汽车中使用
听觉呈现通常会把文档转化为纯文本，然后传给屏幕阅读器（可读出屏幕上所有字符的一种程序）。
听觉样式表的一个例子：
h1, h2, h3, h4
{
voice-family: male
richness: 80
cue-before: url("beep.au")
}
上面的例子可以让语音合成器演奏一段声音，然后用男性的声音读出标题。
比如做一个导航条首先搭建基本机构：
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">年表</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">画廊</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">地图</a></li>
</ul>
</div>
这时候看到的一个纵列文字前带圆点的列表
然后用css进行美化：
#menu {
background-color: #6282ac
height: 35px
width: 570px
position: relative
}
定义菜单的宽，高，颜色及定位方式。
#menu ul {
list-style-type: none
}
去掉文字下划线。
#menu li {
float: left
display: block
width: 60px
height: 31px
margin-top: 2px
margin-right: 6px
margin-bottom: 2px
margin-left: 6px
line-height: 31px
text-align: center
background-repeat: repeat-x
border: 1px solid #FFFFFF
}
定义“float: left”使列表项横向排列，设置高与行高使链接文字垂直居中。
menu a {
font-family: Arial, Helvetica, sans-serif
font-size: 10px
background-image: url(../images/b.gif)
display: block
background-repeat: repeat-x
}
定义链接的字体及背景
#menu a:hover{
background-image: url(../images/a.gif)
display: block
background-repeat: repeat-x
}
定义a的伪类实现鼠标点击时的背景变化
一些CSS属性只设计了某些媒体。例如"voice-family"属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如，"font-size"属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans - serif字体比较适合在屏幕上阅读，而serif字体更容易在纸上阅读。
