Добавление CSS

Автор: Topol Понедельник, Апрель 16th, 2012 Нет комментариев

Рубрика: Уроки html

Таблицы стилей могут быть добавлены на страницу тремя разными способами, которые различаются по своим возможностям.
Таблицы связанных стилей (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>
Достоинства данного способа:

1. Используется один файл со стилем для любого количества веб-страниц, а также возможно его применять на других сайтах;
2. Можно изменять таблицу стилей без модификации веб-страниц;
3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

Таблицы глобальных стилей (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>

Рекомендуется использовать внутренний стиль для одиночных тегов или отказаться от его использования вообще, поскольку изменение ряда элементов становится проблематичным. Внутренние стили не соответствуют идеологии структурного документа, когда содержимое и его оформление разделены.

Все описанные методы использования CSS могут применяться как самостоятельно, так и в сочетании друг с другом. В этом случае необходимо помнить об их иерархии. Первым всегда применяется внутренний стиль, затем таблица глобальных стилей и в последнюю очередь таблица связанных стилей. В примере используются сразу два метода добавления таблиц стилей в документ.
Пример 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 пикселов, а следующий — зеленым и другим шрифтом

Источник: webcorp.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты