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