- •Учебник по Html для чайников. Инструментарий.
- •Учебник по Html для чайников. Инструментарий.
- •Учебник по Html для чайников. Инструментарий.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Простейшие.
- •Учебник по Html для чайников. Таблицы.
- •Учебник по Html для чайников. Таблицы.
- •Учебник по Html для чайников. Таблицы.
- •Учебник по Html для чайников. Таблицы.
- •Учебник по Html для чайников. Таблицы.
- •Учебник по Html для чайников. Таблицы.
- •Учебник по Html для чайников. Таблицы.
- •Учебник по Html для чайников. Таблицы.
- •Учебник по Html для чайников. Таблицы.
- •Учебник по Html для чайников. Дополнительные.
- •Учебник по Html для чайников. Дополнительные.
- •Учебник по Html для чайников. Дополнительные.
- •Учебник по Html для чайников. Дополнительные.
- •Учебник по Html для чайников. Дополнительные.
- •Учебник по Html для чайников. Дополнительные.
- •Учебник по Html для чайников. Фреймы.
- •Учебник по Html для чайников. Фреймы.
- •Учебник по Html для чайников. Фреймы.
- •Учебник по Html для чайников. Фреймы.
- •Учебник по Html для чайников. Фреймы.
- •Учебник по Html для чайников. Фреймы.
- •Учебник по Html для чайников. Фреймы.
- •Объекты, скрипты и другие средства, чтобы оживить наш документ.
- •Объекты, скрипты и другие средства, чтобы оживить наш документ.
- •Объекты, скрипты и другие средства, чтобы оживить наш документ.
- •Объекты, скрипты и другие средства, чтобы оживить наш документ.
- •Объекты, скрипты и другие средства, чтобы оживить наш документ.
Объекты, скрипты и другие средства, чтобы оживить наш документ.
Ступенька 45-ая. Об одном из способов внедрения 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):
|
|
|
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, а также из учебников и пособий, ссылки на которые вы найдете в правой колонке.