В чем моя ошибка при подключении СSS?
Здраствуйте. Я начинающий фронтендер, сегодня решил взять себе макет для верстки. Но столкнулся с проблемой что не могу менять свойства: менять размер картинки, ее местонахождение и так далее. Менял, думал, писал код по другому. Ничего не помогает. Если что я начинающий фронтендер, не кидайте помидорами. Вот сам код.
HTML
<!DOCTYPE html> <html lang="ru"> <head> <link rel="stylesheet" src="/практика номер 3/style.css" type="text/css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Practice num. 3</title> </head> <body> <div class="header-menu"> <img src="images/main-screen__bgc.png" class="main-screen-bcg"> </div> </body> </html> |
<!DOCTYPE html> <html lang="ru"> <head> <link rel="stylesheet" src="/практика номер 3/style.css" type="text/css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Practice num. 3</title> </head> <body> <div class="header-menu"> <img src="images/main-screen__bgc.png" class="main-screen-bcg"> </div> </body> </html>
CSS
@font-face { font-family: Roboto; src: url(fonts/Roboto/Roboto-Thin.ttf); } .background { color: black; } .main-screen-bcg { position: absolute; width: 1804px; height: 970px; left: -196px; top: -14px; align-items: center; } |
@font-face { font-family: Roboto; src: url(fonts/Roboto/Roboto-Thin.ttf); } .background { color: black; } .main-screen-bcg { position: absolute; width: 1804px; height: 970px; left: -196px; top: -14px; align-items: center; }
Дополнительно:
палка в начале пути означает от корня сервера. Если сервер не запущен, то это будет восприниматься как диск C к примеру. Русские буквы в пути - плохая практика.
пока все плохо. Я рекомендую посмотреть очень базовые уроки и попробовать повторить.
++ очень рекомендую посмотреть теорию про адаптивную верстку.
Затем урок например по позиционированию и выполнение заданий + свои эксерименты.
<link rel="stylesheet" href="/css/style.css" type="text/css"> |
<link rel="stylesheet" href="/css/style.css" type="text/css">
Ответы:
Проверь, что файл CSS назван корректно.
Я сохранил все файлы (index.html, main-screen__bgc.png, a.css) в одном катологе и поменял твой сопосб подключения на этот:
Также лучше использовать латиницу. Кирилица может давать сбои или не работать без видимых причин.
<link rel="stylesheet" href="a.css">
подключение картинки:
<img src="main-screen__bgc.png" class="main-screen-bcg"> |
<img src="main-screen__bgc.png" class="main-screen-bcg">
если все сработает, то попробуй уже поиграться с настройками/расположением файлов.
В вашем коде для подключения таблицы стилей используется атрибут src у тега , который предназначен для вставки изображений и не используется для подключения таблиц стилей.
Чтобы подключить таблицу стилей, вам нужно использовать атрибут href у тега , который указывает путь к файлу стилей. Ваш код должен выглядеть следующим образом:
<link rel="stylesheet" href="/практика номер 3/style.css" type="text/css"> |
<link rel="stylesheet" href="/практика номер 3/style.css" type="text/css">
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
При подключении CSS файлов к HTML документу возможно совершить несколько распространенных ошибок, которые могут привести к неправильному отображению стилей на странице. Давайте разберемся, в чем может заключаться ваша ошибка:
1. Неправильный путь к CSS файлу: Убедитесь, что путь к CSS файлу указан правильно в теге `` или внутри `` тега. Путь должен быть относительным или абсолютным, в зависимости от того, где находится ваш CSS файл относительно HTML документа.
2. Ошибки в CSS файле: Проверьте сам CSS файл на наличие синтаксических ошибок, опечаток или неверных свойств. Одна неправильная строчка кода может привести к тому, что все стили не будут применены.
3. Кэширование: Если вы вносили изменения в CSS файл, но они не отображаются на странице, возможно это из-за кэширования браузера. Попробуйте очистить кэш браузера или добавить случайную версию к ссылке на CSS файл, чтобы принудить браузер загрузить новую версию.
4. Приоритетность стилей: Убедитесь, что ваш CSS файл подключен после всех других стилей на странице. Если стили с одинаковыми селекторами определены в разных файлах, то будет применяться стиль из последнего подключенного файла.
Приведу пример правильного подключения CSS файла к HTML документу:
<title>My Website</title>
<h1>Welcome to my website</h1>
<p>This is a paragraph.</p> |
<title>My Website</title> <h1>Welcome to my website</h1> <p>This is a paragraph.</p>
Проверьте вышеперечисленные моменты, чтобы устранить ошибку при подключении CSS и убедитесь, что стили отображаются корректно на вашей веб-странице.
Для начала, давайте разберем основные причины, почему у вас может возникнуть проблема с подключением CSS на вашем сайте:
1. Неправильный путь к файлу CSS. Убедитесь, что путь к вашему CSS файлу указан правильно. Например, если ваш файл стилей находится в папке css на вашем сервере, то путь должен быть указан как "css/style.css".
2. Ошибки в коде HTML. Проверьте, что вы правильно подключили свой CSS файл в разделе вашего HTML документа с помощью тега . Например:
3. Ошибки в самом файле CSS. Убедитесь, что ваш CSS файл написан правильно и не содержит синтаксических ошибок. Для этого вы можете воспользоваться инструментами разработчика в браузере, чтобы проверить, не возникает ли ошибок при загрузке файла CSS.
4. Конфликт стилей. Иногда возникают проблемы из-за конфликтов стилей с другими CSS файлами или стилями, примененными на вашем сайте. Убедитесь, что ваши стили не перекрываются другими стилями.
Если вы уверены, что все вышеперечисленные причины исключены, но проблема с подключением CSS все равно остается, попробуйте очистить кэш браузера или попробовать загрузить ваш сайт в другом браузере.
Надеюсь, что эти советы помогут вам решить проблему с подключением CSS на вашем сайте. Если у вас остались вопросы или проблемы, не стесняйтесь задавать дополнительные вопросы.