手册
目录
收藏404
分享
阅读4395
更新时间2025-07-16
良好的 CSS 样式设计应帮助所有用户更方便地使用你的网站,包括那些有视觉或行动障碍的用户。
CSS 中的 :focus 伪类用于选择并设置获得焦点的元素的样式。
请始终使用 :focus 状态,以便键盘用户和屏幕阅读器用户可以清楚地看到当前哪个元素处于激活状态。
a:focus,<br></br>
button:focus,<br></br>
input:focus {<br></br>
outline: 2px solid #005fcc;<br></br>
outline-offset: 2px;<br></br>}
运行实例 »点击 "运行实例" 按钮查看在线实例
始终使用高对比度的文本与背景颜色,以确保内容的可读性。
body {<br></br>
background-color: #ffffff;<br></br>
color: #000000;<br></br>}
运行实例 »点击 "运行实例" 按钮查看在线实例
body {<br></br>
background-color: #eeeeee;<br></br>
color: #cccccc;<br></br>}
运行实例 »点击 "运行实例" 按钮查看在线实例
不要在没有提供其他可见焦点样式的情况下移除轮廓线(outline)。
button:focus {<br></br>
outline: none;<br></br>}
运行实例 »点击 "运行实例" 按钮查看在线实例
button:focus {<br></br>
outline: 2px solid blue;<br></br>}
运行实例 »点击 "运行实例" 按钮查看在线实例
使用语义化元素,而不是对所有内容都使用非语义标签如 <div>。
nav {<br></br>
background-color: #333333;<br></br>
color: white;<br></br>}
<br></br>
aside {<br></br>
background-color: #333333;<br></br>
color: white;<br></br>}
运行实例 »点击 "运行实例" 按钮查看在线实例
CSS 中的 prefers-reduced-motion 媒体特性允许你检查用户是否希望减少动画等动态效果。
一些用户对动态效果敏感,更倾向于使用较少动画的网站。你可以使用该媒体查询在需要时关闭或降低动画效果:
@media (prefers-reduced-motion: reduce) {<br></br>
* {<br></br>
animation: none !important;<br></br>
transition: none !important;<br></br>
}<br></br>}
运行实例 »点击 "运行实例" 按钮查看在线实例
你将在后续章节中学习更多关于媒体查询的内容。
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.9万人学习
共29课时
62.3万人学习
共25课时
39.7万人学习
共43课时
73.6万人学习
共25课时
62.2万人学习
共22课时
23.2万人学习
共28课时
34.4万人学习
共89课时
127万人学习