Стилевой файл html. Что такое CSS, подключение CSS файла

При изменении дизайна сайта может возникнуть вопрос, как подключить CSS к HTML. Какие способы годятся для этого? Нужны ли специальные знания для этого?

Что это такое?

CSS (от англ. Cascading Style Sheets) – формальный язык настройки внешнего вида страницы, написанной на языке разметки. Существует 3 способа, как подключить CSS файл к HTML. Каких-то особенных знаний для этого не нужно, как и нельзя четко выделить, какой из методов подключения CSS к HTML наиболее приемлем – просто следуйте инструкции и используйте удобный для вас.

Общая структура кода с использованием селекторов в учебниках представлена следующим образом:

селектор {

свойство: значение;

свойство: значение;

Реализация каждого способа особенная. Разбирать будем на примере такого кода:

Задача подключаемых стилей – изменить цвет тега на красный.

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

Инструкция по подключению стилей CSS

Вариант первый

Чтобы ответить на вопрос, как подключить стили CSS, нужно присоединить таблицу стилей внутри тела, используя атрибут style.

К элементам, находящимся внутри тела body, необходимо приписать атрибут style. В этом случае значением приписанного атрибута будут служить параметры CSS, примененные к элементу.

Для более наглядного объяснения рассмотрим на примере, заданном ниже. Значение style приписано к элементу.

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

У метода есть существенные недостатки, которые важно учитывать:

1. Ограниченность в плане функционала. Так, способ не позволяет подключить несколько селекторов одновременно или создавать ссылки в одном файле.
2. Из первого минуса вытекает второй: каждый стиль по отдельности прописывается вручную, что со временем сделает код страницы настоящим хламовником.

Вариант второй

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

Выглядит это следующим образом:

Замечание. В параметре href необходимо описать путь файла, расположенного на компьютере. Условный пример: href =”C:\Users:\Desktop:\файл”.

В итоге получается код следующего вида:

C:\Users:\Desktop:\style.css» type=»text/css»/>

В прикрепляемом документе style должна быть прописана вот такая строка:

Несколько нюансов, касающихся этого метода:

1. Команда link, которая указывает отсылку на внешний файл обязательно должна размещаться в заголовке между тегами.
2. Атрибут Rel показывает тот тип сайта, на который пользователь делает ссылку. В нашем случае таблица селекторов прописывается как stylesheet.
3. Путь к внешнему файлу обязательно указывается относительно кода. В связи с чем, рекомендуется поместить оба файла в одну папку.

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

Вариант третий

В этом случае CSS прописывается внутри параметра style.

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

Подключение нескольких селекторов к странице

Множество веб-мастеров не ограничиваются одним подключенным файлом к странице. Чтобы подключить несколько, достаточно пары шагов:

1. Создаем несколько css-файлов с любым названием.
2. Используя второй способ подключения, вписываем в код аналогичную строку, указав название и путь второго файла.

Итоговый код будет иметь следующий вид:

C:\Users:\Desktop:\1.css» type=»text/css»/>

C:\Users:\Desktop:\2.css» type=»text/css»/>

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

1. Подключаем стиль к странице одним из вышеописанных способов.
2. В файле прописываем строку, подключающую к атрибуту дополнительный стиль: @import url(«style-2.css»).

Видео на тему: подключение CSSк HTML

В сюжете более наглядно показаны все способы подключения таблицы стилей к коду страницы:

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

Опубликовал newauthor

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

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

Простая таблица стилей

Давайте же взглянем, как выглядит самая элементарная таблица стилей и из каких элементов она состоит. Это пример CSS-стиля для всех тегов

Которые есть на веб-странице:

Как теперь будет выглядеть текст

В браузере и что означает каждая строка? Все очень просто: шрифт будет иметь полужирное начертание и цвет #1E824C (шестнадцатеричный код цвета) и отображаться в размере 1em (относительная единица, равная размеру шрифта, который задан по умолчанию в браузере).

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

Селектор Указывая его, мы говорим браузеру, к чему именно хотим применить стиль. В нашем случае селектором является p . Блок объявлений Так называется всё содержимое, находящееся между фигурными скобками {} после селектора. Стилевое свойство Это команда, с помощью которой указывается желаемый вариант форматирования (например, вы хотите изменить начертание шрифта font-weight , цвет color , размер шрифта font-size и т. д.). После имени свойства необходимо ставить двоеточие. В дальнейшем вы познакомитесь с большим количеством свойств CSS. Значение свойства После двоеточия записывается само значение свойства, которое вы определяете самостоятельно, создавая таким образом собственный стиль. В зависимости от свойства необходимо указывать подходящее ему значение.

Например, начертание шрифта задается ключевыми словами bold , bolder и т. д., цвет – шестнадцатеричным значением, RGB(A), HSL(A) или ключевыми словами red , orange , white и т. д., размер шрифта – единицами измерения CSS (процентами% , пикселямиpx , пунктамиpt , высотой шрифтаem ) или константами small , medium , large и т. д. После указания значения свойства ставится точка с запятой.

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

P {font-weight:bold;color:#1E824C;font-size:1em;}

Он тоже работает, но легко ли в нем разобраться? Особенно когда код CSS достаточно длинный. Конечно, не помешало бы разделить его хотя бы пробелами. Существует несколько правил хорошего тона, и если вы сразу выучите их, то в будущем скажете себе «спасибо».

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

P { font-weight: bold; color: #1E824C; font-size: 1em; }

А такая форма записи весьма громоздка, хоть и работает:

P {font-weight: bold;} p {color: #1E824C;} p {font-size: 1em;}

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

Для дополнительного удобства можно добавлять комментарии прямо в CSS. В них вы можете писать пояснения, пометки, помогающие ориентироваться в таблицах стилей.

Комментарии в CSS записываются между символами /* и */ . Они не отображаются на веб-странице в браузере и видны исключительно в коде. Разработчики также часто используют комментарии для того чтобы скрыть временно ненужный участок кода CSS. Выглядят комментарии таким образом:

/* Стиль для основного текста */ p { font-weight: bold; color: #1E824C; font-size: 1em; }

Внутренние и внешние таблицы стилей

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

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

Внешние таблицы стилей гораздо более распространены. Вам нужно только подключить таблицу ко всем необходимым веб-страницам, используя тег c атрибутом rel (определяет отношение между страницей и подключаемым файлом) и значением stylesheet , которое означает, что в подключаемом файле содержится таблица стилей. Атрибут href – это путь (URL) к вашему файлу.css:

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

Урок: создаем таблицу стилей

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

В папке вы найдете HTML-документ с примером простой страницы и изображение (будет использоваться в уроке). Откройте HTML-документ в браузере. Вы увидите, что страница выглядит совершенно обычно. Чтобы придать ей более привлекательный вид, давайте напишем для нее стиль.

Пока что вам не нужно слишком сильно вникать в то, что означает тот или иной кусок кода. Сейчас вам необходимо понять сам принцип работы. Приступим.

Подключение CSS к HTML

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

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

Вкратце о том, что вы только что сделали. Вставив этот код в HTML-документ, вы:

• указали ссылку на шрифт под названием Roboto Condensed, который будет взят с сервера Google (подробнее о шрифтах Google мы расскажем позже);
• подключили свою внешнюю таблицу стилей style.css (пока что пустую).

Пишем стиль CSS

Сохраните изменения в HTML-документе и перейдите в вами созданный пустой файл.css . Давайте добавим стиль для страницы:

Html { padding-top: 5px; background-image: url(background.jpg); }

Сохраните изменения. Поздравляем, вы написали первое правило – оно касается тега . Первое свойство - padding-top - добавит отступ сверху между окном браузера и содержимым веб-страницы в размере 5 пикселей. С помощью второго свойства, background-image , вы подключили изображение для фона всей страницы, указав путь к графическому файлу (находится в той же папке, что и HTML-документ).

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

Body { width: 75%; padding: 40px; margin: 15px auto; background-color: #EBEBEB; border-radius: 30px; }

Сохраните изменения в файле. Сейчас вы:

• задали область для содержимого тега , которая равна 75% от ширины окна браузера;
• обеспечили отступ в 40 пикселей от всех сторон области содержимого;
• расположили область по центру страницы, а также сделали отступ сверху и снизу в 15 пикселей;
• задали цвет фона #EBEBEB для области содержимого;
• скруглили углы прямоугольной области, указав радиус скругления 30 пикселей.

Снова обновите HTML-документ. При этом убедитесь, что кэш отключен либо перезагрузите страницу с обновлением всех связанных с ней файлов, используя специальную комбинацию клавиш (например, для Chrome это Ctrl+F5 ).

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

Изменяем шрифт с помощью CSS

Пора украсить наш текст. Добавьте в таблицу стилей этот код и сохраните изменения:

H1 { color: #E87E04; font-size: 2em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } h2 { color: #E87E04; font-size: 1.7em; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; } p { color: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed", sans-serif; }

Написав это, вы задали цвета шрифтов для тегов h1 , h2 , p , указали их размеры, добавили отступы margin от левого края в 20 пикселей и дополнительно для

Сделали отступ сверху в 20 пикселей и установили интерлиньяж line-height (межстрочный интервал текста) на 50% больше стандартного. К тому же, вы подключили ко всем трём тегам шрифт Roboto Condensed (вот для чего в самом начале необходимо было указать ссылку на него в HTML-файле).

Обновите страницу в браузере и полюбуйтесь результатом работы. В этом уроке мы попробуем еще одну вещь. Допишите в CSS этот код:

Emphasis { font-weight: bold; }

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

В конечном итоге у вас должна получиться вот такая страница:

В качестве тренировки попробуйте изменить размер текста для

(допустим, 1.1em), а также увеличить отступ между

И левым краем области содержимого еще на 10 пикселей.

Выводы

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

Любой стиль CSS состоит из нескольких элементов: селектора, стилевого свойства и значения этого свойства.

Все свойства и их значения записываются в блоке объявлений между двумя фигурными скобками {} после указания селектора.

Нужно внимательно следить за знаками: две фигурные скобки (открывающая в начале блока объявлений и закрывающая в конце). Без этих скобок CSS будет работать некорректно.

Требуется обязательно ставить двоеточие после свойства и точку с запятой после значения.

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

Подключать CSS таблицы к HTML документу можно несколькими способами.

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

Задать CSS стили можно напрямую в HTML разметке, добавив css правило нужному тегу с помощью атрибута style.

Красный цвет текста

CSS стили прописываются к тегу с помощью атрибута style . Таким способом мы можем применять CSS стили к любому тегу на HTML странице. В данном примере мы применили CSS свойство color для параграфа, естановив его значение color:red . Мы можем устанавливать сразу несколько CSS свойств, для этого не забывайте разделять каждую пару свойство-значение символом ";" .

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

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

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

Внутренние таблицы стилей

Второй способ подключения CSS стилей, это добавление CSS стилей на страницу через тег

Теперь, если вы можете использовать CSS селекторы для выборки группы тэгов на странице, но проблемма при создании новых страниц опять же в этом методе остается не решенной. К тому же вы всё еще не сможете кэшировать CSS стили.

Подключение внешних таблиц стилей

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

Где в атрибуте href необходимо указать путь к css файлу (Файл в который содержит все наши CSS стили, расширение файла должно быть.css).

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

Так как CSS теперь у нас вынесн в отдельный файл, браузер его скачивает при первом обращении к нему и в дальнейшем, если айл небыл измене, то он его использует дальше (файл попадает в кэш браузера) следовательно, страница будет загружаться намного быстрее, а если при этом вы используете минимизацию css и js файлов, то загрузка произойдет в разы быстрей.

Так-же мы можем помещать CSS код в разные файлы. К примеру за оформление текста, файл fonts.css, а за все остальное styles.css. И подключать их вместе к HTML странице, т.к. можно подключать сразу несколько CSS файлов к одной HTML странице.

Использование директивы @import

Помимо прямого подключения на страницу с помощью тега link , существует возможность подключения стилей внутри CSS файла с помощью директивы @import .

Как было сказанно выше, можно внутри одного HTML файла, подключать сразу несколько CSS файлов, с помощью строки link. Но и это еще не всё.

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

Для импорта CSS файлов используется строка

@import url("style.css");

Где внутри скобок указывается путь к импортированному css файлу.

Существует четыре способа подключения стилей к вашему HTML-документу. Наиболее часто используемые методы - это встроенные CSS и внешние CSS.

Встроенный CSS в HTML - элемент

Ниже приведен пример внедрения CSS на основе вышеприведенного синтаксиса:

Заголовок

Абзац.

Получим следующий результат:

Атрибуты

Встроенный CSS - атрибут стиля

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

<элемент style = "...правила стиля...">

Атрибуты

Пример

Ниже приведен пример встроенного CSS на основе приведенного выше синтаксиса:

Встроенный CSS

Получим следующий результат:

Внешний CSS стили - элемент

Элемент может использоваться для подключения внешних CSS файлов в ваш HTML-документ.

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

Вот общий синтаксис подключения внешнего файла CSS:

Атрибуты

Атрибуты ассоциируются с элементами или правилах, определенных в любом внешнем файле таблицы стилей.

Любое правило, определенное в тегах , переопределяет правила, определенные в любом внешнем CSS-файле.

Любое правило, определенное во внешнем файле таблицы стилей, имеет наименьший приоритет в CSS, а правила, определенные в этом файле, будут применяться только тогда, когда не применяются два предшествующих правила.

Обработка старыми браузерами

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

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

Коротко о CSS и HTML

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

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

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

Подключение CSS файла

Это основной способ, который рассматривается разработчиками как наиболее практичный и удобный.

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

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

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

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

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

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

Если внести правки в style.css и открыть index.html в браузере, то можно будет увидеть все изменения, которые были прописаны.

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

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

Таблицы стилей внутри HTML документа

Иногда значение какого-либо стилевого параметра задается непосредственно в теле HTML-документа при помощи атрибута style.

Синтаксис:

В этом абзаце текст красного цвета

Очевидный недостаток — отсутствие универсальности, прописывать значение придется для каждого тега.

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

Глобальный стиль

Если необходимо задать стиль для определенного элемента во всем HTML-документе, используют тег

Заданный стиль будет применен к тегу

, как только он будет прописан на странице.

Подключение 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, и сервис моментально генерирует код, который вставляется в поле тега HTML-документа, а также в соответствующий CSS файл со стилями.

Как это должно выглядеть в HTML:

И в CSS файле со стилями:

Font-family: "Open Sans", sans-serif;

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

Подведем итоги

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

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