Лекционный и практический материал по теме "Форматирование текста с помощью 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 |