長年集めた18のCSSスキル_体験交流

最近、仕事で遭遇する CSS の問題について友人からよく質問されます。彼らは常に CSS をうまく制御できず、CSS の効率に影響を与えます。誰もが CSS をより簡単に使用できるように、エラーを分析してまとめてみましょう。

この記事では、私が CSS レイアウト手法を使い始めてから学んだすべてのテクニックと互換性解決策をまとめています。これらを皆さん​​と共有したいと思います。特に、初心者がよく犯す間違い (私が犯したものを含む) について説明します。すでに CSS マスターである場合は、これらの経験とスキルをすでにご存知かもしれません。さらにお持ちの場合は、それらを追加するのを手伝っていただければ幸いです。
1. CSS 略語を使用する

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 略語の主なルールについては、ここでは説明しませんので「一般的な CSS 略語構文の概要」を参照してください。
2. 値が 0 でない場合は、単位を明確に定義します。

CSS 初心者によくある間違いは、サイズの単位を定義することです。 HTML では width="100" と記述するだけで済みますが、CSS では width:100px width:100em のように正確な単位を指定する必要があります。単位を定義しない場合の例外は、行の高さと 0 の値の 2 つだけです。また、単位の後には他の値を指定する必要があります。値と単位の間にスペースを入れないように注意してください。
3. 大文字と小文字を区別する

XHTML で CSS を使用する場合、CSS で定義された要素名は大文字と小文字が区別されます。このエラーを回避するには、すべての定義名に小文字を使用することをお勧めします。

HTML と XHTML では class と id の値も大文字と小文字が区別されます。大文字と小文字を混合して使用する必要がある場合は、CSS での定義が XHTML のタグと一致していることを注意深く確認してください。
4. クラスと ID の前に要素の修飾を解除する

要素のクラスまたは ID を定義するように記述する場合、ID が含まれているため、前の要素の修飾を省略できます。ページは一意ですが、クラス s はページ上で複数回使用できます。要素を修飾することは意味がありません。例:
div#content { /* 宣言 */ }
fieldset.details { /* 宣言 */ }

は、
#content { /* 宣言 */ として記述できます。 }
.details { /* 宣言 */ }

これにより、バイト数を節約できます。
5. デフォルト値

通常、padding のデフォルト値は 0 で、background-color のデフォルト値は透明です。ただし、デフォルト値はブラウザによって異なる場合があります。競合が心配な場合は、次のように、スタイル シートの先頭ですべての要素のマージンとパディングの値を 0 として定義できます。
* {
margin:0; 0;
}

6. 継承可能な値を繰り返し定義する必要がない
CSS では、子要素は親要素の属性値を自動的に継承します親要素に既に存在する色やフォントなど。一度定義すると、繰り返し定義することなく子要素に直接継承できます。ただし、ブラウザーがいくつかのデフォルト値で定義をオーバーライドする可能性があることに注意してください。

7. 最も近い優先の原則
同じ要素の定義が複数ある場合、最も近い (最小レベルの) 定義が優先されます。 たとえば、次のようなコードがあります。

更新: Lorem ipsum dolor set

