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

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

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

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

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

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

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

Параграф 1

Параграф 2

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

Параграф 1

Параграф 2

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

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

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

Параграф 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 подключить пользовательские стили можно перейдя в: Сервис → Свойства обозревателя → Общие → Оформление.

Существует 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. Атрибут

Подключенные таким способом стили действуют по всему документу , но что делать, если нужно указать их только для одного блока? Описать стили внутри определённого блока (тега) можно с помощью атрибута данного тега – style . Пример подключения стилей для одного тега:

Случайный текст 15 размера и красного цвета

Стили, описанные таким способом, не влияют на другие теги документа .

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

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

Путь к файлу, содержащему стили, указывается в этой части тега: href="style.css" в кавычках. В примере подключен файл стилей, который ежит в одной папке с HTML документом.

Также можно подключить внешние стили и другим способом – специальной директивой @import, которая заключена внутри тега . Пример подключение с помощью директивы @import:

.....

Файл стилей css , а точнее путь к нему, в данном способе указывается в скобках.

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

Если CSS стили нужно подключить для XML-документа, то нужно воспользоваться следующей строкой:

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

На сегодня урок окончен! Удачной верстки и новых знаний!

Хотите поехать в Европу? Вам нужен

23.01.2017

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

○ Способ №1 – «Таблица связанных стилей»

Все стили хранятся в одном файле с расширением «.css».
Если связать все HTML файлы веб-страниц с таким CSS файлом, то при изменениях стили страниц (цвет, фон, размер шрифта и т.д.) будут изменяться во всех HTML документах, связанных с CSS файлом.
Схематично это выглядит так:

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

href – прописываем путь к css файлу. В примере выше файл «style.css» находится вместе с остальными HTML файлами в .
Разберём способ №1 поэтапно и практично от «а» до «я»:

1 этап - создать файл « style. css»

Давайте попробуем на практике создать файл «style.css».
Откройте блокнот, который есть у вас на ПК.
Кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот» :

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…» :

В поле «Имя файла » напишите «style.css », а не просто style (это важно! ). Таким способом мы создаем файл с расширением «*.css ». Далее нажмите на кнопку «Сохранить »:

Вот такая должна получиться общая картина:

Вот и все, файл «style.css » был создан.
Можете вставить в файл «style.css » вот это правило для тега

и сохранить:

H1 { font-size: 150px; /* Размер шрифта */ color: #cc0000 /* Цвет текста */ }

В HTML файле вставьте вот этот код:

Заголовок

В результате должно получиться вот такое:

Этот способ поможет делать изменения внешнего вида всего сайта, изменяя только правила в одном файле «style.css ». Припустим, меняем цвет и размер для заголовка в «style.css », то на всех 1000 страницах произойдет одновременное автоматическое изменение. На чистом HTML, без CSS, пришлось бы эти изменения делать отдельно на каждой странице из 1000. Ужас!!!

○ Способ №2 – «Таблицы глобальных стилей»

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

Можно и так:

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

Заголовок H2

Результат:

В примере выше я изменил размер и цвет Заголовка H2, используя таблицу стилей CSS.

○ Способ №3 – «Внутренние стили»

Способ №3 я использую в редких случаях, например, для изменения одиночного тега на веб-странице. Для подключения стиля к любому тегу, нужно прописать параметр style .

Style="тут будут CSS правила"

Заголовок H2

Результат:

В примере выше я изменил размер и цвет Заголовка H2, используя стили CSS.

○ Комбинированный метод подключения стилей

Все эти три способа можно комбинировать.

Заголовок

Заголовок

На сегодня все! Жду вас на следующих уроках.
Подписывайтесь на обновления блога!

Предыдущая запись
Следующая запись