Однако с тех пор много чего изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил "улучшенные теги", которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции - представлять информацию на любом устройстве независимо от его характеристик по выводу информации.
Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей броузеров. Революционные изменения были введены в новом стандарте - HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель броузера.
В новом стандарте попытались вернуться к истокам концепции HTML. Четвёртая версия, как и первая, рекомендует создавать странички таким образом, чтобы они могли быть воспроизведены на любом устройстве - будь это 21" монитор или маленький чёрно-белый экран сотового телефона.
Каким же образом была решена проблема с представлением внешнего вида информации? В этом и заключается революционность подхода. Всё оформление рекомендуется вынести во внешний стилевой файл. Основная же страничка будет содержать только информацию и ссылки на необходимые стили.
При показе странички конкретному устройству должна быть задействована соответствующая случаю таблица стилей. Для сотового телефона и монитора компьютера они, разумеется, должны быть разными. В первом случае мы используем минимальное оформление, которое позволит представить информацию наиболее оптимально и компактно. Во втором же случае в нашем распоряжении имеется всё богатство шрифтового и цветового оформления.
Таблицу стилей нужно написать всего один раз при создании сайта для каждого из устройств, на котором планируется вывод информации. К тому же таблица стилей может быть единой для целого сайта. И, следовательно, не нужно будет повторять одни и те же описания стилей на каждой из страниц.
Размещение всей стилевой информации в одном внешнем файле открывает нам и другие полезные возможности - ведь, изменив содержимое только одного (!) стилевого файла, мы можем в считанные секунды сменить весь дизайн сайта. Причём никаких других переделок не понадобится. Разумеется, это верно лишь в том случае, если первоначально сайт был спроектирован верно.
Разобравшись немного с теорией, давайте переходить к практике, и начнём мы с вопроса подключения таблицы стилей к HTML-файлу.
Подключение таблиц стилей
Для осуществления этой задачи мы можем воспользоваться одним из 3-х предлагаемых методов:
внешний файл
описание в секции заголовка
inline-описание
Начнём с самого простого, с так называемого inline-описания, или описания, встроенного в тег:
<p style="color:red; text-align:center;"> Этот текст переопределён стилем</p>
При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый лёгкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <font>.
Гораздо удобнее заранее определить все нужные стили оформления и впоследствии просто применять их к соответствующим тегам. Это будет второй способ - описание в секции заголовка. Его действие распространяется на всю страничку. Определение стилей происходит при помощи классов, которые представляют собой списки с определением всех необходимых параметров оформления.
При использовании этого метода описание стилей необходимо разместить в секции заголовка:
<head>
....
<style type="text/css">
<!--
.header { text-align : center; font-size : 27pt;}
.red { color : red; }
-->
</style>
</head>
Теперь эти стили можно применять в любом месте html-кода. Для этого используется следующая конструкция:
<p class=header>Этот текст написан стилем header<p>
<p class=red>Этот текст написан красным цветом<p>
Как видите, всё не так уж сложно. Главное - понять основные принципы. Кроме определения новых классов мы также имеем возможность переопределять стандартные теги. Например, тег <p>:
<style type="text/css">
<!--
p { text-align : center; font-size : 12pt;}
-->
</style>
Теперь весь текст, заключённый в теги <p></p>, будет выглядеть так, как определено данным стилем. Это очень удобно и позволяет легко адаптировать уже существующие странички к использованию стилей. Кроме того, это несколько уменьшает объём файла за счёт отсутствия лишних атрибутов class.
И, наконец, третий способ - вынесение описания стилей во внешний файл. Диапазон его воздействия простирается на все файлы, в которые включено описание. Этот способ наиболее соответствует концепции HTML 4.0. В случае, если нам потребуется изменить внешний вид сайта, будет достаточно скорректировать лишь один этот файл. Сравните его с предыдущими способами. В одном из них придётся менять описание на каждой страничке, а в другом даже более того - около каждого тега, что, разумеется, совершенно не вдохновляет.
Каким же образом производится внедрение внешнего файла? Для начала создается стилевой файл с описанием всех нужных нам классов (mystyle.css):
.header { text-align : center; font-size : 27pt;}
.red { color : red; }
p { text-align : center; font-size : 12pt;}
А потом ссылка на него внедряется в документ при помощи тега <link>:
<head>
....
<link rel="stylesheet" type="text/css" href="css/mystyle.css" title="MyStyleSheet">
....
</head>
Это самый удобный способ, и для основной таблицы стилей рекомендуется пользоваться именно им.
Почему я сказал "основной"? Дело в том, что на практике приходится пользоваться всеми тремя способами, и здесь в игру вступает "каскадность" стилей. Но об этом мы поговорим уже в следующий раз.
Источник: http://getinfo.ru
| 
