Работа с текстом css на сайте. На этом уроке работаем над применением стилей CSS к тексту.

Работа с применением стилей CSS к тексту похожа на работу, которую мы изучали в html, но здесь мы можем применять стиль css к тексту на всем сайте с помощью редактирования одного файла style.css.

1) Давайте посмотрим работу свойства TEXT-ALIGN выравнивание текста по вертикали с дополнительными вариантами такими как: center - выравниваем по центру, left - выравниваем по левому краю, right - выравниваем по правому краю, justify - выравниваем по всей ширине страницы. Давайте посмотрим пример применения здесь мы приводим только пример файла, в котором мы указываем стиль для применения style.css.

Пример содержание файла style.css для свойства ALIGN.


h1{ text-align:center;}
h2 {text-align:right;}
h3 {text-align:left;}
h4 {text-align:justify;}
 

А вот и итог применения стиля в браузере всё так как мы и указали теперь этот стиль css применяется ко всем страницам где мы прописали в голове документа строчку<link href="style.css" rel="stylesheet" type="text/css"/> между тегами <head> и </head>.

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

2) Приступим к изучению свойства TEXT-DECORATION оформление текста с указанием различных вариантов в CSS таких как: none - по умолчанию, overline - надчеркиваем текст сверху, underline - подчеркиваем текст снизу, line-through - перечеркиваем текст. Смотрим ниже пример.

Пример содержание файла style.css для свойства DECORATION.


h1 {text-decoration:line-through;}
h2 {text-decoration:underline;}
h3 {text-decoration:overline;}
p {text-align:right; text-decoration:overline;}
 

Вот что у нас получится если мы применим этот стиль CSS, смотрим пример ниже.

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

3) Давайте рассмотрим ещё один интересный пример с применением CSS свойство TEXT-INDENT задающий отступы для строки. С его помощью мы можем задать отступы в процентном соотношении по отношению к открывшемуся окну браузера или задавать отступ в пикселях. Давайте посмотрим пример, как записать это в файле style.css. Указываем, что заголовок второго уровня начнётся с отступом 25%, а параграф начнётся с отступом 100 пикселей.

Пример содержание файла style.css для свойства INDENT.


h2 {text-indent: 25%;}
p {text-indent: 100px;}
 

Вот что у нас получилось с отступами как мы и указали в файле style.css заголовок начался с отступом 25%, а параграф с отступом 100 пикселей.

отступы текста CSS

Здесь мы заканчиваем первую часть применения таблицу стилей CSS к тексту жду вас на второй части урока где мы продолжим работать над текстом CSS.

Следующий урок работы с текстом CSS часть 2.
Вернуться назад к уроку применения к сайту CSS.



Рейтинг@Mail.ru   Яндекс.Метрика