Известный веб-стандартист и гуру CSS, Eric Meyer, описал вторую версию стилей, обнуляющих дефолтные значения отступов, рамок, размеров шрифтов и т.д. для HTML-элементов, существенно облегчающих начало работы над сайтом.
Вот они, собственно:
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
background: transparent;
}
/* Не забываем описать стили для :focus! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* Для таблиц все еще надо прописывать 'cellspacing="0"' в коде */
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}С некоторыми из этих правил можно поспорить, да они и не претендуют на универсальность, но в любом случае более полно и четко задают значения для элементов, чем широко используемое * {margin:0; padding:0;}.
Естественно, что не стоит бездумно вставлять эти стили в каждый файл. Можно и нужно видоизменять их в соответствии со своими предпочтениями и нуждами, особенно то что касается свойств background и color .
Для тех, кто спросит зачем это вобще надо скажу, что все браузеры имеют те или иные дефолтные значения для отображения HTML-элементов, но не для всех браузеров эти значения одинаковы. На пример списки (ul) в некоторых браузерах отображаются с использованием margin, а в некоторых с помощью padding. И таких примеров не мало. Кроме того, существуют еще и другие дефолтные значения, кроме отступов как то, высота строки, размер шрифта, рамки…
Я думаю что если попытаться озвучить основную мысль обнуления дефолтных значений, то получится что-то вроде:
- Не оставляйте браузеру возможности отображать элементы интерфейса так как этого “хочется” ему – описывайте стили сами!
Upd. Ресет обновился
Ни фига себе. Даже представить не мог, что столько кода нужно. Я довольствуюсь * {margin:0; padding:0;} :)
Slaff
я обычно тоже, со следующего сайта попробую “по-эрикмееровски” :) Думаю так все же правильнее.
* {margin:0; padding:0;} – НАШ ВЫБОР! :)
[quote post="93"]НАШ ВЫБОР![/quote]
Ггг :) Капиталистические выкрутасы не пройдут!
когда же наконец cellspacing=”0″ внесут в CSS?
[quote comment="347"]когда же наконец cellspacing=”0″ внесут в CSS?[/quote]
Как раз вчера сидел и матерился по этому поводу, когда надо было добраться до таблицы, которая генерируется самостоятельно..
* {margin: 0; padding: 0;} плохо не потому что “не модно”, а по совершенно конкретной причине: оно убирает дефолтные отступы у кнопок и текстовых полей. А тем самым, что уж совсем уродливо, отключает им системный вид и заставляет дизайнера придумывать свой собственный вид элементам управления. Правда надо сказать, что многие дизайнеры от этого до сих пор в восторге :-/
[quote post="93"]многие дизайнеры от этого до сих пор в восторге :-/[/quote]
Многим дизайнерам к сожалению наплевать на все кроме собственного эго. Я частенько доделываю за дизайнера работу, особенно во всем что связано с юзабилити…
Клево, спасибо.
Зачем, если указан border-collapse:collapse?
2kost
Потому что указывая border-collapse ты указываешь поведение “рамок” ячеек, а к отступу это отношения не имеет.
классно! уже попробовал!
[quote comment="347"]когда же наконец cellspacing=”0″ внесут в CSS?[/quote]td {padding: 0px} делает именно это.
Del’ka
Не согласен.
border-collapse:collapse; ;))
Непонятен восторг собравшихся, а также повальное увлечение полного обнуления всего и вся. Во-первых, проблемы с элементами форм, во-вторых, все списки нужно переписать и учесть заново, в-третьих, зачем размер для заголовков весь одинаковый? Зачем указывать inherit? Зачем все эти обнуления для строчных элементов? Думайте головой, ребята. Не копируйте бездумно чужой код.
[quote comment="374"][quote comment="347"]когда же наконец cellspacing="0" внесут в CSS?[/quote]td {padding: 0px} делает именно это.[/quote]Именно это делает margin, а не padding
[quote comment="1875"]Непонятен восторг собравшихся, а также повальное увлечение полного обнуления всего и вся. Во-первых, проблемы с элементами форм, во-вторых, все списки нужно переписать и учесть заново, в-третьих, зачем размер для заголовков весь одинаковый? Зачем указывать inherit? Зачем все эти обнуления для строчных элементов? Думайте головой, ребята. Не копируйте бездумно чужой код.[/quote]
Про то, что нужно думать не жопой – это ты правильно подметил, а вот твои эти “проблемы” – это проблемы для чайников.
Все это нужно для одинакового отображения страницы во всех браузерах, ибо они (браузеры) все имеют разные дефолтовые значения для стандартных элементов. Мы же верстаем для всех браузеров, и хотим видет сайты в них одинаково?
Дизайнер продумывает оформление – верстальщик его реализует.
Сначала все нафик сбрасываем, потом задаем свое, иначе никак, иначе получиться гомно, причем везде разного цвета и запаха (может, конечно, и не полное, но оно).
Резюме: reset.css – обязателен к применению.
Админу сайта: Пирдатый сайт, полезный, только седня наткнулся… =) Только вот нафик “мыло” в комментах обязатльное поле? (лучше не надо…)
Deflate_, спасибо, только “пирдатый” звучит двусмысленно :)
А мэйл нужен для того, чтобы ты мог получать уведомления, на пример ;)