Сейчас сложно представить изменение внешнего вида и форматирование HTML документов без использования таблиц стилей CSS, так как HTML давно перестал быть самодостаточным языком для оформления и стал выполнять свои исконные функции структурирования и разметки веб-документов. В этой статье мы подробно расскажем, какими способами можно выполнить подключение CSS к документу HTML.
Коротко о CSS и HTML
Раньше оформление веб-страниц выполнялось исключительно средствами HTML. Сейчас такой подход не практикуется, и для стилизации используются средства CSS, которые имеют очень широкие возможности для создания потрясающего дизайна.
Для того чтобы оформление сайта отображалось корректно, необходимо выполнить подключение CSS в HTML документ, эти средства работают неотрывно друг от друга — HTML создает структуру, а таблицы стилей отвечают за внешний вид.
Существует несколько основных способов, которыми можно настроить отображение стилей в коде HTML, каждый из них имеет свои плюсы и минусы.
Подключение CSS файла
Это основной способ, который рассматривается разработчиками как наиболее практичный и удобный.
Посредством этого метода можно быстро менять оформление веб-страницы, если имеется заданная структура HTML документа — к примеру, для одного и того же сайта можно написать несколько вариантов оформления и подключать их в зависимости от соответствующей необходимости.
Для того чтобы подключить файл со стилями, необходимо сначала настроить файловую структуру — это делается для того, чтобы можно было прописать корректный путь к нужному документу непосредственно в коде.
Создайте директорию, где будет лежать основной HTML-документ, в этой же папке создайте в текстовом редакторе файл с названием style и сохраните в разрешении .css. В нем будет содержаться CSS-код со всеми заданными правилами стилизации документа.
Подключение CSS выполняется при помощи HTML тега <link> с атрибутом href. Выглядит это следующим образом:
<head>
<link href=»style.css» rel=»stylesheet»>
</head>
Здесь код расположен в теге <head>, это считается оптимальным, но не обязательно. Он может располагаться в любом месте документа.
Этот метод удобен тем, что все изменения в таблицу стилей вносятся в отдельном файле, что облегчает понимание и читабельность кода и делает документ аккуратнее.
Если внести правки в style.css и открыть index.html в браузере, то можно будет увидеть все изменения, которые были прописаны.
Таким же образом можно задать не только путь к файлу в структуре сайта, но и ссылку на страницу со стилем, расположенную в интернете. В таком случае, она также вписывается в кавычках после атрибута href.
Метод подключения таблицы стилей из отдельного файла оптимизирует работу сайта, так как позволяет браузеру подгружать данные из кэша, вследствие чего страницы грузятся быстрее.
Таблицы стилей внутри HTML документа
Иногда значение какого-либо стилевого параметра задается непосредственно в теле HTML-документа при помощи атрибута style.
Синтаксис:
<p style=»color:red»>В этом абзаце текст красного цвета</p>
Очевидный недостаток — отсутствие универсальности, прописывать значение придется для каждого тега.
Также подключение CSS в HTML при помощи внутренних таблиц стилей не позволяет браузеру кэшировать информацию, в отличие от предыдущего метода.
Этот способ не рекомендуется использовать, он перегружает документ и замедляет восприятие браузером. Если в документе используется несколько вариантов стилизации, то внутренние таблицы стилей будут находиться в приоритете.
Глобальный стиль
Если необходимо задать стиль для определенного элемента во всем HTML-документе, используют тег <style>. В этом случае не придется прописывать значения каждый раз, а можно указать их однократно.
Выглядеть код будет так:
<head>
<style>
H1 {
font-size: 130%;
font-family: Georgia;
color: #000000;
}
</style>
</head>
Заданный стиль будет применен к тегу <h1>, как только он будет прописан на странице.
Подключение CSS таким образом будет в приоритете прочтения браузером выше, чем внешняя таблица стилей.
Как подключить на сайт шрифт
Шрифт — это один из основных элементов оформления любой веб-страницы. Впечатление, которое сайт производит на пользователя, напрямую зависит от используемого шрифта. К счастью, можно не ограничиваться стандартными гарнитурами, есть возможность подключения любых других — расскажем, как это делается.
Посредством CSS подключение шрифтов производится следующим образом:
- Найдите и скачайте подходящую гарнитуру.
- Откройте CSS файл и пропишите в нем следующий код:
@font-face {
font-family: «Open Sans»;
src: url(«../fonts/OpenSans.ttf») format(«truetype»);
font-style: normal;
font-weight: normal;
}
Сначала задается название шрифта, затем путь к нему, в конце — параметры. Обратите внимание, на данном примере файл со шрифтом размещен в папке fonts, которая, в свою очередь, находится в корневой директории. Для удобства лучше создавать отдельные папки для различных файлов и элементов (изображения, скрипты, таблицы стилей и т. д.).
Итак, в папке fonts у нас лежит файл с названием OpenSans.ttf, с обычными параметрами. Теперь он будет отображаться в браузере.
Подключаем шрифт через Google Fonts
Одним из самых распространенных способов подключения шрифтов в CSS и HTML является сервис Google Fonts.
Интерфейс интуитивно понятен — нужно найти подходящий шрифт по названию или заданным параметрам, нажать кнопку Select this font, и сервис моментально генерирует код, который вставляется в поле тега <head> HTML-документа, а также в соответствующий CSS файл со стилями.
Как это должно выглядеть в HTML:
<link href=»https://fonts.googleapis.com/css?family=Open+Sans» rel=»stylesheet»>
И в CSS файле со стилями:
font-family: ‘Open Sans’, sans-serif;
Этот способ удобен тем, что позволяет оперативно найти нужный шрифт из очень большой базы и экономит много времени, а также избавляет от проблем, которые возникают из-за некорректного отображения шрифтов в некоторых браузерах.
Подведем итоги
Итак, мы рассмотрели основные способы подключения стилей CSS к HTML документам. Исходя из задач, которые ставятся перед разработчиком в каждом конкретном случае, можно выбирать наиболее приоритетный вариант.
Оформление веб-страниц — это творческий процесс, требующий, однако, аккуратного подхода. Пользуйтесь возможностью комментирования кода и не забывайте об оптимизации сайтов.
