proview.ru → Конструирование сайтов → CSS → Как добавить стиль

Как добавить стиль

В научной среде, откуда пошла родом технология WWW, люди были более заняты содержанием документов, чем их оформлением. Однако для большинства людей представление сайта, то, как он выглядит, играет более важную роль. Ограничения HTML породили множество техник создания веб-страниц, таких как:
  • Использование различных расширений HTML;
  • Применение изображений вместо текста;
  • Использование рисунков для контроля пустого пространства, так называемые распорки;
  • Использование таблиц для верстки веб-страниц;
  • Написание программных скриптов вместо использования HTML.

Эти техники значительно увеличивают сложность разработки веб-страниц, предлагают ограниченную гибкость в их создании и управлении, а также создают трудности для людей ими не владеющими.
CSS решают эти проблемы, и в то же время, заменяют лишь ограниченную область механизмов представления HTML. CSS облегчает управление размером, типом шрифта, позволяет легко задавать цвет текста, фона и другие вещи.

Таблицы стилей могут быть добавлены в вашу страницу тремя разными способами, различающиеся по своим возможностям.

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

Влад Мержевич

Источник: http://sitestroy.ru

Популярное