Css — Проблема с подключением CSS


У меня проблемы с подключением CSS к HTML

Я не могу получить мой HTML-ссылку на мой CSS. Я пробовал относительный путь и абсолютный путь, и ни одна из них не работает. Я использую Ctrl-U, и ссылки не отображаются в HTML.

Попробуйте сделать эти пути к файлам стилей относительными. Если они находятся в каталоге с именем «css» и этот каталог находится рядом с вашим HTML-файлом, это должно работать:

Если html-файл находится в отдельном каталоге рядом с каталогом «css», это будет:

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

Настройка среды, подобной этой, похожей на ту, что вы описали:

Проблемы с подключением CSS!

Подскажите пожалуйста в чем может быть проблема —
Есть сайт. Очень простой — лэндинговая страница.
Без HostCMS работает отлично на всех броузерах.

Если интегрирую его в HostCMS — криво работает на IE ниже версии 9. Видимо не подключаются CSS.

Вот пример заголовка макета —

Очень надеюсь..
Если честно системой вашей я разочарован. Документации 0! Сделайте нормальную документацию!
Сделайте туториалы!
Причинно-следственная связь между действиями не понятная вообще.

Такое ощущение что это не коммерческий продукт, который люди за деньги покупают а самописная фингня.

Проблемы CSS. Часть 2

Продолжение перевода статьи «Проблемы CSS. Часть 1».

Когда использовать width / height равный 100%?

Height: 100%

Пожалуй, начнем с того, что попроще. Когда использовать height: 100%? На самом же деле, вопрос часто звучит немного по-другому: «Как мне сделать так, чтобы моя страница заняла всю высоту экрана?». Ведь правда?

Для ответа на него нужно понять, что height: 100% равен высоте родительского элемента. Это не магическое «высота всего окна». Так что, если вы захотите, чтобы ваш элемент занял все 100% от высоты окна, то установить height: 100% будет недостаточно.

Почему? А потому, что родителем вашего контейнера является элемент body, а у него свойство height установлено в auto по умолчанию; а значит — его высота равна высоте контента. Конечно, вы можете попробовать добавить height: 100% к body, но этого тоже будет недостаточно.

Почему? А все потому же, родителем элемента body является элемент html, у которого также свойство height равно auto и он также растягивается под размер контента. А вот теперь, если добавить height: 100% и к элементу html, то все заработает.

Стало понятнее? Корневой элемент html на самом деле не самый верхней уровень на странице — им является «viewport». Для простоты, будем считать, что это окно браузера. Так вот, если установить height: 100% элементу html, то это то же самое, что сказать — стань такой же высоты, как окно браузера.

Суммируем полученную информацию в небольшом кусочке кода:

Готово. Если вам интересно углубится в тему, как устроен viewport, я настоятельно рекомендую статью от PPK.

А что если у родительского элемента установлено свойство min-height, а не height?

Недавно, Роджер Йохансен (Roger Johansson) описал проблему с height: 100%, проявляющуюся, когда у родительского элемента не установлен height, но указан min-height. Я не хочу углубляться в сказанное в статье, а перейду сразу к выводам. Вам необходимо установить height: 1px для родителя, чтобы дочерний элемент смог занять всю высоту указанную в min-height.

Более подробно, с этим вопросом, вы можете ознакомится в статье Роджера Йохансена (Roger Johansson).

Width: 100%

Теперь давайте разберемся с width: 100%. Для начала, небольшое уточнение: устанавливая свойство width: 100%, мы хотим, чтобы наш элемент занял всю ширину родительского элемента. Все стандартно.

Позвольте открыть вам небольшой секрет. width, для этого свойства — не очень подходящие название. Свойство width — это не абсолютный размер элемента, а размер содержимого элемента и это огромная разница.

Если добавить padding и/или border к элементу с width: 100%, то он перестанет помещаться в родительский элемент. Потому что появились padding и border и вот почему width должен был называться content-width. А теперь, пожалуйста, посмотрите на пример демонстрирующий вышесказанное.

Допустим, ширина родителя 25em, а дочернего элемента — 100% (от ширины родителя) и он также имеет padding равный 1em (1em справа и1emслева, всумме2em по горизонтали) и border размером в 0.5em (0.5 em справа и 0.5 emслева, всумме1em по горизонтали), что в итоге нам дает 25em (100%) + 2em + 1em = 28em.

Есть 4 возможных пути решения этой проблемы. Первый и, наверное, лучший способ — избегать свойства width: 100%, тем более что в данном случае оно абсолютно бесполезно. Если дочерний элемент блочный, то он и так займет всю ширину родителя автоматически (без проблем с padding`ами и border`ами). Но если мы работаем с inline-block элементом, то нам не удастся так просто решить эту проблему.

