Text
With CSS you can determine the style and appearance of the text. In the same way that you use the tag <FONT>, specifies the font properties, but the styles have a great potential and can reduce the code HTML.
font properties
Changing the font face and size occurs through CSS properties are described in Table. 1.
| Property | Value | Description | Example |
|---|---|---|---|
| font-family | font name | Sets the font list | P {font-family: Arial, serif} |
| font-style | normal italic oblique |
Normal font Italics Italic font |
P {font-style: italic} |
| font-variant | normal small-caps |
capital (Singular lowercase) |
P {font-variant: small-caps} |
| font-weight | normal lighter bold bolder 100-900 |
Normal fat Light mark bold Fatty 100 Light font 900 fattest |
P {font-weight: bold} |
| font-size | normal pt px % |
normal size items pixels interest |
font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
Example 1 shows how to use parameters in the font.
Example 1: Setting the font properties in CSS
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Font </ title>
<Style type = "text / css">
H1 {
font-family: Arial, Helvetica, Verdana, sans-serif; / * * The typeface /
font-size: 150%; / * Text size * /
font-weight: lighter; / * Mark * Light /
}
</ Style>
</ Head>
<Body>
<H1> Heading </ H1>
<P> Plain Text </ p>
</ Body>
</ Html>
The following is the result of this example (Fig. 1).
Fig. 1. Type the text after applying styles
Table. 2 shows some stylistic parameters to work with the text and the result of their application.
| Example | Example | Example | Example | Example |
| font-family: Verdana, sans-serif; font-size: 120%; font-weight: light | font-size: large; font-weight: bold | font-family: Arial, sans-serif; font-size: x-small; font-weight: bold | font-variant: small-caps | font-style: italic; font-weight: bold |
text properties
In addition to changing the font parameters can be controlled and the properties of the text. Property values are given in Table. 3.
| Property | Value | Description | Example |
|---|---|---|---|
| line-height | normal factor exactly % |
Leading (line spacing) | line-height: normal line-height: 1.5 line-height: 12px line-height: 120% |
| text-decoration |
none underline overline line-through blink |
Remove all design Podcherkivanie The line of text crossing Blinking text |
text-decoration: none |
| text-transform |
none capitalize uppercase lowercase |
Remove all effects Begin with a capital ALL CAPITALS all lower case |
text-transform: capitalize |
| text-align | left right center justify |
text Alignment | text-align: justify width alignment |
| text-indent | exactly % |
Indent the first line | text-indent: 15px; text-indent: 10% |
Below, in Table. 4 shows some parameters of the text, and the result of their application.
| Example: and it's all about him | Example: The text in the middle | Example: This is not a link, but just text | Example: The first line indent | Example: one and a half line spacing |
| text-transform: capitalize | text-align: center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
© Policy Copyright www.htmlbook.ru
Comments
Commenting, keep in mind that the content and the tone of your messages can hurt the feelings of real people, show respect and tolerance to his interlocutors, even if you do not share their opinion, your behavior in terms of freedom of speech and anonymity offered by the Internet, is changing not only virtual, but real world. All comments are hidden from the index, spam control.