300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > css段落首字母下沉

css段落首字母下沉

时间:2018-09-14 12:37:08

相关推荐

css段落首字母下沉

摘要:

段落首字母放大是指放大段落开头的字母或者汉字,主要使用了css的first-letter伪类选择器。

单行放大:

在第一行内放大,效果如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body {background-color: #FFFFFF;color: #595959;}.contain {width: 150px;}.contain p {font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;}.contain p:first-letter {font-size: 2em;padding: 0.1em;color: #000000;vertical-align: middle;}.contain p:first-line {color: red;}.contain p:first-child:first-letter {color: red;}.contain p:first-child:first-line {color: inherit;}</style></head><body><div class="contain"><p>This is a test article. This is a test article.</p><p>This is a test article. This is a test article.</p><p>这是一个测试</p></div></body></html>

注意:first-letter支持IE7+,first-line支持IE8+

多行放大:

效果如下:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><style>* {margin:0;padding:0;}body {font-size:12px;font-family: Tahoma, Geneva, sans-serif;padding:200px;}p {width:150px;color:#000;font-size:1em;margin-bottom: 20px;}p:first-letter{float: left;font-size:2.5em;padding-right:5px;text-transform:uppercase;}p:first-line{color:#f00;}</style><p>This is a test article. This is a test article.This is a test article. This is a test article.This is a test article. This is a test article.</p><p>这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。这是一个测试。</p></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。