如何用css缩进段落(indent paragraphs with css)
好的网页设计通常是关于好的排版。由于网页的大部分内容都是以文本的形式呈现的，因此能够设计出既有吸引力又有效的文本是网页设计师必须具备的一项重要技能。不幸的是，我们的在线排版控制水平与印刷品不一样。这意味着，我们不能像在印刷品中那样，始终可靠地为网站上的文本设置样式。
一种常见的段落样式，你经常在印刷品中看到（我们可以在线重新创建），即段落的第一行缩进一个选项卡空间。这使读者可以看到一段的开始和另一段的结束。
您在网页中看不到如此多的这种视觉样式，因为默认情况下，浏览器显示段落时，段落下方有空格，以显示段落的结束和开始位置。但是，如果您想在段落上设置页面样式，使其具有受打印启发的缩进样式，可以使用文本缩进样式属性。
此属性的语法很简单。下面是如何向文档中的所有段落添加文本缩进。
p { text-indent: 2em;}定制缩进
有一种方法可以精确地指定要缩进的段落，您可以向要缩进的段落添加一个类，但这需要您编辑每个段落以向其添加一个类。这是低效的，并且没有遵循HTML编码的最佳实践。
相反，当你缩进段落时，你应该考虑一下。您可以缩进紧跟在另一段落之后的段落。为此，可以使用相邻的同级选择器。使用此选择器，您可以选择前面紧跟着另一个段落的每个段落。
p + p { text-indent: 2em;}由于缩进第一行，还应确保段落之间没有任何额外的空格（这是浏览器默认设置）。从风格上讲，段落之间应该留有空格或缩进第一行，但不能两者都缩进。
p { margin-bottom: 0; padding-bottom: 0;}p + p { margin-top: 0; padding-top: 0;}负缩进
您还可以使用文本缩进属性以及负值，使行首向左而不是向右，就像正常缩进一样。如果一行以引号开始，这样引号字符出现在段落左侧的空白处，字母本身仍然保持良好的左对齐，则可以这样做。
例如，假设您有一个段落是blockquote的后代，并且希望它是负缩进的。您可以编写以下CSS：
blockquote p { text-indent: -.5em;}这将使段落的开头（可能包括开头引号字符）稍微向左移动，以创建挂起的标点符号。
关于边距和填充
在网页设计中，经常使用边距或填充值来移动元素并创建空白。但是，这些属性无法实现缩进段落效果。如果将这些值中的任何一个应用于段落，则该段落的整个文本（包括每一行）将被隔开，而不仅仅是第一行。
- 发表于 2021-09-04 23:15
- 阅读 ( 141 )
- 分类：IT
你可能感兴趣的文章
10分钟内可以学习10个简单的css代码示例
... <p class="**allcaps">Your paragraph here.</p> ...
如何使用indesign段落和字符样式
...能够编辑段落样式的名称。也可以在“段落样式选项”（Paragraph Style Opti***）窗口中重命名它，双击段落样式名称即可打开该窗口。 ...
如何在css中设置背景图像
...，用分号结束该行。虽然空白在CSS中没有意义，但是使用缩进可以使CSS更易于阅读。 ...
如何使用css选择器定位网页的一部分
... <h1>Contents</h1>some extra text<p>Introductory paragraph</p><p>Following paragraph</p> ...
边缘(margin)和衬垫(padding)的区别
...了一行中的上、右、下、左边距。它将25px的边距分配给段落元素的顶部和底部，而将50px分配给段落元素的右侧和左侧。最后一个示例将段落元素的所有边距设置为25px。 什么是衬垫(padding)？ 填充是CSS中的一个属性，它有助于在...
如何使用css设置xml文档的样式(style xml documents with css)
...义每个标记的样式。 例如，在HTML中，您可能希望定义段落标记中的所有文本( p { font-family : verdana, geneva, helvetica; background-color : #00ff00; } 同样的规则也适用于XML文档。XML中的每个标记都可以在XML文档中定义： family { color :...
如何你写了一个css媒体查询？(you write a css media query?)
...only increase the font size to 20 pixels, but also change the color of all paragraphs to black (#000000), add this: @media screen and (min-width: 1000px) { body { font-size: 20px; } p { color: #000000; } } Adding More Media Queries Additionally, you can add more Media Queries for ever...
如何使用html和css创建选项卡和间距(use html and css to create tabs and spacing)
...据，那么表格仍然是完全有效的。 边距、填充和文本缩进 使用CSS创建间距的最常见方法是使用以下CSS样式之一： 边缘 衬垫 文字缩进 例如，使用以下CSS将段落的第一行缩进为选项卡（请注意，这假设您的段落附加了class...
如何向html标记添加属性(add an attribute to an html tag)
...每个属性与其他属性分开。 <p class="opening" title="first paragraph"> 具有必需属性的元素 如果您希望某些HTML元素按预期工作，那么它们实际上需要属性。image元素和link元素就是这方面的两个例子。 image元素需要“src”属性...
css首字母大写
...间可能会有所不同。但是，如果有人玩弄这些值，你可以缩进第一行，使第一个字母出现在中间。只需调整段落文本缩进的百分比，直到它看起来正确： p:first-letter {font-size : 300%;background-color: #000;color: #fff;}p:first-line { line-height...
0 篇文章
