编程知识 cdmana.com

CSS Style -- detailed explanation of text style

Css style -- Text style details

Text styles include so-called text indentation :text-indent Horizontal alignment :text-align:center;left;right Word spacing and letter spacing 、 Character conversion :text-transform etc.

1. Indent text :text-indent

The code is as follows :

p {text-indent: 5em;}

1. Practical negative value : Be careful when setting negative values , If you set a negative value to a paragraph , Some of the text in the first line may go beyond the left edge of the browser window . To avoid this display problem , It is recommended to set an outer margin or some inner margin for negative indentation .

The code is as follows : p {text-indent: -5em; padding-left: 5em;}

2.text-indent With inherited properties

The code is as follows :

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.
<p>this is a paragragh.</p>
</div>
</div>

there p The first line indentation 50px

2. Horizontal alignment :text-align:center;left;right;

3. Word spacing and letter spacing : word-spacing Attributes can change words ( word ) The standard interval between . Its default value normal And set the value to 0 It's the same .

letter-spacing Properties and word-spacing The difference is that , Letter spacing changes the spacing between characters or letters .

4. Character conversion :text-transform That's case The first letter transformation . Use text-transform There are two advantages . First , Just write a simple rule to complete the modification , Without modification h1 The element itself . secondly , If you later decide to change all case to the original case , It's easier to make changes .

The code is as follows :

none There is no change uppercase All capitals lowercase Full lowercase capitalize Capitalize the first letter of a word

5. Text decoration :text-decoration

value describe
none Default . Define the standard text .
underline Define a line under the text .
overline Define a line on the text .
line-through Define a line through the text .=
blink Define blinking text .
inherit Rules should be inherited from the parent element text-decoration The value of the property .

Combine multiple decorations in one rule . If you want all hyperlinks to have both underscores , There's another overline , The rules are as follows :

The code is as follows :

a:link a:visited {text-decoration: underline overline;}

If two different decorations match the same element , The value of the winning rule will completely replace the value of another . Please consider the following rules :

The code is as follows :

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

For a given rule , all class by stricken Of h2 All elements have only one through line decoration , Without underscores and underscores , because text-decoration Values are replaced instead of accumulated .

6. Deal with blanks

white-space Properties affect the user agent's response to spaces in the source document 、 Line feed tab Character processing .

版权声明
本文为[Front end Wang Zulan]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224141846092f.html

Scroll to Top