User agent stylesheet как изменить

Если поместить в тело (HTML-элемент body) HTML-страницы текст и (или) какие-либо HTML-элементы, не указывая нигде их стилей, то браузер всё равно как-нибудь да и отобразит эту HTML-страницу.

Например, если в моем браузере «Microsoft Edge» (на движке «Chromium»), в операционной системе «Windows 10», в тело HTML-страницы добавить простой текст, не указывая нигде никаких стилей, то браузер отобразит текст черным цветом на белом фоне. А если заглянуть при этом в инструмент «Elements» из инструментов разработчика (F12) браузера, то можно заметить, что браузер добавил к HTML-элементу body такой стиль:

body {
    display: block;
    margin: 8px;
}

Таким образом, наш текст еще и аккуратно отодвинут от границ области просмотра на 8 пикселей.

Этот стиль, как видно в инструменте разработчика «Elements», помечен надписью «user agent stylesheet». Что это значит? Вообще «user agent» — это вид программ, на русский переводится как «агент пользователя». В данном случае под этим словосочетанием подразумевается наш браузер, который служит агентом пользователя, посредником между пользователем и вебом (Всемирной паутиной). То есть словосочетание «user agent stylesheet» переводится на русский как «таблица стилей браузера».

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

Я не понял, откуда берутся цвет текста и фона по умолчанию (через инструмент разработчика «Elements» это не видно), возможно, тоже из таблицы стилей браузера, либо они заданы где-то отдельно.

В устаревшем сейчас браузере «Internet Explorer» цвет текста и фона по умолчанию можно было задать через меню «Свойства браузера», там для этого была специальная кнопка «Цвета».

В моем теперешнем браузере «Microsoft Edge» (на движке «Chromium») я не смог найти ни того, как можно настроить цвета по умолчанию, ни того, как можно изменить таблицу стилей браузера по умолчанию (она же «user agent stylesheet»).

Я, конечно, обыскал настройки браузера. Для этого следует нажать кнопку с многоточием в правом верхнем углу окна браузера. В открывшемся меню нужно выбрать пункт «Settings» (по-русски «Настройки»). После этого откроется новая вкладка браузера с его настройками. В левом меню этой вкладки есть пункт «Appearance» (по-русски «Внешний вид»; тут настройки не только внешнего вида браузера, но есть и настройки, которые касаются отображения HTML-страниц). Тут можно поменять тему оформления самого браузера, настроить его панель инструментов (какие-то кнопки убрать, какие-то — показать). Можно выбрать шрифт, которым по умолчанию будет отображен текст HTML-страницы, и размер этого шрифта по умолчанию. Однако, здесь нельзя настроить цвета по умолчанию для элементов отображаемой HTML-страницы или таблицу стилей браузера по умолчанию.

Еще у меня была мысль о том, что, возможно, искомые настройки можно найти в настройках моей операционной системы (напомню, у меня — «Windows 10»). Чтобы это проверить, я нажал кнопку «Пуск», а в открывшемся меню, в столбце слева — пункт «Параметры». В открывшемся окне я выбрал пункт «Персонализация». Опять открылось новое окно, в котором, в меню слева, можно просмотреть пункты «Фон» и «Цвета». Как выяснилось, они не влияют на отображение браузером HTML-страниц.

Выводы. На сегодня для указанного выше браузера мы не можем поменять цвета по умолчанию или таблицу стилей браузера по умолчанию (она же «user agent stylesheet»). Скорее всего, это верно и для браузера «Google Chrome», а также для других браузеров, построенных на движке «Chromium», исходя из того, что они работают на одном и том же движке.

Но мы можем, конечно, для своей HTML-страницы написать свои стили на языке CSS, которые «перекроют» («затрут») соответствующие стили по умолчанию от браузера, так как стили автора HTML-страницы обладают большим приоритетом по сравнению со стилями по умолчанию от браузера (они же «user agent stylesheet»).

Однажды я написал веб-страницу в соответствии с инструкциями моего инструктора и обнаружил, что стиль тега h2 был неправильным. Затем я нажал F12 для отладки и нашел стиль, который никогда не определял на панели стилей справа. Из таблицы стилей пользовательского агента после просмотра информации Обнаружено, что этот продукт является форматом, автоматически добавляемым браузером.

В частности, это так: таблица стилей агента пользователя будет перезаписана тем, что вы установили в своем собственном CSS. Они простоСамый низкий уровеньБез страницы или какой-либо таблицы стилей, предоставленной пользователем, браузер все равно должен каким-либо образом представлять контент, и таблица стилей агента пользователя просто описывает это. Поэтому, если вы считаете, что есть проблема с таблицей стилей пользовательского агента, тогда у вашего HTML или CSS или обоих (вы ничего не написали) действительно есть проблема.

Концепцию таблицы стилей пользовательского агента можно посмотреть в официальной документации:Нажмите, чтобы открыть ссылку

Решение 1：

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

Скопируйте и вставьте его, измените стиль в своем собственном коде

Пересмотренный результат

хорошо, решение проблем

Решение 2: Напишите reset.css или normalize.css

Цель: уменьшить несоответствие браузера по умолчанию высоте строки, полей и размера шрифта заголовка

Пример кода reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Надеюсь, это поможет вам