Для осуществления этой задачи мы можем воспользоваться одним из 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>
Это самый удобный способ, и для основной таблицы стилей рекомендуется
пользоваться именно им.
Почему я сказал "основной"? Дело в том, что на практике приходится
пользоваться всеми тремя способами, и здесь в игру вступает "каскадность"
стилей. Но об этом мы поговорим уже в следующий раз.
