HTML: Популярный самоучитель

ОглавлениеДобавить в закладки К обложке

Правила отображения HTML-элементов

Рассмотрим самое простое применение CSS – задание стиля текста (или прочего содержимого), содержащегося внутри определенных HTML‑элементов. Для этого нужно указать в качестве селектора название HTML‑элемента (или нескольких HTML‑элементов), например:

H1 {color: red; font-family: arial}

H2, H3 {color: blue; font-family: courier}

P {font-style: italic}

Теперь все заголовки первого уровня будут отображаться красным цветом шрифтом Arial, заголовки второго и третьего уровней будут отличаться только размером шрифта, а текст внутри каждого HTML‑элемента P будет отображаться курсивом.

Приведенный выше текст уже является таблицей стилей. Его можно поместить в отдельный CSS‑файл. Тогда получится внешняя таблица стилей. Можно поместить определение CSS внутрь HTML‑документа так, как это показано в примере 10.1.

Пример 10.1. Стили для HTML-элементов

<HTML>

<HEAD>

<TITLE>Использование стилей HTML-элементов</TITLE>

<STYLE type = "text/css">

H1 {color: red; font-family: arial}

H2, H3 {color: blue; font-family: courier}

P {font-style: italic}

</STYLE>

</HEAD>

<BODY>

<H1>Заголовок первого уровня</H1>

<P>Текст абзаца

<H2>Заголовок второго уровня</H2>

<P>Текст абзаца

<H3>Заголовок третьего уровня</H3>

<P>Текст абзаца

</BODY>

</HTML>

На рис. 10.1 приведено подтверждение сказанных выше слов о том, как браузер покажет текст документа с рассмотренной таблицей стилей.

Рис. 10.1. Задание стилей для HTML-элементов


-= 101 =-
Регистрация.
Забыли пароль?
Логин
Пароль
Запомнить меня