Подключение стилей CSS в HTML странице — шпаргалка для новичков
Не знаете как привязать CSS к HTML? Подключение CSS-кода на HTML-странице можно производить четырьмя способами: в тело документа, встроить код в заголовочную часть страницы ( header ), указать ссылку на внешний файл, а также импортировать CSS-файл .
Как добавить CSS в HTML — встроенные стили
В первом случае стили применяются непосредственно к HTML-элементу . Вместо того чтобы объявить все стили сразу, а затем применять их по ходу кода, вы стилизуете каждый элемент отдельно.
HTML Styles with CSS
Встроенный CSS считается быстрым и удобным способом стилизации HTML-документов , но злоупотреблять им не стоит. Его применение значительно усложняет обслуживание сайта. Необходимость внести незначительное изменение может привести к полной переработке кода.
Как вставить CSS в HTML — встроенная стилизация
Этот метод, позволяющий осуществить подключение CSS к HTML подразумевает, что вы добавляете весь необходимый код стилизации одним большим фрагментом. Это позволяет стилизовать любой элемент на странице. Подобный подход можно реализовать путем встраивания CSS-кода с помощью в заголовочную часть страницы. Например, поместите приведенный ниже код в раздел HTML-документа :
body < background-color: darkslategrey; color: azure; font-size: 1.1em; >h1 < color: coral; >#intro < font-size: 1.3em; >.colorful
Примерно так будет выглядеть код HTML страницы:
My Example body < background-color: darkslategrey; color: azure; font-size: 1.1em; >h1 < color: coral; >#intro < font-size: 1.3em; >.colorfulВстроенная стилизация
Позволяет вам определять стили сразу для всей страницы.
Этот абзац оформлен при помощи класса.
Привязка CSS к HTML — внешние стили
Внешние стили – это один из самых распространенных способов подключения стилей CSS.
Он подразумевает создание отдельного файла, содержащего в себе CSS-код . Затем на этот файл ссылаются HTML-страницы . Обычно для оформления всего сайта используется один файл.
Чтобы добавить внешние стили на веб-страницу, воспользуйтесь тегом с указанием атрибутов href и rel=»stylesheet» :
Пример Встроенная стилизация
Позволяет вам определять стили сразу для всей страницы.
Этот абзац оформлен при помощи класса.
Теперь в HTML-файле нет никакой информации относительно стилизации элементов. Подключение CSS файла позволяет не загромождать стилями исходный код веб-страницы.
Подключение CSS файла к HTML или импорт стилей
Также можно использовать CSS-правило @import , чтобы импортировать внешние таблицы стилей. Для этого воспользуйтесь тегом . Здесь будет уместен любой из следующих синтаксисов:
Здесь используются те же стили, что и в предыдущих примерах, но импортированные с помощью @import :
Пример Встроенная стилизация
Позволяет вам определять стили сразу для всей страницы.
Этот абзац оформлен при помощи класса.
Учтите, что данный метод подключения шрифтов CSS может негативно сказываться на производительности сайта, поэтому рекомендуется использовать .
Однако правило @import можно использовать внутри самого внешнего файла таблиц стилей для встраивания одного кода CSS в другой, не влияя на производительность.
Не существует жестких правил относительно того, какие методы использовать. Лучше всего исходить из конкретной ситуации и выбирать наиболее оптимальные методы стилизации элементов.