CSS text styles
CSS text style is a style modification relative to the content. Because in the cascading relationship, the content is higher than the background. So text style is relatively more important.
CSS control text properties:
1. Set text indent: text-indent:length (length unit ) can be negative
2. Text horizontal alignment: text-align: left, center, right
3. Blank processing: white-space:nowrap (nowrap is forced to be displayed in one line, pre newlines and spaces are retained, normal automatically wraps)
4 , Case control: text-transform: (capitalize the first letter of each word in uppercase, uppercase every letter in uppercase, lowercase every letter in lowercase, none normal size)
5. Text vertical alignment: vertical-align: (sub sets the text as subscript, super sets the text as superscript, top is aligned with the top, text-bottom is aligned with the bottom)
6, text color: color sets the color of the text
##First line indentation
Definition:First line indentation is to indent the first line of a paragraph, which is a commonly used text formatting effect. Generally, when writing in Chinese, there are two blank spaces at the beginning, similar to this.
[Note] This attribute can be negativetext-indent
## Value: <length> | < ;percentage> | inheritInitial value: 0
Applies to: block-level elements (including block and inline-block)
Inheritance: Yes
Percentage: relative to the width of the containing block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>亞冠聯(lián)賽是亞洲最高等級(jí)的俱樂部賽事，相當(dāng)于歐洲的歐洲冠軍聯(lián)賽及南美洲的南美解放者杯，高于亞足聯(lián)杯和亞足聯(lián)主席杯，
獲得冠軍的球隊(duì)將代表亞洲參加當(dāng)年12月舉行的國(guó)際足聯(lián)世界俱樂部杯。期待恒大在世俱杯中為中國(guó)足球爭(zhēng)光添彩。</p>
</body>
</html>Horizontal alignment
Definition:
Horizontal alignment is the horizontal alignment that affects text within an element.text-align
Values: left | center | right | justify | inherit
Initial value: left
Applies to: block-level elements (including block and inline-block)
Inheritance: Yes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>格式</title>
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="center">
<p>亞冠聯(lián)賽是亞洲最高等級(jí)的俱樂部賽事，相當(dāng)于歐洲的歐洲冠軍聯(lián)賽及南美洲的南美解放者杯，高于亞足聯(lián)杯和亞足聯(lián)主席杯，</p>
<p>獲得冠軍的球隊(duì)將代表亞洲參加當(dāng)年12月舉行的國(guó)際足聯(lián)世界俱樂部杯。期待恒大在世俱杯中為中國(guó)足球爭(zhēng)光添彩。</p>
</div>
</body>
</html>Text conversion
Text transformation is used to handle English case conversion
text-transform
Value: uppercase (all uppercase) | lowercase (all uppercase) lowercase) | capitalize (capitalize the first letter) | none | inherit
Initial value: none
Applies to: all elements
Inheritance: yes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轉(zhuǎn)換</title>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">hello css</p>
<p class="lowercase">hello css</p>
<p class="capitalize">hello css</p>
</html>Text modification
Definition: Text modification is used to provide decorative lines for text
[Note] The color of text modification lines is the same as the text color
text-decoration
Value: none | [underline (underline) || overline (upperline) || line-through (center line)] | inherit
Initial value: none
Applies to: all elements
Inheritance: none
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本修飾</title>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>這是用來進(jìn)行文本修飾的</h1>
<h2>這是用來進(jìn)行文本修飾的</h2>
<h3>這是用來進(jìn)行文本修飾的</h3>
</body>
</html>
