Оглавление

Решение

Рассмотрим данный основополагающий механизм на примере следую-
щего HTML-документа:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Пример страницы</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
</head>
<body>
<h1>Первый заголовок</h1>
<p>Параграф с интересным содержанием.</p>
<h2>Второй заголовок</h2>
<p>Параграф с интересным содержанием.</p>
<h2>Третий заголовок</h2>
<p>Параграф с интересным содержанием.</p>
</body>
</html>

 

Он содержит три заголовка (выделенных жирным шрифтом), созданных с помощью тегов <h1> и <h2>. Если разработчик не определил собственные стили, заголовки будут оформлены в соответствии со стандартной таблицей стилей брвузера, т. е. заголовок h1 будет отображаться крупным шрифтом, h2 – мельче, чем h1, но крупнее обычного текста абзаца. Документ, оформленный стилями по умолчанию, будет вполне читаемым, если он достаточно прост. Для изменения внешнего вида этих элементов будет достаточно добавить несколько строчек CSS-кода:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN"
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Пример страницы</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style type="text/css">
h1, h2 {
font-family: sans-serif;
color: #3366CC;
}
</style>
</head>
<body>
<h1>Первый заголовок</h1>
<p>Параграф с интересным содержанием.</p>
<h2>Второй заголовок</h2>
<p>Параграф с интересным содержанием.</p>
<h2>Третий заголовок</h2>
<p>Параграф с интересным содержанием.</p>
</body>
</html>

 

Все преобразования разместились между тегами <style>, расположенными в заголовке страницы (элемент head). Мы определили, что заголовки h1 и h2 должны отображаться шрифтом sans-serif светло-голубого цвета. Особенности синтаксиса мы рассмотрим чуть позднее. Нам ничего не потребуется менять в разметке страницы – изменения в описании стиля, размещенного в верхней части страницы, распространяются на все три имеющихся на странице заголовка и будут также применены ко всем заголовкам, добавленным позднее с помощью тегов <h1> или <h2>.

 

Примечание
HTML или XHTML? На протяжении всей книги при упоминании веб-страниц, разметки и примеров кода я буду использовать термин HTML. Это можно интерпретировать как HTML и/или XHTML, если специально не оговорено иначе.

 

Теперь, когда вы имеете представление о назначении стилей CSS, настало время рассмотреть способы их использования в HTML-документах.

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити