CSS не работает в таблице стилей

Question

У меня есть набор стилей, которые были впервые созданы внутри атрибута стиля на странице.

Я хочу переместить его из самой страницы в таблицу стилей.

однако, когда я перемещаю его в файл .css, страница разрывается, перемещает код обратно в HTML-документ, и он снова работает нормально.

Это абсолютно бессмысленно, перемещение стилей из файла в CSS не должно нарушать код, не так ли?

Я что-то упустил? Я не изменяю какой-либо код, это просто копирование и вставка.

Answer 1

Это просто снимок в темноте, поскольку (на момент публикации) вы не предоставили исходный код.

Убедитесь, что вы ссылаетесь на свою таблицу стилей, используя тег link вhead документа HTML.

Если у вас было:

<style type="text/css">
/* <![CDATA[ */
#someid
{
  margin: 0;
  padding: 3px 12px;
}
/* ]]> */
</style>

Вам понадобится

#someid
{
  margin: 0;
  padding: 3px 12px;
}

в вашем файле CSS с:

<link rel="stylesheet" type="text/css" href="path/to/style.css" />

для ссылки на таблицу стилей.

Некоторые распространенные ошибки новичка включают:

• <style type="text/css" src="path/to/style.css">: потому что это синтаксис, похожий на тег <script>, что имеет смысл, но недопустимо
• <link rel="stylesheet" src="path/to/style.css">: но элементы link используют href, а не src
• , размещая link элементы внутри тела: хотя браузеры будут склонны управлять link элементов в теле, вероятно, будут некоторые ошибки, и это не определенное поведение
• не , определяющее объявление doctype: позволяет браузеру переходить в режим причуд, который никогда хорошая идея.

Answer 2

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

<link rel="stylesheet" type="text/css" href="name-of-stylesheet.css" />

Всегда не забывайте закрывать тег <link>, поскольку он является самозакрывающимся тегом. Я думаю, что @zzzzBov забыл упомянуть об этом.

Наконец, если это не сработает, попробуйте переопределить некоторые стили, физически написав (над разделом </head>) что-то вроде:

<style type="text/css">
    body { background: blue; }
    * { color: red; }
</style>

и посмотрите, даст ли это синий фон и красный текст. Должно. После этого попробуйте реализовать метод ссылок и убедитесь, что вы ссылаетесь на файл таблицы стилей в нужном каталоге.

Удачи!

Answer 3

У меня тоже была эта проблема, и причина была в том, что путь должен был быть обновлен для некоторых ссылок url ​​(), поскольку файл css находился в другой папке, чем html-файл, из которого он ранее вызывался.

Так что в основном

background-image: url('patterns/debut_dark.png');

пришлось изменить на

background-image: url('../patterns/debut_dark.png');

Answer 4

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

Answer 5

У меня была такая же проблема, и я был очень разочарован. У меня был файл CSS, на который ссылались должным образом, однако не все элементы загружались из него. Как оказалось, это была проблема с кешем в Chrome. После очистки и перезапуска окна элементы css работали правильно.

Answer 6

Не включайте <style type="text/css"></style> в ваш файл .css.