`
gstarwd
  • 浏览: 1547658 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

网页技巧:具有亲和力的CSS隐藏文字方法

阅读更多

一个新的,更加具有亲和力的CSS隐藏文字方法介绍,说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补。实用性一般,但是这个方法挺新颖的。

1.display:none;的缺陷

  • 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
  • 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。

2. visibility: hidden ;的缺陷
这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间

3.overflow:hidden;一个比较合理的方法 .texthidden
{
display:block;/*统一转化为块级元素 */
overflow: hidden;
width: 0;
height: 0;
}
就像上面的一段CSS所展示的方法,将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述一、二方法中的缺陷,也达到了隐藏内容的目的。

术语:
可访问性(Accessibility)
是使残疾人更容易地使用应用程序的惯例。
1990 年的美国残疾人法案(The American Disabilities Act)
1996 年的电信法案(The Telecommunications Act)
1998 年的康复法案修正案(Rehabilitation Act Amendments)508 条款 !
万维网联盟(W3C)的 Web 可访问性倡议(Web Accessibility Initiative(WAI))
这些都是可访问性标准。在 Law and disabilities页面上可获得更多信息。

屏幕阅读器(Screen Reader)
是为视觉上有障碍的人设计的读取屏幕内容的程序。

可用性(Usability)
使每个人都更容易地使用应用程序的惯例。可访问性是可用性中的一类。

Web 浏览器(Web Browser)
可以显示 Web 页面的任何程序。大多数 Web 浏览器可以显示 HTML 页面,但有些(诸如移动电话中的浏览器)可能只显示诸如 WML 或 cHTML 那样的其它类型的页面。

分享到:
评论

相关推荐

    css3文字特效_css3火焰文字_css3文字渐变代码

    本文将深入探讨“CSS3文字特效”,特别是“CSS3火焰文字”以及“CSS3文字渐变代码”的实现方法。 一、CSS3文字特效基础 CSS3文字特效主要依赖于其新增的属性和功能,如文本阴影(text-shadow)、文本描边(text-...

    CSS隐藏多余文字

    css 隐藏多余的文字,许多网站开发的时候,都带有新闻动态模块,或者其他信息模块,有时候显示出的列表,不需要显示出所有信息,就用css 控制一下就Ok 了

    CSS文字组成肖像插图网页特效.rar

    【标题】:“CSS文字组成肖像插图网页...综上所述,"CSS文字组成肖像插图网页特效.rar"的实现涉及到CSS的核心知识和高级技巧,包括布局、颜色处理、动画以及性能优化等多个方面,对于提升网页的视觉体验具有重要意义。

    css9种设计技巧

    本文将详细介绍9种实用的CSS设计技巧,帮助提升网页的视觉效果和用户体验。 1. 取消下划线:在现代网页设计中,为了使链接看起来更简洁,常常会去除文本链接的下划线。这可以通过在CSS中设置`text-decoration`属性...

    css3文字上下滚动切换特效.zip

    通过`$(selector).animate()`方法,我们可以指定元素的CSS属性随着时间的推移发生变化,从而实现文字的平滑滚动。 三、实现步骤 1. **HTML结构**:首先,我们需要创建HTML结构,包含需要滚动的文字。可以使用`<p>`...

    js效果:CSS实现超级炫酷的流光按钮效果;在网页中实现文字的一个一个出现

    本文将深入探讨如何利用CSS实现超级炫酷的流光按钮效果以及如何在网页中让文字逐个出现,为用户提供更丰富的视觉体验。 首先,我们来讨论如何通过CSS实现流光按钮效果。这种效果通常涉及到CSS3的新特性,如动画...

    CSS3文字旋转特效

    在网页设计领域,CSS3(层叠样式表第三版)为开发者提供了许多强大的新特性,其中之一就是动画效果。本文将详细讲解如何利用CSS3实现文字旋转特效,这在...熟练掌握这些技巧,将有助于提升网页的视觉吸引力和用户体验。

    CSS 凹陷 文字 css 样式

    在本主题“CSS 凹陷文字”中,我们将深入探讨如何利用CSS技术创建具有凹陷效果的文字,为网页增添视觉吸引力。这种效果可以增加文本的立体感,使页面元素更显独特。 首先,我们需要理解CSS中的盒模型,它是CSS布局...

    CSS代码实现背景透明而文字不透明

    总的来说,实现CSS背景透明而文字不透明的方法有多种,关键在于理解各种CSS属性和技巧的兼容性,以及如何根据浏览器特性选择合适的方法。通过灵活运用 rgba()、opacity、filter 和渐变等工具,我们可以创建出既美观...

    css3文字特效

    在CSS3中,文字特效是通过一系列高级特性来实现的,这些特性为网页设计者提供了丰富的创意空间,让文本不仅仅是信息的载体,还能成为视觉焦点。以下是一些关键的CSS3文字特效及其详细解释: 1. **文本阴影(text-...

    Arctext弧形文字效果插件(CSS3&jQuery)

    "Arctext弧形文字效果插件(CSS3&jQuery)"正是这样一款工具,它结合了现代Web开发中的两种关键技术——CSS3和jQuery,来实现文字沿弧线排列的动态效果,为网站增添独特的视觉吸引力。 首先,让我们深入了解一下CSS...

    CSS3文字阴影实现乳白文字效果.zip

    "CSS3文字阴影实现乳白文字效果.zip"这个压缩包显然包含了一个示例,演示如何使用CSS3的`text-shadow`属性来创建具有乳白色质感的文字效果。 `text-shadow`属性的工作原理是通过定义阴影的位置、颜色和模糊半径来...

    css3文字颜色渐变和文字阴影特效

    在现代网页设计中,CSS3已经成为不可或缺的一部分,它提供了许多新的特性和功能,使得网页的视觉表现力更加强大。本主题聚焦于CSS3中的两个重要特性:颜色渐变和文字阴影,它们能够为网页的文字元素增添动态和深度感...

    CSS美化网页文字1.pdf

    网页的美观性在很大程度上取决于文字的呈现,CSS(层叠样式表)正是用来美化网页内容,包括文字的重要工具。本文将深入讲解如何使用CSS来美化网页中的文字,主要涵盖字体设置和字号调整两个方面。 首先,我们来看...

    课题_CSS隐藏多余文字的几个方法 (2).pdf

    标题中的“CSS隐藏多余文字的几个方法”是指在网页设计中,如何利用CSS技术来处理文本超出容器显示范围的情况,确保页面布局的整洁和用户体验的良好。以下是对这些方法的详细解释: 1. **使用`text-indent:-9999px`...

    CSS隐藏文字的6种方法

    本文将详细探讨六种使用CSS隐藏文字的方法,这些方法已经在多种浏览器中经过测试,确保兼容性。隐藏文字有时是为了提升用户体验或者优化页面结构,但同时也需要考虑SEO(搜索引擎优化)和无障碍访问的需求。 首先,...

    纯css3艺术文字样式效果代码

    总之,CSS3为网页设计师提供了丰富的工具,可以创造出各种各样的艺术文字效果。通过深入理解并熟练掌握这些特性,你将能够为你的网站或项目增添独特的视觉魅力。同时,不断探索和实践,将帮助你在IT领域保持与时俱进...

    纯css3 transform旋转属性创建立体纹理文字特效

    CSS3是 Cascading Style Sheets(层叠样式表)的第三个主要版本,它引入了许多新特性,大大增强了网页设计的灵活性和表现力。其中,`transform`属性允许我们对元素进行2D和3D变换,包括旋转、缩放、平移等操作,从而...

    web期末大作业:基于html+css+js制作深圳大学网站(13页) 学校班级网页制作模板 学生静态HTML网页源码

    - **丰富的内容**: 主页采用复杂的CSS布局技巧,使得页面更加生动活泼,色彩搭配和谐,同时顶部和底部的导航栏具有良好的可用性和美观性。 ##### 2. 技术栈 - **HTML5**: 标准化的标记语言,用于构建网页结构。 - ...

    javascript与css实现文字闪烁

    在网页设计中,动态效果是吸引用户注意力的重要手段之一,其中文字闪烁效果就是一个常见的例子。本文将深入探讨如何使用JavaScript和CSS这两种强大的Web技术来实现文字闪烁的效果。 首先,我们来了解一下CSS...

Global site tag (gtag.js) - Google Analytics