CSS がブラウザのデフォルト スタイルを処理する方法

今回は、CSS がブラウザのデフォルト スタイルを処理する方法を説明します。CSS がブラウザのデフォルト スタイルを処理する際の注意点は次のとおりです。

見つけました最近、Webページのフォーマットを調整していたら、Webページの下部に常に10ピクセルほどのスペースがあることに気づきました。

Chrome ブラウザの review 要素を使用すると、フォーム全体のマージン ボタンを設定するユーザー エージェント スタイルシートがあることがわかりました: 1em;

インターネットで検索すると、これを見つけましたユーザー エージェント スタイルシートは、ブラウザー スタイルのデフォルト設定の一部です。このデフォルトのスタイルに満足できない場合、最も簡単な解決策は、スタイルの属性をリセットすることです。ユーザー エージェント スタイルシートの優先度は非常に低く、上書きされるため、ここではスタイルには影響しません。フォームについて話します。

margin-bottom

は 0px に設定されています。

ユーザー エージェント スタイルシートの紹介 ブラウザーが異なれば、同じ要素のデフォルト スタイルも異なります。そのため、CSS の先頭に * {padding:0;marging:0} と書きます。

しかし、今はそれですすべてではない。基本的に、カーネルが異なる 2 つのブラウザでは、インデント サイズ、フォントの選択、文字スタイルなど、特定の要素のパフォーマンスに違いがあります。おそらく、あるブラウザでは美しい CSS スタイル シートがうまく機能するのに、CSS のバグがなくても別のブラウザでは乱雑になるのは、ブラウザのデフォルト スタイルのせいだと思います。

したがって、CSS スタイル ルールを生成するときに必要な手順の 1 つは、ブラウザーのデフォルト スタイルをリセットすること、つまりブラウザーのデフォルト スタイルを上書きすることです。 * {padding:0;margin:0} を使用するのとは異なり、すべての要素でパディングとマージンに違いがあるわけではありません (Internet Xplorer と Firefox における要素リストと順序付きリストの違いは、マージン インデントとパディング インデントのインデントによるものです)。

たとえば、次の段落:

Internet Explorer でこのコードで使用されるフォントは Times New Roman ですが、Firefox と Opera ではシステムのデフォルト フォントが使用されます。そのため、

についてはCSSで統一したスタイルを設定する必要があります。

ただし、* {padding:0;margin:0} を使用するように単純にグローバル スタイルを設定するためにワイルドカード "*" を使用すると、フォーム要素、入力要素、テキストエリアなどの明らかな問題が発生します。さらに重要なのは、これらの要素の外観が著しく損なわれるため、それらのパディング値とマージン値を 1 つずつ手動でリセットする必要があることです。したがって、単純に「*」を使用することをあきらめて、 body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4 ,h5,h6,pre などの一貫性のないパフォーマンスを持つ最初の要素をリセットする必要があります。等

同時に、要素のデフォルトのスタイルはページの外観を台無しにする可能性があります。たとえば、 要素はテキストを太字にし、

はテキストをインデントし、 要素はテキストを傾けます。などです。ページ テキストの外観に一貫性を持たせる必要がある場合は、次のようにします。 CSS リセットでこれらの要素の外観も変更する必要があります。同時に、これらの要素の外観が親要素と同じである必要がある場合は、inherit を直接使用して親要素から継承できます。

処理方法どの要素をリセットするべきか？ Yahoo!さんが比較まとめをしてくれました。 Yahoo の提案によると、これらのルールを Reset.css というファイルに入れて、個別に参照する必要があります (これが推奨されます):

html{color:#000;background:#FFF;} 
body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form, 
fieldset,input,textarea,p,blockquote,th,td { 
margin:0; 
padding:0; 
} 
table { 
border-collapse:collapse; 
border-spacing:0; 
} 
fieldset,img { 
border:0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
font-style:normal; 
font-weight:normal; 
} 
ol,ul { 
list-style:none; 
} 
caption,th { 
text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
font-size:100%; 
font-weight:normal; 
} 
q:before,q:after { 
content:''; 
} 
abbr,acronym { border:0; 
}

必要なのは、これらのルールをreset.cssに保存するだけです。ページ。これらの要素に新しいスタイルを追加する必要がある場合、それは他の要素の設定と何ら変わりません。

注: 上記のreset.cssのInput、textarea、select{*font-size:100%;}は、Internet Explorerでのみ認識できます。この設定は、インターネットでフォームコントロールのフォントを拡大縮小できるようにするためのものです。エクスプローラーのサイズ。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

HTML+CSSを使用してドロップダウンメニューを実装します

CSS3を使用してプログレスバーを作成します

以上がCSS がブラウザのデフォルト スタイルを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。