万博体育官网网址 CSS

介绍

层叠样式表(CSS)允许您修改现有HTML元素的特征所有Web浏览器都有一个内置样式表,用于定义所有元素的默认样式例如,当浏览器看到时<P>tag,它知道跳过一行并开始一个新的部分,因为这就是内置样式表指示它做的事情该的<strong><表>, 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文件)中定义的样式会覆盖浏览器默认值内部样式(通常在<HEAD>页面的一部分)覆盖外部样式元素样式(直接应用于元素)会覆盖内部样式它比这更复杂,但这些是一般规则但最顶层的控制始终在于最终用户他们可以定义将始终覆盖或禁用任何其他定义样式的用户样式。

重要

最终用户总是可以最终控制他们查看的页面的样式为了便于访问,我们需要定义万博体育网站样式,同时也允许我们的设计灵活地进行最终用户定制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可视化隐藏,但为屏幕阅读器用户提供了有用的信息。

注意

使用CSS隐藏万科体育网站内容的技术可以在中找到CSS in Action:屏幕阅读器用户的隐形内容

用CSS呈现内容和含义

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

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

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

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

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

标题示例

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

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

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

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

正确的标记是:

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

重点示例

标记中没有强调下面所判的“强调”一词它只是风格显得大胆。

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

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

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

正确的标记是:

<p>请记住<strong>强调</ strong>重要的文字。</ p>