CSS属性控制网络版式

钥匙要点

• > css属性可以精确地进行网络版式操纵，反映了印刷版本的丰富传统，同时适应网络媒体的独特方面。
CSS中的``text-transform`属性''允许操纵字母案例，提供诸如``大写''，``大写''，``supercase''，'LowerCase'和``full width''之类的选项了。每个满足不同的设计需求。 > HTML文档中的白色空间管理可以通过```the White空道''属性''来控制，并具有诸如`formal'，pre-pre-'，pre-wrap`，`pre-line`和nowrap'的值之类的值来处理不同格式的方案。
为了在单词中控制线路断裂，CSS提供了``word-wrap''或`杂种 - wrap'属性，带有``normal''and break-word'选项，以及用于连字符控制的``连字符''属性。
> css提供``词式''和```字母''属性，以调整单词和字母之间的空间，增强文本的可读性和审美吸引力。
• >
高级文本对齐和压痕通过``text-align''，`text-align-last`和``text-indent''来处理属性，从而使设计师对文本呈现进行细粒度的控制。
• >
Web排版的优势是借鉴了属于印刷版本的数百年传统的知识。同样，这种传统具有IT标准的最佳实践和卓越标准，使Web版式被要求实现。
• >但是，作为交流媒介的网络带有其自身的特殊性。如此之多，以至于我们被认为是从印刷到网络排版的无缝移动是一个艰难的呼吁。杰森·圣玛丽亚（Jason Santa Maria）在他的网络排版书中，
>

>印刷书籍是一种静态格式。从设计师的最初布局到新闻床，仓库，书架和您的手之旅，该书的输出不会改变。它完全按照设计师的构思。

涉及网络时，根据许多因素，例如各种设备，屏幕分辨率，个性化的浏览器设置等，相同的网站可能会大不相同。解释…

…可能会给我们一个印象，即类型太小，其他人可能会导致我们在屏幕外错过一些重要的东西，而其他人则几乎完全不可能查看该网页。

>

>也就是说，“网络是文字的最佳场所。”，正如蒂姆·布朗（Tim Brown）在关于通用版式的演讲中所说的那样。可以“搜索，复制，翻译，链接到其他文档，可以打印，很方便，可以访问”。

>网络的灵活性并不意味着放弃控制。相反，作为网页设计师，我们仍然期望我们对我们投入的任何内容做出明智的选择，而文字也不例外。文本元素的布局方式，它们的颜色，大小，字体，所有这些以及更多传达网站的核心信息和品牌。

要操纵网络上的文本外观，我们选择的主要工具是CSS。 我将要在本文中介绍的CSS属性可以在CSS文本模块规范中找到。

>该模块描述了CSS的排版控件；也就是说，

控制源文本翻译为

>的CSS的功能 格式化的，包裹的文本。

换句话说，CSS文本模块使用css。

>

构成基本文本或单词的基本单元，以及允许在给定文本中打破一个单词的位置，这在很大程度上取决于网站中使用的语言规则。因此，重要的是在HTML文档中声明此信息（通常在元素的lang属性中）。

>在这里，我不会讨论以下两个主题：

>

字体，即字符的视觉表示，即字形及其属性； 与文本装饰有关的CSS的功能，例如下文，文本阴影和重点标记。

如果您很好奇，您会在CSS字体模块3级和CSS文本装饰模块3级中找到有关字体和文本装饰属性的最新文档。>

>操纵字母案例
>有时可能需要以大写字母（例如名字和姓氏）显示文本元素。 CSS通过文本转换属性使我们控制字母案例。
文本转换属性的默认值无，也就是说，对字母案例没有影响。>

大写

>如果您希望每个单词的首字母在大写中显示在所有其他字母的外观（在HTML文档中的情况下如何），则使用该值资本化将实现这一目标：>

html：

CSS：

请注意如何不遵循标题案例约定：实际上，上面示例中的所有第一个字母都出现了大写，包括“ in”一词。打算遵循有关标题的文学惯例的作者将需要在源文本中手动操纵字母。

大写值

如果您的目标是在大写中显示所有字母，则无论他们在HTML文档中的情况如何

html：

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

CSS：

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

小写值

使用值小写将导致所有字母以小写显示。自然，这不会影响原始源文档中已经小写字母的字母的外观。>

html：

CSS：

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

全宽度值

>规范增加了一个新的值，全宽度。该值将字符限制为在正方形内出现的字符，就好像它是一个意识形态的字符一样，例如日语，中文等。这有助于用意识形态字符对齐拉丁字符。

