Shulou(Shulou.com)06/01 Report--

Editor to share with you CSS how to achieve the first letter of a paragraph, the first word to enlarge the special effects, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

The enlargement of the first letter of a paragraph refers to the enlargement of the letters or Chinese characters at the beginning of the paragraph, mainly using css's first-letter pseudo-class selector.

Zoom in on a single line:

The code is as follows:

Document

Body {

Background-color: # FFFFFF

Color: # 595959

}

.contain {

Width: 150px

}

.contain p {

Font: 80% Helvetica 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

}

This is a test article. This is a test article.

This is a test article. This is a test article.

This is a test.

Note: first-letter supports IE7+,first-line supports IE8+

Multiline magnification:

The effect is as follows:

Copy the code

The code is as follows:

Document

* {

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

}

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.

This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.

The above is all the content of the article "how to achieve the first letter of a paragraph in CSS, enlarge the special effects". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.