CSS Reset, стили по умолчанию для общих элементов - PullRequest
Новая
       39

CSS Reset, стили по умолчанию для общих элементов

50 голосов
/ 19 сентября 2008

После применения сброса CSS я хочу вернуться к «нормальному» поведению для таких html-элементов, как: p, h1..h6, strong, ul и li.

Теперь, когда я говорю нормально, я имею в виду, например, элемент p добавляет интервал или результат возврата каретки, когда он используется, или размер шрифта и жирность для тега h1, а также интервал.

Я понимаю, что это полностью зависит от меня, как я хочу установить стиль, но я хочу вернуться к нормальному поведению для некоторых из более общих элементов (по крайней мере, как отправная точка, которую я могу настроить позже).

Ответы [ 11 ]

35 голосов
/ 19 сентября 2008

YUI предоставляет базовый файл CSS, который обеспечивает согласованные стили для всех браузеров 'A-grade' Они также предоставляют файл сброса CSS, так что вы также можете использовать его, но вы говорите, что уже сбросили CSS. Для получения дополнительной информации перейдите на веб-сайт YUI . Это то, что я использовал, и это работает очень хорошо.

10 голосов
/ 19 сентября 2008

Одним из правил применения стилей CSS является «последний в выигрыше». Это означает, что если в стилях сброса CSS для элементов установлено значение margin:0; padding:0, вы можете переопределить эти правила, объявив желаемые значения для тех же элементов впоследствии.

Вы можете сделать это в том же файле (я думаю, что YUI предлагает сброс в одну строку, поэтому иногда я включаю его в качестве первой строки в моем CSS-файле) или в отдельный файл, который появляется после тега CSS <link/> сброса. .

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

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

8 голосов
/ 19 сентября 2008

Вы имеете в виду, как: 

* {
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address {
    margin-bottom: 1em;
}

На самом деле, извините, я неправильно прочитал ваш вопрос, вам нужно нечто большее, чем полный сброс Эрика Майера @ http://meyerweb.com/eric/tools/css/reset/

6 голосов
/ 10 ноября 2011

Вместо того, чтобы использовать полный сброс CSS, подумайте об использовании чего-то вроде Normalize , который "сохраняет полезные значения по умолчанию".

Чтобы узнать, что ваш браузер считает по умолчанию, откройте HTML-файл plain со списками и просмотрите списки с помощью отладчика CSS, например Firebug , и посмотрите под вкладкой Computed.

5 голосов
/ 25 января 2009

Проверьте YUI (соглашения с пользовательским интерфейсом открытого исходного кода Yahoo).

У них есть базовая таблица стилей, которая отменяет их собственный сброс CSS. Они на самом деле не рекомендуют использовать его в работе - поскольку это контрпродуктивно, но определенно стоит проверить файл, чтобы получить соответствующие фрагменты для того, что вы хотите отменить.

Я рекомендую вам посмотреть 40-минутный разговор , чтобы набрать скорость.

Вот краткий фрагмент их файла base.css: 

ol li {
    /*giving OL's LIs generated numbers*/
    list-style: decimal outside;    
}
ul li {
    /*giving UL's LIs generated disc markers*/
    list-style: disc outside;
}
dl dd {
    /*giving UL's LIs generated numbers*/
    margin-left:1em;
}
th,td {
    /*borders and padding to make the table readable*/
    border:1px solid #000;
    padding:.5em;
}
th {
    /*distinguishing table headers from data cells*/
    font-weight:bold;
    text-align:center;
}

Загрузите полную таблицу стилей ниже или прочитайте полную документацию.

Yahoo сброс css | сброс базы Yahoo (отмена) css

3 голосов
/ 25 января 2009

Я лично большой поклонник BlueprintCSS . Он сбрасывает стили в разных браузерах и предоставляет некоторые действительно удобные настройки по умолчанию (это то, что вам нужно в 90% случаев). Он также предоставляет сетку макета, но вам не нужно ее использовать, если она вам не нужна.

2 голосов
/ 24 декабря 2009

Нормальное поведение для WebKit h1 : 

h1 {
    display: block;
    font-size: 2em;
    margin: .67__qem 0 .67em 0;
    font-weight: bold
}

Нормальное поведение для Gecko h1 : 

h1 {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin: .67em 0;
}

Остальные элементы должны быть там, если вы будете искать файлы.

2 голосов
/ 20 сентября 2008

Если вы хотите увидеть значения по умолчанию для css для firefox, найдите в дистрибутиве файл с именем html.css (в этом же каталоге должны быть другие полезные файлы css). Вы можете выбрать нужные правила и применить их после сброса.

Также в стандарте CSS2 имеется образец таблицы стилей для html 4 .

1 голос
/ 17 октября 2008

"После применения сброса CSS я хочу вернуться к« нормальному »поведению для html-элементов ...»

Если вы применили сброс, вам нужно будет добавить правила для того, что вы считаете нормальным поведением . Так как нормальное поведение варьируется от браузера к браузеру, этот вопрос не является чем-то вроде sequitur. Мне нравится ответ @ da5id - используйте одну из множества доступных перезагрузок и настройте ее в соответствии со своими потребностями.

0 голосов
/ 28 июля 2013

После того, как вы присвоили значение свойству CSS элемента, вернуть его «нормальное» значение невозможно, предполагая, что «нормальный» означает «браузер по умолчанию», как, кажется, здесь и подразумевается. Таким образом, единственный способ, скажем, для элемента h1 иметь браузер по умолчанию font-size - это вообще не устанавливать свойство для него в вашем коде CSS.

Таким образом, чтобы освободить некоторые свойства и элементы от сброса CSS, вам нужно использовать более ограниченный сброс CSS. Например, вы не должны использовать * { font-size: 100% }, а заменить * списком селекторов, например input, textarea { font-size: 100% } (список может быть довольно длинным, но, например, настройки браузера по умолчанию для font-size отличаются от 100% только для нескольких элементов ).

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

В частности, вы можете использовать раздел Рендеринг в HTML5 CR. Он описывает «ожидаемый рендеринг» - не является обязательным требованием, хотя производители браузеров могут решить требовать их соответствия, если они того пожелают, и в целом это, вероятно, будет поддерживать реализации довольно схожими в этом отношении. Например, для h1 ожидаемые настройки (собраны здесь в одно правило - в HTML5 CR они разбросаны): 

h1 {
unicode-bidi: isolate;
display: block;
margin-top: 0.67em;
margin-bottom: 0.67em;
font-size: 2.00em;
font-weight: bold;
}

(Существуют дополнительные контекстные правила. Например, вложенность h1 внутри section, как ожидается, повлияет на настройки.)

Страница:
...