Головна Реєстрація Вхід
Меню сайту


Підручники
Підручник HTML [17]
Підручник CSS [17]


Форма входу


Статистика
Онлайн всього: 1
Гостей: 1
Користувачів: 0


Пошук
Вітаю Вас, Гість · RSS 25.04.2024, 17:04
На головну » Підручники » Підручник CSS » Урок 5: Текст - Підручник CSS
Урок 5: Текст

Форматування та встановлення стилю тексту - ключова проблема для будь-якого web-дизайнера. У цьому уроці ви побачите вражаючі можливості CSS при відображенні тексту. Будуть розглянуті наступні властивості:

Відступи [text-indent]

Властивість text-indent дозволяє виділити параграф за допомогою установки відступу для його першого рядка. У прикладі 30px застосовується до всіх параграфах <p>:

p {
text-indent: 30px;
}

Показати приклад

Вирівнювання тексту [text-align]

CSS-властивість text-align відповідає атрибуту, використовуваному в старих версіях HTML. Текст може бути вирівняний left, right, center або justify.

У прикладі текст заголовних комірок таблиці <th> вирівнюється вправо, а в осередках даних <td> - по центру. Крім того, нормальні параграфи - justify:

th {
text-align: right;
}

td {
text-align: center;
}

p {
text-align: justify;
}

Показати приклад

Декоративний варіант [text-decoration]

Властивість text-decoration дозволяє додавати різні "декоративні ефекти". Наприклад, можна підкреслити текст, провести лінію по або над текстом і т. д. У прикладі <h1> підкреслені, <h2> - мають риску над текстом, а <h3> - перекреслені.

h1 {
text-decoration: underline;
}

h2 {
text-decoration: overline;
}

h3 {
text-decoration: line-through;
}

Показати приклад

Інтервал між буквами [letter-spacing]

Інтервал між буквами тексту можна специфікувати властивістю letter-spacing. Значення - потрібна величина. Наприклад, якщо вам необхідно 3px між літерами в параграфах <p> і 6px - у заголовках <h1> , то використовується такий код:

h1 {
letter-spacing: 6px;
}

p {
letter-spacing: 3px;
}

Показати приклад

Трансформація тексту [text-transform]

Властивість text-transform управляє регістром символів. Можна вибрати capitalize, uppercase або lowercase, в залежності від того, як виглядає текст в оригінальному HTML-коді.

Наприклад, слово "headline" можна показати "HEADLINE" або "Headline". Є чотири можливих значення text-transform:

capitalize
Капіталізує кожне слово. Наприклад: "john doe" стане "John Doe".
uppercase
Конвертує всі символи у верхній регістр. Наприклад: "john doe" стане "JOHN DOE".
lowercase
Конвертує всі символи в нижній регістр. Наприклад: "JOHN DOE" стане "john doe".
none
Трансформації немає - текст відображається так само, як в HTML-коді.

Для прикладу ми використовуємо список імен. Всі імена виділені за допомогою <li> (list-item). Давайте капіталізуємо всі імена та відобразимо всі заголовки верхнім регістром.

Бачите, HTML-код в цьому прикладі в дійсності записаний в нижньому регістрі.

h1 {
text-transform: uppercase;
}

li {
text-transform: capitalize;
}

Показати приклад

Резюме

Протягом трьох останніх уроків ви ви вивчили кілька CSS-властивостей, але їх - багато. У наступному уроці ми розглянемо роботу з посиланнями.
<< Урок 4: Шрифт
Всього коментарів: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]