万博体育官网网址 CSS

介绍

层叠样式表(CSS)允许您修改现有HTML元素的特征所有web浏览器内置的样式表,它定义了所有元素的默认样式例如,当浏览器看到时<P>tag,它知道跳过一行并开始一个新的部分,因为这就是内置样式表指示它做的事情该<强><表>, and every other HTML tag is defined in this style sheet; their size, color, position, and other characteristics are all defined within it当页面作者定义自己的样式时,他们可以覆盖此内置样式表并告诉浏览器以不同的方式显示元素。

CSS被称为“级联”,因为应用样式的方式有层次结构或优先级:

样式表的级联效果的例证

外部样式表中所定义的样式(通常一个。css文件)覆盖默认的浏览器内部样式(通常在<头>部分页面)覆盖外部风格和元素样式(直接应用到一个元素)覆盖内部风格有比这更复杂一点,但是这些是一般规则但最顶层的控制始终在于最终用户他们可以定义将始终覆盖或禁用任何其他定义样式的用户样式。

重要

最终用户总是终极控制页面的样式视图为了便于访问,我们需要定义万博体育网站样式,同时也允许我们的设计灵活地进行最终用户定制web开发人员和设计师的想法控制显示的内容只是一个错觉。

So why would an end user define their own styles? A user with低视力可以定义一个更大的文本大小,允许他们阅读文本内容一个用户色觉障碍or low vision might override page colors so they can perceive the page content in certain colors or with high contrast一个用户认知或学习障碍可能会覆盖定位,字体,图像等确保更基本的演示简而言之,原因有很多用户可能覆盖违约或将土体的风格此外,屏幕阅读器几乎忽略了所有CSS。

将内容与演示文稿分开

CSS的主要好处之一是,它允许作者分离内容和表示。内容表示构成文档核心的文本,图像和其他元素。介绍表示内容的显示方式内容应该是在标记中定义,在HTML页面的报告应该在CSS中定义通过这样做,如果有人禁用或覆盖CSS,内容应该仍然是完全的。

请考虑禁用CSS的此页面的以下屏幕截图。

这个页面的截图风格禁用只显示一个图像的纯文本

而用页面看起来不像你当前浏览的页面,所有的内容都是礼物此外,因为此页面使用标记而不是样式中的标题和列表的正确语义,所以当禁用样式时这些语义仍然存在用户更改或覆盖的任何样式都将应用于底层内容,无论用户是否进行了修改,这些内容都应该保留。

控制可视化布局

CSS可以很好地控制页面中元素的位置这意味着底层源代码顺序(确定屏幕阅读器阅读顺序和键盘导航顺序)可能与视觉布局和演示顺序不匹配如上所述,如果你分离内容和表示,潜在的内容/标记顺序就变得非常重要应该是合乎逻辑的和直观的,通常应该匹配或类似于视觉呈现秩序——大约从左到右,从上到下。

用CSS隐藏内容

几乎在所有情况下,如果内容在页面中以可视方式呈现,则应该是屏幕阅读器用户类似地,向屏幕阅读器用户呈现未在页面中以视觉方式呈现的内容是非常罕见的然而,例外,主要可能有意义的视觉的东西,但对于一个简洁的解释或屏幕阅读器用户指令可能有用。

If you view the previous screenshot of the unstyled version of this page, you will see a few text items for screen reader users that are not presented visually - a text label for the search field, a "Main Navigation" heading previous to the site navigation, and "You are here:" text previous to the breadcrumbs这些区域都用CSS可视化隐藏,但为屏幕阅读器用户提供了有用的信息。

请注意

隐藏的技术万博体育官网网址内容中可以发现使用CSSCSS in Action:屏幕阅读器用户的隐形内容

用CSS呈现内容和含义

与使用CSS隐藏内容相反,有时内容或含义仅使用CSS呈现这可能包括使用CSS来执行以下操作:

  • 定义呈现内容的背景图像
  • 控制布局或演示的方式影响意义
  • 单独使用颜色来传达意义
  • 使用CSS生成内容

这些技术通常应该避免但是在CSS确实提供信息,内容或含义的情况下,必须提供替代方案。

例如,CSS背景图像不能直接替代文本因此,如果图像传达内容,则应将其放入内容中IMG元素与适当的ALT属性值如果无法做到这一点,您可以使用隐藏的屏幕外文本将这些图像的内容传达给无法看到它们的用户。

使用CSS,文本的样式可以看起来像标题言语可以显得强调(好像是<强>要么<EM>元素已被使用)即使它们只是以不同的颜色呈现或者显示为粗体或斜体(没有附带的语义标记)总是使用本地HTML标记提供必要的语义内容和意义,然后使用CSS来增强和改变默认样式。

标题示例

下面的句子似乎是一个标题,但它只是常规文本样式看起来像一个标题。

这不是一个标题它看起来就像一个。

生成此示例的不正确标记如下:

<p style =“font-weight:bold; font-size:200%; font-family:Arial;”>这不是标题它看起来就像一个. < / p >

正确的标记是:

<标题>这是一个标题,它看起来像一个。< / h1 >

重点示例

下面的判处“强调”一词并不是强调标记中只是风格的大胆。

“请记住注重text that is important."

生成此示例的不正确标记如下:

<p>请记住<span style =“font-weight:bold;”>强调</ span>重要的文字。</ p>

正确的标记是:

< p >请记得<强>强调< /强>文本是很重要的。< / p >