ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 段落大文字 Drop_html/css_WEB-ITnose
CSS 段落大文字 Drop_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:261270ブラウズ
概要:
段落の最初の文字の拡大とは、主に CSS の最初の文字の擬似クラス セレクターを使用して、段落の先頭の文字または漢字を拡大することを指します。
単一行の拡大:最初の行を拡大します。効果は次のとおりです:
<!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> 注: 最初の文字は IE7+ をサポートし、最初の行は IE8+ をサポートします
複数行の拡大:The効果は次のとおりです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。