`
gstarwd
  • 浏览: 1525814 次
  • 性别: 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 那样的其它类型的页面。

分享到:
评论

相关推荐

    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的新特性,如动画...

    js+css3文字上下滚动切换动画特效

    它结合了JavaScript(js)的编程逻辑与CSS3的新特性,为网页的文字展示带来了生动且富有创意的变化。 首先,我们来了解JavaScript(js)的作用。JavaScript是一种广泛用于网页和应用开发的脚本语言,它能够为静态...

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

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

    CSS美化网页文字1.pdf

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

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

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

    css3文字震动破碎特效

    此外,我们还看到`fonts`目录,这可能包含了自定义字体文件,使得文字具有独特的视觉风格。CSS3支持多种字体格式,如`.ttf`(TrueType字体)、`.woff`(Web Open Font Format)等,可以通过`@font-face`规则引入,...

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

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

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

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

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

    在CSS中,隐藏多余文字是常见的需求,尤其在网页布局和设计中,有时需要限制文本显示的长度。本文将详细探讨几种有效的方法来隐藏超出容器范围的文字。 首先,使用`text-indent:-9999px;`是一种常见方法,它可以将...

    CSS文字背景图

    而"CSS文字背景图"这个主题,特别指的是利用CSS技术来为文字添加背景图像或者图标,使得文本更加美观、易读且具有视觉吸引力。在给定的"font-awesome-4.3.0"压缩包中,包含了一套流行的图标库——Font Awesome。 ...

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

    在网页设计中,有时我们需要隐藏或控制元素中的多余文字,以保持页面的整洁和美观。本文将探讨四种CSS方法来实现这一目标,尤其关注在不同浏览器下的兼容性和使用场景。 首先,我们来看第一种方法——使用`text-...

    CSS3实现立体文字动态文字特效.zip

    标题中的“CSS3实现立体文字动态文字特效”指的是利用CSS3的新特性来创建具有三维立体感和动态效果的文字。在现代网页设计中,这种技术能够为网页增添视觉吸引力,提高用户体验。下面将详细介绍CSS3中与立体文字和...

    divcss隐藏内容样式方法PPT课件.pptx

    在网页设计中,CSS(Cascading Style Sheets)是...总的来说,理解和掌握这些CSS隐藏技巧对于创建响应式、高性能的网页至关重要。通过合理运用,我们可以实现更高效、更美观的网页设计,同时优化内容的呈现和交互体验。

    CSS教程:CSS让网页文字自动隐藏

    网页制作Webjx文章简介:文字隐藏应用广泛,但常用的方法没有什么亲和力。 文字隐藏应用广泛,但常用的方法没有什么亲和力。常用文字隐藏方法的缺陷:1、display:none这种方法搜索引擎可能认为被隐藏的文字属于垃

    css3 transform 14种侧边栏导航的隐藏和显示动画效果

    总的来说,掌握CSS3的`transform`属性以及相关的CSS和JavaScript技巧,对于创建现代、动态的网页界面至关重要。这14种侧边栏导航动画效果的实现,不仅可以提升用户体验,也是展示开发者技能和创造力的好机会。通过...

    针对各种版本的浏览器隐藏CSS的九大技巧

    本文将深入探讨《针对各种版本的浏览器隐藏CSS的九大技巧》,旨在帮助开发者更好地掌握这一技术,确保网页在各种浏览器环境下均能呈现最佳效果。 ### 一、利用`@import`进行条件加载 `@import`规则允许在一个样式...

Global site tag (gtag.js) - Google Analytics