Урок №5: форматирование текста с помощью CSS
Возможности CSS позволяют очень быстро отформатировать текст на всех страницах сайта. Также с помощью таблиц стилей можно отформатировать текст так, как не позволяет язык разметки гипертекста. Например убрать подчеркивание ссылок (этим увлекаться не стоит, посетители могут запутаться), настроить расстояние между строчками, словами и символами, включить отображение тени и многое другое.
Цвет текста
Цвет текст как и в HTML можно задать несколькими способами, отличается только синтаксис. Подобрать цвет вам поможет: Таблица кодов цветов. Для примера зададим в css документа зеленый цвет параграфов тремя способами:
p {color:green;}
p {color:rgb(0,255,0);}
p {color:#00ff00;}
В первом случае используется название цвета, данный способ используется при работе с стандартными цветами, название которых хорошо известно (black, white, blue, green, red и т.д). Во-втором случае используется rgb-код, который используется для более глубокой настройки оттенков. И третий, самый популярный способ, HTML-код цвета - использует шестнадцатеричные числа, поэтому более компактен.
Выравнивание текста
В CSS за горизонтальное выравнивание текста отвечает свойство - text-align. Значения данного свойства указывает, как будет выравнен текст.
- по центру (center), синтаксис: p {text-align:center;}
- по левому краю (left), синтаксис: p {text-align:left;}
- по правому краю (right), синтаксис: p {text-align:right;}
- по ширине (justify), синтаксис: p {text-align:justify;}
Выравнивать текст можно не только в параграфах, можно также выравнять заголовок, список, вообще любой текстовый элемент.
Декорации текста
Свойство CSS, которое отвечает за декорации в текста имеет название text-decoration. Именно значения этого свойства отвечают за подчеркивание, перечеркивание и создает линию над текстом. Также с помощью этого свойства можно создать мигающий текст, однако его поддерживают далеко не все браузеры.
- p {text-decoration:underline;} - текст абзаца будет подчеркнутым
- p {text-decoration:line-through;} - текст абзаца будет перечеркнутым
- p {text-decoration:overline;} - над текстом абзаца появится линия
- p {text-decoration:blink;} - текст абзаца будет мигать ( не во всех браузерах)
Также данное свойство можно использовать, чтобы убрать подчеркивание ссылок, что в HTML сделать невозможно.
- a:link {text-decoration:none;} - не подчеркнутая ссылка
- a:visited {text-decoration:none;} - не подчеркнутая посещенная ссылка
- a:hower {text-decoration:none;} - не подчеркнутая ссылка, при наведении на нее курсором
Трансформация текста
За трансформацию текста в css отвечает свойство - text-transform. Данное свойство используется редко, но все же может пригодиться. С помощью него можно сделать все буквы параграфа большими, маленькими и даже сделать заглавными первые буквы всех слов.
- p {text-transform:uppercase;} - все буквы данного абзаца будут большими
- p {text-transform:lowercase;} - все буквы данного абзаца будут маленькими
- p {text-transform:capitalize;} - каждое слово в данном абзаце будет начинаться с заглавное буквы
Отступы в тексте
Иногда для красивого оформления текста, можно сделать отступ первых строк абзацев. Для этого служит свойство - text-indentation, в значении которого необходимо указать насколько нужно сдвинуть вправо первую строку абзаца, в пикселах. Например:
p {text-indent:50px;}
В результате первая строка сдвинется на 50 пикселей вправо, относительно остального текста.
Возможно понадобиться задать отступ между символами, словами или вертикальный отступ от строк текста в этом случае помогут следующие свойства CSS:
- p {letter-spacing:10px;} - задает расстояние между символами в тексте, в данном случае задано 10 пикселей
- p {word-spacing:20px;} - задает расстояние между словами в тексте, в данном случае задано 20 пикселей
- p {line-height:200%;} - задает расстояние между строками в %(по умолчанию 100%), в данном случае расстояние увеличено до 200%
Свойство white-space
С помощью свойства white-space можно задать, как будут обрабатываться пробелы внутри элемента. Можно сделать, чтобы весь текст находился на одной строке, тем самым создавая горизонтальную прокрутку. Или задать тексту свойство отображаться, так как он написан в HTML документе. Свойство имеет следующие значения:
- p {white-space:normal;} - текст переносится на новую строку при необходимости. Используется по умолчанию
- p {white-space:nowrap;} - текст не переносится на новую строку создавая горизонтальную прокрутку.
- p {white-space:pre;} - пробельные символы сохраняются браузером. Текст переносится на новую строку только на переносах строк в исходном коде. Аналог тега pre.
- p {white-space:pre-line;} - последовательности пробелов превращаются в одиночные пробелы. Текст переносится на новую строку при необходимости и при переносах строк в исходном коде
- p {white-space:pre-wrap;} - пробельные символы сохраняются браузером. Текст переносится на новую строку при необходимости и при переносах строк в исходном коде
- p {white-space:inherit;} - задает, что значение свойства white-space должно наследоваться от родительского элемента
Тень текста
Тень текста значительно украсит ваш контент в целом, задается с помощью css свойства - text-shadow. Значения которого необходимо указывать через пробел. Например:
p {text-shadow:4px 4px 3px blue;}
Где первое значение отвечает за горизонтальное смещение тени к тексту (x), положительное значение - вправо, отрицательное - влево (в нашем случае тень текста сместиться вправо на 4 пиксела).
Второе значение отвечает за вертикальное смещение тени к тексту (y), положительное - вниз, отрицательно - вверх (в нашем случае тень текста сместиться вниз на 4 пиксела).
Третье значение отвечает за амплитуду тени, чем выше ее значение тем больше степень размытия тени (в нашем случае степень размытия 3 пиксела).
Четвертое значение отвечает за цвет отбрасываемой тени (в нашем случае установлен синий цвет)
Используя эти значения можно сильно украсить заголовки. Отличные примеры заголовков с использованием теней можно посмотреть здесь - CSS тень текста
Далее продолжим рассматривать форматирование текста с помощью CSS. На следующем уроке рассмотрим виды, стили и размеры шрифтов: Шрифт текста
|
R598551293139
