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:036469browse
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:
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!