Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

15. Подключение внешних файлов в HTML - стили CSS

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

В предыдущем уроке узнали про тег <style> и научились его применять для описания стилей CSS. В этом уроке научимся подключать отдельные файлы с помощью тега <link>.

Дополнительное видео по теме

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

Это второй способ использования стилей CSS. С первым способом вы познакомились в предыдущем уроке.

Этот способ более эффективный и удобный. Итак, нам поможет тег <link>. Он имеет три важных атрибута: typerel и href

  • Атрибут type – указывает тип подключаемого документа;
  • Атрибут rel – сообщает отношение между файлами;
  • Атрибут href – ссылка на файл.

Далее на примерах будем разбираться.

Примеры подключения файла CSS

Рассмотрим следующую структуру проекта:

Здесь изображение или скриншот.
Для доступа необходимо авторизоваться на сайте Codebra.

Подключение файла стилей CSS для документа index.html

Подключение файла стилей, находящегося в той же директории:

Пример (html)
<link type = "text/css" rel = "stylesheet" href = "style_index.css"> 

Подключение CSS-стилей, находящихся в папке css:

Пример (html)
<link type = "text/css" rel = "stylesheet" href = "css/style_index.css"> 

Подключение файла стилей CSS для документа blog.html

Файл blog.html находится в директории blog. Подключение файла style_index.css возможно тремя способами:

Пример (html)
<link type = "text/css" rel = "stylesheet" href = "/style_index.css"> 

Слеш / перед названием файла указывает относительный путь от корня сайта (проекта).

Мы могли сразу указать абсолютный путь:

Пример (html)
<link type = "text/css" rel = "stylesheet" href = "https://codebra.ru/style_index.css"> 

Или с помощью символа ../ «подняться на уровень выше» и подключить файл style_index.css:

Пример (html)
<link type = "text/css" rel = "stylesheet" href = "../style_index.css"> 

Теперь подключим файл blog_style.css:

Пример (html)
<link type = "text/css" rel = "stylesheet" href = "../css/css_blog/blog_style.css"> 

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

Похожие уроки Codebra

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ
Что такое CSS?Знакомство с CSS
Курс по Python от CodebraЗнакомство с Python
Селекторы классов и идентификаторовСелекторы в CSS
Введение в курс по PHPКурс по PHP
Описание стилей CSS в HTML-документеЗнакомство с HTML
Свойство outline для создания внешних границОтступы, рамки, поля
Свойство border для создания границОтступы, рамки, поля
Свойство margin для установки отступовОтступы, рамки, поля
Свойства форматирования all, clear и clipФорматирование
Раздел «Знакомство с HTML»
1. УРОК: 1. Вводный урок по курсу HTML и CSS
2. УРОК: 2. Что такое язык HTML
3. УРОК: 3. Погружение в курс по HTML и CSS
4. УРОК: 4. Теги в HTML. Одинарные и парные теги
5. УРОК: 5. Что такое теги в HTML и для чего они нужны
6. УРОК: 6. Одинарные теги в HTML
7. УРОК: 7. Парные теги в HTML
8. ПРАКТИКА: 10. Структура HTML-документа
9. УРОК: 11. Что означают теги HTML, HEAD, BODY
10. УРОК: 12. Первая строка всех сайтов - DOCTYPE
11. УРОК: 13. Исходный код веб-страницы
12. УРОК: 14. Заголовок в HTML - тег TITLE
13. УРОК: 16. Кодировка HTML-страницы и атрибуты тегов
14. УРОК: 17. Описание стилей CSS в HTML-документе
УРОК 15. 18. Подключение внешних файлов в HTML - стили CSS
Вы здесь
16. ПРАКТИКА: 19. Что не хватает в структуре HTML-документа
17. ПРАКТИКА: 20. Опять чего-то не хватает в структуре HTML-страницы
18. УРОК: 22. Использование HTML метатегов (мета теги)
19. ПРАКТИКА: 23. Повторим метатеги в HTML
20. ПРАКТИКА: 24. Метатеги Facebook
21. ТЕСТ: 25. Тест по разделу «Знакомство с HTML»
Другие разделы
Раздел 2. Разметка текста в HTML
Раздел 3. Ссылки в HTML
Раздел 4. Изображения в HTML
Раздел 5. Таблицы в HTML
Раздел 6. Формы в HTML
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Знакомство с Flexbox
Раздел 23. Практика с htmlbook.ru
Раздел 24. Элементы сайта
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию и компьютерной безопасности. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Пентесту Active Directory, Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

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

Удачи в обучении!

Закрыть окно