Не подключается внешний файл CSS
Не подключается внешний файл CSS,но если внести теже стили из CSS файла в html все работает, путь к файлу проверял несколько раз, все правильно. Почему стили могут не работать?
/* Eric Meyer's CSS Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; >/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >body < line-height: 1; background-image:resursi/background.jpg; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >table < border-collapse: collapse; border-spacing: 0; >/* End of Eric Meyer's CSS Reset */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary < display: block; >body < font: 12px/18px Arial, sans-serif; width: 100%; >.wrapper < width: 1000px; margin: 0 auto; >/* Header -----------------------------------------------------------------------------*/ .header < height: 150px; background: #00FFFF; >/* Middle -----------------------------------------------------------------------------*/ .content < background-color:#FFFFFF; >/* Footer -----------------------------------------------------------------------------*/ .footer
не подключается css
я начал процесс обучения верстке,на базе сайта о кино. в качестве редактора кода использую VS Code и Sublime. и там и там возникает ошибка при подключении стилей CSS. сначала все идет норм,но как только подключаю CSS, страница не обновляется и никак не изменяется (задаю ширину блока в HEADER и цвет фона)
причем делаю все точно так же как и в обучалке,но там все получается,а у меня нет.
КиноМонстр КиноМонстр
Кино-наша страсть!
Максим Потапов
2 years ago
На диске — зайдите в Проводник (или какой-то менеджер файлов), найдите вашу рабочую папку — где лежит ваша страница index.html
проверьте чтобы в это папке были созданы папки стилей как у вас указано, т.е. /assets/css/ — и в этой папке должен быть файл style.css
если у вас нарушена структура папок, то вам нужно это исправить — создать нужные папки, переместить файл style.css в нужную папку и/или изменить путь указанный в index.html для подключения фала стилей.
Далее через Проводник откройте найденный на диске файл /assets/css/style.css — мышкой правой и открыть с помощью — выберите редактор кода и убедитесь, что код файла верный то что нужен (который вы писали по уроку)
Не подключается css к html. как исправить ошибку?
Попробуйте такие варианты: 1. Проверьте, что файл style.css точно существует (в браузере нажмите на ctr + u и нажмите на название файла и физически в папке проверьте, что файл style.css есть), а также проверьте, что все символы в английской раскладке клавиатуры 2. Попробуйте поставить слеш так:
Если файл style.css с кодом открылся в браузере, значит style.css корректно подключен. Приложите коды файлов index.html и style.css полностью, попробую помочь.
У вас опечатки в коде есть.
Так не пишут, либо так нужно писать:
и если header как тег использовать, в css стилях без точки нужно будет писать к нему стили. Такие еще опечатки есть:
.main, .logo, .menubar, .size_content, .foother,
Во первых нужно писать footer, а не foother, во вторых после последнего класса не должно быть запятых. Глубже не смотрел код.
Тема открыта год назад, но как актуальна. Спасибо за ответ с ctrl+u
не получается файл style.css привязать к файлу html , но в браузере при нажатии ctrl+u он есть , но не преобразовывается , я уже все перепробовал
- файл проверил он есть (когда выполнил действие в браузере открылся файл этот)
- слеш поставил но не получилось получилось (т.е после того как поставил слеш заголовок сайта поднялся в самый вверх, когда его убрал, заголовок спустился чуть ниже, значит ссылка правильная
.headerbackground-color: darkslateblue;
height: 177px;
font-size: 0.8em;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
>
.main, .logo, .menubar, .size_content, .foother,margin-left: auto;
margin-right: auto;
>
.logowidth: 880px;
padding-bottom: 40px;
>
так выглядит файл style.css
КиноМонстр КиноМонстр
Кино - наша страсть!
.header < background-color: darkslateblue; height: : 177px; font-size: 0.8em; margin-left: 0px; margin-right: 0px; min-width: 900px; >.main, .logo, .menubar, .size_content, .foother, < margin-left: auto; margin-right: auto; >.logo < width: 880px; padding-bottom: 40px; >.logo h1, .logo h2, < font: normal 300% 'century gothic', arial, sans-serif; margin: 0 0 0 9px; >.logo_text h1, .logo h1 a, .logo h1 a:hover < padding: 22px 0 0 0; letter-spacing: 0.1em; text-decoration: none; >.logo_text h2 < font-size: 0.9em; padding: 4px 0 0 0; color: #999; >я пошел чуть дальше но изменений никаких нет, все осталось также как и было без этого - .logo h1, .logo h2, < font: normal 300% 'century gothic', arial, sans-serif; margin: 0 0 0 9px; >.logo_text h1, .logo h1 a, .logo h1 a:hover < padding: 22px 0 0 0; letter-spacing: 0.1em; text-decoration: none; >.logo_text h2
Спасибо,вы помогли постараюсь быть внимательнее
Почему не подключается 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 — там пусто
Document [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, то не включается. В чем прикол?