并非所有字符都具有相应的全宽表格，在这种情况下，字符不会受到全宽度值的影响。

html：

CSS：

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>

当应用全宽时，Firefox中的角色是什么样子：h2 { text-transform: lowercase; }

进一步说明

浏览器对文本转换属性的支持非常好。实际上，所有主要的浏览器都支持它。

>唯一的例外是全宽值，目前仅在Firefox中起作用。可以理解的是，考虑到全宽的可能性有可能在规格的候选推荐阶段被丢弃的风险。 此外，我注意到Firefox（v.39）与其他主要浏览器之间存在很小的不一致性，以使词汇上的大写价值。

这就是Firefox中的外观：

请注意连字符后的第一个字母如何被大写。另一方面，下面的文本与Chrome中显示的文本相同：

在这种情况下，连字符之后的字母也不例外。他们还在大写字母中展示。我在所有其他主要浏览器的最新版本中都观察到了同样的行为，除了上述Firefox。 最后，请注意级联！如果将文本转换属性设置在容器元素上，则其所有子元素都会继承其值。为避免不希望的结果，请将子元素的文本转换属性值重置为无。

查看文本转换属性值的演示。

如何处理白空间

按下选项卡键，空格键或强迫某些文本折断下一行（使用> enter键或
tag），您可以在源中创建空白空间文档。

默认情况下，浏览器的空间崩溃序列倒入一个空间，删除了线路断裂，并且文本包装线条以适合其容器。这对我们来说很方便，因为它允许我们缩进和单独的文本块，以使我们的源文档可读和可维护，而不会影响浏览器中的内容的显示方式。

> 但是，如果这不是您的目标，该怎么办？例如，您想保留在HTML文档中创建的空白空间。一个常见的情况是，当您编写一些文本时，该文本旨在显示为正确的缩进代码段。或者，您希望将一些文本显示在一行中，而不会破裂。 在这种情况下，当您打算覆盖浏览器的默认行为时，White Space属性提供了一些有趣的选项。

正常关键字将浏览器重置为默认行为：所有额外的空白空间都折叠成一个字符，并在到达容器边缘时包裹着线条。

>

pre值

> PRE关键字允许您通过保留源文档中存在的所有白色空间和强制新线条来显示文本。在溢出容器时，文本不会包裹成新线路。

>

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

如果使用选项卡来创建空白，则可以通过将其设置为整数值来控制其大小。

tab-size是一个具有不一致的浏览器支持的属性，但是如果您确实无法忍受默认选项卡的字符长度，则这里有一个覆盖所有基础的polyfill。

pre-wrap值

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

>假设您希望源文档中的白色空间保存在浏览器显示器中。但是，您还想让线条包裹在其到达容器边缘时。

>预包上的关键字将帮助您获得所需的结果。

请注意，浏览器中显示的每条线如何反映源代码中的强制断裂，尽管容器有足够的空间可以安装更多文本：

>

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

但是，

缩小浏览器屏幕，您会注意到包裹的线条以适合其容器。

预先线值

>对于白空间属性的最终有趣值是预上线。在一定程度上，它将空间序列倒入一个空间并允许包裹，它的行为就像正常。但是，如果HTML文档中存在新的线字符或
标签，则将其保存在浏览器显示中。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

>试用PER，PER-RAP和PRE-LINE关键字的Codepen演示。

nowrap value

Nowrap也许是最著名的白色空间价值。您的设计是否要求一块内联内容不应包装？使用白色空间：nowrap;在您的元素上可以解决问题。

>

上面的

是链接，后跟»符号。将此字符落到下一行，例如在流体网络布局中，这是不可取的。>

在这种情况和类似情况下（例如，想想图标），NowRap值非常方便。

> Sara Soueidan在CODROPS CSS参考中带给我们另一个有趣的用例。萨拉指出，白色空间属性可以应用于任何内联内容，包括图像。>

>通过防止图像包装并强迫它们在其容器内的一条线上显示在可滚动元素中的图像的水平列表中，它有时与值nowrap一起使用。

>我通过使用白色空间：nowrap创建基本的jQuery旋转木制来放大了这一建议。这是演示：

>请参阅codepen上的sitepoint（@sitepoint）上的图像旋转曲线上的word-wrap属性。

控制单词内部的线路断裂

有时，

