CSS - beautify web page elements - font and text properties
Using CSS style to beautify web page text has the following significance.
1. Effective delivery of page information
2. Use CSS beautified page text to make the page beautiful and attractive to users
3. It can highlight the theme content of the page, so that users can see the main content of the page at first sight
4. Good user experience
1, Font properties
1. Font setting
CSS uses the font family attribute to define the font series of text. The font can use English or multiple fonts. All fonts must be separated by commas in English;
matters needing attention:
Generally, if there is a font composed of multiple words separated by spaces, use quotation marks;
Try to use the default font of the system to ensure that it can be displayed correctly in any user's browser;
The most common fonts are: body {font family: 'Microsoft YaHei', Tahoma, Arial, 'hiragino sans GB';}
The advantages of using multiple fonts are: the system detects whether the browser has this font in order. If it does not exist, it will turn to the next font. If it does exist, it will be used first;
In actual development, font settings are often used for < body > tags, and the font is set according to the team agreement.
<style>
h2 {
font-family: 'Microsoft YaHei ';
}
.songti {
font-family: 'Song typeface';
}
#kaiti {
font-family: 'Regular script'
}
* {
font-family: 'Blackbody';
}
</style>
</head>
<body>
<!-- CSS use font-family Property defines the font family of the text -->
<h2>Tagore's classic quotations</h2>
<p class="songti">The furthest distance in the world is not between life and death, but when I stand in front of you, you don't know I love you—— Tagore's story of fish and birds</p>
<p id="kaiti">Never frown, even when you are sad, because you never know who is falling in love with your smile.</p>
<p>Silence bows its head in the noise and makes friends with eyes in the night. Therefore, we read the world wrong, but say that the world deceived us.</p>
<p>Let life be beautiful like summer flowers and death like autumn leaves.</p>
<p>Don't try so hard, the best things come when you least expect them to.</p>
</body>2. Font size and thickness
CSS uses the font size attribute to define the font size
For example: p{
font-size: 20px;
}
be careful:
px (pixel) size is the most commonly used unit of web pages;
The default text size of Google browser is 16px;
Different browsers may have different default text sizes. We try to give a clear value size instead of the default size, You can specify the font size for the body;
The title label is special, and the text size needs to be specified separately;
CSS uses font width to set text thickness
Parameter: normal Normal font Equivalent to number 400. Declaring this value will cancel any previous settings
Bold: bold is equivalent to number 700, which is also equivalent to the function of b object
Bold: Extra Bold lighter body
<style>
body {
font-size: 16px;
}
/* The title label is special, and the text size needs to be specified separately */
h2 {
font-size: 16px;
}
.bold {
font-weight: bold ;
/* fong-werght: 700; */
/* This 700 is not followed by a unit, which is equivalent to bold. It is all bold
In actual development, we advocate using numbers to represent bold or thin*/
}
/* It can also be used not to make the font thicker, such as Title: */
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
</head>
<body>
<h2>Tagore's classic quotations</h2>
<p class="songti">The furthest distance in the world is not between life and death, but when I stand in front of you, but you don't know I love you</p>
<p id="kaiti">Never frown, even when you are sad, because you never know who is falling in love with your smile.</p>
<p class="bold">Silence bows its head in the noise and makes friends with eyes in the night. Therefore, we read the world wrong, but say that the world deceived us.</p>
<p>Let life be beautiful like summer flowers and death like autumn leaves.</p>
<p>Don't try so hard, the best things come when you least expect them to.</p>
</body>3. Font and text style
CSS sets the text style using the font style property
Parameter: normal: default value, the browser will display the standard font style
italic: the browser displays the font style in italics
<style>
h2 {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<h2>Tagore's classic quotations</h2>
<em>Tagore</em>4. Font attribute - compound attribute
so-called
Compound attribute: it is the abbreviation of the first several attributes
Generally, if you want to set the div text to be tilted and bold, the font size is set to 16 pixels, and it is Microsoft YaHei. The writing method is as follows
div {
font-size: 16px;
font-family: "Microsoft Yahei";
font-weight: 700;
font-style: italic;
}
However, it is troublesome to write in this way, and there are too many lines of code, so we can use composite attributes
Format:
font: font-style font-weight font-size/line-height font-family;
Note: the order cannot be changed, and the attributes are separated by spaces;
Attributes that do not need to be set can be omitted (take the default value), but the font size and font family attributes must be retained, otherwise the font attribute will not work.
<style>
font: italic 700 16px 'Micorsoft Yahei';
</style>
</head>
<body>
<div>Three lives, three lives, ten miles of peach blossom, one hundred lines of code</div>
</body>Can produce the same effect.
2, Text properties
1. Text color
CSS text properties can define the appearance of text, such as text color, aligned text, decorative text, text indentation, line spacing, etc
The color property defines the text color:
Method: 1. Predefined color values: red green blue, etc;
2. Hex: #FF0000, #FF6600,#29D794, etc;
3.RGB Code: rgb (255,0) or RGB (100%, 0%, 0%) r-red g-green b-blue;
<style>
h2 {
color: deeppink;
}
p {
color: #41c526;
}
#a {
color: rgb(228, 37, 37);
}
</style>
</head>
<body>
<h2>Tagore's classic quotations</h2>
<p id="a">The furthest distance in the world is not between life and death, but when I stand in front of you, but you don't know I love you</p>
<p>Never frown, even when you are sad, because you never know who is falling in love with your smile.</p>
</body>2. Align text
The text align property is used to set the horizontal alignment of the text content within the element
Align left (default) align center Align right
<style>
h2 {
/* The essence is to center the h2 box horizontally */
text-align: center;
}
</style>
</head>
<body>
<h2>Tagore's classic quotations</h2>
</body>3. Text indentation
The text indent attribute is used to indent the first line of text, usually the first line of a paragraph;
By setting this attribute, the first line of all elements can be indented by a given length, or even the length can be negative;
In particular: em is a relative unit, that is, the size of one text of the current element (font size). If the size of the current element is not set, it will be according to the text size of the parent element
<style>
p {
text-indent: 20px;
}
.two {
/* If 2em is written at this time, the distance between the two text sizes of the current element is indented */
text-indent: 2em;
}
</style>
</head>
<body>
<h2>Tagore's classic quotations</h2>
<p>Never frown, even when you are sad, because you never know who is falling in love with your smile. The furthest distance in the world is not between life and death, but when I stand in front of you and you don't know I love you Never frown, even when you are sad, because you never know who is falling in love with your smile. Silence bows its head in the noise and makes friends with its eyes in the dark. Therefore, we read the world wrong and say that the world deceives us. Life is like the brilliance of summer flowers and death is like the stillness of autumn leaves.</p>
<p>Don't try so hard, the best things come when you least expect them to.</p>
<p class="two">Never frown, even when you are sad, because you never know who is falling in love with your smile. The furthest distance in the world is not between life and death, but when I stand in front of you, you don't know I love you—— Tagore's the story of fish and birds. Never frown, even when you are sad, because you never know who is falling in love with your smile. Silence bows its head in the noise and makes friends with eyes in the night. Therefore, we read the world wrong, but say that the world deceived us. Let life be beautiful like summer flowers and death like autumn leaves.</p>
</body>4. Decorative text
The text decoration property specifies the decoration to be added to the text. You can add underline, strikeout and underline to the text
Parameters:
none (default) no decorative lines are most commonly used
Underline underline Link a is underlined Commonly used
Underline Hardly
Line through strikeouts are not commonly used
<style>
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-throug {
text-decoration: line-through;
}
/* You can unlink a the default underline */
a {
text-decoration: none;
}
</style>
</head>
<body>
<h2>Tagore's classic quotations</h2>
<p class="underline">The furthest distance in the world is not between life and death, but when I stand in front of you, you don't know I love you—— Tagore's story of fish and birds</p>
<p class="overline">Never frown, even when you are sad, because you never know who is falling in love with your smile.</p>
<p class="line-through">Silence bows its head in the noise and makes friends with eyes in the night. Therefore, we read the world wrong, but say that the world deceived us.</p>
<a href="#"> Tagore's classic quotations</a>
</body>5. Row spacing
The line height property is used to set the line spacing and control the distance between lines of text
Line spacing = top spacing + text height + bottom spacing
Recommended tool for measuring row height: FastStone Capture
Measurement method: the distance from the bottom of one line of text to the bottom of the next line of text is equal to the line spacing
<style>
div {
line-height: 26px;
}
</style>
</head>
<body>
<div>Tagore's classic quotations</div>
<p>Never frown, even when you are sad, because you never know who is falling in love with your smile. The furthest distance in the world is not between life and death, but when I stand in front of you and you don't know I love you..</p>
</body>