Существует как минимум три способа привязки стилей css к странице веб-сайта . В статье подробно описываются эти способы привязки и даются исчерпывающие пояснения.

Для начала следует пояснить, для чего вообще что-то привязывать к странице веб-сайта, и почему стили css вынесены в отдельный файл.

Со времен появления наборов стилей оформления содержимого веб-страницы (css) в среде веб-разработчиков постулировалось очень полезное правило «разделяй содержимое и его представление!».

То есть, веб-страница содержит чистый html код, а все оформление выносится в отдельные наборы правил css и желательно за пределами этой веб-страницы. Этим убивалось сразу два зайца.

Во-первых, html код оставался чистым. Он содержал только контент и разметку. Что существенно облегчало вес страницы.

А, во-вторых, такое разделение позволяло более эффективно редактировать стили оформления, не затрагивая саму веб-страницу.

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

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

Как подключить css к html отдельным файлом

Сейчас покажу, как подключить css к html отдельным файлом стилей. Создается отдельный файл css. Далее при помощи специальных команд он подключается к необходимым документам. Такой вид называется внешней таблицей стилей.

Данный способ наиболее предпочтителен. Он позволяет разрабатывать стили сайта отдельно от HTML-документов. Затем стилизацию можно использовать в одном файле style.css на многих страницах.

Прописываем путь как раз в теге head . В нем указывается вся необходимая системная информация для отображения страницы. Подключается вот таким образом:

Есть еще и другие способы подключения. Используйте их только как дополнительный вариант.

Стоит сказать, что inline стили имеют самый высокий приоритет. Даже если вы подключили внешний css, браузер отдаст предпочтение встроенным стилям для определенного тега. На втором месте по приоритету идут внутренние стили. Они уступают встроенным, но превосходят внешние.

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

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

Глобальный CSS помещается в контейнер конкретной страницы. При таком варианте подключения классы и идентификаторы (ID) могут быть использованы для обращения к CSS коду, однако, они будут активны только на этой конкретной странице. CSS стили подключенные таким путем загружаются при каждой повторной загрузке страницы, поэтому они могут повлиять на скорость ее загрузки. Тем не менее, существует несколько ситуаций в которых использование глобальных CSS может быть полезно. К примеру, если вам необходимо отправить кому-нибудь шаблон страницы – вам гораздо проще будет предоставить предварительный результат, если все будет на одной странице. Глобальные CSS помещаются между тегами . Вот пример глобальной таблицы стилей:

Преимущества глобальных CSS :

• Таблица стилей влияет только на одну страницу.
• В глобальной CSS могут быть использованы классы и идентификаторы (ID).
• Нет необходимости загружать несколько файлов. HTML и CSS могут быть в одном и том же файле.

Недостатки глобальных CSS:

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

Как произвести подключение CSS к HTML странице

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

После всех действий, документ HTML с глобальной CSS должен выглядеть примерно так:

Руководство Hostinger

Это наш текст.

Вариант 2 - Внешний CSS

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

Тогда как, сами таблицы стилей располагаются в файле style.css . К примеру:

Xleftcol { float: left; width: 33%; background:#809900; } .xmiddlecol { float: left; width: 34%; background:#eff2df; }

Преимущества внешних CSS :

• Меньший размер страницы HTML и более чистая структура файла.
• Быстрая скорость загрузки.
• Для разных страниц может быть использован один и тот же .css файл.

Недостатки внешних CSS:

• Страница может некорректно отображаться до полной загрузки внешнего CSS.

Вариант 3 - Внутренний CSS

Внутренний CSS используется для конкретного тега HTML. Атрибут (не путайте с одноименным атрибутом) в котором и происходит описание нужных нам элементов.

Взгляните на пример, ниже к нему будут комментарии.

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!

Как видно из примера мы добились точно такого же результата что и в первом случае только теперь мы не прописываем каждому элементу стиль индивидуально, а вынесли его в "голову" документа тем самым указав что все заголовки

,

- будут синими а параграфы

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

Теперь обещанные комментарии:

Тег идет непосредственное объявление стилей тех или иных HTML элементов согласно следующему синтаксису:

Если в блоке объявления стилей указывается несколько свойств элемента, то они между собой разделяются точкой с запятой.

CSS в отдельном внешнем файле.

Долго ли коротко ли, подошли мы к главному, на мой взгляд, достоинству CSS, а именно возможности выносить все сведения касающиеся дизайна сайта в отдельный внешний файл.

Итак, открываем блокнот (или другой редактор) и пишем в нем следующий текст:

Body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}

О том, что это такое странное мы написали, постараюсь подробно рассказать в последующих главах этого учебника.

Все! файл со стилевым описанием создан! Теперь осталось совсем чуть чуть, а именно заставить нужные страницы нашего сайта черпать информацию с этого файла.

Делается это с помощью тега (связь). Тег многоцелевой и служит для "связывания" HTML документа с дополнительными внешними файлами, обеспечивающими его должную работу. Тег является своего рода ссылкой, только предназначенной не для пользователей, а для программ обозревателей (браузеров). Так как несёт в себе исключительно служебную информацию он располагается в заголовке HTML документа между тегами и не выводится браузерами на экран.

Тег имеет атрибуты:

href - Путь к файлу.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.

• shortcut icon - Определяет, что подключаемый файл является .
• stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
• application/rss+xml - Файл в формате XML для описания ленты новостей.

type - MIME тип данных подключаемого файла.

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

Повторюсь, что бы уж точно развеять возможные недопонимания. Атрибуту rel присваиваем значение stylesheet так как подключаем в качестве внешнего файла каскадную таблицу стилей, указываем путь к файлу css (в этом примере файл называется mystyle.css и лежит рядом с документом HTML в котором прописывается данная ссылка) так же указываем, что данный файл текстовый и содержит в себе стилевое описание type="text/css"

Теперь вставляем эту строчку в заголовки страниц нашего сайта и наслаждаемся результатом..

Файл mystyle.css
body {background-color: #c5ffa0}
a {color:#000060; font-weight: bold;}
a:hover {color:#ff0000; font-weight: bold; text-decoration:none}
h1 {color: #0000ff; font-size:18px}
h2 {color: #ff00ff; font-size:16px}
p {color: #600000; font-size:14px}
Файл index.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Всё о слонах

На этом сайте Вы найдёте любую информацию о слонах.

Файл elephant.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Купить слона

У нас Вы можете по выгодным ценам приобрести лучших слонов!!

Файл elephant1.html

Меню:

Всё о слонах.
Купить слона.
Взять слона на прокат.

---

Взять слона на прокат

Только у нас Вы можете взять любых слонов на прокат!!

В примере выше, "сайт о слонах", на данный момент, имеется три страницы, каждая из которых связана с одним единственным внешним css файлом - mystyle.css. Таким образом, мы значительно его "разгрузили" и сделали дизайн всего сайта "мобильным". Представьте сколько б килобайт мы выиграли, будь на этом сайте сотня полноценных страниц!? А также, сколько б времени сэкономили, если бы нам понадобилось изменить что-либо в его дизайне!?

В этой главе мы рассмотрели три способа внедрения CSS в HTML документ. Какой же лучше использовать?

• Используйте атрибут style для какого либо элемента если этот элемент с отличным от других элементов стилем один единственный на всём сайте.
• Используйте тег

  Параграф 1

  Параграф 2

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

  Параграф 1

  Параграф 2

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

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

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

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

  Параграф 1

  Параграф 2

  Содержимое файла 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

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

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

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

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

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

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

  Содержимое страницы.

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

  Содержимое страницы.

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

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

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

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

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

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