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

php中世界最好的语言

リリース： 2018-03-22 09:44:20

オリジナル

2338 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。