НЕ подключается CSS файл к HTML
Вопрос задан
Изменён 1 год 9 месяцев назад
Просмотрен 4k раз
Проблема заключается в том, что я не могу подключить CSS файл к HTML
Код написан верно — я всё проверял по несколько раз.
Пользуюсь Sublime Text
body {
background-color: #red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ds</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style/style.css">
</head>
<body>
<div>
<div>
<div>3 колонки</div>
<div>7 колонок</div>
<div>2 колонки</div>
</div>
</div>
<script src="js/jquery.
min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Папка app в которой находится index.html
Папка css в которой находится style.css
CSS/HTML в редакторе
Я не знаю, что делать, прошу помощи на форуме, ничего не помогает, сижу третий час за этой проблемой.
ps: Если вписать style в html файл, то всё будет работать.
Сам css файл не битый, и отображается в браузере
- html
- css
1
Код написан верно — я всё проверял по несколько раз.
Неверно, ошибка в коде.
<link rel="stylesheet" href="css/style/style.css">
style которая находится в папке css.Хотя сам файл просто в папке css.
<link rel="stylesheet" href="css/style.
css">
UPD. Вторая ошибка в файле css. Уберите хеш перед значением свойства background-color: red.
3
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как связать CSS с HTML, чтобы сделать разметку более читаемой
Главная » Программирование и разработка
Программирование и разработка
На чтение 3 мин Просмотров 169 Опубликовано
Как новички в программировании, мы сначала начинаем включать CSS в наши веб-страницы в виде встроенных стилей. Мы используем атрибут style для вставки CSS непосредственно в наш HTML-элемент:
<!DOCTYPE html>
<html>
<head>
<title>Inline Style</title>
</head>
<body>
<h2 style=»color:blue;text-align:center;»>Star Wars</h2>
<h5 style=»color:red;text-align:center;»>Return of the Jedi</h5>
</body>
</html>
По мере перехода к более сложным сайтам мы переходим к включению нашего CSS в качестве внутреннего CSS. Здесь мы пишем весь наш CSS между <style>тегами в <head> разделе HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h2, h5 {
text-align: center;
}
h2 {
color: blue;
}
h5 {
color: red;
}
</style>
</head>
<body>
<h2>Star Wars</h2>
<h5>Return of the Jedi</h5>
</body>
</html>
Это хорошо очищает наш HTML.
Однако, что, если бы у нас было 500 строк CSS? Этот файл будет трудно читать довольно быстро. Однако у нас есть возможность создавать внешние таблицы стилей, а затем связывать их с нашим файлом HTML!
Папка проекта должна выглядеть так, когда вы добавляете файл index.css
- В основной папке проекта, где находится ваш файл index.html, создайте новый файл с именем index.css. Файл index.css будет содержать весь CSS для нашего файла index.html. Мне нравится называть свои CSS-файлы в честь HTML-файлов, которые они создают, чтобы всё было организованно, но вы, безусловно, можете называть их как хотите, если знаете, какие файлы они стилизуют.
- Если у вас есть CSS между <style>тегами в <head>вашем файле HTML, вырежьте и вставьте только код CSS (без тегов) в соответствующий файл CSS.
- В <head> своём HTML-файле вы собираетесь создать тег <link>, указывающий на ваш CSS-файл:
<link rel=»stylesheet» type=»text/css» href=».
/index.css»>
Ссылка состоит из трёх частей:
- Атрибут rel: он сообщает нам, что между этим файлом и другим файлом будет связь, и эта ссылка расскажет нам, каковы эти отношения.
- Атрибут type: описывает тип отношения связанного файла к HTML-файлу.
- А также атрибут href: относительный путь к файлу, откуда находится файл HTML — расположение файла.
HTML-файл ссылается на соответствующий CSS-файл, добавляя элемент <link>.
Помните, что даже несмотря на то, что мы отделяем файл CSS от файла HTML, каскадный характер CSS по-прежнему доминирует. Это означает, что если у вас несколько файлов CSS, вам необходимо:
- Сделайте ссылку <link>, указывающую на каждый отдельный файл CSS.
- Убедитесь, что эти файлы расположены в том порядке, в котором они вам нужны, чтобы был виден правильный стиль. Если они не в правильном порядке, укладка может не сработать.
Это всё, что нужно сделать. Теперь вы на правильном пути к созданию внешних таблиц стилей для своего проекта!
ЧИТАЙТЕ ТАКЖЕ: 10 лучших проектов для начинающих по отработке навыков HTML и CSS.
как правильно связать CSS с HTML · Практический совет для разработчиков
Правильный способ связать файл CSS с файлом HTML — добавить между тега HTML в верхней части HTML-страницы. Однако есть много крошечных ошибок, которые вы можете сделать, что может привести к тому, что ваш HTML и CSS не будут правильно связаны. Это:
- Использование неправильного тега HTML чтобы связать HTML с CSS.
- Размещение Ссылка CSS не в той части веб-страницы.
- Несоответствие имени файла и ссылки имя значения href
- Пробелы в имени файла CSS
- Расположение файла HTML и CSS в одной или разных папках
- Синтаксические ошибки в вашем CSS-файле
Давайте рассмотрим каждую ошибку, которую вы можете совершать, и то, как правильно связать HTML с CSS.
1. Использование неправильного тега HTML для связи HTML с CSS.
Иногда вы можете встретить людей, пытающихся использовать теги HTML, чтобы связать ваш CSS с HTML. Это не может работать.
Вы можете использовать HTML-теги только тогда, когда вы пишете свой CSS в разделе заголовка самого HTML-документа, не связывая файл CSS.
Правильный тег HTML для связывания файла CSS с файлом HTML использует . «main.css» — это имя файла CSS. Обратите внимание, что HTML-тег является самозакрывающимся тегом и не может использоваться парами, как HTML-теги или .
2. Размещение ссылки CSS в неправильной части веб-страницы.
Вы не сможете связать HTML и CSS, если разместите HTML-тег в любой другой части веб-страницы, кроме тега заголовка.
Итак, посмотрите, где вы разместили HTML-тег ссылки, и измените его соответствующим образом.
3. Несоответствие имени файла и имени значения href ссылки
Убедитесь, что имя файла CSS совпадает с именем, указанным в значении href в HTML-теге
Все, что вам нужно сделать, это изменить значение href на правильное имя файла CSS.
4. Пробелы в имени файла CSS
Если у вас есть пробелы в имени файла CSS имени file.css , браузер не сможет правильно интерпретировать пробелы в значении href .
Чтобы это работало, вы можете:
- замените пробелы в значении href на
%20. т. е.
css"> - замените пробелы в имени файла CSS на
дефис (-) или подчеркивание (_)как в имени файла, так и в значении ссылки href, чтобы разделить слова.
5. Расположение файлов HTML и CSS в одной или разных папках
Если файлы HTML и CSS находятся в разных папках, у вас могут возникнуть проблемы с их связыванием. Вы можете решить эту проблему с помощью:
- Использование правильного пути к файлу CSS. Поэтому, если файл CSS находится в папке, отличной от пути HTML, вам необходимо определить имя пути и добавить его к значению href ссылки. например.
Если файл css находится в папке с именем
styles, который находился в той же папке, что и файл HTML, правильный путь будет - Перемещение CSS и HTML в одну папку. Когда вы перемещаете их в одну и ту же папку, значение ссылки href будет просто именем файла css:
6. Синтаксические ошибки в файле CSS
Если у вас есть ошибка в файле CSS, это может привести к тому, что ваши стили CSS не будут применены к коду HTML. Самый простой способ исправить это:
- Используйте текстовый редактор с подсветкой синтаксиса. Подсветка синтаксиса поможет вам определить, где ваш код неверен.
- Используйте онлайн-инструмент проверки CSS. Онлайн-инструмент проверки CSS скажет вам, где вы допустили ошибку в своем коде CSS.
Если вы будете следовать этому руководству, вы всегда сможете соединить свои файлы HTML и CSS вместе.
Всем привет! Я Авик Ндугу .
Я опубликовал более 100 сообщений в блогах по HTML, CSS, Javascript, React и другим связанным темам. Когда я не пишу, я люблю читать, ходить в походы и слушать подкасты.
Информационный бюллетень для разработчиков переднего плана
Получайте ежемесячный информационный бюллетень Frontend Web Development.
Никакого спама, легко отписаться в любое время.
Как связать CSS с HTML
html10 месяцев назад
от Naima Aftab
Каскадные таблицы стилей, также известные как CSS, — это язык стилей, который используется для оформления HTML-элементов, отображаемых на веб-страницах. CSS позволяет создавать многоразовые таблицы стилей, которые можно использовать для одновременного оформления нескольких веб-страниц. Эти таблицы стилей экономят много времени и просты в обслуживании. Но задумывались ли вы когда-нибудь, как связать таблицы стилей CSS с документами HTML? Что ж, у нас есть ответ для вас в этом блоге.
Три способа связать CSS с HTML. Они перечислены ниже.
- Встроенный CSS
- Внутренний CSS
- Внешний CSS
Все эти подходы обсуждались в этом блоге.
Как связать встроенный CSS с HTML
Если вы принимаете этот подход, вам нужно использовать атрибут стиля конкретного элемента, который вы хотите стилизовать.
Просто вставьте стиль в начальный тег элемента.
Этот подход не рекомендуется, так как стилизация выполняется внутри начального тега определенного элемента, что затрудняет чтение и поддержку кода. Кроме того, встроенный CSS нельзя использовать повторно, поэтому вам нужно стилизовать каждый элемент отдельно, что усложняет задачу стилизации, тем самым убивая цель использования CSS.
Здесь мы продемонстрировали этот подход на примере.
HTML
Как связать CSS с HTML
Встроенный CSS
В приведенном выше коде генерируются три элемента:
и
. Все три из них стилизованы с использованием атрибута стиля. Контейнер div получил некоторые отступы и границу, в то время как заголовок и абзац получили определенный цвет текста.
Вывод
Элементы были оформлены с использованием встроенного CSS.
Как внутренне связать CSS с HTML
Этот подход направляет пользователей к стилям элементов с помощью тега
Как связать CSS с HTML
Встроенный CSS