Подключение CSS - Часть 1

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr
  • Данная статья написана командой Vertex Academy.
  • Это одна из статей из нашего Самоучителя по HTML&CSS.
  • Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

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

Приведем аналогию из нашей обычной жизни. У всех у нас дома есть розетки и бытовые приборы (электрочайник, стиральная машинка и т.д.). Так вот, если розетка отдельно, а штепсель от элетроприбора отдельно, как бы пользы от этого мало 🙂 Надо чтоб они были подключены. Верно?

Точно так же и с HTML и CSS.

Вы уже знаете:

  • с помощью HTML мы задаем структуру страницы
  • с помощью CSS мы стилизуем данную страницу

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

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

Существует 3 способа подключения CSS к HTML. Рассмотрим каждый способ по порядку.

Способ №1 - Создаем CSS-файл и подключаем его к HTML-файлу

Вы уже знаете, что все HTML-файлы имеют расширение .html. Например:

  • index.html
  • contacts.html
  • page-2.html

Точно также для CSS-стилей мы можем создать отдельный файл, только с расширением .css. Например, style.css.

На картинке ниже показан пример, как можно подключить файл style.css к файлу index.html.

Как видите, в теге <head> нам необходимо написать следующее:

  • <link>  - это специальный тег, который используется для подключения CSS-стилей.
  • rel = "stylesheet" - это аттрибут rel со значением "stylesheet", что значит таблица стилей. То есть таким образом мы говорим браузеру, что мы хотим подлючить таблицу стилей.
  • href = "style.css" - в аттрибуте href мы прописали путь к файлу style.css.

Как бы и все 🙂 Файл style.css будет подключен к файлу index.html.

Теперь сделайте это на практике - всего 3 шага:

Шаг 1: Создадим 2 файла:  index.html и style.css.

Структура файла index.html

Структура файла style.css

Шаг 2: Подключаем файл style.css к файлу index.html.

Для этого в файле index.html добавьте тег <link> c необходимыми аттрибутами:

Шаг 3: Открываем файл index.html в браузере. В браузере Вы увидите 2 текста параграфов, написанные:

  • шрифтом: Georgia
  • размером шрифта: 18px
  • цветом: зеленым

Поздравляем! Вы уже умеете подключать CSS к HTML.

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

Следующие 2 способа подключения CSS мы опишем в следующей статье.

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr
Самоучители--узнать детальнее--