2012-10-14 18 views
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> 

他說,這比使用span標籤然後針對要dropcap

信更好

這裏是我的問題代碼中更多標記標記的缺點是什麼?

回答

1

那麼代碼中標記更多的明顯缺點是它的可讀性較差,向文件大小添加更多字節並向代碼添加更多變量,從而導致更多可能的錯誤。

在截面元素上使用CSS樣式的缺點是它不容易定位您想要的字母。是的,如果你想要瞄準第一個字母,那就是蛋糕。但是如果你想瞄準第七封信呢?國際海事組織,在這種情況下跨度會更好,但我從來沒有碰到過用dropcase:p來定位段落第七個字母的用例。