Как привязать CSS стили к HTML коду интернет страницы

Привязка css к html

Всем доброго времени суток.

Итак, в одной из предыдущих статей мы с Вами познакомились с основами использования каскадных таблиц стилей CSS.

Но мы не рассмотрели один очень важный вопрос. А именно — как привязать CSS стили к HTML коду страниц нашего сайта.

Этот вопрос на самом деле очень важный. Ведь если мы неправильно привяжем css стили к страницам нашего сайта, то мы не сможем этими стилями пользоваться. Браузер будет просто их игнорировать и мы не увидим результата, который дает использование тех или иных стилей.

Привязать CSS стили к коду страницы можно разными способами и сегодня мы постараемся рассмотреть их все.

Давайте начнем.


По характеру подключения каскадных таблиц стилей CSS к HTML документу различают внешние и внутренние таблицы стилей.

1. Внутренние таблицы стилей CSS.

Внутренние таблицы стилей находятся прямо внутри нашей интернет страницы. Да, да... Прямо внутри HTML-кода каждой отдельно взятой страницы.

Это конечно немного неудобно, но все же такая возможность существует и я не могу об этом не сказать.

Итак, первый способ привязки CSS стилей к коду страницы — использование тега <style> внутри кода заголовка страницы (тег <head>).

1
2
3
4
5
6
7
<head>
.....
    <style type="text/css">
        body {
            color: red;}
    </style>
</head>

Cтили, прописанные между тегами <style>...</style>, применяются ко всему содержимому HTML-документа. Их может быть сколько угодно, хоть все стили для всего сайта. Но это немного неправильно. Об этом расскажу немного ниже, когда буду рассматривать внешние таблицы стилей.

Поехали дальше.

Иногда Вам придется самим прописывать css-стили внутри HTML кода.

Например, когда Вы размещаете какой-нибудь рекламный баннер на своем сайте — Вы вставляете код этого баннера в код страницы.

Чтобы этот баннер корректно отображался (не вылезал за отведенные ему границы, возможно ему нужна рамка и т.д.), иногда нужно привязать к нему несколько css-инструкций.

CSS привязка

Но вносить при этом изменения в общую таблицу стилей нет смысла. Баннер — явление временное. Сегодня один, завтра другой. Поэтому проще прописать стили для него прямо внутри кода этого баннера.

То есть нам нужно подключить CSS стили только к определенному элементу страницы. Это делается очень просто — при помощи атрибута style.

<p style="font-size: 18px;">Это абзац, к которому применяются стили</p>

Стили, прописанные таким образом действуют только на тот элемент, в теге которого они размещены. В данном случае, только на этот абзац (тег <p>). И ни на какой другой!

2. Внешние таблицы стилей.

Под названием внешние таблицы CSS стилей подразумевается, что они прописаны не в теле HTML документа, а в отдельном специальном файле. Эти файлы имеют расширение .css

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

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

Почему это происходит.

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

Присоединить файлы CSS стилей к веб-странице можно двумя способами.

Первый способ самый распространенный — это использовать тег <link> с атрибутами: rel="stylesheet" type="text/css" href="файл стилей.css" внутри кода заголовка страницы (тег <head>).

Например:

1
2
3
4
<head>
.....
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

Данные пример присоединяет к странице CSS стили, прописанные в файле style.css. Они действуют на протяжении всего документа.

Есть еще один способ присоединить внешние таблицы стилей к HTML документу. Это использование директивы @import. Она позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу.

Можно ее использовать как для добавления одних таблиц стилей к другим, так и для присоединения файла таблиц стилей к HTML документу. Для этого ее нужно прописать внутри тега <style>, который в свою очередь расположен внутри тега <head>.

1
2
3
4
5
6
<head>    
.....
    <style type="text/css">
        @import url("style.css");
    </style>
</head>

Этот пример делает то же самое, что и предыдущий, только другим способом. Стили, присоединенные таким способом тоже действуют на протяжении всего документа.

Ну вот, теперь мы с Вами знаем, как привязать каскадные таблицы стилей CSS к коду HTML страниц.

В ближайшее время Вы узнаете о приоритетах CSS инструкций. То есть, если элемент страницы попадает под действие нескольких одинаковых css-инструкций с разными значениями (предназначенными для разных селекторов), то какие именно свойства будут к нему применены.

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

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии к статье:
"Как привязать CSS стили к HTML коду интернет страницы"

  1. Вот и привязка.Учись и делай. Напишите,можно ли сделать из файла zip или txt файл php?

    • zip — это архив. В нем содержатся другие файлы. txt — текстовый документ. Из него можно, но смотря что в нем прописано. php — файл, в котором содержатся HTML и PHP инструкции. У них есть определенный стандарт. А что Вы хотите сделать? Напишите, обсудим. ;)

  2. На одном из сайтов хочу установить программу для рисования. Она хорошо действует на других сайтах,но файл скачался в zip я открыла его в блокноте,как txt, но не знаю,как его загрузить на хостинг,чтобы программа заработала на моем сайте.

    • Нужно больше конкретики. Что за программа, дайте ссылку, откуда скачивали. Я скачаю — посмотрю, что это за штука такая. Потом отпишусь.

  3. Попадете на редактор и снизу белая ссылка,а потом первая синяя -скачать

    • Это приложение для установки на компьютер, а не для установки на сайт.

  4. Ну его же на сайтах используют и не только на этом.Я регулярно пользуюсь. Как тогда устанавливали?

  5. для запуска фалйов zip и/или txt на сайте воспользуйтесь программой Adobe Ignition. Скачайте с помощью гугла.

    Друзья говорят пользоваться очень легко, и эта программа также идёт бесплатно в комплекте с Adobe photoshop, в дополненной версии пакета.

    *THUMBS UP*  

  6. Все.Установила себе онлайн фотошоп,как и хотела.

    • Поздравляю! Если не трудно — опишите вкратце. Вдруг кому пригодится...

      ;)