it-swarm.com.ru

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

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

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

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

50
public static

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

35
Steven Oxley

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

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

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

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

10
Carl Camera

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

* {
    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/

8
da5id

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

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

6
Jake Rayson

Проверьте 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 Base (отменить) сброс CSS

5
Simon_Weaver

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

3
zenazn

Нормальное поведение для 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
robertc

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

Кроме того, стандарт CSS2 имеет пример таблицы стилей для HTML 4 .

2
Daniel James

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

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

1
Traingamer

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

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

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

В частности, вы можете использовать section Rendering в 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, как ожидается, повлияет на настройки.)

0
Jukka K. Korpela