0

ドロップキャップの作り方のチュートリアルについてどこかで読みました

ここにコードがあります

<!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

コードにマークアップを追加することの明らかな欠点は、読み取りが難しくなり、ファイルサイズにバイトが追加され、コードに変数が追加されるため、バグが増える可能性があることです。

セクション要素でCSSスタイルを使用することの欠点は、必要な文字をターゲットにするのが簡単ではないことです。はい、最初の文字をターゲットにしたい場合は、ケーキです。しかし、7番目の文字をターゲットにしたい場合はどうでしょうか。IMO、この場合はスパンの方が優れていますが、段落の7番目の文字をdropcase：pでターゲットにするユースケースに遭遇したことはありません。

于 2012-10-14T16:28:34.377 に答える