Я работаю над веб-страницей в Google Chrome. Она отображается правильно со следующими стилями.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
Важно отметить, что я не определял эти стили. В инструментах разработчика Chrome вместо имени CSS-файла указано user agent stylesheet.
Теперь, если я отправляю форму и возникает ошибка валидации, я получаю следующую таблицу стилей:
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: -webkit-auto;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
Размер шрифта из этих новых стилей нарушает мой дизайн. Есть ли способ заставить мои таблицы стилей и, если возможно, полностью переписать таблицу стилей Chrome' по умолчанию?
Какие браузеры являются целевыми? Разные браузеры устанавливают разные правила CSS по умолчанию. Попробуйте включить сброс CSS, например meyerweb css reset или normalize.css, чтобы удалить эти правила по умолчанию. Задайте в Google "css reset vs normalize", чтобы увидеть различия.
Если <!DOCTYPE >
отсутствует в вашем html, вы можете почувствовать, что браузер отдает предпочтение «листу стилей агента пользователя» над вашей пользовательской таблицей стилей. Добавление doctype исправляет это.
Что касается понятия "таблица стилей агента пользователя", обратитесь к разделу Cascade в спецификации CSS 2.1.
Таблицы стилей агента пользователя переопределяют все, что вы задаете в своей собственной таблице стилей. Они - лишь нижний предел: в отсутствие каких-либо таблиц стилей, предоставленных страницей или пользователем, браузеру все равно придется каким-то образом отобразить содержимое, а таблица стилей агента пользователя лишь описывает это.
Так что если вы думаете, что у вас проблема с таблицей стилей агента пользователя, то на самом деле у вас проблема с вашей разметкой, или с вашей таблицей стилей, или с тем и другим (о чем вы ничего не написали).
Лист стилей пользовательского агента - это «лист стилей по умолчанию», предоставляемый браузером (например,., Chrome, Firefox, Edge и др.) для того, чтобы представить страницу таким образом, чтобы она удовлетворяла «общим ожиданиям презентации».«Например, таблица стилей по умолчанию будет предоставлять базовые стили для таких вещей, как размер шрифта, границы и интервал между элементами. Обычно используется таблица стилей reset для устранения несоответствий между браузерами.
Из спецификации...
Лист стилей пользовательского агента по умолчанию должен представлять элементы языка документа таким образом, чтобы удовлетворить общие ожидания представления для языка документа. ~ Каскад.
Для получения дополнительной информации об пользовательских агентах в целом...
Отвечая на вопрос в заголовке, что такое таблица стилей пользовательского агента, набор стилей по умолчанию в браузере, вот некоторые из них (и наиболее релевантные также в современной сети):
Гекко (Firefox): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
Хром (Хром): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Личное мнение, не боритесь с ними, у них хорошие значения по умолчанию, например, в случаях rtl / bidi, и они в настоящее время последовательны, сбрасывают то, что вы видите, не имеет отношения к вам, не ко всем сразу.
Некоторые браузеры используют свой собственный способ чтения файлов .css. Так что правильный способ победить это: Если вы вводите командную строку непосредственно в исходном коде .html, это превосходит файл .css, таким образом, вы прямо сказали браузеру, что делать, и браузер не может читать команды из файла .css. Помните, что команды, записанные в файле .html, сильнее, чем команда в .css.
У меня была та же проблема, что и у одного из моих < div > было установлено, что браузер установил поле, это было довольно раздражающим, но потом я понял, как сказали большинство людей, это ошибка разметки.
Я вернулся и проверил мой < head > раздел и моя ссылка CSS была как ниже:
< link rel = "stylesheet" href = "ex.css" >
я включил тип в него и сделал это как ниже:
< link rel = "stylesheet" type = "text / css" href = "ex.css" >
моя проблема была решена.
Надеюсь, это поможет некоторым из вас.
Каждый браузер предоставляет таблицу стилей по умолчанию, называемую листом стилей пользовательского агента, в случае, если файл HTML не указывает ее. Упомянутые вами стили переопределяют значения по умолчанию. Поскольку вы не указали значения для поля элемента таблицы, были применены стили по умолчанию
поместите следующий код в свой файл CSS
table {
font-size: inherit;
}