Основи CSS – Текст, HTML, XML, DHTML, Інтернет-технології, статті

Влад Мержевіч

За допомогою CSS можна визначати стиль і вид тексту. Аналогічно тому, що використовується тег FONT, Що задає властивості шрифту, але стилі володіють великими можливостями і дозволяють скоротити код HTML.


Властивості шрифту


Зміна зображення шрифту і його розміру відбувається через властивості CSS, які описані в таблиці 1.














































Таблиця 1. Атрибути CSS для управління шрифтами

Властивість Значення NC IE Опис Приклад
font-family назва шрифту
4+

4+
Задає список шрифтів p {font-family: Arial, serif}
font-style normal
italic
oblique

4+
4+
 

4+
4+
4+
Нормальний шрифт
Курсив
Похилий шрифт
p {font-style: italic}
font-variant normal
small-caps
 
4+
4+
Капітель
(Особливі прописні букви)
p {font-variant: small-caps}
font-weight normal
lighter
bold
bolder
100-900

4+
4W
4+
4W
4+

4+
4+
4+
4+
4+
Нормальна жирність
Світле накреслення
Напівжирний
Жирний
100-світлий шрифт,
900-самий жирний
p {font-weight: bold}
font-size Розмір шрифту
normal
pt
px
%


4+
4+
4+
4+


4+
4+
4+
4+

нормальний розмір
пункти
пікселі
відсотки

font-size: normal
font-size: 12pt
font-size:
12px
font-size: 120%

NC — Netscape Communicator, IE — Microsoft Internet
Explorer; 4+ означає, що властивість підтримується в браузері 4 версії і вище. 4W – Працює тільки під Windows.


Зауваження
Коли розмір шрифту задається абсолютними значеннями, тобто вказується конкретне значення шрифту в пунктах або пікселах, то змінити цю величину за допомогою опції браузера Вид | Розмір шрифту неможливо. Якщо шрифт встановлений дуже дрібним, то виправити цей недолік читачеві простими засобами не представляється можливим. Тому краще задавати розмір шрифту у відсотках (приклад 1).

Приклад 1. Завдання властивостей шрифту з допомогою CSS
<html>
<head>
<style>
H1 { font-family: Arial, Helvetica, Verdana, sans-serif; font-size:
150%; font-weight: light
}
</style>
</head>
<body>

Заголовок
Звичайний текст
</body>
</html>

Нижче наведено результат прикладу 1.

Заголовок

Звичайний текст

У таблиці 2 дані деякі параметри і результат їх застосування.















Таблиця 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.














































Таблиця 3. Властивості CSS для управління видом тексту

Властивість Значення NC IE Опис Приклад
line-height normal
множник
точно
%

4W
4+
4+
4+

4+
4+
4+
4+
Інтерліньяж (міжрядковий інтервал) line-height: normal
line-height: 1.5
line-height:
12px
line-height: 120%
text-decoration
none
underline
overline
line-through
blink

4+
4+
 
4+
4+

4+
4+
4W
4+
 
Прибрати все оформлення
Підкреслення
Лінія над текстом
Перекреслення
Мигання тексту
text-decoration: none
text-transform
none
capitalize
uppercase
lowercase
4+
4+
4+
4+

4W
4W
4W
4W
Прибрати всі ефекти
Починати з прописних
ВСЕ ПРОПИСНІ
всі рядкові
text-transform: capitalize
text-align left
right
center
justify

4+
4+
4+
4+

4+
4+
4+
4W
Вирівнювання тексту text-align: justify
вирівнювання по ширині
text-indent точно
%

4+
4+

4+
4+
Відступ першого рядка text-indent:15px;
text-indent:10%

NC — Netscape Communicator, IE — Microsoft
Internet Explorer; 4+ означає, що властивість підтримується в браузері 4 версії і вище. 4W – Працює тільки під Windows.


Нижче, в таблиці 4 наведено деякі параметри тексту і результат їх застосування.
















Приклад 4. Результат використання різних параметрів тексту

Приклад: і це все про нього Приклад: текст по центру Приклад: Це не посилання, а просто текст Приклад: відступ першого рядка Приклад: полуторний міжрядковий інтервал
text-transform: capitalize text-align:center text-decoration: underline text-indent: 20px line-height: 1.5

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*