Здравствуйте, уважаемые читатели проекта «Анатомия Бизнеса». С вами вебмастер Александр! В прошлой статье мы разобрали, что такое CSS-стили и насколько огромное значение они имеют в WEB-программировании.

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

Не будем откладывать дело в долгий ящик и приступим!

Подключение отдельного CSS-файла!

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

После чего в HTML-файле между тегами разместить следующий код:

Теперь давайте разберем, что все это значит:

Link # в переводе с английского обозначает «ссылка». Таким образом мы показываем браузеру, что далее у нас пойдет речь пойдет о ссылке. rel= # данным атрибутом мы показываем, какое отношение файл CSS имеет к файлу HTML. "stylesheet" # а именно то, что CSS-файл является каскадной таблицей стилей. type="text/css" # тут все просто: это указание того, что файл написан в текстовом формате и имеет расширение.css href="style.css" # это ссылка на файл с CSS-стилями.

Как по мне, это и есть наиболее предпочтительный способ подключения стилей CSS.

Прописываем стили непосредственно в HTML-файле (первый способ)

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

Если мы посмотрим, как будет отображаться данный HTML-документ в браузере, то увидим, что текст между тегами стал красного цвета. И используя атрибут style, мы говорим, что далее у нас идут параметры стиля отображения. Color — это селектор, отвечающий за цвет. Red — это значение данного селектора. Таким способом мы можем выделять определенным типом отображения какие-то отдельные части текста.

Размещение каскадных таблиц стилей внутри HTML (второй способ)

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

Тут пример: отображение CSS-стилей в документе HTML

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

Подключение нескольких CSS-файлов к одному HTML-документу.

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

Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.

Тут пример: отображение CSS-стилей в документе HTML

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

Ссылка на CSS-файл внутри на файл этого же типа.

Кроме всех выше перечисленных способов, есть способ, который позволяет внутри одного CSS-файла размещать ссылки на множество других!

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

Во-вторых, в уже подключенный файл вписываем следующий код:

@import url("style-2.css");

Данная строка подключает к нашему файлу дополнительный файл CSS. Если у Вас возникли какие-то трудности при подключении CSS, можете задать их в комментариях.
Как мы поняли из предыдущих двух уроков, технология CSS является мощнейшим инструментом, которым должен овладеть каждый вебмастер! Для улучшения усваивания материала я решил в конце каждого урока добавлять обучающее видео + тест на закрепление полученной информации.

Тест на закрепление материала:

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

Вариант 1:

Вариант 2 :

Вариант 3:

Вариант 4:

Можем ли мы разместить каскады CSS непосредственно в файле HTML?

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

Пример: Внутренняя таблица стилей

• Попробуй сам »

Заголовок

Текст первый

Текст второй

Текст третий

Заголовок

Текст первый

Текст второй

Текст третий

В данном примере мы с помощью CSS установили цвет фона для элемента : background-color:palegreen , цвет и тип шрифта для заголовков

: color: blue; font-family:verdana , а также размер шрифта, цвет и выравнивание текста по центру для параграфов

: font-size:20px; color:red; text-align:center .

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

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

Параграф

Такие стили называют встроенными (inline), или внедренными. Правила, определенные непосредственно внутри открывающего тега элемента перекрывают правила, определенные во внешнем файле CSS, а также правила, определенные в элементе

Заголовок

Текст первый

Текст второй

Текст третий

Задачи

• Выравнивание текста по центру

  Используя встроенный стиль к параграфу выровняйте текст по центру.

Подключение CSS-кода на странице можно производить четырьмя способами: в тело документа, встроить код в заголовочную часть страницы (header ), указать ссылку на внешний файл, а также импортировать CSS-файл .

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

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

Пример :

HTML Styles with CSS

Посмотреть демо

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

Встроенная стилизация

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

Примерно так будет выглядеть код HTML страницы:

Встроенная стилизация

Посмотреть демо

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

Внешние стили – это один из самых распространенных способов подключения стилей CSS.

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

Чтобы добавить внешние стили на веб-страницу, воспользуйтесь тегом с указанием атрибутов href и rel=»stylesheet» :

Встроенная стилизация

Позволяет вам определять стили сразу для всей страницы.

Этот абзац оформлен при помощи класса.

Теперь в HTML-файле нет никакой информации относительно стилизации элементов. Благодаря подключению файла CSS все стили не загромождают код разметки страницы.

Посмотреть демо

Импорт стилей

Также можно использовать CSS-правило @import , чтобы импортировать внешние таблицы стилей. Для этого воспользуйтесь тегом

Здесь используются те же стили, что и в предыдущих примерах, но импортированные с помощью @import :

Встроенная стилизация

Позволяет вам определять стили сразу для всей страницы.

Этот абзац оформлен при помощи класса.

Посмотреть демо

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

Однако правило @import можно использовать внутри самого внешнего файла таблиц стилей для встраивания одного кода CSS в другой, не влияя на производительность.

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

Перевод статьи “How to add CSS to a Webpage ” был подготовлен дружной командой проекта .