Мы можем заменить w >
Третий способ — использовать calc() для расчета ширины: width: calc(100% — 3em). Но оно тоже не подходит. Во-первых, нам все еще нужно вычислять размеры padding + border. Во-вторых, calc() плохо поддерживается браузерами (не работает в IE 8, Safari 5, Opera 12, родном браузере Android).

Идея номер четыре — использовать свойство box-sizing: border-box. Оно изменяет алгоритм расчета ширины и высоты элемента так, чтобы в них учитывались свойства padding и border. Отличная новость, заключается в том, что у box-sizing хорошая поддержка браузерами (IE8+, Opera 7+). А для всех остальных браузеров можно использовать polyfill.

Вывод: не используйте width: 100% без box-sizing: border-box.

Как не облажаться с z-index.

Все элементы на страницы позиционируются в трех плоскостях: кроме вертикальной и горизонтальной оси, существует дополнительная ось Z (глубина). Поначалу все выглядит очень просто — элементы с большим z-index находятся выше элементов с меньшим z-index. К несчастью, все гораздо сложнее. Я уверен, что z-index самое сложное css свойство за всю его историю. А также уверен, что проблемы связанные с z-index встречаются чаще других при работе с css. Надеюсь, что мы просветим возможные пути их решения.

Цукерберг рекомендует:  Обучение - Android работа с DatagramSocket

Для начала. Свойство z-index не имеет эффекта на статических элементах. Чтобы иметь возможность перемещать элемент по оси Z, нам нужно изменить его позиционирование на relative, absolute или fixed.

Важно понимать в z-index то, что не все элементы в DOM дереве размещены на одном уровне. Это значит, что изменение z-index у элемента до очень большого значения, не гарантирует того, что он будет помещен на передний план. Это называется контекстом наложения.

Простыми словами, контекст наложения является, своего рода, группой на основе одного html элемента, у которого все дочерние элементы получают ту же позицию в контексте и такой же z-index. Изменения z-index у элемента может привести к перекрыванию им других элементов, так как вам необходимо. Вот как располагаются элементы в одном контексте наложения (снизу вверх):

  1. Фон и границы элемента, формирующего контекст
  2. Дочерние контексты наложения с негативным z-index (самый маленький первый)
  3. Не позиционированные элементы
  4. Позиционированные элементы со значением z-index равным auto или 0
  5. Позиционированные элементы с положительным z-index (каждый следующий по порядку расположен выше предыдущего, при равенстве z-index)

Когда ситуация становится неприятной

Итак, мы рассмотрели основы z-index понимание которых сэкономит вам кучу времени, уж поверьте. К сожалению, их недостаточно. Тогда все было бы слишком просто.

Дело в том, что каждый контекст наложения имеет свою ось Z. Например, элемент A в контексте 1 и элемент B в контексте 2 не могут взаимодействовать через z-index. Это значит, что элемент A, как часть контекста наложения находящегося в самом низу общего контекста наложения, никогда не сможет перекрыть элемент B другого контекста, находящегося выше уровнем, даже с очень большим значением z-index.

Но, что еще хуже. Элемент html создает корневой контекст наложения. Затем, каждый не статично-спозиционированный элемент со свойством z-index не равным auto, также создает свой контекст наложения. Ничего нового. Но вот где все начинает рушиться: некоторые, никак не связанные с контекстом наложения css свойства, также создают новые контексты. Например, свойство opacity.

Все верно, свойство opacity создает новый контекст наложения. То же самое делают свойства transform и perspective. Хотя это не имеет никакого смысла, не так ли? Например, если у вас есть какой-нибудь элемент с opacity меньше 1 или с любой трансформацией, у вас потенциально может возникнуть проблема.

К сожалению, каждая проблема с z-index имеет свой контекст (не каламбур) делающий невозможным универсальное решение.

Давайте подведем краткий итог вышесказанного:

  • Перед применением z-index убедитесь, что установили свойство position не равным static
  • Не используйте более 5 цифр для значения z-index, это абсолютно бессмысленно; в большинстве случаев, значение z-index в районе 10, будет более чем достаточно
  • Убедитесь, что элемент, который вы хотите перекрыть находится в том же контексте наложения.
  • Если у вас все еще что-то работает не так, как должно, убедитесь в отсутствии трансформаций и opacity выше у родительских элементов.

В тему, я так же рекомендую к прочтению What No One Told You About Z-index от Филипа Волтона (Philip Walton) и официальную спецификацию css.

