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

Question

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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

Я думаю по нормальное поведение вы имеете в виду «значения по умолчанию для моего любимого браузера». Ваши правила CSS для этих элементов являются частью упражнения по сбросу.

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

Answer 4

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

Кроме того, стандарт CSS2 имеет sample stylesheet for html 4.

Answer 5

«После применения сброса CSS, я хочу, чтобы вернуться к„нормальному“поведению для HTML элементов ...»

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

Answer 6

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

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

Я рекомендую вам посмотреть 40 минут talk, чтобы получить до скорости.

Heres короткий фрагмент их 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; 
} 

Загрузить полные таблицы стилей или ниже read full documentation.

Yahoo reset css | Yahoo base (undo) reset css

Answer 7

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

Answer 8

Normal behaviour for WebKit h1:

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

Normal behaviour for Gecko h1:

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

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

Answer 9

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

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

Answer 10

Я не сбросить все элементы по умолчанию, потому что стили по умолчанию, так или иначе браузер зависит, таким образом, они варьируются от браузера к браузеру. Вместо того, чтобы использовать что-то вроде ul, ol { list-style: none; }, я добавляю класс CSS, например r или reset, а затем указываю, что если это ul, который имеет класс r, сбросьте его или иным образом оставьте его незатронутым.

Кстати, вам нужно добавить class="reset" (например) ко всем этим элементам, что является дополнительной работой и кодом, однако в конце вы бы все свои стили по умолчанию не тронули в конце!

Answer 11

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

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

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

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