Главная страница Случайная страница
Разделы сайта
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Ступенька 45-ая.
|
|
Об одном из способов внедрения CSS в наш документ я почти проговорилась в прошлой главе, когда упомянула о том, что стили могут быть вынесены в отдельный файл, а это значит, что нам остается лишь указать путь к этому файлу, и указать, что это файл с CSS:
| < head> < link href=" special.css" rel=" stylesheet" type=" text/css" > < /head> |
Итак, когда стили вынесены в отдельный файл – это называется внешние таблицы стилей. Их мы вводим в документ при помощи тэга < link>, который размещается внутри тэга < head> < /head>, а не < body>, как мы привыкли.
Давайте ознакомимся с атрибутами тэга < link>:
1 – href=”https://…” – пусть к файлу со стилями
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>):
| < 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 вводится непосредственно для какого-либо тэга:
| < html> < head> < title> Документ с CSS< /title> < /head> < body> < p style=" color: red" > В этом абзаце текст должен быть красным.< /p> < p> А в этом абзаце нет, потому что мы не задали для него стиля.< /p> < /body> < /html> |
color: red – это код таблицы стилей, задающей красный цвет для абзаца, ее мы ввели в наш документ при помощи атрибута style, естественно, что в атрибут style вы будете помещать уже свои, другие, таблицы стилей.
Вот и вся премудрость с внедрением стилей в наш HTML-документ. Уже не все так просто, как хотелось бы, но и не сложно при этом. Напоминаю вам, что о том, как писать коды таблиц стилей вы узнаете из спецификации по CSS, а также из учебников и пособий, ссылки на которые вы найдете в правой колонке.
|
|