Борьба со схлопыванием отступов

Как мне кажется — это один из глюков css, который крадет наибольшее количество времени, чтобы разобраться в чем же дело. Можно сказать, что он чем-то похож на баг с z-index. Как бы то ни было, схлопывание отступов — это когда верхний и нижний отступ двух элементов схлопываются в один (самый большой из двух).

К счастью, как правило, такое поведение и ожидается. Возможно, поэтому оно так и работает (так указано в спецификации css). Однако, иногда вы не хотите, чтобы вертикальные отступы схлопнулись. Чтобы понять как этого избежать, мы для начала посмотрим, почему так происходит. Схлопывание отступов может произойти в трех разных случаях.

Соседние элементы

Когда два соседних элемента имеют вертикальные отступы — они схлопываются до самого большого из них. Есть несколько способов предотвратить схлопывание:

  • clear: left; float: left; (right то же работает)
  • display: inline-block;

Пример на jsFiddle иллюстрирует работу фиксов.

Родитель и первый/последний дочерний элемент

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

  • overflow: hidden (или любой другой, но не visible)
  • padding: 1px (или другое значение больше 0)
  • border: 1px solid transparent (или любой другой border)
  • float: left (right то же работает)


Пример на jsFiddle иллюстрирует работу фиксов.

Пустые блоки

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

Заключение

К сожалению, тут описана только верхушка айсберга из багов и хаков css. Но это действительно те, которые встречаются чаще других, но есть еще множество вещей таких как: несовместимость браузеров, вендорные префиксы, специфичность селекторов, каскады и наследование и многое другое.

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

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

Почему не работает css

Ссылка на файл

Код CSS может находиться как в HTML документа, так и в отдельном файле с одноименным расширением. Если CSS находится во внешнем файле и не работает, то первым делом следует проверить ссылку в HTML коде.

Ссылка (href) должна писаться в одиночном теге link. Содержимое link в HTML5 должно выглядеть следующим образом: href=”style.css” rel=”stylesheet”. Не забывайте, что сам тег link располагается между парными ключевыми тегами head.

После значения href указывается имя того css-файла, который должен быть прикреплен к документу (это не обязательно style). Если файл со стилями находится в другой папке, то обязательно через слэш (/) необходимо указать путь к нему.

Синтаксис CSS

Если со ссылкой все в порядке, а CSS все равно не работает, нужно проверить синтаксис в коде.

Во-первых, проверьте селектор. Селектор должен совпадать с тем, что у вас написано в html-файле. То есть, если в html выбран >
Сам блок, где объявляется стиль, пишется после имени селектора в фигурных скобках. Между названием свойства и его значением ставится двоеточие, а после — точка с запятой.

Браузер

Если браузер, на котором вы проверяете свой css-код, уже устарел, то он не в состоянии корректно отображать язык CSS3. Поэтому в случае, если код не работает, обновите свой браузер до последней версии.

Цукерберг рекомендует:  Каких событий и новостей айтишники ждут от мира технологий

Используйте для тестирования разные браузеры: Opera, Google Chrome, Firefox. Не рекомендуется полагаться на Internet Explorer, так как его разработка для Microsoft не является главной задачей, что приводит к его «несостоятельности» по отношению к CSS3.

Новые версии браузеров для отладки кода содержат специальный модуль, позволяющий редактировать код сразу в браузере. Для этого необходимо в контекстном меню окна кликнуть «Показать исходный код».

Наследование

Сложнее всего разбираться в CSS с наследованием. В то время, как она чаще всего и является основой нерабочего кода.

CSS работает по тому же принципу, что и матрешки. Один контейнер вкладывается в другой, в него третий и т.д. Чтобы изучить все тонкости наследования, необходимо потратить немалое количество времени. Начать же можно с элементарного.

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

Когда вы найдете контейнер или другой элемент, к которому применен не сработавший стиль, внимательно посмотрите, во что «вложен» этот элемент.

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

Css — Проблема с подключением CSS

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

CSS: проблемы и способы их решения

Дата публикации: 2020-04-06

От автора: чем больше я использую CSS, тем больше я думаю, что это абсолютно непаханое поле. Он зрелый, везде встречается, но в нем нет базовых, понятных функций, которые в других подобных инструментах есть. Поработав с несколькими современными MVC веб-приложениями с хорошей структурой back end, обширным тестовым покрытием и хорошей документацией, зачастую мне кажется, что стили похожи на гигантские дымящиеся горы спагетти.