有时会出现设计外观，因为一个长词无法将其包裹在下一行，从而溢出了其容器。博客评论中的长URL或一些用户生成的长词是常见的情况。

>以下CSS属性旨在为我们在网络上处理长词的控制。

。

> wrap/Overflow-wrap属性

如果白空间属性允许文本包装，则

Overflow-wrap属性（以前称为Word-in-trap，完全支持并在所有主要浏览器中工作）会生效。它可以具有两个值之一：正常和断开字。

>

通过使用正常值，单词在允许的突破点处断裂，例如，空格，连字符等。

>

break-word值允许单词内的任意突破点，如果该行在某些其他可接受的点上不能折断。

下面的图片显示了一个溢出其容器的长词的显示：>

>让我们设置Overflow-wrap属性，以及为遗产目的，词包属性属性，将其设置为brake-word值：

…现在，长词的显示已分为多行以适合可用空间。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

连字符属性

分解长言都很好。但是，结果文本可能会使读者感到困惑。一个更好的选择是将单词分解为下一行时的连字符。这样，对于读者来说，他们正在看一个单词将多行包裹在多行上。为了实现这一目标，CSS提供了连字符属性，您可以与Word-wrap结合使用：break-word。

更具体地说，连字符属性的自动值使您能够在单词破裂到下一行的点上显示连字符，如果文档的语言规则允许它或HTML源中存在连字符。为此，请确保将lang属性设置为HTML文档中所需的语言：

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

>您还可以防止显示连字符。在这种情况下，将连字符的属性设置为无：

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

>此外，如果单词在标记中和文本包裹在下一行中，则可以在单词中的线断裂上显示连字符字符。这是用手册的值来完成的：

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

在供应商前缀的帮助下，浏览器对连字符属性的支持在所有主要浏览器上都很好，尽管并非没有一些略有不一致。 Chrome（v.44）和Opera（V.30）的最新版本在写作时不支持属性值自动。

在Codepen上查看上述示例

操纵单词和字母之间的空间

>或多或少可读取的文本通常取决于许多因素。在某些情况下，增加或减少每个单词之间的空间或每个字母之间的空间，即跟踪

，带来了巨大的改进。

> CSS提供单词间距和字母间隔属性，以控制单词和字母之间的间距的外观。

>

单词间隔属性

以下是单词间隔属性的值：

• 正常
• >百分比

正常显示字母之间的默认空间。空间的量取决于所使用的字体或浏览器。

>

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

除了字体或浏览器定义的默认间距外，

允许您添加词间间距。

>

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

>百分比的工作方式与相同，但使用百分比值。我尚未发现任何浏览器实施情况，并且百分比有被从规范的未来草案中删除的风险。

>

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

字母间隔属性

>您可以将字母间隔属性设置为两个值之一：normal或。

使用普通叶在字母之间的默认字体间距。它还重置先前指定为其默认值的任何字母间隔长度。例如，如果您在父元素上指定了1em的字母间隔值，但希望在子元素上显示默认值，则正常是您的朋友。

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

值是测量的单位，例如PX或EMS，除了字体已提供的默认间距外，您还可以增加字母之间的间距。

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>

更多详细信息

>单词间隔不仅适用于单词。您可以在任何类型的内联或内联块内容上使用它。

>

>另外，您也可以对单词间隔和字母间隔进行动画。但是，在字母间距上使用CSS过渡表明，当前版本的Firefox（V.39）未识别正常值。为了克服这一点，只需用0em替换正常。

这是一个使用单词间隔和字母间隔的演示，其中包含动画文本：>

>请参阅codepen上的sitepoint（@sitepoint）的CSS字母间隔和单词间隔属性的笔

最新的CSS文本对齐选项

>文本 - 空地属性已经存在了一段时间。它控制在块容器中如何对齐文本和图像等内联内容。 kewings左右与左右与右侧的内联内容对齐。将文本对准设置为中心将内容对齐到其容器的中心。最后，合理的关键字为内容合理，使每行的长度相同（除了最后一行，如果它不足以达到其容器的边缘）。

规格添加了两个新值，这些新值在国际化网站上使用左右（RTL）语言系统：启动和结束。

对于从左到右（LTR）的读取器，它们分别对应于左右与左右相对应。当网站使用RTL语言时，start对应于右和末端对应于左。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

应用文本校友：与内联元素的匹配父母确保孩子继承与父母相同的对准。继承的开始或结束值是根据父语言方向计算的，导致左或向右输出。>

>文本align-last属性

CSS的新

