CSS初始上限

了解如何使用CSS和图像创建花式首字母大写

了解如何使用CSS为段落创建精美的首字母大写。甚至还有一种简单的图像替换技术可以将图形图像用于初始上限。

文件中有三种基本的首字母大写形式：

首字母大写或首字下限非常熟悉。他们是打扮长篇累sp文本的好方法。使用CSS属性：第一个字母，您可以轻松定义如何让您的第一个字母变得更漂亮。

您只需创建一个简单的高级初始上限就可以使您的段落的第一个字母与第一个字母的伪元素相匹配：

p：首字母{font-size：3em; }

但是很多浏览器都会看到第一个字母大于文本中其余部分的字母，所以它们使得第一个字母与第一个字母的意义相同，而不是该行的其余部分。幸运的是，使用第一行伪元素和line-height属性很容易解决这个问题：

p：首字母{font-size：3em; } p：first-line {line-height：1em; }

在文档中播放行高，直到找到合适的文字大小。

一旦你了解了如何制作初始帽子，你可以穿着华丽的衣服来让它脱颖而出。玩颜色，背景颜色，边界，或任何罢工你想象。一个相当简单的风格是为第一个字母反转字体和背景颜色的颜色：

p：首字母{font-size：300％; background-color：＃000; 颜色：#fff; } p：first-line {line-height：100％;} }

另一个诀窍是将第一行中心。这对于CSS来说可能会非常棘手，因为如果您的布局非常灵活，那么文本行的中间可能会有所不同。但是随着一些玩弄值，你可以缩进你的第一行足以让第一个字母显示在中间。只需使用段落文本缩进的百分比，直到它看起来正确：

p：首字母{font-size：300％; background-color：＃000; 颜色：#fff; } p：first-line {line-height：100％;} } p {text-indent： 45％ ; }

CSS使用相邻的首字母大写字母会很困难，因为不同的浏览器会以不同的方式显示字体。在CSS中创建相邻顶点的想法是使用第一行上的text-indent属性将它推出（向左）一个负值。您还需要更改该段落的左边距一定量。玩这些数字，直到段落看起来不错。

p {text-indent：-2.5em; margin-left：3em; } p：首字母{font-size：3em; } p：first-line {line-height：100％;} }

创建花哨的初始上限的最佳方法是将字体更改为更加装饰的字体系列。如果您使用一系列字体，然后使用通用字体，这将有助于保证您的初始上限显示良好，以便您的客户可以看到它，而不会涉及可访问性和可用性问题。

p：首字母{font-size：3em; font-family：“Edwardian Script ITC”，“Brush Script MT”，草书; } p：first-line {line-height：100％;} }

和往常一样，您可以将所有这些建议放在一起，以创建广告样式到您的段落的初始上限。

毕竟，如果你仍然不喜欢你的首字母大写在页面上的显示方式，你可以使用图形来获得你正在寻找的确切效果。但在您决定直接转到图形之前，您应该意识到这种方法的缺点：

首先，您需要创建第一个字母的图形。我用Photoshop创建了字母L，字体为“Edwardian Script ITC”。我做了很大的 - 300pt的大小。然后，我将图像裁剪到最低点，并注意到图像的宽度和高度。

然后我为我的段创建了一个类“capL”。这是我定义要使用的图像，领先（行高）等的位置。

您需要使用图像宽度和高度来设置段落的文本缩进和填充顶部。对于我的L图像，我需要95px缩进和72px填充。

p.capL {line-height：1em; background-image：url（capL.gif）; 背景重复：不重复; text-indent：95px; padding-top：72px; }

但那不是全部。如果你把它留在那里，那么第一个字母将在段落中重复 - 首先是图形，然后是文本。所以，我在第一个元素的第一个元素上添加了一个“initial”类型的跨度 - 并告诉浏览器不显示该字母：

span.initial {display：none; }

然后图形显示正确。您可以使用段落上的文本缩进功能来让文本紧贴信件，但是您希望它显示。

Alike posts