Почему css обрывается в браузере

Почему css обрывается в браузере

Полезная информация

Страницы: 1

№1 30-09-2013 11:27:12

rbfyec Участник Группа: Members Зарегистрирован: 07-07-2012 Сообщений: 365 UA: Firefox10.0

Почему html не открывается сразу в браузере, как любой сайт?

Я сделал html страничку и загрузил её на файлообменник (с прямыми ссылками, если это имеет значение).
Когда кликаю по ссылке на эту страничку, Firefox спрашивает что делать с файлом. Я могу конечно в настройках прописать, что делать с файлами этого типа по умолчанию.

Но почему на сайтах, форумах и т. д. документ html открывается сразу в браузере, без всяких вопросов?

№2 30-09-2013 11:39:17

okkamas_knife We are the Borg. Resistance is futile. Группа: Members Зарегистрирован: 21-10-2009 Сообщений: 9558 UA: Seamonkey2.14

Re: Почему html не открывается сразу в браузере, как любой сайт?

rbfyec
потому что файлообменик отдавая страничку указывает в заголовке Content-Type отличный от text/html;

я помню те времена когда обновления программ убирали проблемы и исправляли баги, а не добавляли их.
toxID:05AB9B827D896AACEE7FF4573A02FB8F025F46ADC856B98F65BC1BA9BD21A81DC98BA9C36CE3

№3 30-09-2013 13:05:19

rbfyec Участник Группа: Members Зарегистрирован: 07-07-2012 Сообщений: 365 UA: Firefox10.0

Re: Почему html не открывается сразу в браузере, как любой сайт?

А я вот кликаю свою ссылку на обменнике и смотрю через HttpFox — в Response Header указано Content-Type=text/html

№4 30-09-2013 13:10:31

okkamas_knife We are the Borg. Resistance is futile. Группа: Members Зарегистрирован: 21-10-2009 Сообщений: 9558 UA: Seamonkey2.14

Re: Почему html не открывается сразу в браузере, как любой сайт?

rbfyec
ну тогда посмотри чем отличаются заголовки при получении обычной странички и той что с обменника качается. возможно там чтото ещё есть.

я помню те времена когда обновления программ убирали проблемы и исправляли баги, а не добавляли их.
toxID:05AB9B827D896AACEE7FF4573A02FB8F025F46ADC856B98F65BC1BA9BD21A81DC98BA9C36CE3

№5 30-09-2013 13:17:51

littleleshy ________ Группа: Members Откуда: Москва Зарегистрирован: 13-12-2008 Сообщений: 2504 UA: Firefox24.0

Re: Почему html не открывается сразу в браузере, как любой сайт?

Иногда нажимаешь ПКМ на картинке, выбираешь «Открыть изображение», а [firefox]вместо отображения картинки предлагает сохранить её.
Вот тут та же история. Интересно, что на это влияет.

№6 30-09-2013 21:24:31

rbfyec Участник Группа: Members Зарегистрирован: 07-07-2012 Сообщений: 365 UA: Firefox10.0

Re: Почему html не открывается сразу в браузере, как любой сайт?

rbfyec
ну тогда посмотри чем отличаются заголовки при получении обычной странички и той что с обменника качается. возможно там чтото ещё есть.

Я перепробовал несколько обменников, получается следующее — везде, где выскакивает диалог сохранения, в заголовке есть эти строки:
Content-Description = File Transfer
Content-Disposition = attachment; filename="xxxx.html"

Мне кажется, в первой строке и есть причина.

№7 30-09-2013 21:42:28

okkamas_knife We are the Borg. Resistance is futile. Группа: Members Зарегистрирован: 21-10-2009 Сообщений: 9558 UA: Seamonkey2.14

Re: Почему html не открывается сразу в браузере, как любой сайт?

rbfyec
не, тут оба заголовка нужны в первом указывается тип а во второй строке — там же четко написано что содержание ответа это присоединённый файл таким то именем а не содержимое странички

Content-Disposition = attachment; filename="xxxx.html"

соответственно браузер не обрабатывает эти данные как страничку а пытается сохранить\открыть.

я помню те времена когда обновления программ убирали проблемы и исправляли баги, а не добавляли их.
toxID:05AB9B827D896AACEE7FF4573A02FB8F025F46ADC856B98F65BC1BA9BD21A81DC98BA9C36CE3

Зачем нужен нормализатор CSS

Когда веб-разработчик создаёт новый сайт, он хочет, чтобы в каждом браузере этот сайт выглядел одинаково. Но у каждого браузера есть свои стандарты отступов, оформления ссылок или форматирования блоков. В результате то, что в «Хроме» выглядит хорошо, в «Сафари» может выглядеть не очень, а в «Мозилле» вообще разрывает.

Для примера возьмём простой код, который нарисует нам на странице несколько стандартных элементов:

  • две горизонтальных линии-разделителя,
  • поле ввода с текстом внутри,
  • кнопку,
  • текст со ссылкой.

