Всем доброго времени суток.
Итак, в одной из предыдущих статей мы с Вами познакомились с .
Но мы не рассмотрели один очень важный вопрос. А именно — как привязать CSS стили к HTML коду страниц нашего сайта.
Этот вопрос на самом деле очень важный. Ведь если мы неправильно привяжем css стили к страницам нашего сайта, то мы не сможем этими стилями пользоваться. Браузер будет просто их игнорировать и мы не увидим результата, который дает использование тех или иных стилей.
Привязать CSS стили к коду страницы можно разными способами и сегодня мы постараемся рассмотреть их все.
Давайте начнем.
По характеру подключения каскадных таблиц стилей CSS к HTML документу различают внешние и внутренние таблицы стилей .
Внутренние таблицы стилей находятся прямо внутри нашей интернет страницы. Да, да... Прямо внутри HTML-кода каждой отдельно взятой страницы.
Это конечно немного неудобно, но все же такая возможность существует и я не могу об этом не сказать.
Итак, первый способ привязки CSS стилей к коду страницы — использование тега , применяются ко всему содержимому HTML-документа. Их может быть сколько угодно, хоть все стили для всего сайта. Но это немного неправильно. Об этом расскажу немного ниже, когда буду рассматривать внешние таблицы стилей.
Иногда Вам придется самим прописывать css-стили внутри HTML кода .
Например, когда Вы размещаете какой-нибудь рекламный баннер на своем сайте — Вы вставляете код этого баннера в код страницы.
Чтобы этот баннер корректно отображался (не вылезал за отведенные ему границы, возможно ему нужна рамка и т.д.), иногда нужно привязать к нему несколько css-инструкций.
Но вносить при этом изменения в общую таблицу стилей нет смысла. Баннер — явление временное. Сегодня один, завтра другой. Поэтому проще прописать стили для него прямо внутри кода этого баннера.
То есть нам нужно подключить CSS стили только к определенному элементу страницы. Это делается очень просто — при помощи атрибута style .
Стили, прописанные таким образом действуют только на тот элемент, в теге которого они размещены. В данном случае, только на этот абзац (тег
). И ни на какой другой!
Под названием внешние таблицы CSS стилей подразумевается, что они прописаны не в теле HTML документа, а в отдельном специальном файле. Эти файлы имеют расширение .css
Так вот, как обещал, рассказываю, почему лучше использовать именно внешние таблицы стилей.
Дело в том, что это позволяет немного быстрее загружать страницы Вашего сайта. Пусть на какую-то долю секунды, но быстрее. Это снижает нагрузку на Ваш сайт и удобнее для Ваших посетителей — им приходится меньше ждать загрузки страниц.
Почему это происходит.
Если CSS стили для сайта у Вас находятся в отдельном файле, то браузеру пользователя не нужно загружать эти стили каждый раз при загрузке новой страницы. Он скачал их один раз, поместил их в кэш (область памяти на компьютере посетителя) и при загрузке следующей страницы берет стили оттуда.
Первый способ самый распространенный — это использовать тег с атрибутами: rel ="stylesheet" type ="text/css" href ="файл стилей.css" внутри кода заголовка страницы (тег
).Например:
| 1 2 3 4 | <head > ..... <link rel = "stylesheet" type = "text/css" href = "style.css" > </ head > |
Данные пример присоединяет к странице CSS стили, прописанные в файле style.css. Они действуют на протяжении всего документа.
Есть еще один способ присоединить внешние таблицы стилей к HTML документу. Это использование директивы @import . Она позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу.
Можно ее использовать как для добавления одних таблиц стилей к другим, так и для присоединения файла таблиц стилей к HTML документу. Для этого ее нужно прописать внутри тега