Об одном из способов внедрения CSS в наш документ я почти проговорилась в прошлой главе, когда упомянула о том, что стили могут быть вынесены в отдельный файл, а это значит, что нам остается лишь указать путь к этому файлу, и указать, что это файл с CSS:
|
<head> <link href="special.css" rel="stylesheet" type="text/css"> </head> |
Итак,
когда стили вынесены в отдельный файл – это называется внешние таблицы
стилей. Их мы вводим в документ при помощи тэга <link>, который
размещается внутри тэга <head></head>, а не <body>,
как мы привыкли.
Давайте ознакомимся с атрибутами тэга <link>:
1 – href=”http://…” – пусть к файлу со стилями
2 - rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа. Подробнее об атрибуте rel и его значениях вам расскажет спецификация по HTML.
3 - type="text/css" – тип содержимого, подгружаемой информации, в нашем случае мы указываем, что это CSS.
Но не надо думать, что если вы связали документ с внешней таблицей стилей через тэг <link> – этого достаточно, чтобы все заработало. Надо еще указать для каких тэгов (элементов нашего документа) мы используем таблицы стилей.
Допустим, некоторая таблица стилей (которая у нас хранится в файле special.css) устанавливает красный цвет для абзаца, вот такой код будет у нее (в файле special.css):
Давайте ознакомимся с атрибутами тэга <link>:
1 – href=”http://…” – пусть к файлу со стилями
2 - rel="stylesheet" – указывает, является ли подгружаемые таблицы стилей постоянными, предпочитаемыми или альтернативными. В нашем случае мы установили постоянные таблицы стилей для документа. Подробнее об атрибуте rel и его значениях вам расскажет спецификация по HTML.
3 - type="text/css" – тип содержимого, подгружаемой информации, в нашем случае мы указываем, что это CSS.
Но не надо думать, что если вы связали документ с внешней таблицей стилей через тэг <link> – этого достаточно, чтобы все заработало. Надо еще указать для каких тэгов (элементов нашего документа) мы используем таблицы стилей.
Допустим, некоторая таблица стилей (которая у нас хранится в файле special.css) устанавливает красный цвет для абзаца, вот такой код будет у нее (в файле special.css):
|
P.special { color : red; } |
Однако, в данном случае, таблица стилей указывает, что не все блоки
текста, заключенные в параграфы (<p>текст</p>), будут
выделены красным цветом, а только те блоки, которым мы это укажем.
|
<html> <head> <title>Документ с CSS</title> <link href="special.css" rel="stylesheet" type="text/css"> </head> <body> <p class="special">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p> </body> </html> |
Посмотрите на код нашего документа, при помощи атрибута class мы задали
тэгу <p> имя класса. Затем, когда мы писали код таблицы стилей (в
файле special.css), мы указали, что этот стиль будет применяться только
к тем тэгам (атрибутам) <p>, для которых мы задали имя класса
special. Вот теперь у нас все связано между собой.
Таблицы стилей не обязательно должны быть вынесены во внешний файл, вы можете внедрять их непосредственно в ваш документ при помощи тэга <style>, в котором вы разместите код ваших таблиц стилей (<style>код таблицы стилей</style>):
Таблицы стилей не обязательно должны быть вынесены во внешний файл, вы можете внедрять их непосредственно в ваш документ при помощи тэга <style>, в котором вы разместите код ваших таблиц стилей (<style>код таблицы стилей</style>):
|
<html> <head> <title>Документ с CSS</title> <style type="text/css"> P.special { color : red; } </style> </head> <body> <p class="special">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не указали это при помощи атрибута class.</p> </body> </html> |
Обратите
внимание, тэг <style>, как и тэг <link>, размещается внутри
тэга <head></head>, а не <body>.
Есть еще и третий способ внедрения CSS в ваш документ, когда при помощи атрибута (не путать с тэгом) style код CSS вводится непосредственно для какого-либо тэга:
Есть еще и третий способ внедрения CSS в ваш документ, когда при помощи атрибута (не путать с тэгом) style код CSS вводится непосредственно для какого-либо тэга:
|
<html> <head> <title>Документ с CSS</title> </head> <body> <p style="color: red">В этом абзаце текст должен быть красным.</p> <p>А в этом абзаце нет, потому что мы не задали для него стиля.</p> </body> </html> |
color:
red – это код таблицы стилей, задающей красный цвет для абзаца, ее мы
ввели в наш документ при помощи атрибута style, естественно, что в
атрибут style вы будете помещать уже свои, другие, таблицы стилей.
Вот и вся премудрость с внедрением стилей в наш HTML-документ. Уже не все так просто, как хотелось бы, но и не сложно при этом. Напоминаю вам, что о том, как писать коды таблиц стилей вы узнаете из спецификации по CSS, а также из учебников и пособий, ссылки на которые вы найдете в правой колонке.
Вот и вся премудрость с внедрением стилей в наш HTML-документ. Уже не все так просто, как хотелось бы, но и не сложно при этом. Напоминаю вам, что о том, как писать коды таблиц стилей вы узнаете из спецификации по CSS, а также из учебников и пособий, ссылки на которые вы найдете в правой колонке.
<<< Ступенька 44-ая: Назад | Далее: Ступенька 46-ая >>>