А после этого посмотрим, как выглядит этот код в разных браузерах.

Почему так происходит

Несмотря на то что внутри многих разных браузеров стоят одинаковые движки, у каждой компании свои представления о прекрасном и о том, как отображать разные HTML-элементы и CSS-стили. Например, в разных браузерах могут отличаться:

  • толщина линий обводки,
  • радиус скругления,
  • размер текста,
  • внешние и внутренние отступы у элементов,
  • правила оформления ссылок,
  • формы и кнопки.

Всё это записано в стандартных стилях браузера. Каждый раз, когда браузер встречает элемент, у которого не задан один из параметров, он берёт его из своей встроенной таблицы стилей. Разные браузеры — разные стили.

При этом браузер справится со своей основной задачей — показать HTML-страницу в понятном для пользователя виде. Но если веб-разработчик хочет, чтобы сайт выглядел идентично в каждом браузере, он должен предусмотреть это заранее и прописать в стилях.

Что такое нормализатор стилей

Чтобы сайт выглядел в каждом браузере почти одинаково, разработчики используют нормализатор стилей — normalize.css. По сути это просто большой CSS-файл, который делает следующее:

  • стандартизирует все отступы;
  • устанавливает единый размер шрифта;
  • приводит к единому внешнему виду все формы, кнопки и элементы на странице;
  • устанавливает для всех браузеров единые начальные параметры для форматирования текста, изображений и стандартных элементов.

Для этого нормализатор использует специальные CSS-команды, чтобы каждому браузеру объяснить на его языке, что нужно сделать.

Пример

Код ниже делает две вещи:

  1. Устанавливает одинаковую высоту строки во всех браузерах.
  2. Предотвращает изменения размера шрифта в iOS при повороте экрана.

-webkit-text-size-adjust — это специальная команда, которая состоит из двух частей:

-webkit, который сообщает, что эта команда относится к браузерам на движке WebKit. Остальные браузеры проигнорируют эту команду, а, например, Safari в iOS поймёт, что это команда для неё.

text-size-adjust — команда, которая говорит браузеру, какой размер шрифта нужно использовать.

Получается, что все браузеры поймут первую команду line-height , потому что она стандартная для всех браузеров, а на вторую -webkit-text-size-adjust среагируют только те браузеры, у которых могут быть проблемы с отображением размера текста (например, Safari).

Как использовать

Подключить нормализатор как обычную CSS-таблицу стилей к своей странице:

Ещё вариант — можно взять нормализатор и использовать его как шаблон или основу для собственной таблицы стилей. Так в одном файле вы получите одинаковое отображение в браузерах и нужные настройки внешнего вида страницы.

Вот как будут выглядеть наши страницы после подключения нормализатора:

Но что-то же всё равно отличается даже на этих скриншотах!

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

При этом вы можете на его основе сделать свой нормализатор, который предусматривает гораздо больше разных неочевидных случаев. Опытные разработчики, кстати, со временем так и делают — пишут свой нормализатор на основе собственного опыта и тех проблем в разработке, в которыми они сталкивались.

Это единственный нормализатор?

Нет, на самом деле их много. Просто этот самый популярный и проверенный.

Что дальше

Кроме нормализаторов есть ещё ресеты — они сбрасывают вообще все настройки в ноль, чтобы можно было установить всё вручную. Когда-нибудь доберёмся и до них.

Background-image не работает

Но в самом файле html свойство background-image работает.

Подскажите, почему не работает, если я размещаю в в файле css?

в css файле пропишите

Между тегами <head> у вас некорректно написана ссылка на файл CSS. Ваш код должен выглядеть так:

Как видите вы не дописали type="text/css" в теге link .

пол суток пробовал

,а оказывается надо вот так

Всем привет. Была такая же проблема: не работал backgrounf-image: url(link). Мучался часа 2, перепробовал всё, любые модификации но проблема оставалась. Ошибка заключалась в том, что не правильно был указан путь к картинке (файлу), и как не старался — ничего не помогало. Потом, когда я начал думать что html и css — не моё, мне вдруг пришла в голову мысль залезть в настройки. Я пользуюсь Notepad++ и обнаружил вот что: в пункте "Путь по умолчанию" было отмечено "запомнить последнюю директорию", я переставил отметку на "пройти за текущим документом", а в значении селектора background-image указал папку и файл: background-image: url(images/1.jpg) И все заработало. Надеюсь, кому да поможет инфа.

Столкнулся с аналогичной проблемой. Решил! Изображения формата .png почему-то не отображаются этим свойством, а вот .jpg и .webp отображаются

Судя по имени стиля вам нужен фон страницы. Если не работает, то проверьте правильный ли путь к картинке. то есть ../img/a.png или /img/a.png

Может помочь указания размеров картинки фона.

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *