Подключение CSS - Часть 1
- Данная статья написана командой 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> нам необходимо написать следующее:
1 2 3 |
<head> <link rel="stylesheet" href="style.css"> </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
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Название страницы</title> </head> <body> <p>Утром надо быть особенно осторожным. Одно неловкое движение - и ты снова спишь.</p> <p>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланированных.</p> </body> </html> |
Структура файла style.css
1 2 3 4 5 |
p { font-family: Georgia; font-size: 18px; color: green; } |
Шаг 2: Подключаем файл style.css к файлу index.html.
Для этого в файле index.html добавьте тег <link> c необходимыми аттрибутами:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Название страницы</title> <link rel="stylesheet" href="style.css"> </head> <body> <p> Утром надо быть особенно осторожным. Одно неловкое движение - и ты снова спишь. </p> <p>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланнированных. </p> </body> </html> |
Шаг 3: Открываем файл index.html в браузере. В браузере Вы увидите 2 текста параграфов, написанные:
- шрифтом: Georgia
- размером шрифта: 18px
- цветом: зеленым
Поздравляем! Вы уже умеете подключать CSS к HTML.
Данный способ подключения CSS к HTML является самым распространенным и правильным. Однако мы Вам покажем и 2 других способа, просто чтоб Вы знали как они выглядят, если увидите в коде.
Следующие 2 способа подключения CSS мы опишем в следующей статье.
Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.