Возможно, мое отношение немного несправедливое. Стили родились в то время, когда веб находился в разработке, идей было много, а популярных идей только начали придерживаться. Каким бы сложным CSS ни был, по моему мнению, он нужен всем сайтам на планете. Без него сайты бы не выжили. Но есть в CSS проблемы, которые могут сильно осложнить работу.

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

1. Глобальная область видимости

Первая и самая большая для меня проблема в CSS заключается в том, что любое объявление стилей может изменит любой аспект любого элемента на странице. Это супер круто и замечательно, если вы только начали окунаться в веб, но для более крупных сайтов (что происходит чаще) это опасно. Почти все front end разработчики в определенный момент в своей карьере добавляют/обновляют/удаляют стили лишь для того, чтобы найти случайные стили, которые просочились в другие разделы на другой странице.

Мне кажется, это самая существенная проблема CSS. Это сильно усложняет любую концепцию модульности. Завтра разработчик может вставить несколько !important и поломать ваш красиво инкапсулированный, повторно используемый видежт.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Sass/SCSS поможет, но не полностью. Если вы хороший маленький разработчик, то утечку стилей можно почти полностью прекратить через вложенность правил в родительский класс.

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

Если вы скажете back end разработчику, что ему придется использовать язык программирования, который делает все переменные глобальными, все внутренние состояния объектов видимыми, а потом дадите переписать этот код другому разработчику, он, вероятно, сразу же уйдет. Такова безумная реальность CSS разработки. Захватывается вс. Неизменность? Да ладно вам.

Лучшее решение

Лучший выход для глобальной области видимости, который я нашел – это использовать систему именования CSS BEM, в которой разработчики должны однообразно писать модульный код. Это устраняет опасные привычки использовать в стилях теги (h1, p и т.д.). Лучше вместо них использовать классы. Названия классов заранее определяют пространство имен модуля (или блока в терминологии BEM), в котором они находятся, чтобы избежать случайных столкновений с похожими именами классов.

Зачастую можно использовать теги для создания стилей по умолчанию. Для большинства сайтов это хорошая идея. Однако если вы потом почти везде переписываете эти стили, я бы сказал, не стоит утруждаться. Поместите их в общий класс-утилиту (.paragraph, .heading-1 и т.д.) и используйте при необходимости.

BEM отнюдь не идеальный инструмент. Кому-то будет трудно писать большие, длинные классы везде. Вы все еще пишите CSS. Вы все еще можете писать хитроумные стили. У вас все еще нет дисциплины. Но эта система дает вам структуру и набор правил, которые помогут писать стили лучше.

2. Специфичность

Специфичность – механизм, с помощью которого CSS определяет важность стилей. На моем опыте это почти всегда гонка вниз (или вверх, как в нашем контексте). Горсть !important, стили на произвольных ID и ненужные div обертки. Их цель – подтолкнуть специфичность выше проблемных стилей. Это правда.

Вы разрабатываете новый UI элемент, но на вашем пути стоит очень специфичный стиль вашего коллеги. Что вы сделаете?

Потратите время, чтобы понять UI виджет коллеги, поймете как он влияет на стили других частей сайта и отрефакторите код.

Или подтолкнете свой стиль с помощью !important.

Ваш выбор может зависеть от среды, в которой вы работаете, а также от размера кода.

ООП языки обходят эту проблему путем наследования и создания подклассов. Менее важный и неспецифичный метод находится наверху дерева наследования, а самый специфичный – внизу. На мой взгляд, приложение этих OO принципов в области UI работает намного лучше, чем специфичность CSS. Любой знакомый с iOS UIKit, например, знает, как создавать общие UIView виджеты и более специфичные подклассы для перезаписи определенных атрибутов. С другой стороны, обычно приходится писать немного больше кода и больше думать над таким переопределением.

Цукерберг рекомендует:  Мобильные приложения на NativeScript. Мобильные приложения на NativeScript

Лучшее решение

Не гонитесь в самый низ. Не делайте стили слишком специфичными.

Постарайтесь не использовать !important (иногда это необходимо при работе со сторонним вставляемым кодом).

Не пишите стили для ID (большая специфичность).

Используйте классы (неспецифичны).


Не включайте потомков в селекторы стилей, так как они усиливают специфичность. В Sass/SCSS вложенные стили компилируются до селекторов потомков, поэтому не вкладывайте их.

Если вы используете BEM, вы уже следуете этим правилам.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

3. Правила с неявными процентами

Любой, кто использовал проценты в padding, поймет, насколько код ниже запутанный.

Почему не работает css

Ссылка на файл

