Сброс CSS означает сброс стиля браузера. В предыдущих статьях на 52CSS.com были представлены аналогичные знания, но они были недостаточно глубокими. Сегодня мы рассмотрим десять примеров метода CSS Reset и изучим применение этого метода.
В различных браузерах для селекторов CSS используются некоторые значения по умолчанию. Например, если для h1 не установлено значение, отображается определенный размер. Но не все браузеры используют одни и те же значения, поэтому CSS Reset используется для обеспечения единообразного поведения стиля веб-страницы в каждом браузере.
1. Общий сброс CSS
* {
заполнение: 0;
маржа: 0;
граница: 0;
}
Это также метод сброса CSS, который устанавливает отступы, поля и границы всех селекторов на 0. Это мощный метод, самый простой и безопасный, однако он также и самый ресурсоемкий. Для небольших веб-сайтов использование этого не приведет к большой трате ресурсов, но если это веб-сайт с очень большой структурой, такой как Yahoo, вам просто нужно выборочно сбросить CSS, чтобы уменьшить потери ресурсов.
2. Ateneu Popular CSS Reset
html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, цитата, pre, a, сокращение, акроним,
адрес, большой, цитировать, код, del, dfn, em, шрифт, img, ins,
kbd, q, s, samp, small, страйк, сильный, саб, суп, тт,
вар, дл, дт, дд, ол, ул, ли, набор полей, форма, метка, легенда,
таблица, подпись, tbody, tfoot, thead, tr, th, td {
маржа: 0;
заполнение: 0;
граница: 0;
контур: 0;
шрифт-вес: наследовать;
стиль шрифта: наследовать;
размер шрифта: 100%;
семейство шрифтов: наследовать;
вертикальное выравнивание: базовая линия;
}
:focus {контур: 0;}
a, a:ссылка, a:посещено, a:hover, a:active{text-decoration:none}
таблица {схлопывание границы: отдельный; расстояние между границами: 0;}
й, тд {выравнивание текста: слева; шрифт-вес: нормальный;}
img, iframe {граница: нет; текст-декорация: нет;}
ол, ул {стиль списка: нет;}
ввод, текстовая область, выбор, кнопка {размер шрифта: 100%; семейство шрифтов: наследовать;}
выберите {поле: наследовать;}
hr {маржа: 0; отступ: 0; граница: 0; цвет: # 000; цвет фона: # 000; высота: 1 пиксель}
3. CSS сброса Криса Потита
* {
вертикальное выравнивание: базовая линия;
семейство шрифтов: наследовать;
стиль шрифта: наследовать;
размер шрифта: 100%;
граница: нет;
заполнение: 0;
маржа: 0;
}
тело {
отступ: 5 пикселей;
}
h1, h2, h3, h4, h5, h6, p, pre, цитата, форма, ul, ol, dl {
поле: 20 пикселей 0;
}
ли, дд, цитата {
поле слева: 40 пикселей;
}
стол {
граница-коллапс: коллапс;
расстояние между границами: 0;
}
4. Yahoo CSS Reset
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
заполнение: 0;
маржа: 0;
}
стол {
граница-коллапс: коллапс;
расстояние между границами: 0;
}
набор полей, img {
граница: 0;
}
адрес, подпись, цитируйте, код, dfn, em,strong,th,var {
вес шрифта: нормальный;
стиль шрифта: нормальный;
}
ол,ул {
стиль списка: нет;
}
подпись,th {
выравнивание текста: по левому краю;
}
h1,h2,h3,h4,h5,h6 {
вес шрифта: нормальный;
размер шрифта: 100%;
}
д: до, д: после {
содержание:";
}
аббр, акроним { граница: 0;
}
5. Эрик Мейер Сброс CSS
html, body, div, span, апплет, объект, iframe, таблица, заголовок,
tbody, tfoot, thead, tr, th, td, del, dfn, em, шрифт, img, ins,
кбд, к, с, самп, малый, страйк, сильный, саб, суп, тт, вар,
h1, h2, h3, h4, h5, h6, p, цитата, pre, a, сокращение,
акроним, адрес, большой, цитировать, код, дл, дт, дд, ол, ул, ли,
набор полей, форма, метка, легенда {
вертикальное выравнивание: базовая линия;
семейство шрифтов: наследовать;
шрифт-вес: наследовать;
стиль шрифта: наследовать;
размер шрифта: 100%;
контур: 0;
заполнение: 0;
маржа: 0;
граница: 0;
}
:фокус {
контур: 0;
}
тело {
фон: белый;
высота строки: 1;
цвет: черный;
}
ол, ул {
стиль списка: нет;
}
стол {
граница-коллапс: отдельная;
расстояние между границами: 0;
}
подпись, th, td {
вес шрифта: нормальный;
выравнивание текста: по левому краю;
}
цитата:до, цитата:после, q:до, q:после {
содержание: "";
}
цитата, q {
кавычки: "" "";
}
6. Tantek Celik Сброс CSS
:link,:visited { text-decoration:none }
ul,ol {стиль списка: нет }
h1, h2, h3, h4, h5, h6, pre, код {размер шрифта: 1em }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ поле: 0; заполнение: 0 }
img,:link img,:visited img { border:none }
адрес {font-style:normal }
7. Кристиан Монтойя Сброс CSS
html, body, form, fieldset {
маржа: 0;
заполнение: 0;
шрифт: 100%/120% Verdana, Arial, Helvetica, без засечек;
}
h1, h2, h3, h4, h5, h6, п, пред,
цитата, ул, ол, дл, адрес {
маржа: 1em 0;
заполнение: 0;
}
ли, дд, цитата {
поле слева: 1em;
}
сформировать метку {
курсор: указатель;
}
набор полей {
граница: нет;
}
ввод, выбор, текстовая область {
размер шрифта: 100%;
семейство шрифтов: наследовать;
}
8. Rudeworks сброс CSS
* {
маржа: 0;
заполнение: 0;
граница: нет;
}
html {
шрифт: 62,5% «Lucida Grande», Lucida, Verdana, без засечек;
текстовая тень: #000 0px 0px 0px;
}
ул {
стиль списка: нет;
тип стиля списка: нет;
}
h1, h2, h3, h4, h5, h6, п, пред,
цитата, ул, ол, дл, адрес {
вес шрифта: нормальный;
маржа: 0 0 1em 0;
}
цитируйте, em, dfn {
стиль шрифта: курсив;
}
Как дела {
положение: относительное;
низ: 0,3эм;
вертикальное выравнивание: базовая линия;
}
суб {
положение: относительное;
внизу: -0,2эм;
вертикальное выравнивание: базовая линия;
}
ли, дд, цитата {
поле слева: 1em;
}
код, kbd, samp, pre, tt, var, input[type='text'], textarea {
размер шрифта: 100%;
семейство шрифтов: monaco, «Lucida Console», courier, mono-space;
}
дель {
оформление текста: сквозное;
}
ins, dfn {
нижняя граница: 1 пиксель сплошной #ccc;
}
маленький, суп, суб {
размер шрифта: 85%;
}
сокращение, аббревиатура {
преобразование текста: верхний регистр;
размер шрифта: 85%;
межбуквенный интервал: .1em;
стиль границы внизу: пунктирный;
ширина нижней границы: 1 пиксель;
}
сокращение, аббревиатура {
граница: нет;
}
Как дела {
вертикальное выравнивание: супер;
}
суб {
вертикальное выравнивание: суб;
}
ч1 {
размер шрифта: 2em;
}
ч2 {
размер шрифта: 1,8em;
}
ч3 {
размер шрифта: 1,6em;
}
ч4 {
размер шрифта: 1,4em;
}
h5 {
размер шрифта: 1.2em;
}
ч6 {
размер шрифта: 1em;
}
a, a:ссылка, a:посещено, a:hover, a:active {
контур: 0;
текстовое оформление: нет;
}
изображение {
граница: нет;
текстовое оформление: нет;
}
изображение {
граница: нет;
текстовое оформление: нет;
}
метка, кнопка {
курсор: указатель;
}
ввод: фокус, выбор: фокус, текстовая область: фокус {
цвет фона: #FFF;
}
набор полей {
граница: нет;
}
.прозрачный {
ясно: оба;
}
.float-left {
плавать: влево;
}
.float-right {
плавать: вправо;
}
тело {
выравнивание текста: по центру;
}
#обертка {
маржа: 0 авто;
выравнивание текста: по левому краю;
}
9. Anieto2K Сброс CSS
html, body, div, span, апплета, объекта, iframe,
h1, h2, h3, h4, h5, h6, п,
цитата, пре, а, сокращение, аббревиатура, адрес, большой,
цитировать, код, del, dfn, em, шрифт, img,
ins, kbd, q, s, самп, малый, страйк,
сильный, саб, суп, тт, вар, дл, дт, дд, ол, ул, ли,
набор полей, форма, метка, легенда,
таблица, подпись, tbody, tfoot, thead, tr, th, td,
центр, ты, б, я {
маржа: 0;
заполнение: 0;
граница: 0;
контур: 0;
вес шрифта: нормальный;
стиль шрифта: нормальный;
размер шрифта: 100%;
семейство шрифтов: наследовать;
вертикальное выравнивание: базовая линия
}
тело {
высота строки: 1
}
:фокус {
контур: 0
}
ол, ул {
стиль списка: нет
}
стол {
граница-коллапс: коллапс;
расстояние между границами: 0
}
цитата:до, цитата:после, q:до, q:после {
содержание: ""
}
цитата, q {
кавычки: "" ""
}
ввод, текстовая область {
маржа: 0;
отступ: 0
}
час {
маржа: 0;
заполнение: 0;
граница: 0;
цвет: #000;
цвет фона: #000;
высота: 1 пиксель
}
10. CSSLab CSS Сброс
html, body, div, span, апплета, объекта, iframe, h1, h2, h3,
h4, h5, h6, p, цитата, pre, a, сокращение, аббревиатура, адрес,
большой, цитировать, код, del, dfn, em, шрифт, img, ins, kbd, q, s, samp,
маленький, страйк, сильный, суб, суп, тт, вар, дл, дт, дд, ол, ул, ли,
набор полей, форма, метка, легенда, таблица, заголовок, tbody, tfoot,
head, tr, th, td {
маржа: 0;
заполнение: 0;
граница: 0;
контур: 0;
шрифт-вес: наследовать;
стиль шрифта: наследовать;
размер шрифта: 100%;
семейство шрифтов: наследовать;
вертикальное выравнивание: базовая линия;
}
:фокус {
контур: 0;
}
стол {
граница-коллапс: отдельная;
расстояние между границами: 0;
}
подпись, th, td {
выравнивание текста: по левому краю;
вес шрифта: нормальный;
}
img, iframe {
граница: нет;
}
ол, ул {
стиль списка: нет;
}
ввод, текстовая область, выбор, кнопка {
размер шрифта: 100%;
семейство шрифтов: наследовать;
}
выбирать {
маржа: наследовать;
}
/* Исправляет неправильное размещение чисел в старых версиях IE6/7 */
ол {маржа слева: 2em}
/* == Clearfix == */
.clearfix:после {
содержание: ".";
дисплей: блок;
высота: 0;
ясно: оба;
видимость: скрыта;
}
.clearfix {дисплей: встроенный блок;}
* html .clearfix {высота: 1%;}
.clearfix {display:block;}
Все они похожи, имеют разные потребности и разные методы.