Как сбросить настройки css по умолчанию
По умолчанию браузер устанавливает свои настройки для некоторых свойств в css. Но беда тут в том, что веб-обозревателей много и каждый может устанавливать свои правила. Какое решение? Узнать, как сбросить настройки css по умолчанию и перезаписать на свои. А вот о том, как это можно сделать и будет посвящена эта статья.
CSS Reset или сброс настроек по умолчанию
CSS Reset — это набор стилей, которые сбрасывают какие-то параметры, установленные браузером по умолчанию. Этот файл пишет для себя каждый веб-разработчик индивидуально, а кто-то берет готовое решение. Вот с него я и предлагаю начать. Есть много хороших вариантов сброса стилей, но мне больше всего понравился этот, составленный Эриком Мейером:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
>
Я немного прокомментирую код. Во-первых, тут сбрасываются внутренние и внешние отступы для всех нужных элементов. Во-вторых, на лицо поддержка HTML5 элементов. Для них задано правило, которое позволит им правильно отображаться в некоторых версиях браузеров. В-третьих, заданы типичные настройки для удобной работы с таблицами (убраны отступы между ячейками и двойные границы). А еще сброшены стандартные маркеры для списков и кавычки для цитат. Эти части кода стоит удалить, если вы хотите использовать стилизацию по умолчанию.
Как сбросить настройки css самостоятельно
При более менее нормальном владении css можно попробовать самому написать пару правил. Например:
Это, пожалуй, самая простая команда. Звездочка в данном случае представляет все селекторы, поэтому стили будут применены ко всем элементам на веб-странице, сбросив у них внешние и внутренние отступы. Вы удивитесь, но этих простых строчек кода может хватить для обеспечения кроссбраузерности во многих веб-обозревателях. Все остальные правила можно добавить по собственному желанию. Я советую добавить еще display: block для всех тегов HTML5.
Где разместить правила css reset
Вот выше я вам предложил код, а куда его вставлять? Тут есть два варианта:
- Вставить его в самом начале главной таблицы стилей на вашем сайте
- Создать на сервере новый css-файл и сохранить в него код, после чего сохранить и подключить ко всем страницам ПЕРЕД основной таблицей style.css .
Подробнее о подключении таблицы стилей css к html смотрите здесь.
На мой взгляд, второй вариант хуже тем, что ухудшает производительность, добавляя в загрузку один лишний файл. С другой стороны, так вам проще будет управлять этими правилами. Но ради производительности я рекомендую использовать первый вариант.
Сброс настроек является одной из мер по обеспечению кроссбраузерности сайта, то есть одинакового отображения в разных веб-обозревателях. Конечно, это не все меры, которые обеспечат одинаковый внешний вид, об остальных я буду писать в дальнейшем на этом блоге. Подписывайтесь, если интересно.
Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший — HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей — 4.8 из 5. Пусть вашим сайтам будет хорошо.
Еще материалы по HTML
Сброс стилей (CSS reset)
Цель сброса стилей состоит в том, чтобы уменьшить разность отступов, размеров шрифтов заголовков и т.д. заданных по умолчанию в разных браузерах.
Eric Meyer’s CSS Reset
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; >article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >html < height: 100%; >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
Сжатая версия:
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 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section html body ol,ul blockquote,q blockquote:before,blockquote:after,q:before,q:after table
Normalize.css
Более расширенный сброс стилей (присутствуют стили для IE, iOS, Safari).
https://necolas.github.io/normalize.css
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ html < line-height: 1.15; -webkit-text-size-adjust: 100%; >body < margin: 0; >main < display: block; >h1 < font-size: 2em; margin: 0.67em 0; >hr < box-sizing: content-box; height: 0; overflow: visible; >pre < font-family: monospace, monospace; font-size: 1em; >a < background-color: transparent; >abbr[title] < border-bottom: none; text-decoration: underline; text-decoration: underline dotted; >b,strong < font-weight: bolder; >code,kbd,samp < font-family: monospace, monospace; font-size: 1em; >small < font-size: 80%; >sub,sup < font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; >sub < bottom: -0.25em; >sup < top: -0.5em; >img < border-style: none; >button,input,optgroup,select,textarea < font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; >button,input < overflow: visible; >button,select < text-transform: none; >button,[type="button"],[type="reset"],[type="submit"] < -webkit-appearance: button; >button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner < border-style: none; padding: 0; >button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring < outline: 1px dotted ButtonText; >fieldset < padding: 0.35em 0.75em 0.625em; >legend < box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; >progress < vertical-align: baseline; >textarea < overflow: auto; >[type="checkbox"],[type="radio"] < box-sizing: border-box; padding: 0; >[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button < height: auto; >[type="search"] < -webkit-appearance: textfield; outline-offset: -2px; >[type="search"]::-webkit-search-decoration < -webkit-appearance: none; >::-webkit-file-upload-button < -webkit-appearance: button; font: inherit; >details < display: block; >summary < display: list-item; >template < display: none; >[hidden]
Сжатая версия:
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ html body article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary audio,canvas,progress,video audio:not([controls]) [hidden],template a a:active,a:hover abbr[title] b,strong dfn h1 mark small sub,sup sup sub img svg:not(:root) figure hr pre code,kbd,pre,samp button,input,optgroup,select,textarea button button,select button,html input[type="button"],input[type="reset"],input[type="submit"] button[disabled],html input[disabled] button::-moz-focus-inner,input::-moz-focus-inner input input[type="checkbox"],input[type="radio"] input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button input[type="search"] input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration fieldset legend textarea optgroup table td,th