How does CSS implement font amplification effects? (first character change code measured)

CSS in the Web page production has a very important role, a page or a page in addition to the content of the appeal, how to capture the user's eye in style? For example, this article is to introduce the effect of CSS font amplification and CSS first character amplification effects display implementation. If you need a friend, you can refer to it.

CSS font Amplification Effects specific code examples are as follows:

<! DOCTYPE html>
The STYLE.CSS code is as follows:

<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>
The local code test results are as follows:


Note: The First-letter selector is used to select the first letter of the specified selector. and First-letter supports Ie7+,first-line support ie8+

The following properties can be used with: First-letter:

Font properties

Color Properties

Background properties

Margin properties

Padding properties

Border properties

Text-decoration

Vertical-align (only when float is ' none ')

Text-transform

Line-height

Float

Clear