Выравнивание заголовка по центру html. Атрибуты и заголовки в HTML
Как я и обещал ранее, в этом уроке вы узнаете как можно выровнять по горизонтали содержимое любого HTML-тега на странице не используя устаревший атрибут align . Как вы возможно уже догадались, мы опять будем использовать стили (CSS), а точнее наш любимый атрибут style .
Итак, чтобы выровнять содержимое HTML-элемента, необходимо атрибуту style присвоить одно из следующих значений:
- text-align:center - Выравнивание каждой строки по центру элемента, например параграфа.
- text-align:left - Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).
- text-align:right - Каждая строка прижимается к правой стороне.
- text-align:justify - Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая - «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify , то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.
Пример выравнивания содержимого тегов
Заголовок по центру.
Параграф по центру.
Результат в браузере
Заголовок по центру.
Текст параграфа прижимается вправо.
Параграф по центру.
Вообще, горизонтальное выравнивание применяется только к блочным тегам и ячейкам таблицы (о них поговорим позже). Хотя, с другой стороны, даже если вы попытаетесь, то не сможете применить его к встроенным (inline). Почему? А помните мы недавно выяснили, что ширина встроенного элемента равна его содержимому? Соответственно получается, что этому самому содержимому просто некуда будет выравниваться и браузер элементарно проигнорирует ваши «художества». :)
Домашнее задание.
- Создайте заголовок статьи, двух ее разделов и одного подраздела в первом разделе. И пусть заголовок статьи располагается по центру страницы.
- Установите для всей страницы шрифт Arial, а для всех заголовков - Times и пусть они будут написаны курсивом.
- Цвет текста заголовка статьи поставьте #FF6600, разделов #6600FF, а подраздела оставьте неизменным.
- Напишите под каждым заголовком по одному параграфу, причем текст каждого из них должен занимать не меньше трех строк при просмотре в браузере.
- Выровняйте второй параграф по центру, третий - по правой стороне, а четвертый по обоим.
Данный урок посвящен атрибутам и заголовкам в HTML, которые являются незаменимыми элементами любого HTML документа. Вот почему так важно владеть данным вопросом. В данном уроке разъясняется, что такое атрибут, приводятся примеры работы с атрибутами. Также в уроке рассматриваются заголовки, используемые в HTML, приводятся примеры заголовков.
Атрибуты в HTML
Что такое атрибут? Под атрибутом понимается параметр, который придает тегам определенную информацию. Этих параметров может быть очень много. К примеру, с помощью атрибутов мы можем выровнять текст абзаца по ширине, задать стиль и размер шрифта, задать нужные отступы и т.д. Атрибуты прописываются внутри тегов, после них идет знак равенства, затем в двойных кавычках указываются значения атрибута. Разделяются атрибуты друг от друга точкой с запятой.
Примеры работы с атрибутами
Рассмотрим работу с атрибутами на примерах. Самый простой пример — возьмем тег абзаца
С атрибутом «align». Напишем:
Пример выравнивания абзаца по левому краю
Атрибут «align» сообщает браузеру, что данный абзац нужно выровнять по левому краю экрана.
Для тега абзаца также могут быть применены атрибуты:
- align="center" – выравнивание по центру экрана;
- align="right" – выравнивание по правому краю;
- align="justify" — выравнивание текста по ширине экрана.
Теперь усложним задачу — создадим HTML страницу с использованием нескольких разных атрибутов. Пример такой страницы будет иметь следующий код:
Пример страницы с атрибутами в HTML Атрибуты в HTML