Определяем стили текста в CSS самостоятельно
В текущем уроке мы рассмотрим свойства текстового элемента интернет-страницы.
Навигация по странице
Определим нужный цвет:
<html> |
Строка style="color:#000000" является линейным CSS включением → устанавливает цвет CSS текста в режиме HEX. HEX — шестнадцатеричная система счисления (цифры от 0 до 9 и латинские буквы от a до f), которая по структуре сравнима с RGB (Red Greеn Blue).
Результат:
В примере ниже цвет текста установлен для всей страницы:
<html> |
Результат:
Содержимое сектора <body> </body> по сути есть все то, что мы видим на web-странице. Таким образом, добавляя к его первому тегу строчку style="color:#ff6c36", мы делаем текст всей страницы оранжевым (черный по умолчанию), за исключением третьего параграфа, где он — текст определен как синий. Атрибут align="" определяет горизонтальное выравнивание. Возможны значения: center, left, right, justify. В следующем уроке подробно рассматриваются способы горизонтального выравнивания.
Значение #000000 определяет черный цвет, #ffffff – белый. Цвет также может быть задан словом, например, style="color:Red".
Смотрите: таблица цветов из HTML справочника.
Пример:
<p style="background-color:#ff9900" align="center">Параграф имеет оранжевый фон.</p> |
Результат:
Параграф имеет оранжевый фон.
Параграф имеет синий фон.
Параграф представляет собой блочный элемент, поэтому его фон распространяется по всей ширине страницы, но CSS стили могут изменить такое положение вещей. Например, атрибут со значением width:350px сделает фон параграфа и сам параграф шириной 350 пикселей. В нашем примере содержание параграфов выровнено по центру, данное свойство рассматривается ниже.
Пример с изменением размера:
<head> |
Результат:
Размер текстовой строки составляет 13 пикселей.
Размер текстовой строки составляет 16 пикселей.
CSS текст по центру страницы или любого ее элемента:
<head> |
Результат:
Определяем оранжевый текст по центру параграфа.
Определим текст по центру параграфа и в этом случае.
Содержимое первого параграфа было отцентрировано с помощью HTML атрибута.
В следующем уроке подробно рассматривается горизонтальное и вертикальное выравнивание.
Произведем отступ текста слева двумя способами:
<html> |
Результат:
Посмотреть в новом окне: CSS отступ текстовой строки
Манипуляции с CSS текстом CSS текст и цвет CSS свойства текста