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

Как подключить CSS файл к HTML странице?

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

Для тех, кто любит смотреть в формате видео.

Для тех, кто любит читать, инструкция ниже.

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

Задача стилей CSS, которые будут подключаться, сделать элемент абзаца

красным цветом.

       
Абзац
   

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

1 вариант. Внутри открывающего тега с помощью атрибута style.

Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.

Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента

.

       
Абзац
   

Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен.

2 вариант. Внутри элемента style.

Еще один способ подключения стилей CSS, это воспользоваться элементом с атрибутом type=»text/css». Указание этого атрибута обязательно.

Давайте посмотрим, как это выглядит на конкретном примере.

    p     
Абзац
   

3 вариант. Подключение внешнего файла стилей.

И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.

Обратите внимание на атрибуты, которые указываются у этого элемента.

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

        
Абзац
   

Файл style.css содержит следующих код:

Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Не работает CSS В HTML файле

Такая проблема, у меня не работает css файл на локальном сервере, в коде вроде ошибок нету, вчера все работало. PS Тут вставленный код отлично работает.

#user_info < margin-left: 100px; >td < margin-left: 10px; >//Файл не работает

       
 
ID
 
 
NAME
 
 
AGE
 
 
SALARY
 
 
 "; echo "".$row['id'].""; echo "".$row['name'].""; echo "".$row['age'].""; echo "".$row['salary'].""; echo "Delete "; echo ""; echo "
"; >; ?> 

Отслеживать
задан 20 окт 2019 в 8:06
33 4 4 бронзовых знака

Если бы Вы вставили код в виде текста, это помогло бы быстрее найти ошибку тому, кто хочет Вам помочь.

20 окт 2019 в 8:16
В общем у вас думаю style.css находится не в той же директории, что и index.html
7 фев в 9:49

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Задай полное расположение файла. Например D:/test/test.css

Отслеживать
ответ дан 20 окт 2019 в 8:38
Denis_Tolokonnikov366 Denis_Tolokonnikov366
Не помогло 🙁 может это быть из-за openserver’a?
20 окт 2019 в 8:44

#user_info < margin-left: 100px;/*работает*/ border: 1px solid green >td < margin-left: 10px;/*не будет работать*/ border: 1px solid red >table < margin-top: 20px; margin-left: 30px;/*будет работать*/ border: 1px solid blue >

      
 
ID
 
 
NAME
 
 
AGE
 
 
SALARY
 
 
 
 
id
 
name
 
age
 
salary
 
и т.д.
 
 
  

Запустите и откройте код — нажмите на ссылку файла css — откроется и вы посмотрите, там ли это нужное.

Если нет- смотрите пути, обычно лучше указывать корень сайта «/style.css» — а если перебрасывает вообще в корень локального общий, то нужно настроить htaccess и прочее.

1. Возможно, Вы что-то добавили, и оно перебивает иснтрукции — например, использовали стили прямо в коде элементов.
2. inline стилей нет, но что-то перебивает- попробуйте указать !important к нужному.

У вас, вероятнее всего, все сдвигается, просто это не видно — укажите к ним border и увидите смещение.

*Пo коду — вы tr и td выводите, а где тег table?

не подключается 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?

Начал изучать веб-дизайн. Пробовал делать два сайта на 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, то не включается. В чем прикол?