Опубликовано: 14.11.2010 Последняя правка: 08.12.2015

Подключение CSS

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

Да, и еще один момент, который уже затрагивался в предыдущем уроке, но я его повторю еще раз. Часто многие новички боятся уже одного словосочетания «Каскадные таблицы стилей» или просто «таблицы стилей», поэтому, когда они встречают подобные выражения в тексте, то подсознательно им кажется, что они не понимают о чем идет речь. Так вот, на самом деле нет никаких таблиц в том виде, к которому вы привыкли — нет. А эти слова описывают только одно — все то, что относится к CSS, то есть различные правила CSS, свойства, значения и так далее. В общем, все то, что мы с вами будем изучать в этом учебнике. Кстати, сюда же можно отнести и просто слова «CSS» и «стили».

Встроенные стили

Подключение встроенных стилей (inline) заключается в применении атрибута style к определенному тегу на странице. В этом случае значением атрибута является одно или несколько (через точку с запятой) свойств CSS с соответствующими значениями. Как правило, такой способ используется в тех случаях, когда надо изменить характеристики конкретного элемента на одной определенной странице.

Общий синтаксис

<тег style="свойство:значение; свойство:значение; ...">...</тег>

Пример подключения в CSS встроенных стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Подключение встроенных стилей</title>
 </head>
 <body>
  <p style="color:#ff0066; text-align:center">Параграф 1</p>
  <p style="color:#0066ff; font-size:120%">Параграф 2</p>
 </body>
</html>

Результат в браузере

Параграф 1

Параграф 2

Внутренние стили

Внутренние стили указываются в «шапке» документа и подключаются с помощью тега <STYLE>. В этом случае CSS воздействует уже не на один элемент, а на все указанные в стилях элементы, которые имеются на данной странице. Обычно данный способ применяется, когда необходимо изменить стили сразу у нескольких одинаковых элементов в пределах одной HTML-странице.

Пример подключения в CSS внутренних стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Подключение встроенных стилей</title>
  <style type="text/css">
   body {
    background: #ccccff; /* цвет фона страницы */
   }
   p {
    color: red; /* цвет текста параграфов */
    font-family: Helvetica, sans-serif; /* гарнитура шрифта параграфов */
    font-size: 150%; /* размер шрифта */
    text-align: center; /* текст по центру */
    border: 5px green double; /* стили рамки */
   }
  </style>
 </head>
 <body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
 </body>
</html>

Результат в браузере

Параграф 1

Параграф 2

Внешние стили

Внешние стили подключаются отдельным файлом при помощи тега <LINK>. В этом случае все стили располагаются в обычном текстовом файле с расширением .css и влияют на элементы всех страниц, к которым этот файл подключается. Обычно создание стилей сайта начинается именно с этого способа, так как только с его помощью ощущаются все плюсы CSS, ведь изменяя данные всего в одном файле можно управлять отображением сразу большого числа страниц. А уже в процессе работы над сайтом добавляются внутренние или встроенные стили, если это необходимо.

При использовании внешних стилей авторы поступают совершенно по-разному. Одни хранят все стили сайта в одном файле, другие — в нескольких. Например, один файл содержит стили для всего сайта и присутствует на всех страницах, другой — дополнительно подключается только к определенным разделам, третий — к определенным подразделам и т.д. Как будете поступать вы — решать только вам.

Пример подключение в CSS внешних стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Подключение внешних стилей</title>
  <link rel="stylesheet" type="text/css" href="style/style.css">
 </head>
 <body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
 </body>
</html>

Содержимое файла style.css

body {
 background: #ccccff; /* цвет фона страницы */
}
p {
 color: red; /* цвет текста параграфов */
 font-family: Helvetica, sans-serif; /* гарнитура шрифта параграфов */
 font-size: 150%; /* размер шрифта */
 text-align: center; /* текст по центру */
 border: 5px green double; /* стили рамки */
}

Результат в браузере

Параграф 1

Параграф 2

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

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

Подключение CSS через правило @import

Еще один способ подключения стилей, находящихся в отдельных файлах заключается в использовании правила @import. Это правило служит для объединения нескольких таблиц стилей в одну, что иногда бывает достаточно удобно. Подключение происходит во внешние или внутренние таблицы стилей, для этого после имени правила записывается конструкция url(), где в кавычках (" ") указывается адрес файла с CSS. Либо url() вообще не пишется, а сразу идут кавычки и адрес файла. Общий синтаксис следующий.

Во внешней таблице стилей

@import url("адрес файла");
@import "адрес файла";
...

Во внутренней

<style type="text/css">
 @import url("адрес файла");
 @import "адрес файла";
 ...
</style>

Давайте рассмотрим использование этого правила во внешних таблицах стилей, для этого я вам приведу два примера для сравнения.

Пример 1: обычное подключение внешних стилей

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Внешние стили</title>
  <link rel="stylesheet" type="text/css" href="style/style1.css">
  <link rel="stylesheet" type="text/css" href="style/style2.css">
  <link rel="stylesheet" type="text/css" href="style/style3.css">
 </head>
 <body>
  <p>Содержимое страницы.</p>
 </body>
</html>

Пример 2: подключение внешних стилей совместно с CSS-правилом @import

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Внешние стили с @import</title>
  <link rel="stylesheet" type="text/css" href="style/style1.css">
 </head>
 <body>
  <p>Содержимое страницы.</p>
 </body>
</html>

Содержимое файла style1.css

@import url("style/style2.css");
@import url("style/style3.css");
Ниже здесь дополнительно могут идти обычные стили со свойствами, значениями и т.д.

Чтобы правило @import правильно работало, оно обязательно должно указываться в самом начале таблицы стилей. Единственное исключение здесь правило @charset, которое всегда идет самым первым, правда на практике используется оно вообще крайне редко.

Не рекомендую вам сразу же использовать все это разнообразие способов подключения CSS — сконцентрируйтесь на обычных внешних таблицах стилей, так как это основной вариант. Если есть желание, то можете, конечно, поэкспериментировать, но не более того. В общем, как подключить CSS вы всегда сможете решить, главное было бы что подключать. :)

Пользовательские стили

Во многих браузерах есть возможность для подключения файла с CSS самими пользователями, чтобы они могли менять внешний вид просматриваемых сайтов, как говорится, «под себя». Например, изменить размер и гарнитуру шрифта, цвет текста и фона каких-то элементов и т.д. Естественно в этом случае стили создаются уже самим пользователем. Допустим, в Internet Explorer подключить пользовательские стили можно перейдя в: Сервис → Свойства обозревателя → Общие → Оформление.

Что такое CSS?← Содержание →Типы устройств