CSS text style

In this section, we talk about text styles, such as setting text color, indenting the first line, horizontal alignment, etc., and setting the page layout.

The text attributes to be learned are as follows:

attribute describe
color Set text color
text-index Sets the indentation of the first line of text
text-align Set horizontal alignment of text
line-height Set text line height
text-decoration Set the decoration of the text

color

First, let's talk about the text color setting. We talked about how to set the color in the previous section, so I'm sure you won't know how to set the color for the text.

Example:

For example, for the text in the < span > tag in the < p > tag below, set the color to pink:

 <p>A prosperous year never comes again,<span>It's hard to get a morning in a day</span>. Time and tide wait for no man.</p>

CSS style code:

span{
    color: pink;
}

Or use hexadecimal color values:

span{
    color: #FFC0CB;
}

text-index

Generally, when we write a composition, the first line of all paragraphs will be indented by two words. If we want to indent the first line of paragraphs in the web page, we can set the indent of the first line of text through the text index attribute in CSS.

The text index attribute directly represents the indentation distance in numbers, in EM or px. Generally, we use em more. Usually, the value is set to 2em, which means indenting two characters.

em is the relative unit. The length is equivalent to the multiple of the characters in the text. It will be automatically adapted according to the size of the characters, and the multiple of the characters will be set.

The text index attribute allows negative values. If negative values are used, the first line will be indented to the left.

Example:

Indent the first line of the first and last paragraphs:

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS study(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p class="index">Green, green the reed. dew and frost gleam. The so-called Iraqis are on the water side.</p>
        <p>It is difficult and long to follow it. Swim back from it, just like in the middle of the water.</p>
        <p>Jianjia luxuriant, White Dew not Xi. The so-called Iraqis are on the Mekong River.</p>
        <p>Go back and follow it. The road blocks and ranks among them. Swim back from it, just like in the water.</p>
        <p>Jianjia Caicai, White Dew has not been. The so-called Iraqi is in the water house.</p>
        <p class="index">Go back and follow it. The road is blocked and right. It's like swimming in the water.</p>
    </body>
</html>

CSS style code:

.index{
    text-indent: 2em;
}

Presentation in browser:

text-align

The text align attribute is used to set the horizontal alignment of the text in the element.

Attribute values are as follows:

Attribute value describe
left The default value is to arrange the text to the left
right Arrange the text to the right
center Arrange text in the middle
justify Align text at both ends
inherit Specifies that the value of the text align attribute should be inherited from the parent element
Example:

Take a look at the effects that different attribute values can achieve:

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS study(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <p class="text1">Content centered</p>
        <p class="text2">Content left</p>
        <p class="text3">Content on the right</p>
        <p>Content does not add style</p>
    </body>
</html>

CSS style code:

.text1{
    text-align: center;
}
.text2{
    text-align: left;
}
.text3{
    text-align: right;
}

Presentation in browser:

line-height

Line height is used to set the row height, that is, the distance between rows.

Attribute values can be the following:

Attribute value describe
normal By default, reasonable row spacing is set
number Set a number that multiplies the current font size to set the line spacing
length Set fixed line spacing
% Percentage line spacing based on the current font size.
inherit Specifies that the value of the line height attribute should be inherited from the parent element

Generally, we use numbers to represent it. The unit is px. If no unit is added, it means that it is expressed by multiple. At this time, the line height is a multiple of the font size.

Example:

For example, the font size of the content in the first < p > tag below is 14px, and setting the row height to 21px has the same effect as setting the row height to 2 (twice the font size):

 <body>
    <p class="text">An important secret of Lu Xun's success is to cherish time. When Lu Xun was 12 years old and studying in a private school in Shaoxing City, his father was seriously ill and his two younger brothers were still young. Lu Xun not only often went to pawnshops and drugstores, but also had to help his mother do housework. In order to avoid affecting his studies, he must make accurate time arrangements.</p>
    <p>Since then, Lu Xun has been squeezing time almost every day. He said:「Time, like water in a sponge, is always there if you squeeze it.」Lu Xun has a wide range of interests in reading and likes writing. He also has a deep love for folk art, especially legend and painting.</p>
</body>

CSS style code:

.text{
    font-size: 14px;
    line-height: 28px;
    /* Equivalent to line height: 2; */
}

Presentation in browser:

text-decoration

The text decoration property is used to set the decoration of the text, that is, to set some effect on the text, such as underline, strikethrough, etc.

Attribute values can be the following:

Attribute value describe
none Default, standard text
underline Sets the slide line of the text
overline Sets the top slider of the text
line-through Set the strikeout of text
blink Set text flashing
inherit Specifies that the value of the text decoration attribute should be inherited from the parent element
Example:

In addition to adding decoration to the text, we can also remove the underline below the link through the text decoration attribute:

<p>Default text</p>
<p class="p1">Underline settings</p>
<p class="p2">Set dash up</p>
<p class="p3">Set strikethrough</p>
<p class="p4">Text flashing</p>
<a href="#"> underline links</a>

CSS style code:

.p1{
    text-decoration: underline;
}
.p2{
    text-decoration: overline;
}
.p3{
    text-decoration: line-through;
}
.p4{
    text-decoration: blink;
}
a{
    text-decoration: none;
}

Presentation in browser:

Summary: the text styles learned in this section are often used in practical applications, so you should find out the use of these attributes and the effect when assigning different attribute values.

To see more: https://www.9xkd.com/

Tags: Front-end html css

Posted by smbkgeo1983 on Sat, 14 May 2022 11:09:25 +0300