Home > Article > Web Front-end > How to achieve font enlargement effect in css? (Actual measurement of first character change code)

How to achieve font enlargement effect in css? (Actual measurement of first character change code)

藏色散人Original: 2018-08-09 14:59:036446browse

css plays a very important role in web page production. In addition to the attractiveness of the content of a page or an article on a page, how can it catch the user's attention in terms of style? For example, this article introduces the special effects of CSS font amplification and the display implementation of the effect of CSS first character amplification. Friends in need can refer to it.

The specific code example of the css font amplification effect is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首字母放大测试</title>
</head>
<body>
<div class="contain">
    <p>This is the CSS test</p>
    <p>This is the CSS test</p>
    <p>这是一个css测试</p>
</div>
</body>
</html>

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: screenshot:

How to achieve font enlargement effect in css? (Actual measurement of first character change code)

Note: The :first-letter selector is used to select the first letter of the specified selector. And first-letter supports IE7, first-line supports 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 in When float is 'none')

text-transform

line-height

float

clear

[Related article recommendations]

Summary of various methods of setting font size in web pages

Summary of using css to set font size in PHP website

Best font size settings for mobile

HTML web page font size settings

The above is the detailed content of How to achieve font enlargement effect in css? (Actual measurement of first character change code). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Flex layout implements the layout of NetEase Cloud player interfaceNext article：Flex layout implements the layout of NetEase Cloud player interface

See more

How to achieve font enlargement effect in css? (Actual measurement of first character change code)

Related articles