Почему не подключается css к html?

Начал изучать веб-дизайн. Пробовал делать два сайта на HTML+CSS. Почему-то файл CSS не подключается к HTML. Год назад, когда впервые попробовал, — подключалось. Файл на архив проекта https://dropmefiles.com/MPAQ9

13 ответов

Покажи текстом код, ответом на вопрос
Здесь что-то не то:

 
box-sizing: border-box; > a < text-decoration: none; display: inline-block; >ul, li < list-style: none; margin: 0; padding: 0; >.container< max-width: 1170px; margin: 0 auto; padding: 0 15px;
 

Вот так попробуй:

.header < box-sizing: border-box; >a < text-decoration: none; display: inline-block; >ul, li < list-style: none; margin: 0; padding: 0; >.container

ctrl+shift+I — зашел в папку css — там пусто

[email protected]">Бесплатный звонок

 
box-sizing: border-box; > a < text-decoration: none; display: inline-block; >ul, li < list-style: none; margin: 0; padding: 0; >.container< max-width: 1170px; margin: 0 auto; padding: 0 15px;
 

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html < line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ >/* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body < margin: 0; >/** * Render the `main` element consistently in IE. */ main < display: block; >/** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 < font-size: 2em; margin: 0.67em 0; >/* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr < box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ >/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre < font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ >/* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a < background-color: transparent; >/** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] < border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ >/** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong < font-weight: bolder; >/** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp < font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ >/** * Add the correct font size in all browsers. */ small < font-size: 80%; >/** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup < font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; >sub < bottom: -0.25em; >sup < top: -0.5em; >/* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img < border-style: none; >/* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea < font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ >/** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input < /* 1 */ overflow: visible; >/** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select < /* 1 */ text-transform: none; >/** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] < -webkit-appearance: button; >/** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner < border-style: none; padding: 0; >/** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring < outline: 1px dotted ButtonText; >/** * Correct the padding in Firefox. */ fieldset < padding: 0.35em 0.75em 0.625em; >/** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend < box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ >/** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress < vertical-align: baseline; >/** * Remove the default vertical scrollbar in IE 10+. */ textarea < overflow: auto; >/** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] < box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ >/** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button < height: auto; >/** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] < -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ >/** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration < -webkit-appearance: none; >/** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button < -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ >/* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details < display: block; >/* * Add the correct display in all browsers. */ summary < display: list-item; >/* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template < display: none; >/** * Add the correct display in IE 10. */ [hidden]

На иконке .html файла стоит обозначение, а на файле .css — нет. нет значка шестеренки. значок файла css как текстового документа. как решить проблему?

Если в одну папку ложу , то все получается. Если в отдельную папку css, то не включается. В чем прикол?

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

Это второй способ описания стилей. С первым способом вы познакомились в предыдущем уроке. Этот способ более эффективный и удобный. Итак, нам поможет тег (дескриптор, контейнер) . Он имеет три важных атрибута: type , rel , href . Type – указывает тип подключаемого документа. Rel – сообщает отношение между файлами. Href – ссылка на файл.

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

Пример подключения файла, лежащего в папке, которая находится в этой директории «include»

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

Если урок был полезным,
можете поделиться им с друзьями

Похожие уроки и записи блога

Обработка исключений (try/except) в Python Знакомство с Python
Первое знакомство с Python Знакомство с Python
Модули в Python Знакомство с Python
Работа с файлами в Python Знакомство с Python
Типы данных в Python Знакомство с Python
Урок 2. Подключаем Bootstrap Блог
Структуры данных в Python Знакомство с Python
Написание модулей в Python Знакомство с Python
Выражения отношений в JavaScript Выражения и операторы
Вернуть расположение блоков
Восстановить код

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

1. Подключите стили с именем thr , которые лежат в папке main . Папка main находится на уровень ниже, чем файл к которому подключаем (возможно, нужно использовать ../ )

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.

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

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

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

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

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

Прочитав каскадную таблицу стилей, браузер форматирует HTML документ в соответствии с правилами, заданными в этой таблице стилей.

Три способа добавить CSS на веб-страницу

Существует три способа подключения CSS к документу HTML:

• Внутриэлементный или строчный
• Внутридокументный или встроенный
• Внешний

Внутриэлементные стили

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

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

    
Заголовок
 
Текст. И еще текст.
   

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

Внутридокументные стили

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

Такое определение выглядит следующим образом:

     h1 < color: red; >p 
Заголовок
 
Текст. И еще текст.
   

Следующее определение сделает все параграфы страницы синими, а все ссылки заголовки первого уровня красными.

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

Внешние стили

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

Для определения таблицы стилей в любом текстовом редакторе создается отдельный CSS файл с определениями стилей. Содержимое такого файла может быть, например, таким:

Если сохранить такой файл под именем «web.css» (расширение должно быть «.css»), то его подключают к HTML документу при помощи тега :

     
Заголовок
 
Текст. Еще текст.
   

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

Несколько таблиц стилей на одной странице

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

Допустим, что во внешней таблице стилей определен такой стиль для элемента :

Теперь допустим, что во внутридокументной таблице стилей также определен стиль для элемента :

Если внутридокументная таблица подключается после внешней таблицы стилей, то цвет элемента будет «orange»:

Однако, если внутридокументная таблица подключается до внешней таблицы стилей, то цвет элемента будет «navy»:

Каскадный порядок

А какой стиль будет использоваться, если для HTML элемента задано больше одного стиля?

Все стили на веб-странице будут «каскадно» транслированы в новую «виртуальную» таблицу стилей в следующем порядке (цифра 1 имеет наивысший приоритет):

1. Внутриэлементный стиль (внутри HTML элемента)
2. Внешние и внутридокументные таблицы стилей (в секции head)
3. Стили браузера по умолчанию

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

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

Это второй способ описания стилей. С первым способом вы познакомились в предыдущем уроке. Этот способ более эффективный и удобный. Итак, нам поможет тег (дескриптор, контейнер) . Он имеет три важных атрибута: type , rel , href . Type – указывает тип подключаемого документа. Rel – сообщает отношение между файлами. Href – ссылка на файл.

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

Пример подключения файла, лежащего в папке, которая находится в этой директории «include»

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

Если урок был полезным,
можете поделиться им с друзьями

Похожие уроки и записи блога

Обработка исключений (try/except) в Python Знакомство с Python
Первое знакомство с Python Знакомство с Python
Модули в Python Знакомство с Python
Работа с файлами в Python Знакомство с Python
Типы данных в Python Знакомство с Python
Урок 2. Подключаем Bootstrap Блог
Структуры данных в Python Знакомство с Python
Написание модулей в Python Знакомство с Python
Выражения отношений в JavaScript Выражения и операторы
Вернуть расположение блоков
Восстановить код

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.

1. Подключите стили с именем thr , которые лежат в папке main . Папка main находится на уровень ниже, чем файл к которому подключаем (возможно, нужно использовать ../ )

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.

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

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

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

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

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

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

Точно так же и с 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.

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

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

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

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

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

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

< title >Название страницы < / title >
< p >Утром надо быть особенно осторожным . Одно неловкое движение — и ты снова спишь . < / p >
< p >Вот так всегда . Запланируешь 20 дел . Сделаешь 30. И ни одного из 20 запланированных . < / p >

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

font — family : Georgia ;
font — size : 18px ;
color : green ;

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

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

< title >Название страницы < / title >
< p >Утром надо быть особенно осторожным . Одно неловкое движение — и ты снова спишь . < / p >
< p >Вот так всегда . Запланируешь 20 дел . Сделаешь 30. И ни одного из 20 запланнированных . < / p >

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

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

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

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

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

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

• ← Text-transform в CSS
• Цвета в CSS →

Как подключить css файл к html

Для подключения файла со стилями в HTML документ необходимо использовать тэг .

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

 href="main.css" rel="stylesheet"> 

Где href — это путь до вашего файла стилей, может быть как относительным так и абсолютным. А rel — это тип «отношений». — значение сообщает как указанный элемент связан с содержащим его документом. В справочник типов ссылок есть много различных видов отношений.

Например ссылка на иконку сайта может выглядеть так:

 rel="icon" href="favicon.ico" />