CSS ファイルで、要素 p とクラス「update」を定義しました。
p {
margin:1em 0 ; >フォントサイズ:1em;
カラー:#333;
.update {
フォントの太さ:#600;

これら 2 つの定義では、class が p よりも近いため、class="update" が使用されます。詳細については、W3C の「セレクターの特異性の計算」を参照してください。

8. 複数のクラス定義


タグは同時に複数のクラスを定義できます。例: まず 2 つのスタイルを定義します。最初のスタイルの背景は #666、2 番目のスタイルの境界線は 10 ピクセルです。
.one{width:200px;background:#666;} .two{border:10px Solid #F00;}
ページのコードでは、



最終的な表示効果は、この div に #666 の背景と 10 ピクセルの境界線の両方があることです。はい、これは可能です、試してみてください。

9. 子孫セレクターを使用する

CSS 初心者は、子孫セレクターの使用が効率に影響を与える理由の 1 つであることを知りません。サブセレクターは、多くのクラス定義を保存するのに役立ちます。次のコードを見てみましょう:




Item 1

>

• Item 1


• 項目 1


• 
  
  このコードの CSS 定義は次のとおりです:
  div#subnav ul { /* スタイリング */ }
  div#subnav ul li.subnavitem { /* スタイリング */ }
  div#subnav ul li.subnavitem a.subnavitem { /* スタイリング */ }
  div#subnav ul li.subnavitemselected { /* スタイリング */ }
  div#subnav ul li.subnavitemelected a.subnavitemselected { /* いくつかのスタイリング */ }
  
  次のメソッドを使用して上記のコードを置き換えることができます
  
  
  
  • 項目 1
  
  
  • 項目 1
  
  
  • 項目 1
  
  
  
  
  スタイル定義は次のとおりです:
  # subnav { /* 一部のスタイリング */ }
  #subnav li { /* 一部のスタイリング */ }
  #subnav a { /* 一部のスタイリング */ }
  #subnav .sel { /* 一部スタイリング * / }
  #subnav .sel a { /* いくつかのスタイリング */ }
  
  サブセレクターを使用すると、コードと CSS がより簡潔で読みやすくなります。
  10. 背景画像のパスに引用符を追加する必要はありません
  
  バイト数を節約するには、背景画像のパスに引用符を追加しないことをお勧めします。必要。例:
  background:url("images/***.gif") #333;
  
  は
  background:url(images/***.gif) #333;
  
  として記述することができます。引用符を追加すると、
  11. グループ セレクター
  
  一部の要素タイプ、クラス、または ID に共通の属性がある場合に、これを使用して、複数の定義を回避できます。
  
  例: すべてのタイトルのフォント、色、マージンを定義するには、次のように記述します:
  h1,h2,h3 {
  font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
  color:#333;
  margin:1em 0;
  
  個別の要素がある場合使用時に独立したスタイルを定義する必要がある場合は、次のように新しい定義を追加するか、古い定義を上書きします。
  h1 { font-size:2em; }
  
  12. 正しい順序でリンク スタイルを指定します。
  CSS を使用してリンクの複数の状態スタイルを定義する場合は、正しい順序に注意してください。 :link :visited :hover :active です。抽出された最初の文字は「LVHA」です。Eric Meyer の「Link Specificity」を参照してください。 >
  ユーザーがキーボード コントロールを使用する必要があり、現在のリンクのフォーカスを知る必要がある場合は、:focus 属性を定義することもできます (位置の記述内容によっても異なります)。フォーカス要素に :hover 効果を表示させたい場合は、 :focus を :hover の前に置きます。 フォーカス効果を :hover 効果に置き換えたい場合は、 :focus を :hover の後に置きます。
  非常に一般的な CSS の問題は、位置決めにフローティングが使用されている場合、下位レイヤーがフローティング レイヤーで覆われているか、レイヤー内にネストされているサブレイヤーが外側のレイヤーを超えていることです。通常の解決策は、div や br などの追加の要素をフローティング レイヤーの後に追加し、そのスタイルを明確に定義することです。この方法は少し突飛ですが、幸いなことに、良い解決策が見つかります。この記事「構造マークアップなしでフロートをクリアする方法」 (注: このサイトはこの記事をできるだけ早く翻訳します)。
  
  上記の 2 つの方法は、フローティング オーバーフローの問題を非常にうまく解決できますが、レイヤーまたはレイヤー内のオブジェクトを本当にクリアする必要がある場合はどうすればよいでしょうか?簡単な方法は、オーバーフロー属性を使用することです。この方法はもともと「フロートの単純なクリア」で公開され、「クリアランス」および「フロートの超簡単なクリア」で広く議論されています。
  上記のどの明確な方法があなたに適していますか?それは特定の状況によって異なるため、ここでは説明しません。さらに、フロートの適用については、いくつかの優れた記事で明確に説明されています。「フロートのチュートリアル」、「フロートの内容」、「フロートのレイアウト」
  14 を参照することをお勧めします。
  
  
  これは簡単なトリックですが、次のような初心者の質問が多すぎるため、もう一度言う価値があります: CSS を水平方向に中央揃えにする方法は?レイアウトがレイヤー (コンテナー) に含まれている場合は、次のように要素の幅を定義し、水平方向の余白を定義する必要があります。
  
  水平方向に中央揃えにするには、次のように定義できます。 #wrap {
  width:760px; /* レイヤーの幅に変更します*/
  margin:0 auto;
  }
  ただし、IE5/Win ではこの定義を正しく表示できません。解決するための非常に役立つトリック: text-align 属性を使用します。Like this:
  body {
  text-align:center;
  }
  #wrap {
  width:760px; /* Change to the width of your layer */
  margin :0 auto;
  text-align:left;
  }
  
  The first body’s text-align:center; rule defines that all elements of the body in IE5/Win are centered (other browsers just Center the text), the second text-align:left; is to center the text in #warp to the left.
  15. Import and hide CSS
  
  Because older browsers do not support CSS, a common approach is to use the @import technique to hide CSS. For example:
  @import url("main.css");
  
  However, this method does not work for IE4, which gave me a headache for a while. Later, I wrote it like this:
  @import "main.css";
  
  This way I can hide CSS in IE4. Haha, I also saved 5 bytes. If you want to know the detailed explanation of @import syntax, you can see here "centricle's css filter chart"
  16. Optimization for IE
  
  Sometimes, you need to optimize the IE browser Bugs define some special rules. There are too many CSS hacks here. I only use two of them. Regardless of whether Microsoft supports CSS better in the upcoming IE7 beta version, these two methods are The safest.
  
  * 1. Comment method
  o (a) To hide a CSS definition in IE, you can use a child selector:
  html>body p {
  / * Definition content */
                                                                                                                                                                                                                                                                       ​>                                                                                                                        ( 🎜>       declarations
                                                                                                                      Use Microsoft's private attribute conditional comments (conditional comments). Using this method you can define some styles separately for IE without affecting the definition of the main style sheet. Like this:
  
  
  
  
  
  
  
  
  17. Debugging Tips: How big are the layers?
  
  
  When an error occurs when debugging CSS, you have to be like a typewriter and analyze the CSS code line by line. I usually define a background color on the layer in question so it's obvious how much space the layer takes up. Some people suggest using border, which is generally possible, but the problem is that sometimes border will increase the size of the element, and border-top and boeder-bottom will destroy the vertical margin value, so it is safer to use background.
  
  When writing CSS code, everyone has their own writing habits for indentation, line breaks, and spaces. After constant practice, I decided to use the following writing style:
  selector1, selector2 {
  property:value; }
  
  When using union definitions, I usually Write each selector on its own line so it's easier to find them in the CSS file. Add a space between the last selector and the curly braces {. Also write each definition on its own line. The semicolon should be placed directly after the attribute value. Do not add spaces.
  
  I am used to adding a semicolon after each attribute value. Although the rules allow you to leave out the semicolon after the last attribute value, it is easy to forget to add the semicolon when you want to add a new style. Error, so it’s better to add them all. Finally, the closing brace} is written on a line by itself.