Лекционный и практический материал по теме "Форматирование текста с помощью CSS"

Предмет: Информатика
Категория материала: Конспекты
Автор:
Цвет текста

Свойство color используется для определения цвета текста. Цвет может быть задан с помощью:

·  названия, например, "red"

·  кода RGB, например, "rgb(255,0,0)"

·  шестнадцатиричного кода, например, "#ff0000"

Цвет текста для всей страницы задается в селекторе body.

Пример

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

Совет: в соответствии со стандартами W3C если вы указали цвет текста, вы должны указать также цвет фона.

Выравнивание текста

Свойсто text-align отвечает за выравнивание текста по горизонтали.

Текст можно выровнять по центру, по правому/левому краю или по ширине.

Когда текст выровнен по ширине (text-align:justify), каждая строка имеет одинаковую длину (как в журналах и газетах), а выравнивание текста достигается изменением пробелов между словами:

Пример

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Оформление текста

Свойство text-decoration используется для настройки оформления текста.

Обычно свойство text-decoration используют для удаления подчеркивания ссылок:

Пример

a {text-decoration:none;}

Кроме того, это свойство может быть использовано для оформления простого текста:

Пример

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

Совет: не рекомендуется подчеркивать текст, не являющийся ссылкой, так как это вводит в заблуждение пользователей сайта.

Преобразование текста

Свойство text-transform используется для преобразования текста в строчные или заглавные буквы.

Это свойство можно использовать для того, чтобы преобразовать все буквы текста в заглавные/строчные буквы, или изменить первые буквы каждого слова на заглавные (капитализация):

Пример

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

  Красная строка

В CSS есть свойство, которое может автоматически выводить красную строку в параграфах. Это свойство называется text-indent:

Пример p {text-indent:50px;}
Тип материала: Документ Microsoft Word (docx)
Размер: 472.53 Kb
Количество скачиваний: 13
Просмотров: 70

Похожие материалы