0

我在某处读到有关如何制作 dropcap 的教程

这是代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

<style>
h1, h2, h3, h4, p, ul, li, address, blockquote {
    margin: 0;
    padding: 0;
}

body {
    width: 720px;

    font: 90%/1.6 Arial, Helvetica, sans-serif;

    padding: 25px;
}

.dropcap p:first-of-type:first-letter {
    float: left;
    font-family: Georgia, Times, serif;
    font-size: 4em;
    margin: 0 5px 0 0;
    line-height: .7;
}

</style>
</head>
<body>

<section class="dropcap">

<p>You can use floats to create dropcaps as well. Simply float the first letter of the desired paragraph and set the margins of the float to control spacing. If you want to drop cap a range of letters, simply use a span tag around the letters you want to drop. You can use relative positioning or top margins to help position the cap relative to the paragraph. Because the construct for float elements is a little different in earlier versions of Internet Explorer, if you're targeting versions prior to IE 8 you may need to feed slightly different margin values through conditional comments to have consistent styling. Firefox does NOT allow the dropcap to calculate its own line-height, forcing it to inherit it from the parent paragraph. WebKit based browsers will. This means that in order to have dropcaps line up consistently in WebKit based browsers and Firefox, you'll need to apply a line-height equal to the height of the cap (start at around .8, although you'll need to experiment  with it based on the font you're using).</p>
</section>

</body>
</html>

他说这比使用跨度标签然后定位您要删除的字母要好

这是我的问题，代码中更多标记标签的缺点是什么？

4

1 回答 1

1

好吧，代码中更多标记的明显缺点是它的可读性较差，向文件大小添加了更多字节，并向代码添加了更多变量，因此可能出现更多错误。

在 section 元素上使用 CSS 样式的缺点是不太容易定位您想要的字母。是的，如果您想定位第一个字母，那就太简单了。但是，如果您想针对第七个字母怎么办？IMO，在这种情况下 span 会更好，但我从来没有遇到过使用 dropcase :p 来定位段落的第七个字母的用例。

于 2012-10-14T16:28:34.377 回答