Теперь настало время поговорить о способах определения стилей. До нынешнего урока, CSS мы объявляли в специальном контейнере <STYLE>, но это не всегда удобно.

Стиль можно определить внутри какого-либо HTML-тэга. Выглядит это следующим образом:
- - -
<P style=”text-align: center; font-style: italic; font-size: 5pt;”>
- - -
Как видите, такой способ очень неудобен, а ко всему прочему здесь происходит засорение кода, что приводит к большему торможению вашего сайта. Таким образом, я советую вам избегать CSS в этом виде и юзать более рациональные методы.

В первом уроке я уже упоминал о том, что каскадные стили можно загружать из внешнего файла. Как это делается? Давайте посмотрим:
- - -
<Link href=”style.css” type=”text/css” rel=”stylesheet”>
- - -
Последний атрибут дает понять броузеру, что содержимое файла style.css – ничто иное, как таблицы стилей. Такой способ очень удобен и является одним из самых предпочтительных. Style.css – это текстовый файл, содержащий только описания элементов. Здесь не должно быть никаких контейнеров и тэгов. Могу привести пример:

P {text-indent: 15;
font-size: 20;}

Как видите, ничего сложного тут нет. Свойство text-indent определяет красную строку, которая в нашем случае равна 15 пикселям.

Установку стилей для одного тэга можно применять многократно. Если мои слова для вас – пустой звук, то взгляните на очередной пример:

Font, P {font-size: 20;}
P, H1 {color: darkgreen;}

Предположим, что в некотором файле style.css, вы определили свойство P {color: blue;}, но вам необходимо сделать цвет абзаца другим. В таком случае, при постановке стилей в контейнере <Style> и разметке P{color: red;}, цвет будет одинаково красным во всех абзацах, то есть свойство, определенное в файле замещается. На этом урок завершен. Все встали, перемена!

>>> В этом уроке мы познакомились с различными способами определения стилей.

>>> Вопросы и задания по урокам:
- Как сделать фон абзаца синим?
- Какие способы определения стилей вы узнали?
- Какой из способов самый нерациональный и почему?
- Сделайте страницу, в которой фон абзацев будет отличным от цвета бэкграунда и задайте стиль шрифта жирным. (Все описанное проделайте с помощью CSS, заключенном в файле new.css)

РЕКЛАМА