54

CSS リセットを適用した後、p、h1..h6、strong、ul、li などの html 要素の「通常の」動作に戻したいと考えています。

ここで通常と言うとき、たとえば、p 要素を使用すると結果のようなスペースまたは改行が追加されるか、h1 タグのフォントのサイズと太字がスペースとともに追加されます。

スタイルをどのように設定するかは完全に自分次第ですが、より一般的な要素のいくつかについては通常の動作に戻したいと思います (少なくとも、後で微調整できる出発点として)。

4

11 に答える 11

37

YUI は、すべての「A グレード」ブラウザーで一貫したスタイルを提供するベース CSS ファイルを提供します。また、CSS リセット ファイルも提供されているので、それを使用することもできますが、すでに CSS をリセットしたとのことです。詳細については、YUI の Web サイトを参照してください。これは私が使用してきたもので、非常にうまく機能します。

于 2008-09-19T04:43:33.370 に答える
10

CSS スタイルを適用する際の規則の 1 つは、「最後に勝つ」ことです。これは、CSS リセット スタイルが要素を設定する場合、margin:0; padding:0後で同じ要素に対して目的の値を宣言することで、これらのルールをオーバーライドできることを意味します。

これは、同じファイル (YUI はワンライナー リセットを提供するので、CSS ファイルの最初の行として含めることもあると思います) で行うことも、リセット CSS<link/>タグの後に表示される別のファイルで行うこともできます。

通常の動作とは、「私のお気に入りのブラウザーのデフォルト」を意味すると思います。これらの要素の CSS ルールを作成することは、リセット作業の一部です。

ここで、 Blueprint CSSやその他のグリッド フレームワークを調べてみることをお勧めします。これらのグリッド フレームワークは、ほとんどの場合、最初にスタイルを何もリセットせず、次に共通要素のタイポグラフィなどを構築します。これにより、時間と労力を節約できます。

于 2008-09-19T04:46:27.997 に答える
8

あなたは次のように意味します：

* {
    padding: 0;
    margin: 0;
}

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

?

実際、申し訳ありませんが、あなたの質問を読み間違えました。あなたは、Eric Meyer の総リセット @ http://meyerweb.com/eric/tools/css/reset/のようなものを求めています。

于 2008-09-19T04:30:55.617 に答える
6

CSSの完全なリセットを使用するのではなく、「便利なデフォルトを保持する」Normalizeのようなものを使用することを検討してください。

ブラウザがデフォルトとしてどのように考えているかを確認するには、リストを含むプレーンなHTMLファイルを開き、FirebugなどのCSSデバッガーを使用してリストを表示し、Computedタブの下を確認します。

于 2011-11-10T16:14:24.827 に答える
5

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

于 2009-01-25T01:03:04.747 に答える
3

私は個人的にBlueprintCSSの大ファンです。ブラウザ間でスタイルをリセットし、いくつかの非常に便利なデフォルトを提供します（これは、90％の確率で必要なものです）。レイアウトグリッドも提供しますが、必要がなければそれを使用する必要はありません。

于 2009-01-25T01:07:35.377 に答える
2

Firefoxのcssのデフォルトを確認したい場合は、ディストリビューションで「html.css」というファイルを探してください（同じディレクトリに他の便利なcssファイルがあるはずです）。必要なルールを選択し、リセット後に適用することができます。

また、CSS2標準には、html4のサンプルスタイルシートがあります。

于 2008-09-20T18:37:11.667 に答える
2

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;
}

ファイルを検索すると、残りの要素がそこにあるはずです。

于 2009-12-23T23:13:08.327 に答える
1

「CSS リセットを適用した後、html 要素の「通常の」動作に戻したい...」

リセットを適用した場合は、通常の動作と思われるルールを追加する必要があります。通常の動作はブラウザごとに異なるため、この質問は前後関係のないものです。私は@da5idの答えが好きです-利用可能な多くのリセットの1つを使用し、ニーズに合わせて微調整してください。

于 2008-10-17T16:16:26.480 に答える
0

要素の CSS プロパティに値を割り当てたら、「通常」の値を元に戻す方法はありません。「通常」とは「ブラウザーのデフォルト」を意味すると仮定すると、ここで意味しているように見えます。h1したがって、要素にブラウザーの既定値を持たせる唯一の方法は、CSS コードでその要素のプロパティをまったく設定しないことfont-sizeです。

したがって、一部のプロパティと要素を CSS リセットから除外するには、より制限された CSS リセットを使用する必要があります。たとえば、セレクターのリストを使用するのではなく* { font-size: 100% }、置換する必要があります(リストはかなり長くなる可能性がありますが、たとえば、ブラウザーのデフォルトはいくつかの要素のみで 100% とは異なります)。*input, textarea { font-size: 100% }font-size

もちろん、プロパティをブラウザのデフォルトと予想される値に設定することは可能です。これが、現在および将来のすべてのブラウザに望ましい効果をもたらすという保証はありません。ただし、プロパティや要素によっては、デフォルトが似ている傾向があるため、これは比較的安全な場合があります。

特に、HTML5 CR でセクションRenderingを使用する場合があります。それは「予想されるレンダリング」を説明しています - 要件ではありませんが、ブラウザ ベンダーは、必要に応じて、それらへの適合を主張することを決定することができます。一般的に、これにより、この点で実装がかなり類似した状態に保たれるでしょう。たとえばh1、予想される設定は次のとおりです (ここでは 1 つのルールにまとめます。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は設定に影響を与えると予想されます。)

于 2013-07-28T08:53:24.477 に答える
-1

デフォルトのスタイルは何らかの形でブラウザに依存しているため、デフォルトですべての要素をリセットしているわけではなく、ブラウザごとに異なります。のようなものを使用する代わりに、orul, ol { list-style: none; }のような CSS クラスを追加し、それがクラスを持つ である場合はリセットするか、そのままにしておいてくださいと指定します。rresetulr

ところで、class="reset"これらすべての要素に (たとえば) 追加する必要がありますが、これは余分な作業とコードですが、見返りとして、すべての既定のスタイルがそのまま残ります!

于 2012-12-21T07:47:41.113 に答える