web-dev-qa-db-ja.com

CSSリセット、共通要素のデフォルトスタイル

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

今、私が普通と言うとき、私は例えばを意味しますp要素は、使用時に結果のような間隔またはキャリッジリターン、またはh1タグのフォントのサイズと太さを間隔とともに追加します。

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

csscss-reset
50
public static

YUIは、すべての 'A-grade' ブラウザーで一貫したスタイルを提供するベースCSSファイルを提供します。また、CSSリセットファイルも提供されるため、これも使用できますが、すでにCSSをリセットしていると言います。詳細については、 YUI Webサイト にアクセスしてください。これは私が使用しているものであり、本当にうまく機能します。

35
Steven Oxley

CSSスタイルを適用する際のルールの1つは「最後の勝ち」です。つまり、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 などの使用を検討してください。

お使いのブラウザがデフォルトと考えるものを見つけるには、リストとビューを含むplainHTMLファイルを開きます Firebug のようなCSSデバッガーを使用してリストを表示し、Computedタブの下を確認します。

6
Jake Rayson

YUI（Yahooのオープンソースのユーザーインターフェイス規則）を調べてください。

独自のリセットCSSを取り消すベーススタイルシートがあります。彼らは実際に本番環境で使用することをお勧めしません-その生産性は逆になりますが、間違いなくファイルをチェックアウトして「元に戻す」ための関連するスニペットを取得する価値があるかもしれません。

40分間 talk を見て、速度を上げることをお勧めします。

以下に、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（undo）reset 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

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

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

2
Daniel James

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

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

1
Traingamer

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

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

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

特に、HTML5 CRのセクション Rendering を使用できます。ブラウザーベンダーは必要に応じて適合性を主張する場合がありますが、これは要件ではなく「予想されるレンダリング」について説明します。たとえば、h1の場合、予想される設定は次のとおりです（ここでは1つのルールにまとめられています。HTML5CRではそれらは散在しています）。

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

（追加のコンテキストルールがあります。たとえば、section内にh1をネストすると、設定に影響することが予想されます。）

0
Jukka K. Korpela