Почему не подключаются стили css? — Хабр Q&A

Почему не подключаются стили css? — Хабр Q&A

Почему не подключаются стили css?

Я новичок в верстке, использую Brackets, и при верстке сайта я смотрел его через Live Preview, все было как мне и надо, но когда я запустил в браузере, все покосилось, как будто стили не подключены, хотя в index.html прописано

<link rel="stylesheet" type="text/css" href="/css/new.css">

что это может быть? Браузер Хроминиум, и кстати заметил что в Live Preview не работает скрол, у всех так?

Не работает css, что не так?

Я в этом деле новичок, поэтому пока просто тренируюсь. Работаю через sublime text. Смотрела видео, делала все как там, поэтому вряд ли есть ошибки, не знаю.

Создала 1 папку – Верстка. В этой папке есть 2 папки: css, img и файл index.html. В папке css находится сам файл main.css – это и есть сам css.

Путь кода CSS такой: Верстка/css/main.css

Так и записала:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/main.css>
</head>
<body>
	<h1>Заголовок h1</h1>
	<h2>Заголовок h2</h2>
	<h3>Заголовок h3</h3>
	<h4>Заголовок h4</h4>
	<h5>Заголовок h5</h5>
	<h6>Заголовок h6</h6>

	<a href="https://ru.wikipedia.org/wiki/Липа,_Дуа">Любишь музыку, смотри тут</a>
	<a href="http://muzika.ru/">Музыку можно послушать тут</a>
	
	<p>В этом посте мы расскажем, что как можно использовать рекламу в изучении языка.<br>Мы также составили небольшой список роликов, с которых вы можете начать свое знакомство с рекламой на английском.</p>


	<p class="first">В этом посте мы расскажем, что как можно использовать рекламу в изучении языка.<br>Мы также составили небольшой список роликов, с которых вы можете начать свое знакомство с рекламой на английском.</p>


	<ul>
		<li>сосна</li>
		<li>дерево</li>
		<li>дуб</li>
	</ul>
</body>
</html>

Вот мой код css:

p {
	color: white
	font-size: 60px;
	font-family: Times New Roman
}

h1 {
	color: yellow
	font-size: 40px;
}

.first {
	color: green
	font-size: 100px;
}

Что делать, если не работает css-класс?

Браузеры предоставляют отличные инструменты для отладки css. Не надо ждать, пока кто-то угадает, в чём проблема. Надо просто взять и посмотреть, что же происходит. Покажу на примере Хрома.

Сейчас ищут техподдержку:  Отзывы о ВТБ: «Никому не рекомендую программу ВТБ мультибонус! Не выплачивают cashback уже четыре месяца! Срок рассмотрения претензии закончился две недели назад, и тишина!» | Банки.ру

Сначала надо обновить страницу со сбросом кэша.
В большинстве браузеров это Ctrl   F5.

  • Щёлкнуть проблемный элемент правой кнопкой и выбрать пункт Исследовать элемент:

    Исследовать элемент

  • Появится панель отладки, на которой на вкладке Elements выделен кликнутый элемент. Если нужен другой, можно перейти к нему. Затем следует обратить внимание на вкладки Styles и Computed:

    Elements

  • Если в element.style есть интересующее свойство, то

    • если в html-разметке прописан стиль в атрибуте style, удаляем оттуда лишнее
    • если нет, кончаем читать этот ответ и переходим к отладке скриптов, которые этот стиль выставляют (либо перебиваем !importantом, что делать крайне не рекомендуется)

    style

  • На вкладке Styles надо найти свой селектор.
    Если его там нет, то проблема в опечатке или подключении css-файла.

    Класс

  • Как видим, свойство зачёркнуто, но восклицательного знака (говорящего о неверном значении) нет. Это означает, что есть другое правило, имеющее больший приоритет. В простых случаях достаточно посмотреть на вышестоящие правила и понять, что там надо. В более запутанных стоит заглянуть на вкладку Computed и посмотреть, какие вообще значения влияют:

    Compuded

  • Здесь видно, что селектор .so-header .navigation .-link перебивает наше правило.
    Кликом по стрелочке можно перейти к самому правилу, но нам это сейчас не нужно.

    Переход к правилу

  • Теперь мы знаем, что приоритет используемого правила 0 id, 3 класса, 0 тегов.
    Если мы уверены, что наше правило идёт после переопределяемого, то нам достаточно той же силы. Если нет, то надо побольше.

    Самый простой способ – это сделать так:

    .nav-users.nav-users.nav-users.nav-users {
      color: red;
    }
    

    Но руководствуясь здравым смыслом, стоит всё-таки сделать так:

    .so-header .navigation .nav-users {
      color: red;
    }
    

    или так:

    .so-header .navigation .-link.nav-users {
      color: red;
    }
    

    Должно заработать:

    Новый стиль

    И результат

  • Если всё равно не работает.

    На шаге 6 стоило заглянуть в переопределяющий стиль – возможно, в нём есть !important:

    !important

    В таком случаем нам тоже придётся его использовать:

    .so-header .navigation .-link.nav-users {
      color: red !important;
    }
    
  • Если проблемы возникают только при печати, надо включить эмуляцию @media print. Для этого надо нажать в девтулах Ctrl Sift P и в появившемся окне написать media:

    Сейчас ищут техподдержку:  Работает ли Apple Pay без интернета

    после чего выбрать строчку Emulate CSS print media.

    Не применяются стили css к ссылкам в html

    На Вашем скриншоте не указан код для цвета ссылок, только для обычного текста. Как и написал @navruz_eraliev:

    .themes a {
      text-decoration: none;
      color: white;
    }
    

    Должно решить Вашу проблему.

    Возможно, у Вас указывается какой-то отдельный код для :visited ссылок, и он окрашивает их в другой цвет.

    Не работают css-стили с php

    В любых подобных ситуациях следует для начала полностью обновить страницу (Ctrl F5, а не просто F5). Тогда все стили и прочее загрузятся заново даже если они закешированы.

    Если не поможет стоит включить в браузере инструменты разработчика (F12 а FireFox и Chrom), перейти на вкладку «Сеть» и, опять же, полностью форсированно обновить страницу (Ctrl F5). Посмотрите загружается-ли файл стилей, там-же можно посмотреть его содержимое (возможно, по какой-либо причине оно не соответствует ожиданиям)

    Перестали работать css стили?

    Здравствуйте, у меня проблема. Я недавно начал заниматься версткой и у меня сразу же появились непонятные проблемы.

    Я писал код, все шло нормально, но в один момент когда я прописал margin-bottom: 10px, то он не сработал. Я продолжил работу несмотря на это и я обнаружил что все последующие CSS стили перестали работать. Я даже удалял все стили чтобы посмотреть работают ли они вообще, но оказалось что даже удаление всех стилей не дало никакого результата, страничка просто зависла. Эта проблема происходит уже второй раз, в первый раз помогло только полное удаление проекта. Подскажите пожалуйста в чем проблема.

    PS Я работаю в файле index.php вместо index.html

    Дополнительно о техподдержке

    Сейчас ищут техподдержку:  Онлайн консультация программиста на форуме компьютерной помощи
    1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 4,00 из 5)
    Загрузка...

    Оставьте комментарий

    Adblock
    detector