级联样式表_级联样式表| 第1部分

级联样式表

级联样式表(CSS) (Cascading Style Sheets (CSS))

CSS (Cascading Style Sheets) is a computer language used to describe the presentation of HTML and XML documents. The CSS standard defines are published by the World Wide Web Consortium (W3C). Introduced in mid 1990, CSS is commonly used in web design and well supported by web browsers in the 2000s. One of the main goals of CSS is to allow the formatting of documents out. For example it is possible to describe only the structure of an HTML document, and describe the entire presentation in a separate CSS stylesheet. The styles are applied at the last moment in the web browser of visitors viewing the document. This separation provides a number of benefits, to improve accessibility, switching of presentation, and reduce the complexity of the architecture of a document.

CSS(层叠样式表)是一种计算机语言，用于描述HTML和XML文档的表示形式。 CSS标准定义由万维网联盟(W3C)发布。 CSS于1990年中期推出，通常用于网页设计中，并在2000年代得到了网页浏览器的良好支持。 CSS的主要目标之一是允许格式化文档。 例如，可以仅描述HTML文档的结构，并在单独CSS样式表中描述整个演示文稿。 样式是在查看文档的访问者的网络浏览器中的最后一刻应用的。 这种分离提供了许多好处，可以改善可访问性，演示文稿的切换并降低文档体系结构的复杂性。

Thus, the benefits of CSS are numerous:

因此，CSS的好处很多：

• The document structure and presentation can be handled in separate files.
  可以在单独的文件中处理文档结构和演示文稿。
• The design of a document is a first time without worrying about the presentation, which can be more effective.
  文档的设计是第一次，无需担心演示文稿，这样会更有效。
• In the case of a website, the presentation is standardized: documents (HTML pages) refer to the same style sheets. This feature allows a more rapid fitness looks.
  对于网站，表示是标准化的：文档(HTML页面)指的是相同的样式表。 此功能可以使健身更快速。
• A single document can provide a choice of style sheets, eg for printing and one for reading on screen. Some browsers allow the visitor to choose a style among many.
  单个文档可以提供样式表的选择，例如用于打印的样式表和用于在屏幕上阅读的样式表。 一些浏览器允许访问者在许多样式中进行选择。
• HTML is considerably reduced in size and complexity, as it contains more tags or attributes of presentation.
  HTML包含更多的表示形式的标签或属性，因此在大小和复杂性上已大大降低。

Decline presentation styles depending on the receptor

取决于接收器来降低呈现样式

CSS sets the rendering of a document according to the media reproduction and its capabilities (type of monitor or voice device), those of the browser (text or graphics), and the preferences of its user.

CSS根据媒体复制及其功能(监视器或语音设备的类型)，浏览器的功能(文本或图形)以及用户的喜好来设置文档的呈现方式。

The stylesheets can be differentiated for the following media:

可以针对以下媒体区分样式表：

• All: whatever the media
  全部：任何媒体
• Screen: screen desktop
  屏幕：屏幕桌面
• Print: Printing Paper
  打印：打印纸
• Handheld: very small screens and limited capabilities to customers
  手持式：屏幕很小，客户功能有限
• Projection when the document is projected
  投影文件时的投影
• TV: When the document is displayed on a television type device
  电视：在电视类型的设备上显示文档时
• Speech: for rendering via a speech synthesizer (replacing aural, originally set by then depreciated CSS2.0 CSS2.1)
  语音：用于通过语音合成器进行渲染(替换听觉，最初由折旧CSS2.0 CSS2.1设置)

Other media types are theoretically under the CSS2.1 specification, but are not implemented by user agents: Braille and embossed Braille for the tablets and embossers, and tty TTY.

理论上，其他媒体类型均在CSS2.1规范下，但未由用户代理实现：用于平板电脑和压花器的盲文和浮雕盲文，以及tty TTY。

In each medium, styles of presentation determined by the author of the document are combined with the default user agent and those from the user’s preferences and its own configuration. The capabilities of the receiver can be taken into account by the authors, intended for user agents that implement the CSS3 module. It allows conditioning the inclusion of style sheet constraints on including the resolution or color reproduction capability.

在每种媒介中，由文档作者确定的演示样式都与默认用户代理以及来自用户首选项及其自身配置的样式结合在一起。 作者可以考虑接收器的功能，以供实现CSS3模块的用户代理使用。 它允许在包含分辨率或颜色再现功能时限制样式表约束的包含。

Allow the cascade of styles

允许样式的级联

The “cascade” is the combination of different sources of styles applied to the same document, depending on their respective priority. Cascade modes can be combined:

“层叠”是应用于同一文档的不同样式来源的组合，具体取决于它们各自的优先级。 级联模式可以组合：

• Origin of styles, from the user agent, author and user. The higher priority given to style the user is a major factor in the accessibility of the documents presented using CSS.
  样式的起源，来自用户代理，作者和用户。 赋予用户样式的较高优先级是使用CSS呈现的文档的可访问性的主要因素。
• By media: a generic style sheet may apply to several media reproduction (screen display, printing, projection) and combined with leaf-specific media.
  按媒体：通用样式表可应用于多种媒体复制(屏幕显示，打印，投影)，并与特定于叶子的媒体结合使用。
• Depending on the architecture of a set of web documents: a generic stylesheet can be applied to all pages of a website, be combined with leaves of each item thereof, and that with styles unique to this or that specific page.
  取决于一组Web文档的体系结构：通用样式表可以应用于网站的所有页面，可以与网站的每个项目的叶子以及该页面或该特定页面特有的样式结合使用。
• Depending on the architecture of the leaves themselves: an external stylesheet to the document can be combined with an internal style sheet and styles applied directly to each of its components (styles “online”). A stylesheet can also import one or more other outer leaves.
  根据叶子本身的体系结构：文档的外部样式表可以与内部样式表结合使用，并且样式可以直接应用于其每个组件(样式为“在线”)。 样式表还可以导入一个或多个其他外部叶子。

Technical principles and syntax of CSS

CSS的技术原理和语法

Renders a styled document is determined by the box design and flow. The CSS rendering engine makes a “formatting structure” reflecting the document’s logical tree. Each element of this structure generates one or more areas with display properties or rendering customizable voice. Viewing or reading from the stream carried boxes successively generated for each item as it appears in the linear order of the formatting structure.

渲染样式化的文档由框的设计和流程决定。 CSS渲染引擎创建了一个“格式结构”，以反映文档的逻辑树。 此结构的每个元素都会生成一个或多个具有显示属性或呈现可自定义语音的区域。 从流中查看或读取随身携带的盒子，这些盒子是按照格式结构的线性顺序出现的，它们是为每个项目连续生成的。

According to the scenarios, these different types of boxes:

根据方案，这些不同类型的盒子：

• May have properties of margins, border, background, width or height, etc. In a speech delivered, equivalent properties to determine breaks in the reading before or after the content, select a voice, or regulate its flow volume.
  可能具有边距，边框，背景，宽度或高度等属性。在所传递的语音中，等效属性用于确定内容前后的读数中断，选择语音或调节其流量。
• Can be moved from their default position in the stream, or have a particular behavior in this (permit issued in columns adjacent boxes overlap with neighbors, or be hidden, for example).
  可以从流中的默认位置移动，或在其中具有特定的行为(例如，在相邻框中与相邻行重叠的列中发出的许可，或被隐藏)。

CSS — Properties and Values

CSS —属性和值

Characteristics applicable to CSS boxes are expressed as couples property: value. The properties are expressed using words such as English-tools “width” (width), “font-size” (size of the font) or “voice-volume” (volume rendering vocal). Values can be expressed as appropriate using standard units elsewhere, or Keyword own CSS. For example, a background color or text can be expressed using the RGB model or keywords black, blue, fuchsia, etc.

适用于CSS盒的特征表示为couples属性：值。 使用诸如英语工具“ width”(宽度)，“ font-size”(字体的大小)或“ voice-volume”(音量渲染人声)之类的词来表达属性。 可以使用其他位置的标准单位或关键字自己CSS适当地表达值。 例如，可以使用RGB模型或关键字black，blue，fuchsia等表示背景色或文本。

CSS properties have been established as a compromise between two opposing constraints: easy reading style sheets by user agents by multiplying the individual properties, or help them write the authors by using a smaller number of combined properties. For example, the position of a background image is determined by a single property (background-position), combining the two values of abscissa and ordinate, and not by two distinct properties. Similarly, there are shorthand properties allow authors to simplify the writing of a series of properties: font shorthand allows, for example, to summarize in a single rule all font properties, size, row height, snack, fat and italics. However, using the ‘/’ character makes it much more complex parsing stylesheets by user agents.

CSS属性已被建立为两个相对约束之间的折衷：用户代理通过乘以单个属性来轻松阅读样式表，或通过使用较少数量的组合属性来帮助他们编写作者。 例如，背景图像的位置由单个属性(背景位置)确定，该属性将横坐标和纵坐标的两个值组合在一起，而不是由两个不同的属性确定。 同样，也有速记属性允许作者简化一系列属性的编写：例如，字体速记允许在一个规则中总结所有字体属性，大小，行高，零食，脂肪和斜体。 但是，使用'/'字符会使用户代理解析样式表变得更加复杂。

Blocks of rules and selectors

规则和选择器块

The properties are grouped in blocks of rules, delimited by curly braces {}. Each block is preceded by a selector identifying the structural elements to which the affected properties should be applied.

这些属性按规则块分组，并由大括号{}分隔。 每个块之前都有一个选择器，用于标识应将受影响的属性应用到的结构元素。

Although this CSS code does not describe the entire presentation of a document, it is itself a style sheet on its own. It sets for the elements p (paragraph), the size parameter to the value 110% and the parameter value Helvetica font, or if Helvetica is not available, a generic font without serifs.

尽管此CSS代码未描述文档的整个呈现方式，但它本身就是样式表。 它将元素p(段落)，size参数设置为值110％和参数值Helvetica字体，或者如果Helvetica不可用，则设置不带衬线的通用字体。

“p” is an example of a simple selector. Other simple selectors can target more specifically one or more items using the IDs and classes assigned to structural elements: the identifier (id attribute) are used to characterize a single element (a menu, a word etc.), while the classes (class attribute) are used to characterize a set of elements (like menus organized in a similar manner).

“ p ”是一个简单选择器的示例。 其他简单的选择器可以使用分配给结构元素的ID和类来更具体地针对一个或多个项目：标识符(id属性)用于表征单个元素(菜单，单词等)，而类(class属性) )用于表征一组元素(例如以类似方式组织的菜单)。

Contextual selectors, formed by combination of simple selectors, allow to target elements based on their position in the document: img has not designated such that the images in the links.

由简单选择器组合而成的上下文选择器允许根据元素在文档中的位置来定位元素： img未指定为链接中的图像。

To enable the cascade of styles, rules of calculation of specificity allows the CSS rendering engine to determine the priority to be applied concurrently to different selectors to the same element, and sort and rules apply to it. This calculation is based on the sum of the values given to different simple selectors forming the contextual selector:

为了实现样式的级联，特异性计算规则允许CSS呈现引擎确定要同时应用于同一元素的不同选择器的优先级，并对其应用排序和规则。 此计算基于提供给构成上下文选择器的不同简单选择器的值之和：

• Each type has a simple switch priority value: 0,0,0,1 for an item for a class 0,0,1,0, 0,1,0,0 a unique id.
  每种类型都有一个简单的开关优先级值：对于类别0,0,1,0、0,1,0,0的项，唯一的ID为0,0,0,1。
• The words! Important added to the rule gives a specificity of 1,0,0,0.
  话！ 规则中添加的“重要”给出了1,0,0,0的特异性。
• Origin of the style is ultimately decisive: a style attribute present in the HTML document takes precedence over other sources of author styles to allow overloading of local styles common to a series of web pages. On the other hand, at equal priority, a user style trumps style copyright, which overrides the default style of the user agent.
  样式的起源最终是决定性的：HTML文档中存在的样式属性优先于其他作者样式来源，以允许重载一系列网页通用的本地样式。 另一方面，在相同优先级下，用户样式胜过样式版权，该版权将覆盖用户代理的默认样式。

Style sheets are text documents, whose syntax is simple and intuitive to allow their reading and writing as well as directly by the author using a software.

样式表是文本文档，其语法简单而直观，以允许其读写，也可以由作者使用软件直接进行。

Continued…

继续…

翻译自: https://www.eukhost.com/blog/webhosting/cascading-style-sheets-part-1/

级联样式表