текст
За допомогою CSS можна визначати стиль і вид тексту. Аналогічно тому, що використовується тег <FONT>, що задає властивості шрифту, але стилі володіють великими можливостями і дозволяють скоротити код HTML.
властивості шрифту
Зміна вигляду шрифту і його розміру відбувається через властивості CSS, які описані в табл. 1.
| властивість | значення | опис | приклад |
|---|---|---|---|
| font-family | ім'я шрифту | Задає список шрифтів | P {font-family: Arial, serif} |
| font-style |
normal italic oblique |
нормальний шрифт курсив похилий шрифт |
P {font-style: italic} |
| font-variant | normal small-caps |
Капітель (Особливі прописні букви) |
P {font-variant: small-caps} |
| font-weight | normal lighter bold bolder 100-900 |
Нормальна жирність світле накреслення напівжирний жирний 100-світлий шрифт, 900-самий жирний |
P {font-weight: bold} |
| font-size | normal pt px % |
нормальний розмір пункти пікселі відсотки |
font-size: normal font-size: 12pt font-size: 12px font-size: 120% |
У прикладі 1 показано використання параметрів при роботі зі шрифтами.
Приклад 1. Завдання властивостей шрифту за допомогою CSS
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Шрифт </ title>
<Style type = "text / css">
H1 {
font-family: Arial, Helvetica, Verdana, sans-serif; / * Гарнітура шрифту * /
font-size: 150%; / * Розмір тексту * /
font-weight: lighter; / * Світле накреслення * /
}
</ Style>
</ Head>
<Body>
<H1> Заголовок </ H1>
<P> Звичайний текст </ p>
</ Body>
</ Html>
Нижче наведено результат даного прикладу (рис. 1).
Мал. 1. Вид тексту після застосування стилів
У табл. 2 приведені деякі стильові параметри для роботи з текстом і результат їх застосування.
| приклад | приклад | приклад | приклад | приклад |
| 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 |
властивості тексту
Крім зміни параметрів шрифтів, можна управляти і властивостями всього тексту. Значення властивостей наведені в табл. 3.
| властивість | значення | опис | приклад |
|---|---|---|---|
| line-height | normal множник точно % |
Інтерліньяж (міжрядковий інтервал) | line-height: normal line-height: 1.5 line-height: 12px line-height: 120% |
| text-decoration |
none underline overline line-through blink |
Прибрати все оформлення підкреслення Лінія над текстом перекреслення миготіння тексту |
text-decoration: none |
| text-transform |
none capitalize uppercase lowercase |
Прибрати всі ефекти Починати з великої всі прописні усі малі |
text-transform: capitalize |
| text-align | left right center justify |
вирівнювання тексту | text-align: justify вирівнювання по ширині |
| text-indent | точно % |
Відступ першого рядка | text-indent: 15px; text-indent: 10% |
Нижче, в табл. 4 наведені деякі параметри тексту і результат їх застосування.
| Приклад: і це все про нього | Приклад: текст по центру | Приклад: Це не посилання, а просто текст | Приклад: відступ першого рядка | Приклад: полуторний міжрядковий інтервал |
| text-transform: capitalize | text-align: center | text-decoration: underline | text-indent: 20px | line-height: 1.5 |
Copyright що кредитують © www.htmlbook.ru
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.