CSS Text

CSS Text （CSS文本）

Here we look at properties that can assist in styling your text （在这里，我们来看看可以帮助您设计文本样式的属性）

  • Text color （文本颜色）

  • Text alignment （文本对齐）

  • Text decoration （文本装饰）

  • Text transform （文字变换）

  • Text shadow （文本阴影）

  • Text indentation （缩进）

  • Letter spacing （字母间距）

  • Line height （行高）

  • Word spacing （词距）

Text Color

Text Color （文本颜色）

The color property is used to set the text color. To specify the color you can use a color name (red), a HEX value (#ff0000) or an RGB value (rgb (255,0,0) ).

Example of the color property:. 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <p style="color:#ff0000">This is some paragraph in red.</p>
 </body>
</html>

Result

Text Alignment

Text Alignment （文本对齐）

Alignment property is used for aligning text inside an element left, right, center, etc. （对齐属性用于对齐元素左、右、中心等内的文本。）

Text alignment has four values:

  • Left (text-align: left) - aligns the text to the left

  • Right (text-align: right) - aligns the text to the right

  • Center (text-align: center) - puts the text in center of the page

  • Justify (text-align: justify) - stretches the line of text to align both the left and right ends (like in magazines and newspapers)

Browsers by default align text to the left, and if there is need to align text to the right or put it in the center, we should use the corresponding value. （默认情况下，浏览器将文本向左对齐，如果需要将文本向右对齐或置于中心，则应使用相应的值。）

Example of the text-alignment property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <p>This is some paragraph</p>
   <p style="text-align:center">Some paragraph with value center.</p>
   <p style="text-align:right">Some paragraph with value right.</p>
   <p style="text-align:justify">Some paragraph with value justify.</p>
 </body>
</html>

Text Decoration

Text Decoration （文本装饰）

Text decoration is used for setting the decoration of the text. In CSS3, it is a shorthand for the CSS text-decoration-line, CSS text-decoration-color and CSS text-decoration-style properties. （文本装饰用于设置文本的装饰。在CSS3中，它是CSS text-decoration-line、CSS text-decoration-color和CSS text-decoration-style属性的简写。）

Decoration property is used to specify line decorations added to the text. The following values are valid for text-decoration property. （装饰属性用于指定添加到文本的线条装饰。以下值对text-decoration属性有效。）

  • Overline (text-decoration:overline) - each line of text has a line over it

  • Underline (text-decoration:underline) - each line text is underlined

  • Line-through (text-decoration:line-through) - each line of text has a line going through it

  • None (text-decoration:none) - no text decoration is applied

Example of the text-decoration property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <a style="text-decoration:none">This is link without underline</a>
   <h1 style="text-decoration:overline">Heading with value overline.</h1>
   <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
   <a style="text-decoration:underline">Some hyperlink with value underline.</a>
 </body>
</html>

Result

Text Transform

Text Transform （悬停变换）

Transform property is used for controlling text capitalization. It means that you can set your text to be uppercase, lowercase, or capitalized (title case). （Transform属性用于控制文本大小写。这意味着您可以将文本设置为大写、小写或大写（首字母大写）。）

Transform property has the following values:

  • Uppercase (text-transform: uppercase) - converts all characters to uppercase

  • Lowercase (text-transform: lowercase) - converts all characters to lowercase

  • Capitalize (text-transform: capitalize) - converts the first character of each word to uppercase

Example of the text-transform property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <p style="text-transform:uppercase">Paragraph with uppercase.</p>
   <p style="text-transform:lowercase">Paragraph with lowercase.</p>
   <p style="text-transform:capitalize">Paragraph with capitalize.</p>
 </body>
</html>

Result

Text Shadow

Text Shadow （文本阴影）

We use the text-shadow property when we want to give shadow to our text. （当我们想要为文本赋予阴影时，我们使用text-shadow属性。）

Shadow property is used to apply various shadow effects to the text. It accepts a list of values. Each item in the list can have two and more comma-separated values. （阴影属性用于对文本应用各种阴影效果。它接受值列表。列表中的每个项目可以有两个或多个逗号分隔的值。）

The text shadow property syntax can look like （文本阴影属性语法可能看起来像）

text-shadow: h-shadow v-shadow blur color

Here you can see examples of text shadow. （在这里，您可以看到文本阴影的示例。）

Text Indentation

Text Indentation （缩进）

Text indentation property is used for specifying the length of empty space of the first line in a text block. The values below are valid for this property:

  • Length , which specifies the indentation in px, pt, cm, em, etc. The default value is 0. Negative values are allowed. （-长度，以px、pt、cm、em等单位指定缩进。 默认值为0。 允许负值。）

  • Percentage - which Specifies the indentation in percentage of the width of the containing block. （-百分比-以包含块宽度的百分比指定缩进。）

  • Each-line, when the indentation affects the first line as well as each line after a forced line break, but does not affect lines after a soft wrap break. （-每行，当缩进影响第一行以及强制换行后的每行时，但不影响软换行后的行。）

  • Hanging, which inverts which lines are indented. The first line is not indented. （-悬挂，反转缩进的线条。第一行未缩进。）

  • Initial, which makes the property use its default value. （- Initial ，使属性使用其默认值。）

  • Inherit, which inherits the property from its parent’s element. （-继承，继承其父级元素的属性。）

Example of the text-indent property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     p {
       text-indent: 100px;
       line-height: 24px;
       font-size: 16px;
     }
   </style>
 </head>
 <body>
   <h2>Text Indentation Example</h2>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
 </body>
</html>

Letter Spacing

Letter Spacing （字母间距）

CSS letter-spacing property allows to define the spaces between letters/characters in a text. The following values are supported by this property:

  • Normal, which means that there won’t be extra spaces between characters. It is the default value of this property. （-正常，这意味着字符之间不会有额外的空格。它是此属性的默认值。）

  • Length, which defines an extra space between characters. Negative values are allowed. （-长度，定义了字符之间的额外空格。允许负值。）

  • Initial, which makes the property use its default value. （- Initial ，使属性使用其默认值。）

  • Inherit, which inherits the property from its parent’s element. （-继承，继承其父级元素的属性。）

Example of the letter-spacing property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     p {
       text-indent: 100px;
       line-height: 24px;
       font-size: 16px;
       letter-spacing: 5px;
     }
     h3 {
       letter-spacing: -1px;
     }
   </style>
 </head>
 <body>
   <h2>Example of letter-spacing property</h2>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
   <h3>
     Here is some text with letter-spacing property.
（以下是一些带有字母间距属性的文本。）
   </h3>
 </body>
</html>

Line Height

Line Height （行高）

The line-height property defines the line-height. It is used to set the leading of lines of a text. If the line-height value is greater than the value of the font-size of an element, the difference will be the leading of text. Here are the values supported by this property:

  • Normal, which defines a normal line height. It is the default value of this property. （-法线，定义法线高度。它是此属性的默认值。）

  • Length, which defines a fixed line height in px, cm etc. （-长度，定义了以px、cm等为单位的固定行高。）

  • Number, which defines a number which is multiplied with the current font size to set the line height. （-数字，它定义了一个与当前字体大小相乘的数字，以设置行高。）

  • %, which defines a line height in percent of current font size. （- % ，它以当前字体大小的百分比定义行高。）

  • Initial, which makes the property use its default value. （- Initial ，使属性使用其默认值。）

  • Inherit, which inherits the property from its parent’s element. （-继承，继承其父级元素的属性。）

Example of the line-height property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     p {
       line-height: 30px;
     }
     h3 {
       line-height: 1;
     }
   </style>
 </head>
 <body>
   <h2>Example of line-height property</h2>
   <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
   <h3>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </h3> 
 </body>
</html>

Word Spacing

Word Spacing （词间距）

With the help of the CSS word-spacing property we can change the space between the words in a piece of text, not the individual characters. It supports the values below:

  • Normal, which specifies normal word spacing. This is the default value of this property. （- Normal ，指定正常单词间距。这是此属性的默认值。）

  • Length, which specifies an extra word spacing. Can be specified in px, pt, cm, em, etc. Negative values are valid. （-长度，指定额外的字间距。可以用px、pt、cm、em等单位指定。负值有效。）

  • Initial, which makes the property use its default value. （- Initial ，使属性使用其默认值。）

  • Inherit, which inherits the property from its parent’s element. （-继承，继承其父级元素的属性。）

Example of the word-spacing property: 

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     p {
       word-spacing: 1em;
     }
     h3 {
       word-spacing: -3px;
     }
     span {
       display: block;
       word-spacing: 3rem;
     }
   </style>
 </head>
 <body>
   <h2>Example of word-spacing property</h2>
   <p>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </p>
   <h3>
     Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。该段落归因于15世纪一位不知名的排版师，他被认为将西塞罗的De Finibus Bonorum et Malorum的部分内容拼凑在一本样本书中。）
   </h3>
   <span>
   Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
（Lorem ipsum ，有时被称为lipsum ，是用于布局印刷、图形或网页设计的虚拟文本。）
   </span>
 </body>
</html>
← CSS id and class
CSS Font →

请遵守《互联网环境法规》文明发言，欢迎讨论问题
扫码反馈

扫一扫，反馈当前页面

咨询反馈
扫码关注
返回顶部