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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

). И ни на какой другой!

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

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

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

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

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

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

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

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

Например:

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

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

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

Заголовок первого уровня

Заголовок второго уровня, синий

Заголовок третьего уровня

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

Недостаток встроенной таблицы стилей тоже очевиден - такие записи надо будет делать для каждой страницы отдельно.

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

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

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

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

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

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

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

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

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

HTML – лишь инструмент для верстки страницы, и если вы занимаетесь этим – вы верстальщик. А вот если вы дополнительно пишите какие-нибудь , на том же JavaScript или PHP – тут можно поговорить о таком понятии, как программист. Но речь сейчас пойдет не об этом, и когда мы точно узнали, является ли HTML языком программирования или нет, перейдем к главному этой статье.

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

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

Подключение внешней таблицы стилей

Внешний файл стилей имеет расширение.css (это обязательное условие) и название файла на английском языке. Пример – main.css или style.css . После того, как вы создали такой файл и заполнили его соответствующими стилями – загрузите его на свой сайт в удобную для вас папку и осуществите подключение к HTML-документу.

Самый распространенный способ подключения внешнего файла стилей – это:

Или сокращенный вариант для HTML5:

На что тут стоит обратить внимание?

1. Файл подключается в секцию HEAD на все страницы вашего сайта. Там, где этого файла нет, будет отсутствовать ваше оформление.
2. В части href пишется полная или относительная ссылка к CSS-файлу.
3. Необязателен, но желателен последний закрывающий слеш. Так код получается «по фэн-шую».
4. Подключать на страницу можно сколько угодное число файлов стилей. Главное – без фанатизма.

Помимо этого, стили могут быть встроены еще несколькими способами.

Подключение внутренней таблицы стилей

Под внутренней таблицей стилей подразумевается отсутствие файла стилей. Свойства таблицы в таком случае вставляются на страницу следующим образом:

Или краткий вид для HTML5:

Здесь особых нюансов нет – вставлять конструкцию можете как в секцию HEAD, так и в BODY. Причем на странице, в разных ее частях может быть несколько таких конструкций.

Подключение встроенной таблицы стилей

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

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

Единственным нюансом здесь является то, что если во внешних или внутренних стилях не используется свойство «!important » – встроенное свойство является приоритетным по исполнению. Что это значит? Приведу простой пример:

Несмотря на то, что во внутренних стилях мы задали цвет фразы красный – она будет черной, так как это указано во встроенных стилях.

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

Коротко о CSS и HTML

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

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

Существует несколько основных способов, которыми можно настроить отображение стилей в коде HTML, каждый из них имеет свои плюсы и минусы.

Подключение CSS файла

Это основной способ, который рассматривается разработчиками как наиболее практичный и удобный.

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

Для того чтобы подключить файл со стилями, необходимо сначала настроить файловую структуру — это делается для того, чтобы можно было прописать корректный путь к нужному документу непосредственно в коде.

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

Подключение CSS выполняется при помощи HTML тега с атрибутом href. Выглядит это следующим образом:

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

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

Если внести правки в style.css и открыть index.html в браузере, то можно будет увидеть все изменения, которые были прописаны.

Таким же образом можно задать не только путь к файлу в структуре сайта, но и ссылку на страницу со стилем, расположенную в интернете. В таком случае, она также вписывается в кавычках после атрибута href.

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

Таблицы стилей внутри HTML документа

Иногда значение какого-либо стилевого параметра задается непосредственно в теле HTML-документа при помощи атрибута style.

Синтаксис:

В этом абзаце текст красного цвета

Очевидный недостаток — отсутствие универсальности, прописывать значение придется для каждого тега.

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

Глобальный стиль

Если необходимо задать стиль для определенного элемента во всем HTML-документе, используют тег

Заданный стиль будет применен к тегу

, как только он будет прописан на странице.

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

Как подключить на сайт шрифт

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

Посредством CSS подключение шрифтов производится следующим образом:

• Найдите и скачайте подходящую гарнитуру.
• Откройте CSS файл и пропишите в нем следующий код:

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

Итак, в папке fonts у нас лежит файл с названием OpenSans.ttf, с обычными параметрами. Теперь он будет отображаться в браузере.

Подключаем шрифт через Google Fonts

Одним из самых распространенных способов подключения шрифтов в CSS и HTML является сервис Google Fonts.

Интерфейс интуитивно понятен — нужно найти подходящий шрифт по названию или заданным параметрам, нажать кнопку Select this font, и сервис моментально генерирует код, который вставляется в поле тега HTML-документа, а также в соответствующий CSS файл со стилями.

Как это должно выглядеть в HTML:

И в CSS файле со стилями:

Font-family: "Open Sans", sans-serif;

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

Подведем итоги

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

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