Код CSS может находиться как в HTML документа, так и в отдельном файле с одноименным расширением. Если CSS находится во внешнем файле и не работает, то первым делом следует проверить ссылку в HTML коде.

Ссылка (href) должна писаться в одиночном теге link. Содержимое link в HTML5 должно выглядеть следующим образом: href=”style.css” rel=”stylesheet”. Не забывайте, что сам тег link располагается между парными ключевыми тегами head.

После значения href указывается имя того css-файла, который должен быть прикреплен к документу (это не обязательно style). Если файл со стилями находится в другой папке, то обязательно через слэш (/) необходимо указать путь к нему.

Синтаксис CSS

Если со ссылкой все в порядке, а CSS все равно не работает, нужно проверить синтаксис в коде.

Во-первых, проверьте селектор. Селектор должен совпадать с тем, что у вас написано в html-файле. То есть, если в html выбран >
Сам блок, где объявляется стиль, пишется после имени селектора в фигурных скобках. Между названием свойства и его значением ставится двоеточие, а после — точка с запятой.

Браузер

Если браузер, на котором вы проверяете свой css-код, уже устарел, то он не в состоянии корректно отображать язык CSS3. Поэтому в случае, если код не работает, обновите свой браузер до последней версии.

Используйте для тестирования разные браузеры: Opera, Google Chrome, Firefox. Не рекомендуется полагаться на Internet Explorer, так как его разработка для Microsoft не является главной задачей, что приводит к его «несостоятельности» по отношению к CSS3.

Новые версии браузеров для отладки кода содержат специальный модуль, позволяющий редактировать код сразу в браузере. Для этого необходимо в контекстном меню окна кликнуть «Показать исходный код».

Наследование

Сложнее всего разбираться в CSS с наследованием. В то время, как она чаще всего и является основой нерабочего кода.

CSS работает по тому же принципу, что и матрешки. Один контейнер вкладывается в другой, в него третий и т.д. Чтобы изучить все тонкости наследования, необходимо потратить немалое количество времени. Начать же можно с элементарного.

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

Когда вы найдете контейнер или другой элемент, к которому применен не сработавший стиль, внимательно посмотрите, во что «вложен» этот элемент.

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

Проблема с подключением CSS к HTML-файла

У меня возникли проблемы с подключением моего файла CSS к моему файлу HTML. Это мой код для файла HTML:

и это мой CSS файл:

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

Кстати, мой CSS-файл называется styles.css

3 ответа

Вы не используете кавычки для href ,

По этой причине файл CSS не загружается. Используйте обычную двойную кавычку.

То же самое делается в полном коде. Измените это во всех случаях.

Я бы порекомендовал вам проверить ваш HTML от W3

Предполагая, что имя файла вашей таблицы стилей — styles.css И этот файл находится в том же файле, что и ваша HTML-страница, на которую вы ссылаетесь правильно. Кроме того, вы можете попробовать добавить тип к тегу ссылки (пример ниже)

Просто измените « с «

из-за этой синтаксической ошибки: браузер генерирует следующую ошибку:

GET файл: /// C: /Users/Md.%20Alamin%20Mahamud/Desktop/New%20folder/%C3%A2%E2%82%AC%C5%93styles.css%22 net::ERR_FILE_NOT_FOUND

следующий фрагмент будет работать нормально

проблема с подключением CSS к HTML-файла

У меня возникли проблемы с подключением моего файла CSS к моему файлу HTML. Это мой код для файла HTML:

и это мой CSS файл:

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

Кстати, мой CSS-файл называется styles.css

3 ответа

Вы не используете кавычки для href .

По этой причине файл CSS не загружается. Используйте обычную двойную кавычку.

То же самое делается в полном коде. Измените это во всех случаях.

Я бы порекомендовал вам проверить ваш HTML от W3

при условии, что имя файла вашей таблицы стилей — styles.css И этот файл находится в том же файле, что и ваша HTML-страница, на которую вы ссылаетесь правильно. добавление типа к тегу ссылки (пример ниже)

просто измените « с »

из-за этой синтаксической ошибки: браузер генерирует следующую ошибку:

GET файл: /// C: /Users/Md.%20Alamin%20Mahamud/Desktop/New%20folder/%C3%A2%E2%82%AC%C5%93styles.css%22 net :: ERR_FILE_NOT_FOUND

следующий фрагмент будет работать нормально

проблема с подключением css к html-файлу

У меня возникли проблемы с подключением моего файла CSS к файлу HTML. Это мой код для HTML-файла:

BLAH BLAH

и это мой файл CSS до сих пор:

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

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих