十一、间隔内容
本章讨论在内联元素周围放置水平和垂直空间的设计模式，内联元素可能包含文本、图像、对象、控件等等。本章包含以下设计模式:
- 间距显示了如何分隔文本和内容。它只是将内置于 CSS 中的许多属性组合在一起，在块、文本和内容周围和之间放置空间。
- Blocked 展示了如何将一个内联元素呈现为一个块元素。这是一个非常重要的设计模式，通常与其他模式结合使用。
- Nowrap 展示了如何防止浏览器换行。
- 展示了如何呈现文档中的空白，而不是折叠它。
- 代码展示了如何标记计算机代码、内联呈现代码、以块的形式显示代码、保留空白以及防止代码换行。
- 填充内容展示了如何在内联内容周围留出空间来强调内容。
- Inline Spacer 展示了如何在一行中插入一个水平分隔符，以精确地放置内容之间的距离。
- 内嵌装饰展示了如何在一行中插入一个装饰。装饰是风格，而不是内容。它允许您将彩色背景、纹理背景或背景图像插入到流程中。你可以给它加上边框。您可以使用它来分开内容，重叠前面的内容，以及重叠后面的内容。
- 换行符展示了如何将四种不同类型的换行符插入到你的文档中，这些换行符可以增加行间的额外空间或者缩短行间的距离。
- 行内水平标尺展示了如何使用行内元素插入水平标尺。您可以使用图像、边框、边距等来设置水平标尺的样式。这使您可以在行与行之间留出额外的空间，重叠前面的行，并重叠后面的行。一条内联水平线特别有用，因为你可以在任何地方使用内联元素。HTML 的水平标尺是一个块元素，样式选项有限。
间距
HTML
`
Spacing
This paragraph is normal. It has no indentation, margins, padding, letter spacing, word spacing, text justification, or line spacing.
**
**This paragraph has many forms of spacing. The first line of text
is indented. Margins indent the paragraph on all sides. Padding puts space
between the paragraph and its borders. Letters have 1 extra pixel of space between
them. Words have 2 extra pixels of space between them. Text is justified, which
adds extra space between words to align text to the left and right edges. And
lines have extra spacing between them.
CSS
.elegant { margin-left:40px; margin-right:80px; margin-top:30px; margin-bottom:30px; padding-top:25px; padding-bottom:25px; letter-spacing:1px; word-spacing:2px; line-height:1.7em; text-indent:40px; text-align:justify; border-top:1px solid black; border-bottom:1px solid black; }
间距
受阻
HTML
`
Blocked
The Blocked design pattern displays an inline element as a block element that can be styled in every way as a block element. ** **This is an inline element displayed as a block. Its first line is indented and it has collapsing vertical margins.
`CSS
`.blocked { display:block; text-indent:2em; margin-top:5px; }
.vcard { border:4px solid green; padding:10px; font-style:italic;}
.vcard .org { display:block; }
.vcard .street-address { display:block; }
.vcard .adr { display:block; }
.vcard .email { display:block; }`
受阻
【nowrap】。
HTML
`
Nowrap
You can keep a phrase together using nowrap, such as
You can use nowrap to keep some browsers from breaking a hyphenated word
across two lines, such as the following word:
<span **class=“nowrap”>**super-cali-fragilistic-expi-ali-docious!
You can keep together a small code snippet containing a space, such as
<br />.
Notice how it breaks across two lines when nowrap
is not applied to it: <br />.
**
**Be aware that nowrapped text can overflow its container. This
does not affect the width of other elements, but it may cause a browser to
display a horizontal scrollbar requiring users to scroll to see the text.
CSS
.nowrap { white-space:nowrap; background-color:gold; }
【nowrap】。
保存下来
HTML
`
Preserved
You can preserve whitespace using <pre>.
You can use white-space:pre to insert line breaks and spaces. ** ** ** **Preserved moves this sentence to a new line and indents it five spaces.
A better approach is to insert <br /> and
**
**You can preserve
whitespace in blocks.
You can preserve **** whitespace in inline elements.
**
**You can turn white-space:pre
<span class=“not-preserved” >on and off
at any time.
CSS
**.preserved { white-space:pre; }** .not-preserved { white-space:normal; }
保存下来
代码
HTML
`
Code
The following code is blocked and preserved:
.blocked { display:block; }
.preserved { white-space:pre; }
.code { font-family:monospace; }
The following inline code uses the Nowrap design pattern: ****a = x(y2 + z3) + 1. This prevents it from being wrapped across lines.
CSS
**.blocked { display:block; }** **.preserved { white-space:pre; }** **.nowrap { white-space:nowrap; }**
代码
填充内容
HTML
`
Padded Content
Padding sets apart text to emphasize it. Left and right padding inserts horizontal space before and after content. Padded content can be
****a letter...→
****a word...→
****a phrase...→
****a paragraph...→ etc.
CSS
`.padded-mild { padding-left:1em; padding-right:1em; line-height:1em; }
.padded-emphasized { padding-left:2em; padding-right:2em; line-height:2em; }
.padded-strong { padding-left:3em; padding-right:3em; line-height:3em; }
.padded-extreme { padding-left:4em; padding-right:4em; line-height:4em; }
.padded-strong-BA { display:block; padding:2em 5em; }`
填充内容
内嵌间隔符
HTML
`
Inline Spacer
Just like you can use <br /> to insert vertical space into content,
you can use an inline spacer to insert and control horizontal space. ** **The inline spacer is a marker element that emphasizes the space in between content. ** **You use it when you do not want to mark up content, but you still want to control the amount of space in between content.
For example, if your page design requires extra space before sentences, it is not a good idea to mark up sentences, because that would prevent you from cutting across sentence boundaries with additional markup. ** **Marking up the first word of a sentence would not be semantically accurate because the extra space separates sentences not words. ** **The inline spacer solves this problem because it does not interfere with other markup. ** **It is also semantically correct because its purpose is to mark up and emphasize space.
`CSS
.space { margin-left:0.5em; }
内嵌间隔符
内嵌装饰
HTML
`
Inline Decoration
- Insert colored** ** decoration.
- Insert patterned** ** decoration.
- Insert imaged** ** decoration.
CSS
`div { font-size:18px; }
.deco-solid { padding-left:40px;
font-size:0.4em; vertical-align:middle; line-height:24px;
margin-left:3px; margin-right:-15px;
background-color:gold; }
.deco-groove { padding-left:10px;
font-size:0.4em; vertical-align:middle; line-height:24px;
border-left:20px groove black; border-right:20px ridge black;
margin-left:3px; margin-right:3px;
background-color:lightgray; }
.deco-spear { padding-left:100px;
font-size:1em; vertical-align:-3px; line-height:24px;
margin-left:3px; margin-right:3px;
background-image:url(“spear.jpg”); background-position:top right; }`
内嵌装饰
换行
HTML
`
Line Break
You can insert a line break anywhere. ** ↑ One-half line break.** ** ↑ Normal line break.** **
↑ Line break plus 10 pixels.** ** ↑ One-and-a-half line break.** ** ↑ Double line break.** **
↑ Triple line break.** ** ↑ Quadruple line break.** **
CSS
`.lb-half { display:block; margin-top:-0.5em; }
.lb-single { display:block; margin-top:0; }
.lb-one-and-a-half { display:block; margin-top:1.5em; }
.lb-double { display:block; margin-top:2em; }
.lb-quad { display:block; margin-top:4em; }
.br10px { line-height:10px; }
.br3 { line-height:3em; }`
换行
内嵌横线
HTML
`
Inline Horizontal Rule
You can insert an inline horizontal rule anywhere.
CSS
`.hr { display:block; margin:0; }
.border { padding-top:1px; margin-top:25px; margin-bottom:0;
width:auto; margin-left:0; margin-right:0;
border-top:4px ridge blue; border-bottom:4px groove blue;
background:none; background-color:yellow; }
.background { padding-top:5px; margin-top:25px; margin-bottom:0;
width:auto; margin-left:76px; margin-right:76px; border:none;
background:repeat-x left center url(“diamond-blue.gif”);
background-color:transparent; }
.combo { padding-top:5px; margin-top:25px; margin-bottom:0;
width:400px; margin-left:auto; margin-right:auto;
border-top:4px ridge blue; border-bottom:4px groove blue;
background:repeat-x left center url(“diamond-blue.gif”);
background-color:white; }`
内嵌横线
十二、对齐内容
本章讨论了将文本和内容与其包含的块水平和垂直对齐的设计模式。这些对齐模式在正常流程中工作，不使用绝对或相对定位。
前三种设计模式水平对齐内容。接下来的三个设计模式垂直对齐内容。最后一个设计模式和本章末尾的例子相当深奥，几乎没有实际应用。我将它们包含在内，以展示内置于内联格式上下文中的强大功能。
- 文本缩进显示如何缩进第一行文本。
- 悬挂缩进展示了如何创建悬挂缩进。
- 水平对齐内容显示了如何将文本和内联内容向左、向右或居中对齐。它还展示了如何对齐文本和内联内容。
- 垂直对齐的内容展示了如何将一个行内元素垂直对齐到其父元素的字体行。这些字体线定义了对齐上下文。
- 垂直偏移内容展示了如何从父元素的基线垂直偏移一个行内元素。
- 下标和上标展示了如何创建下标和上标文本，以及如何在所有浏览器中保持一致。
- 嵌套对齐展示了如何嵌套对齐上下文。
- 高级对齐示例不是一个设计模式，而是一个展示对齐和相对定位如何创建复杂的内联布局的有趣示例。
文本缩进
HTML
`
Text Indent
******text-indent indents the first line of a terminal block element, such as a paragraph, division, heading, list item, or this table cell. ** |
****text-indent does not work on inline elements, such as this span.**** text-indent does work on inline-block elements, such as this span.
CSS
`.text-indent { text-indent:60px; }
.inline-block { display:inline-block; }
/* Nonessential rules are not shown. */`
文本缩进
悬挂缩进
HTML
`
Hanging Indent
**
**A hanging indent uses a negative value for
text-indent and a positive value for padding-left.
Hanging indents work only in terminal block elements like this paragraph.
**
**If you do not want the hanging indent to
go all the way to the left, make the positive value in padding-left
larger than the absolute value of text-indent.
CSS
`.hanging-indent { text-indent:-50px; padding-left:50px; }
.hanging-indent2 { text-indent:-50px; padding-left:70px; }
/* Nonessential rules are not shown. */`
悬挂缩进
水平对齐内容
HTML
`
Horizontal-Aligned Content
CSS
`.align-left { text-align:left; }
.align-center { text-align:center; }
.align-right { text-align:right; }
.align-justify { text-align:justify; }
/* Nonessential rules are not shown. */`
水平对齐内容
垂直对齐内容
HTML
`
Vertical-Aligned Content
<img class=“text-top” src=“bar.gif” alt=“bar”
/><span class=“text-top text”> text-top
<img class=“middle” src=“bar.gif” alt=“bar”
/><span class=“middle text”> middle
<img class=“baseline” src=“bar.gif” alt=“bar”
/><span class=“baseline text”> baseline
<img class=“text-bottom” src=“bar.gif” alt=“bar”
/><span class=“text-bottom text”> text-bottom
<p class=“text”>
baseline → <img class=“baseline” src=“star.gif” alt=“star” />
text-top → <img class=“text-top” src=“star.gif” alt=“star” />
middle → <img class=“middle” src=“star.gif” alt=“star” />
text-bottom → <img class=“text-bottom” src=“star.gif” alt=“star” />
CSS
`div { font-size:60px; line-height:normal; border:1px solid black; }
.main { background-color:gold; padding:0 10px; }
.text { font-size:18px; }
.text-top { vertical-align:text-top; }
.middle { vertical-align:middle; }
.baseline { vertical-align**:baseline; }**
.text-bottom { vertical-align**:text-bottom; }**`
垂直对齐内容
垂直偏移内容
HTML
`
Vertical-Offset Content
<span **class=“raised”>**raised 1em
<img class=“raised” src=“star.gif” alt=“star” />
baseline
<span **class=“lowered”>**lowered 1em
<img class=“lowered” src=“star.gif” alt=“star” />
_baseline
`CSS
`div { border:1px solid black; }
.baseline { vertical-align:baseline; }
.raised { vertical-align:1em; }
.lowered { vertical-align:-1em; }`
垂直偏移内容
下标和上标
HTML
`
Subscript and Superscript
sub**1** super**2 Mlle**
`CSS
`sub { vertical-align:-0.5em; font-size:0.75em; }
sup { vertical-align:0.5em; font-size:0.75em; }
.large { font-size:32px; }`
CSS Internet Explorer
**sub { font-size:0.9em; }** **sup { font-size:0.9em; }**
下标和上标
嵌套对齐
HTML
`
Nested Alignment
ÁMjx
** -20px
** +35px
** text-top
** middle
** baseline
** text-bottom
** -20px
CSS
`.ac1 { font-size:50px; }
.ac2 { font-size:30px; }
.ac3 { font-size:12px; }
.raise35px { vertical-align:35px; }
.lower20px { vertical-align:-20px; }
.text-top { vertical-align:text-top; }
.middle { vertical-align:middle; }
.baseline { vertical-align:baseline; }
.text-bottom { vertical-align:text-bottom; }
/* Nonessential rules are not shown. */`
嵌套对齐
高级对齐示例
HTML
`
Advanced Alignment Example
CSS
`sub { vertical-align:-0.3em; font-size:0.75em; }
.ac1 {font-size:4em; font-family:“Times New Roman” serif; white-space:nowrap; }
.ac1-func{vertical-align:0.6em; font-size:0.3em; font-style:italic; }
.ac1-sum {vertical-align:0.2em; font-size:0.6em; position:relative; left:-0.1em; }
.ac1-max {vertical-align:3em; font-size:0.2em; position:relative; left:-6em; }
.ac1-min {vertical-align:-1em; font-size:0.2em; position:relative; left:-3.3em; }
.ac1-formula { vertical-align:0.6em; font-size:0.3em; font-style:italic;
position:relative; left:-4em; letter-spacing:0.1em; }
.ac2 {vertical-align:0.4em; font-size:1.5em; position:relative; left:-0.3em; }
.ac2-num {vertical-align:0.7em; font-size:0.4em; border-bottom:1px solid black; }
.ac2-dnm {vertical-align:-0.4em; font-size:0.4em; position:relative; left:-1.4em; }
.ac2-close { position:relative; left:-0.65em; }`
高级对齐示例
十三、块
这一章的主要目的是展示通过样式化块来强调文档结构的各种方法。其他章节中的许多设计模式都适用于块，但是本章包含了特定于样式块元素以显示文档结构的模式。
章节大纲
- 结构意义展示了块如何创建层次和顺序结构。
- 视觉结构展示了如何设计块的样式以显示文档结构。
- Section 展示了如何将你的文档组织成几个部分，以便于搜索引擎和文档处理程序进行样式化和更好的结构化。
- 列表展示了许多创建列表和列表标记的方法。
- 显示了如何使用背景图片给列表添加项目符号。
- inline展示了如何渲染一个块元素，就像它是一个内联元素一样。这允许块从左到右呈现，并换行。
- 折叠边距显示了如何折叠和取消折叠块元素之间的垂直边距。
- Run-In 展示了如何将一个块运行到下一个兄弟块中，就好像它是下一个块中的内联元素一样。插入式标题节省空间，非常吸引人。
- 水平标尺展示了如何使用水平标尺并设置其样式，尽管 Internet Explorer 7 会导致一些问题，它拒绝从
<hr />中删除其内置样式。 - 块间隔符展示了如何在选择的块之间插入精确的垂直间隔，而不必单独调整边距。
- 块空间移除器展示了如何移除选定块之间的精确垂直空间，而无需单独调整边距。
- Left Marginal 展示了如何从正常流程中提取标题、注释、警告和图像，并将它们移动到一个较宽的左边距中。
- 右边距的工作方式类似左边距，除了项目被移动到右边。
结构意义
HTML
`
<div id=“wrapper”>
**
**Structural Meaning
**
**
**
An Example of Structural Meaning
**
**
**
**This heading identifies the topic of its section.
**
**This paragraph introduces the topic of the heading.
**
**This paragraph continues the topic of the heading.
**
**Everything in a document is related. The block structure identifies the
order and intensity of the relationships. The more elements you wrap around
content, the more tightly connected it becomes to ancestors and siblings.
**
-
**
** - **This is an unordered list.
**- **List items are more closely related than items in divisions.
**- **There is no significance to the sequence of unordered list items.
**
**New Structural Elements
**
**
**
**
**
**
| **article | An article or other complete piece of content |
| **aside | Secondary content, such as a sidebar |
| **footer | Footer region |
| **header | Header region |
| **nav | Navigation region |
| **section | A logical region of a page |
**
** <aside** id=“sidebar”>
**
**An aside indicates content that is tangentially related to the content around it. Can
be used as a sidebar.
结构意义
视觉结构
参见结构化含义设计模式中的例子。
CSS(用于结构意义设计模式)
`h1 { margin:0; font-size:1.9em; }
h2 { margin:0; margin-top:3px; font-size:1.2em; }
header,nav,section,aside,footer,article{ display:block; }
ul,div,td,th { border:1px solid black; background-color:gold; margin-top:20px; }
div { padding:0 10px; }
table { border-collapse:collapse; margin:5px 0; }
td,th { background-color:white; width:20%; text-align:center; padding:2px; }
ul { margin-left:0; padding:0 40px; }
p,li { margin:0; padding:2px 0; }`
造型异常
当您设计项目类别时，样式表很好用，但是当您设计例外时，它很快就变得很麻烦。要设置一个元素的样式，通常需要向它添加一个 ID，并在样式表中设置 ID 的样式。这对于单个文档来说是一个小问题，但是随着时间的推移，随着文档的变化、样式的改变以及数百个文档共享相同的样式表，这个问题会变成一个维护问题。例如，由于用于特殊样式的 ID 是元素的一部分，因此当元素移动时，特殊样式也会随之移动。当您修改文档时，这可能会导致意想不到的结果，并且会让您徒劳地寻找问题的原因。
水平标尺、块间隔符或块空间移除器设计模式是设计异常情况的好解决方案，因为它们将元素插入到文档中。该元素具有结构化的含义，是自文档化的，并且易于重新定位。您可以使用标准类来设计这些间隔元素的样式，这样您就不再是设计异常了。间隔元件仅用于特殊情况。
位置造型
有时，您可能希望对某个元素进行样式化，因为它位于特定的位置。例如，您可能希望更改块的第一个子元素之前和最后一个子元素之后的边距量，因为折叠的边距对第一个和最后一个子元素的作用不同。如果将异常边距直接应用于第一个子元素，然后移动第一个子元素使其成为中间的子元素，其异常边距也会随之移动。这不是您想要的结果，因为您想要样式化位置——而不是元素。
设置位置样式的一种方法是使用水平标尺、块间隔符或块空间移除符设计模式。这是因为很容易将一个间隔元素保持在正确的位置——特别是如果你直观地命名它的类，比如"first-child"和"last-child"。CSS 3 位置选择器对于位置样式来说足够强大，并且几乎完全被现代浏览器支持。
视觉结构
节
HTML
`
Section
<section class="introduction”>
Introduction
This paragraph is about the introduction.
Content
This paragraph is about the content.
**
Subsection Example
- This list item relates to the subsection example.
- This list item relates to the subsection example.
CSS
section { padding:10px; margin:10px 0; background-color:gold; border-left:1px solid gray; border-right:2px solid black; border-top:1px solid gray; border-bottom:2px solid black; display:block; } section p { margin:0; margin-top:5px; } section h2 { margin:0; margin-bottom:10px; } section h3 { margin:0; margin-bottom:10px; } section.example { background-color:white; } section section { margin-bottom:0; }
节
列表
HTML
`
Lists
Normal Lists
CSS
`ul { margin-left:0; padding-left:0; } /* Normalized list */
ul li { margin-left:60px; }
.listed { margin-left:60px; display:list-item; list-style:square; }
.list { margin-left:60px; }
.marker { float:left; margin-left:-60px; width:60px; text-align:center; }
.custom { list-style-image:url(“check.gif”); }
.circle { list-style-type:circle; }
.decimal { list-style-type:decimal; }
.inside { list-style-position:inside; }
.none { list-style-type:none; }
/* Nonessential rules are not shown. */`
列表
背景项目符号
HTML
`
Background Bulleted
CSS
`.bb-list { padding-left:40px; margin-left:0; margin-top:20px; }
.bb-list li,
.bb-list dt,
.bb-list dd,
.bb-list p { padding-left:40px; margin-left:-40px; list-style-type:none;
margin-top:0; margin-bottom:0; }
.bb1 { background:url(“check.gif”) no-repeat 10px 1px; }
.bb2 { background:url(“star.gif”) no-repeat 10px 1px; }`
背景项目符号
内联
HTML
`
Inlined
Normal Paragraph
| Normal Table | r1c2 | r1c3 |
| row2 | r2c2 | r2c3 |
- Normal List
- Normal List
**Inlined Paragraph
** **| Inlined Table | r1c2 | r1c3 |
| row2 | r2c2 | r2c3 |
- **Inlined List
- **
- **Inlined List
CSS
`div { padding:10px; margin-bottom:15px; border:2px solid black; }
table, p, td, ul, li { margin-top:0px; margin-bottom:10px; padding-right:5px; }
p, td, ul, li { background-color:gold; padding-top:5px; padding-bottom:5px;
border-left:1px solid gray; border-right:2px solid black;
border-top:1px solid gray; border-bottom:2px solid black; }
.inlined { display:inline; line-height:normal; padding:5px; margin:5px; vertical-align:bottom;
}
table.inlined{ display:inline-table; }`
内联
折叠页边距
HTML
`
Collapsed Margins
**Margins collapsed into parent's ↑↓
Margins not collapsed into parent's ↑↓
**Collapsed sibling margins ↓
****Collapsed sibling margins ↑
****Uncollapsed (transparent padding) ↑↓
****Uncollapsed (transparent border) ↑
CSS
`div { margin:10px; padding-left:30px; background-color:gold;
background-image: url(“ruler.gif”); background-repeat:repeat-y; }
.border { border:2px solid black; }
.collapsed { margin-top:20px; margin-bottom:20px; }
.uncollapsed1 { margin-top:0; margin-bottom:0;
** padding-top:20px; padding-bottom:20px;**
** background-color:transparent; }**
.uncollapsed2 { margin-top:0; margin-bottom:0;
** border-top:20px solid transparent;**
** border-bottom:20px solid transparent; }**`
折叠页边距
磨合
HTML
`
Run-In
Normal Heading
****This is a paragraph following the heading. Notice how the previous heading and this paragraph are separate blocks.
This is another paragraph following the first paragraph.
Run-In Heading
** **This is a paragraph following the heading. Notice how** ** the heading runs into the first line of this paragraph, and notice how** ** its styles are transferred to the run-in container.
** **This is another paragraph following the first paragraph.
CSS
`section { padding:10px; margin-bottom:20px; background-color:gold;
border-left:1px solid gray; border-right:2px solid black;
border-top:1px solid gray; border-bottom:2px solid black; display: block; }
.indent { margin-left:20px; border-left:4px solid black; padding-left:20px; }
.run-in { display:inline; }
.run-in-container h2 { padding-right:20px; }
.run-in-container p { font-style:italic; }`
磨合
横尺
HTML
`
Horizontal Rule
This paragraph is followed by a standard horizontal rule.
This paragraph is followed by an embedded and styled horizontal rule.
This paragraph is preceded by an embedded and styled horizontal rule.
`CSS
`.hr { height:40px; width:200px;
margin:0 auto 0 auto;
border:0;
background:url(“hr.gif”) repeat-x left center;
line-height:1px; font-size:1px; }
.hr hr { display:none; }
/* Nonessential rules are not shown. */`
横尺
垫块垫片
HTML
`
Block Spacer
This paragraph is not followed by a block spacer.
This paragraph is followed by a block spacer.
This paragraph is preceded by the same block spacer.
This paragraph is not preceded by a block spacer.
`CSS
`p { margin:0; padding:5px; background-color:gold;
border-left:1px solid gray; border-right:2px solid black;
border-top:1px solid gray; border-bottom:2px solid black; }
.spacer-large { padding-bottom:32px; }`
垫块垫片
块空间去除器
HTML
`
Block Space Remover
This paragraph has 32-pixel top and bottom margins.
This paragraph has 32-pixel top and bottom margins.
This paragraph has 32-pixel top and bottom margins, but it is preceded and followed by a block space remover.
** **This paragraph has 32-pixel top and bottom margins, but it is preceded and followed by a block space remover.
** **CSS
`section { border:2px solid black; margin-bottom:32px; display:block; }
p { margin-top:32px; margin-bottom:32px; padding:5px; background-color:gold;
border-left:1px solid gray; border-right:2px solid black;
border-top:1px solid gray; border-bottom:2px solid black; }
.space-remover-large { margin-top:-32px; }`
块空间去除器
左旁注
HTML
`
Left Marginal
<span **class=“marginal-header”>**ProblemYou want to
excerpt an element and move it into the left margin.<span class=“marginal-note”>
You want to put images and notes in the margin. You want it to align
vertically with where it would have been placed in the flow.
CSS
**.left-marginal { position:relative; width:480px;** ** margin-left:230px; margin-right:auto; }** .marginal-header { position:absolute; left:-220px; width:160px; font-weight:bold; } .marginal-note { position:absolute; left:-180px; width:150px; font-style:italic; font-size:14px; font-weight:normal; } .marginal-alert { position:absolute; left:-180px; font-style:italic; } .marginal-flag { position:absolute; left:-40px; margin-top:-5px; }
左旁注
右旁注
HTML
`
Right Marginal
CSS
`body { width:702px; }
.right-marginal { position:relative; width:480px;
** margin-right:210px; margin-left:auto; }**
.marginal-header {position:absolute; right:-230px; width:170px; font-weight:bold; }
.marginal-note { position:absolute; right:-230px; width:150px;
font-style:italic; font-size:14px; font-weight:normal; }
.marginal-alert {position:absolute; right:-230px; width:150px; font-style:italic; }
.marginal-flag { position:absolute; right:-30px; margin-top:-5px; }`
右旁注
十四、图象
本章展示了如何使用图像来创建美观实用的文档，以便快速访问和下载。
章节大纲
- 图片展示了如何使用
<img>元素。它还对比了 GIF、JPG 和 PNG 图像格式的优缺点。 - Image Map 展示了如何用链接到其他页面的可点击区域覆盖图像。
- 淡出展示了如何使用渐变图像在内容后面添加微妙的阴影。它还展示了如何创建适应当前背景的变色龙渐变。
- 半透明展示了如何将一个部分透明的背景放在一个元素的后面，这样它就从它下面的背景中突出来，而不会模糊它。
- 替换文本展示了如何用图像替换文本，同时保持对非视觉用户的可访问性。当图像不可用时，这种技术也显示文本。
- 图像上的内容展示了如何在图像上叠加文本和其他图像。
- 背景图片上的内容展示了如何在背景图片上覆盖文本和其他图片。
- CSS Sprite 展示了如何将多个图像嵌入到一个文件中，并将它们独立显示为文档中不同元素的背景。
- 基本阴影图像展示了如何在不修改图像本身的情况下，创建并应用一个简单的阴影到图像上。
- 阴影图像展示了一种将阴影应用于任何尺寸图像的通用方法。
- 圆角展示了如何将一个元素的边框圆角化，以及如何创建可以想象的任何风格的自定义边框。
- 图片示例在一个文档中展示了这些模式。
图像
HTML
`<img width=“742” height=“556” src=“cl1-99.jpg” alt=“Crater Lake 1” />
`
CSS
`img { display:block; width:auto; height:auto; }
/* Nonessential rules are not shown. */`
举例
这个例子包含了我在 2003 年 8 月 4 日拍摄的火山口湖照片的八个不同版本。源图像为 742×556 像素，文件大小为 1，238，822 字节。我对图像进行了处理，创建了八个独立的文件——每个文件都有不同的图像类型和质量。
第一个图像是最高质量的 JPG 图像，它将文件大小减少到 275，798 字节。这减少了五倍。在 JPG 的最高质量，很难看到任何质量的损失。第二个图像是 90%质量的 JPG，这将文件大小减少到 81，248 字节。这减少了 15 倍。在 90%的质量下，用放大镜几乎看不出区别。您可以在第三个和第四个图像中看到差异，这两个图像是 75%和 50%质量的 jpg，分别为 41，290 和 14，841 字节。这分别减少了 30 倍和 84 倍。
第五张和第六张图是 gif。这些图像比 JPG 图像质量差，尺寸大。这不是对 gif 的公平测试，因为它们不是为包含成千上万种颜色的真实图像而设计的。gif 生成的文件较小，用于包含 256 色或更少颜色的计算机生成的图像时质量较好。
第七个和第八个图像是 png。这些图像的质量最好，文件大小略小于质量最好的 JPG，但无法通过增加压缩率来缩小文件大小。
图像
影像地图
HTML
`
Image Map
Northwest USA
<img src=“nw.gif” usemap=“#nw-map” alt=“Northwest USA” width=“290” height=“200” />
** <area** href=“washington.html” alt=“Washington”
** shape=“poly”** coords=“176,8, 164,89, 75,89, 40,72, 45,8” />
** <area** href=“oregon.html” alt=“Oregon”
** shape=“rect”** coords=“9,90, 155,180” />
** <area** href=“idaho.html” alt=“Idaho”
** shape=“circle”** coords=“212, 134,55” />
`
CSS
/* There are no CSS properties for styling image maps. */
影像地图
淡出
HTML
`
Fade-Out
CSS
`.g1 { background:url(“h-white2gold.gif”) repeat-y left top gold; }
.g2 { background:url(“h-trans2white**.png”) repeat-y right** top royalblue; }
.g3 { background:url(“v-gold2white**.gif”) repeat-x** left top white; }
.g4 { background:url(“v-lightning**.jpg”) repeat-x** left top white; }
.g5 { background:url(“v-trans2white**.png”) repeat-x** left bottom red; }
.g6 { background:url(“v-white2trans**.png”) repeat-x** left top green; }
.g7 {background:url(“v-white2trans**.png”)** repeat-x left top, url(“v-trans2white.png”) repeat-x
left bottom green; }
/* Nonessential rules are not shown. */`
淡出
半透明
HTML
`
Semi-transparent
<span id=“washington” **class=“overlay”>**Washington
<span id=“oregon” **class=“overlay”>**Oregon
<span id=“idaho” **class=“overlay”>**Idaho
<p id=“note1”>
Semi-transparent backgrounds are gray in Internet Explorer 6, but they are
semi-transparent in Internet Explorer 7 and all other major browsers.
CSS
`.overlay { background:url(“semi-transparent.png”) repeat; }
#note1 { background:url(“trans2white.png”) bottom left repeat-x; }
/* Nonessential rules are not shown. */`
半透明
替换文字
HTML
`
Replaced Text
CSS
`#h2 { position:relative; width:250px; height:76px;
padding:0; overflow:hidden; }
#h2 span { position:absolute; width:250px; height:76px;
left:0; top:0; margin:0;
background:url(“heading2.jpg”) no-repeat; }`
替换文字
内容超过图像
HTML
`
Content over Image
CSS
`.figure { float:left; position:relative;
color:white; background-color:black; }
.figure .caption { position:absolute; margin:15px; left:0; top:0;
font-size:1.05em; }
.framed { display:block;
border-left:1px solid gray; border-right:2px solid black;
border-top:1px solid gray; border-bottom:2px solid black; }
#crater-date { position:absolute; left:0; bottom:10px; width:518px;
text-align:center; color:white; font-size:0.8em; }`
内容超过图像
背景图片上的内容
HTML
`
Content over Background Image
CSS
`#crater-lake { position:relative; padding:0; width:700px; height:500px;
** background:black url(“crater-lake.jpg”) no-repeat center center; }**
#crater-lake .caption { position:absolute; margin:15px; left:0; top:0;
font-size:1.05em; color:white; }
#crater-date { position:absolute; left:0; bottom:10px; width:700px;
text-align:center; color:white; font-size:0.8em; }
/* Nonessential rules are not shown. */`
背景图片上的内容
CSS 雪碧
HTML
`
CSS Sprite
<a id=“olympia” class=“bang-bg” href=“olympia.html” title=“Olympia”>
<span **class=“screenreader-only”>**Olympia
<a id=“salem” class=“flag-bg” href=“salem.html” title=“Salem”>
<span **class=“screenreader-only”>**Salem
<a id=“boise” class=“star-bg” href=“boise.html” title=“Boise”>
<span **class=“screenreader-only”>**Boise
CSS
`.bang-bg { background:url(“bt.gif”) -48px -16px; width:16px; height:16px; }
.flag-bg { background:url(“bt.gif”) -64px -16px; width:16px; height:16px; }
.star-bg { background:url(“bt.gif”) -64px -32px; width:16px; height:16px; }
.star-bg**:hover** { background-image:url(“wt.gif”); background-color:black; }
.flag-bg**:hover** { background-image:url(“wt.gif”); background-color:black; }
.bang-bg**:hover** { background-image:url(“wt.gif”); background-color:black; }
.screenreader-only { position:absolute; left:-9999px; top:-9999px;
width:1px; height:1px; overflow:hidden; }
/* Nonessential rules are not shown. */`
CSS 雪碧
CSS 雪碧账户。
在bt.gif 中使用的 16×16 子画面的偏移
举例
我在例子中使用了两个 CSS sprite 文件:bt.gif(见图 14-1)和wt.gif。这些文件名代表透明背景上的黑色图像和透明背景上的白色图像。当用户将鼠标悬停在图像上时，悬停选择器会切换出bt.gif，并替换为wt.gif，将颜色从黑色转换为白色。背景也变为黑色，透过图像的透明部分显示出来。
我在示例目录中包含了示例中没有使用的另外两个 sprite 文件。它们被命名为tb.gif和tw.gif。这些文件名代表黑盒中的透明图像和白盒中的透明图像。这些嵌入的图像是黑色和白色的小盒子，中间是透明的图像，可以改变颜色以匹配背景。
我从一个名为 bitcons 的图标集中创建了这四个 CSS 精灵。我把所有嵌入的图像都做成了 16×16 像素，就像原始图像一样。这些图标是免费授权的，可在[somerandomdude.net/srd-projects/bitcons](http://somerandomdude.net/srd-projects/bitcons)获得。同样，您可以在项目中自由使用这四个 CSS sprite 文件。
当制作你自己的 CSS 精灵图片时，你可以在精灵中嵌入任何大小的图片。嵌入的图像不需要大小相同。你只需要知道每个嵌入图像的偏移量和大小。
CSS 雪碧账户。
基本阴影图像
HTML
`
Basic Shadowed Image
`
CSS
img.shadowed { padding-right:20px; padding-bottom:20px; background-image:url("shadow.jpg"); background-position:right bottom; background-repeat:no-repeat; }
基本阴影图像
阴影图像
T2shadow.jpg
shadow-rt.jpg``shadow-lb.jpg是从shadow.jpg中提取出来的。
shadow-rt.jpg缩进并关闭阴影的右上边缘。
shadow-lb.jpg缩进并关闭阴影的左下边缘。
阴影图像
阴影图像 cont。
阴影图像的合成视图
阴影图像 cont。
阴影图像 cont。
HTML
`
Shadowed Image
CSS
`.shrinkwrapped { float:left; }
.shadowed { background-image:url(“shadow.jpg”);
background-position:right bottom; background-repeat:no-repeat; }
.shadowed-rt { background-image:url(“shadow-rt.jpg”);
background-position:right -80px; background-repeat:no-repeat; }
.shadowed-lb { padding-right:20px; padding-bottom:20px;
background-image:url(“shadow-lb.jpg”);
background-position:-80px bottom; background-repeat:no-repeat; }`
阴影图像 cont。
圆角
HTML
`<div class=“bg”><div class=“tl”><div class=“br pad”>
You can nest two divisions to create two opposite rounded corners.
CSS
`.bg { background:url(“bg.gif”) bottom left repeat-x white; margin-top:20px; }
.tl { background:url(“rc.gif”) top left no-repeat; }
.br { background:url(“rc.gif”) bottom right no-repeat; }
.tr { background:url(“rc.gif”) top right no-repeat; }
.bl { background:url(“rc.gif”) bottom left no-repeat; }
.trc { background:url(“rc-trc.gif”) top right no-repeat; }
.blc { background:url(“rc-blc.gif”) bottom left no-repeat; }
.pad { padding:10px; }
.mbg{ background: url(“rc-trc.gif”) top right no-repeat, url(“rc-blc.gif”) bottom left no-repeat, url(“rc.gif”) top left no-repeat, url(“rc.gif”) bottom right no-repeat, url(“bg.gif”)
bottom left repeat-x white; margin-top:20px; }`
圆角
圆角连续。
从圆角矩形图像创建圆角
创建三个圆角矩形图像
在示例中，我从一个 1600×1600 的透明画布开始。我添加了一个环绕画布边缘的圆角矩形。圆角矩形有一个透明的内部。我用外部背景色填充了每个圆角的外部像素，在我的例子中是白色。这使得它们不透明，所以每个角的外部用背景色覆盖内部背景。注意在图 14-7 中，如果第一个圆角矩形的左上角和第二个圆角矩形的右下角不是不透明的，它们将如何显示内部背景。最后，我将图像保存为rc.gif。
为了创建剪切图像，我剪切掉圆角矩形图像的左下角和右上角，并将它们保存为单独的 GIF 图像，命名为tr.gif和bl.gif。我确保角落的外部保持不透明，内部保持透明。否则，他们不会在外面隐藏外部方形边框，让背景在里面显示出来。我把每一个切口的尺寸都设计得足够大，可以用一个圆角盖住方形的角。
创建三个圆角矩形图像很简单:创建一个透明的圆角矩形；填充其圆角的外部；并将左下角和右上角保存为单独的图像。
圆角连续。
图像示例
HTML 的代表性摘录
`
Northwest USA
Click a state to load information about that state.
Click a symbol to load information about that location.
图像示例
CSS 代表性摘录
`.shadowed { padding-right:12px; padding-bottom:12px;
background:url(“shadow.jpg”) right bottom no-repeat; }
.screenreader-only { position:absolute; left:-9999px; top:-9999px;
width:1px; height:1px; overflow:hidden; }
a { text-decoration:none; color:black; }
a:hover { border-left:1px solid silver; border-right:1px solid gray; color:white;
border-top:1px solid silver; border-bottom:1px solid gray;
background-image:url(“semi-transparent.png”); background-repeat:repeat-x; }
.overlay { padding:2px 4px; }
.bg { background:url(“white2trans.png”) top left repeat-x yellow;
margin-top:20px; }
.tl { background:url(“rc.gif”) top left no-repeat; }
.br { background:url(“rc.gif”) bottom right no-repeat; }
.trc { background:url(“rc-trc.gif”) top right no-repeat; }
.blc { background:url(“rc-blc.gif”) bottom left no-repeat; }
.pad { padding:10px; }
.bang-bg { background:url(“bt.gif”) -48px -16px; width:16px; height:16px; }
.flag-bg { background:url(“bt.gif”) -64px -16px; width:16px; height:16px;
}
.star-bg { background:url(“bt.gif”) -64px -32px; width:16px; height:16px; }
.bang-bg:hover { background-image:url(“wt.gif”); background-color:black; }
.star-bg:hover { background-image:url(“wt.gif”); background-color:black; }
.flag-bg:hover { background-image:url(“wt.gif”); background-color:black; }
#states { position:relative; float:left; }
#washington { position:absolute; top:35px; left:80px; }
#oregon { position:absolute; top:135px; left:85px; }
#idaho { position:absolute; top:150px; left:210px; }`
十九、表格
表格是 HTML 中最有用和最复杂的结构之一。这是关于表格的两章中的第一章。本章探讨了表格的 HTML 结构以及如何设计它们的样式。下一章将探讨在表格中自动布置列的许多方法。表格的目的是识别表格数据并设置其样式。
章节大纲
- Table 展示了如何创建和样式化一个表格的基本结构。
- 行和列组展示了如何创建和样式化行标题、行页脚、行组、列组和列。
- 表格选择器展示了如何从列、行和行组中选择单元格。
- 分隔边框展示了如何分隔表格边框和单元格边框。
- 折叠边框展示了如何组合表格和单元格边框。
- 设计折叠边框展示了如何设计折叠边框。
- 隐藏和删除的单元格显示如何隐藏或删除单元格。
- 移除和隐藏行和列展示了如何移除或隐藏单元格的行、行组和列。
- 垂直对齐数据展示了如何将数据垂直对齐到单元格的顶部、中部、底部或基线。
- 条纹表展示了如何给行分配交替的背景。
- 可访问的表格展示了如何创建一个对盲人用户友好的表格。
- 展示了如何将任何元素变成表格、行或单元格。
- 表格布局展示了如何创建四种类型的表格:收缩、大小、拉伸和固定。
表
HTML
`
Table
Simple Table
**** **** ****| 1 | 2 | 3 | 4 | 5 | 6 |
|---|---|---|---|---|---|
| 7 | 8 | 9 | 10 | 11 | 12 |
Table with Spanned Rows and Cells
<**table>** **1 2-6** 8 9 12 `CSS
`table { width:auto; height:1px; table-layout:auto; border-collapse:collapse;
margin-left:20px; border:1px solid black; }
td, th { width:50px; height:1px; overflow:hidden; visibility:visible;
border:1px solid black; padding:5px; background:gold;
text-align:center; vertical-align:middle; text-indent:5px; }`
表
行列分组
HTML
`
Row and Column Groups
Row Groups
**** **** ** ** ** ** **** ** ** ** ** **** ** ** ** **| **thead | **2 | **3 | **4 |
|---|---|---|---|
| **tfoot | **10 | **11 | **12 |
| **tbody | **6 | **7 | **8 |
Columns
**** ** ** 1 2-6
8 9 12
CSS
`table.example1 thead { background:orange; color:black; }
table.example1 tbody { background:gold; color:black; }
table.example1 tfoot { background:firebrick; color:white; }
.col1 { background:wheat; }
.col2 { background:gold; }
.col3 { background:orange; }
.col4 { background:tomato; }
.col5 { background:firebrick; }
.col6 { background:black; color:white; }
/* Nonessential styles are not shown */`
行和列组
表格选择器
HTML
`
Table Selectors
<tr class=“r1”> <td class=“c1”>r1 c1 <td class=“c2”>c2
<td class=“c3”>c3 <td class=“c4”>c4
<td class=“c5”>c5 <td class=“c6”>c6
** **
<tr class=“r3”>
<tr class=“r2”>
| r3 c1 | c2 | c3 | c4 | c5 | c6 |
| r2 c1 | c2 | c3 | c4 | c5 | c6 |
CSS
`table,td,th { border:1px solid black; } /* Selecting all tables and cells /
td,th { background-color:white; } / Selecting all cells */
#t1 { border-collapse:collapse; } /* Selecting table /
#t1 thead td { font-weight:bold; } / Selecting cells in head /
#t1 tfoot td { font-style:italic; } / Selecting cells in foot /
#t1 tbody td { font-variant:small-caps; } / Selecting cells in body /
#t1 .b1 td { font-size:1.2em; } / Selecting cells in body /
#t1 .c3 { display:none; } / Selecting cells in column /
#t1 .c4 { background-color:firebrick; color:white; }
#t1 .r1 { background-color:gold; color:black; } / Selecting row-no effect*/
#t1 .r2 td { background-color:gold; color:black; } /* Selecting cells in row /
#t1 .r2 .c6 { font-size:1.8em; font-weight:bold; } / Selecting cell */
/* Nonessential styles are not shown */`
表格选择器
分隔边框
HTML
`
Separated Borders
Boxed Table
****| 1 | 2-6 | ||||
| 7 | 8 | ** ** | |||
Boxed Cells
****| 1 | 2-6 | ||||
| 7 | 8 | ** ** | |||
Boxed Table and Cells
****| 1 | 2-6 | ||||
| 7 | 8 | ** ** | |||
CSS
`table { border-collapse:separate; }
.boxed-table { border:1px solid black; }
.boxed-cells td { border:1px solid black; }
.boxed-cells td.x { border:none; }
/* Nonessential styles are not shown */`
分隔边框
折叠边框
HTML
`
Collapsed Borders
Boxed Table
****| 1 | 2-6 | ||||
| 7 | 8 | 11 | |||
Boxed Cells
****| 1 | 2-6 | ||||
| 7 | 8 | 11 | |||
Boxed Table and Cells
****| 1 | 2-6 | ||||
| 7 | 8 | 11 | |||
CSS
`table { border-collapse:collapse; }
.boxed-table { border:1px solid black; }
.boxed-cells td { border:1px solid black; }
.boxed-cells td.x { border:none; }
/* Nonessential styles are not shown */`
折叠边框
样式折叠的边框
HTML
`
Styled Collapsed Borders
<td class=“c1”>1 <td class=“c2”>2
<td class=“c1”>1 <td class=“c2”>2
CSS
`table { border-collapse:collapse; } /* Table and cells borders */
table,td,th { border:5px solid red; }
#t1 { border-left:1px solid black; } /* Left table border */
#t1 .c1 { border-left:1px solid black; }
#t1 { border-right:2px solid black; } /* Right table border */
#t1 .c2 { border-right:2px solid black; }
#t1 .c1 { border-right:1px dotted black; } /* Interior column border */
#t1 .c2 { border-left:1px dotted black; }
#t1 { border-top:1px solid black; } /* Top table border */
#t1 .r1 td { border-top:1px solid black; }
#t1 { border-bottom:2px solid black; } /* Bottom table border */
#t1 .r2 td { border-bottom:2px solid black; }
#t1 .r1 td { border-bottom:1px dotted black; } /* Interior row border */
#t1 .r2 td { border-top:1px dotted black; }
/* Nonessential styles are not shown */`
样式折叠的边框
隐藏和删除单元格
HTML
`
Hidden and Removed Cells
Cell 1 is hidden and Cell 3 is removed.
This moves cell 4 into cell 3's place and creates a missing cell at the end.
CSS
`table, td, th { border:1px solid black; }
.separated { border-collapse:separate; }
.collapsed { border-collapse:collapse; }
.x { display:none; }
.h { visibility:hidden; }
/* Nonessential styles are not shown */`
隐藏和删除单元格
删除和隐藏行和列
HTML
`
Removed & Hidden Rows & Columns
<tr class=“r1”> <td class=“c1”>r1 c1 <td class=“c2”>2
<td class=“c3”>r1 c3 <td class=“c4”>4
<tr class=“r2”> r2 c1 2
r2 c3 4
<tr class=“r3”> r3 c1 2
r3 c3 4
<tr class=“r4”> r4 c1 2
r4 c3 4
<tbody class=“b3”>
<tr class=“r5”> r5 c1 2
r5 c3 4
CSS
`#t1 .c2 { display:none; } /* Removing column /
#t1 .c3 { visibility:hidden; } / Hiding column /
#t1 .r2 { visibility:hidden; } / Hiding row /
#t1 .b2 { display:none; } / Removing row group */
/* Nonessential styles are not shown */`
删除和隐藏行和列
垂直对齐的数据
HTML
`
Vertical-Aligned Data
<td class=“align-middle”>These lines of text are vertically aligned
to the middle of the cell.
<td class=“align-bottom”>These lines of text are vertically aligned
to the bottom of the cell.`
CSS
`.align-top { height:200px; vertical-align:top; }
.align-middle { height:200px; vertical-align:middle; }
.align-bottom { height:200px; vertical-align:bottom; }
/* Nonessential styles are not shown */`
垂直对齐的数据
条纹表
HTML
`
Striped Tables
<tr class=“r1 odd”> r1 c1 c2
c3 c4
r2 c1 c2
c3 c4
<tr class=“r3 odd”> r3 c1 c2
c3 c4
r4 c1 c2
c3 c4
<tr class=“r5 odd”> r5 c1 c2
c3 c4
CSS
`#ts td { background:white; } /* Background of all cells /
#t1 .odd td { background:palegreen; } / Alternating Row Background /
#t1 td.c3 { background:darkgreen; color:white; } / Column Background */
/* Nonessential styles are not shown */`
条纹表
HTML
`
Tabled, Rowed, and Celled
Before
After being rendered as a table with rows and cells
CSS
`div,span { border:1px solid black; background-color:gold; padding:5px; }
.tabled { display:table; border-collapse:collapse; }
.rowed { display:table-row; }
.celled { display:table-cell; }`
表格布局
HTML
`
Table Layout
Shrinkwrapped Table
Sized Table
Stretched Table
Fixed Table
CSS
`.auto-layout { table-layout:auto; }
.fixed-layout { table-layout:fixed; }
.shrinkwrapped { width:auto; }
.sized { width:350px; }
.stretched { width:100%; }
/* Nonessential styles are not shown */`
表格布局
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
