Каскадные таблицы стилей бывают трёх видов и, соответственно, включаются в html-код тремя способами.

1. Внутренние таблицы стилей . Задаются внутри элементов при помощи атрибута stile , например:

   Заголовок синего цвета

   Результатом всего этого будет:

   Заголовок синего цвета

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

2. Встроенные таблицы стилей . Этим способом таблица стилей задаётся для целого html-документа между тегами ... . Например, если мы хотим сделать все заголовки веб-страницы синего цвета, нам надо будет между тегами ... написать следующее:

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

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

   
   
   
   
   
   
   

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

   
   

   Заголовок третьего уровня, расположенный по центру html-документа

   
   

   Заголовок шестого уровня, выравненный по правому краю веб-страницы

   
   
   

   После этого создаём новый файл такого содержания:

   H1 {color:blue;}
   H3 {color:red;}
   H6 {color:green;}

   И сохраняем его как style с расширением *css . Результат смотри . Это наш html-файл с заголовками. Разберём теперь как работает эта конструкция. В html-документе с заголовками мы между тегами ... написали такую строчку:

   Здесь при помощи тега мы подключаем таблицы стилей к html-документу. Атрибут href ссылается на место, где размещён файл со стилями, это обязательный атрибут. Атрибут type мы уже знаем, он указывает тип таблицы стилей. Атрибут rel указывает отношение подключаемого файла к данному html-документу. В нашем случае значение атрибута rel="stylesheet" обозначает, что мы добавили основную таблицу стилей. Плюс такого метода задания таблиц стилей заключается в том, что ели захочется поменять дизайн сайта в целом, достаточно изменить только один файл с таблицами стилей.

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

Атрибут type — сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать стили. В нашем случае это text/css .

Смысл использования такого варианта заключается в возможность определить CSS-правил для ряда селекторов. В приведённом примере, для селектора p определено CSS-свойство color как red .

Вставка CSS-файла при помощи тега link

Тег link устанавливает связь с внешним документом, в нашем случае CSS-фалом. Следует отметить, что тег link всегда размещается внутри контейнера head . Например:

В данном случае, атрибут rel определяет отношения между текущим документом, и файлом style.css , как stylesheet (с англ. таблица стилей ). Значением атрибута type является MIME-тип данных подключаемого файла, т.е. text/css . Последний атрибут href содержит путь к подключаемому CSS-файлу.

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

Импорт CSS-правил

Команда @import (с англ. импорт ) — аналогична тегу link , за исключением того, что вставке 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 ” был подготовлен дружной командой проекта .

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

Таблицы связанных стилей

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

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

Hello, world!

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

Достоинства данного способа

1. Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
2. Можно изменять таблицу стилей без модификации веб-страниц.
3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

Таблицы глобальных стилей

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

Hello, world!

В данном примере показано изменение стиля заголовка

. На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

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

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style , а его значения указываются с помощью языка таблицы стилей (пример 3)..

Пример 3. Использование внутренних стилей

Hello, world!

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

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

Пример 4. Сочетание разных методов подключения стилей

Hello, world!

Hello, world!

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.