| |
Добавление стиля на веб-страницу
Таблицы стилей могут быть добавлены в вашу страницу тремя разными способами, различающиеся
по своим возможностям.
Таблицы связанных стилей (linked style sheet)
Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном
файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных
стилей используется тег LINK в заголовке страницы.
| Пример 1. Подключение таблицы связанных стилей
<html>
<head>
<link rel="stylesheet"
type="text/css" href=mysite.css>
или
<link rel="stylesheet" type="text/css" href=http://www.mysite.ru/main.css>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html> |
|
Достоинства данного способа:
- Используется один файл со стилем для любого количества веб-страниц, а также возможно
его применять на других сайтах;
- Можно изменять таблицу стилей без модификации веб-страниц;
- на всех сто или больше веб-страницах нашего сайта.
- Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно
от веб-страниц, поэтому загрузка сайта происходит быстрее.
Таблицы глобальных стилей (global style sheet)
Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По
своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также
позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение
стиля задается тегом STYLE.
| Пример 2. Использование таблицы глобальных стилей
| <html>
<head>
<style type="text/css">
H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color:
#333366; }
</style>
</head>
<body>
<H1>Hello, world!</H1>
</body>
</html> |
|
В заголовке определен стиль тега H1, который затем можно повсеместно
использовать на данной веб-странице.
Внутренние стили (inline style)
Внутренний стиль являются по существу расширением для одиночного тега используемого на
веб-странице. Для определения стиля используется параметр style,
а его атрибуты указываются с помощью языка таблицы стилей.
| Пример 3. Использование внутренних стилей
<html>
<body>
<H1 style="font-size:
120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366;">Hello,
world!</H1>
</body>
</html> |
|
идеологии структурного документа, когда содержимое и его оформление разделены.
стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных
стилей. В примере используются сразу два метода добавления таблиц стилей в документ.
| Пример 4. Сочетание разных методов подключения стилей
| <html>
<head>
<style type="text/css">
H1 { font-size: 120%; font-family: Arial, Helvetica, sans-serif; color: green;
}
</style>
</head>
<body>
<H1 style="font-size: 36px; font-family: Times, serif; color: red;">Hello,
world!</H1>
<H1>Hello, world!</H1>
</body>
</html> |
|
В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а
следующий - зеленым и другим шрифтом.
[Назад]
[Содержание]
[Вперед]
|
| Приглашаем посетить сайты |
|
|
|
|
|