也是文本偏见的属性。此属性控制段落结束前或
标签之前的>文本的最后一行的对齐。它具有与文本校友相同的关键字值，除了auto，这是默认值。自动值允许您根据元素的文本对齐属性的值（设置）对齐文本的最后一行。如果没有应用文本align属性，则文本默认值为start的值。> 在撰写本文时，浏览器对文本式持久的支持很差。因此，我认为应该很少使用它。>

查看一个Codepen演示，显示这些功能 缩进文本

缩进一行文本，通常是段落中的第一行，您经常在网站上经常遇到。取而代之的是，将一个空线作为段落之间的分离的常见视觉标记。> 尽管如此，

有时会使用段落的第一行来创建适合特定设计的经典外观。

如果通过此技术增强了您的设计，CSS提供了文本性属性。让我们考虑可能的价值。

通常使用PX或EM单元设置长度的值：>

使用百分比值设置一个百分比：

每条线的值在块容器内以及强制折叠后的每条线内的外观，即，即通过击中

> Enter

键或在HTML源中插入
标签。但是，柔软的包裹断裂后的第一行的显示，即，将其包裹到下一行以适合其容器的文本不受影响。

>

悬挂的值导致所有线路以外的第一行显示为缩进。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

>每个线和悬挂值都是实验值，在编写时尚未在任何浏览器中实现。

查看此演示以查看“动作”中的文本

结论

> CSS在网络文本操纵方面一直在取得巨大进展，尽管期望做更多。除了对一些最新属性的粗略浏览器支持外，例如，如果CSS提供了Kerning功能，即有机会在给定单词中操纵两个字母之间的距离。 在这篇文章中，我深入研究了许多CSS属性，这些属性控制了网络上文本的格式格式，线条包装和对齐。可以随意使用演示进行实验。

我期待您的反馈！

>

>经常询问有关CSS属性的问题（常见问题解答）

>如何使用CSS属性来控制Web版本？您可以调整字体尺寸，字体家族，线高，文本对齐，文本颜色等等。例如，要更改字体大小，您可以使用“字体大小”属性并指定像素，EMS或百分比中的大小。同样，要更改字体系列，您可以使用“字体家庭”属性并指定字体名称。请记住要包含后备字体，以防万一首选在用户的系统上不可用。

>'text-align'属性在css？

中的作用是什么。 'CSS中的属性用于对齐块元素的内联内容。它可以采用“左”，“右”，“中心”或“正当”之类的价值。例如，“文本校友：中心”将以其包含元素的形式集中文本。当您想控制标题，段落或其他含文本的元素的文本对齐时。 CSS中的白空间属性用于控制元素内部的白色空间如何处理。它可以采用诸如“正常”，“ nowrap”，“ pre”，“ pre-line”或“ pre-pre-trap”之类的值。例如，“白空间：nowrap”将阻止文本包裹到下一行，使所有文本出现在一行中。

>

如何使CSS中左侧的列表项目对齐？

我如何使用CSS来控制文本的线高度？ 'CSS中的属性用于控制文本行之间的空间。您可以在绝对单元中指定线高，例如像素，相对单元（例如百分比（例如百分比）或无单位数字，这些数字乘以当前字体大小以设置线路高度。例如，“线高：1.5”将线高度设置为当前字体尺寸的1.5倍。

>如何更改CSS中的文本颜色？您可以以不同的方式指定颜色，例如其名称（例如“红色”），十六进制值（例如'＃ff0000'），rgb值（例如'rgb（255，0，0，0）'）或HSL值（例如'HSL（0，100％，50％）'）。 CSS中的“字体重量”属性用于使文本粗体。您可以将其值设置为“粗体”或100个倍数中的100至900个数字，其中较高的数字对应于大胆的文本。例如，'font-weight：bold'或'font-权重：700'将使文本大胆。

我如何在CSS中迭代文本？ CSS中的属性用于斜体文本。您可以将其价值设置为“斜体”，以使文本斜体。例如，“字体风格：斜体”会斜体化文本。

>我如何在CSS？

中下划线文本？您可以将其价值设置为“下划线”以强调文本。例如，“文本解释：下划线”将下划线。字母之间的空间。您可以以像素或EMS（例如EMS）等绝对单元（例如像素或相对单元）指定字母间距。例如，“字母间隔：0.1EM”将增加字母之间的空间的0.1倍当前字体大小。

以上是CSS属性控制网络版式的详细内容。更多信息请关注PHP中文网其他相关文章！