2. SEO最適化に有利なDIV+CSS命名ルールまとめ_html/css_WEB-ITnose

1. CSS ファイルの命名規則

グローバル スタイル: global.css;

フォント スタイル: font.css;

印刷スタイル: print.css;

2. CSS スタイルの命名規則

私の提案: 文字、_ 記号、- 記号、数字を使用する必要があります。純粋な数字は使用できません。開発後のスタイル名の管理を容易にするために、同僚がこのスタイルがスタイルのどの部分に属するかを一目で理解できるように、意味のある単語や略語の組み合わせを使用して名前を付けてください。これにより、スタイルを検索する時間が節約されます。例:
ヘッダースタイル header を使用します。ヘッダーの左側、header_left または header_l を使用できます。列構造の場合は次のようになります。 box_1of3 (3 列の最初の列)、box_2of3 ( 3 列の 2 列目)、box _3of3 (3 列の 3 列目)、その他の例を 1 つずつ挙げるつもりはありません。上記の規則に従って名前を付けるだけです。

以下は、みんなの便宜のために、一般的に使用されるいくつかの名前付き単語のリストです: (将来的には、誰もが仕事中に蓄積した言葉をゆっくりと共有するでしょう。そうすれば、みんなの人生はより統一され、これ以上の意味や複数の言葉はなくなります) )

コンテナ: コンテナ/ボックス
ヘッダー: ヘッダー
メインナビゲーション: mainNav

サブナビゲーション: subNav

Web サイトのロゴ: ロゴ
ページの中央: mainBody
Bottom : フッター
メニュー: menu
メニュー内容: menuContent
サブメニュー: subMenu
サブメニュー内容: subMenuContent
検索: 検索
検索キーワード: キーワード
検索範囲: 範囲
タグテキスト: tagTitle
タグ内容: tagContent
現在のタグ: tagCurrent/ currentTag
Title: タイトル
Content: コンテンツ
List: リスト
現在の場所: currentPath
Sidebar: サイドバー
Icon: アイコン
Note: note
Login: ログイン
Register: register
列定義: column_1of3 (3 つの列の最初の列)
column_2of3 (3 つの列の 2 番目)
column_3of3 (3 つの列の 3 番目)


2. id と class の使用法と違い


現時点では、スタイル シートでスタイルを定義することができます。 ID またはクラスを定義します。例:
ID メソッド: #test{color:#333333}、ページで呼び出されます

コンテンツ

CLASS メソッド: .test{color:#333333}、ページで呼び出されます

コンテンツ

id はページ上で 1 回のみ使用でき、class は複数回参照できます。

同じIDを複数使用したところ、IEでは正常に表示されましたが、IDとクラスに違いはないようです。

ページ上に同一の ID が複数ある場合、ページは W3 検証に合格しません。

ページの表示に関しては、現在のブラウザでは依然としてこの間違いが許容されており、複数の同一 ID を使用すると、「通常の状況では」正常に表示される可能性があります。ただし、JavaScript を使用して ID を通じてこの div を制御する必要がある場合、エラーが発生します。
id は、名前と同じように、異なる構造とコンテンツを区別するために使用されるタグです。同じ名前を持つ 2 人がルームにいる場合、混乱が発生します。

class は、どの構造とコンテンツにも適用できるスタイルです。あなたの名前と同じように、

概念的に言うと、それらは異なります。
id は最初に構造/コンテンツを見つけてから、そのスタイルを定義してからそれを適用します。複数の構造/コンテンツに。
つまり、XHML+CSS を記述するとき、それが 1 次元の構造的位置決めである場合は id を使用し、それ以外の場合は class を使用することをお勧めします (これにより、非構造的位置決め div ブロックの ID はプログラマーが定義および定義できるようになります)独自に使用してください)
web この標準は、誰もが厳密な習慣に従ってコードを書くことを望んでいます。



3. CSS の略語を使用します

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。一般的に使用される CSS 略語の主なルール:
Color
16 進数のカラー値は、各 2 桁の値が同じ場合、半分に省略できます。たとえば、
#000000 は #000 に省略できます。 #369; と省略できます。
ボックス サイズ
には、通常、次の 4 つの記述方法があります:
property:value1; は、すべてのエッジが value1 であることを意味します。 value1、左右の値がvalue2
property:value1 value2 value3; 上の値がvalue1、右と左の値がvalue2、下の値がvalue3という意味です
property:value1 value2 value3 value4; 4 つの値は順番に上、右、下、左を表します
時計回り、右上、左下と覚えておくと便利です。マージンとパディングの具体的な適用例は次のとおりです。
margin:1em 0 2em 0.5em;
border (ボーダー)
ボーダーのプロパティは次のとおりです。
border-color:# 000;
は 1 つの文に省略できます: border:1px Solid #000;
構文は border:width style color; です
背景 (背景)
背景のプロパティは次のとおりです: -color:#f00;
background-image:url(background.gif);
background-attachment:fixed;
は 1 つの文に省略できます。 background:#f00 url(background.gif) no-repeat fixed 0 0;
構文は、background:color imagerepeatattachmentposition です。
1 つ以上の属性値を省略できます。省略した場合、属性値は を使用します。ブラウザのデフォルト値は次のとおりです:
color: 透明
image: none
repeat: 繰り返し
attachment: スクロール
position: 0% 0%
フォント (フォント)
フォントの属性は次のとおりです:
font-style :italic;
font-variant:small-caps;
font-size:1em;
font-family:'Lucida Grande'、サンセリフ;フォント定義を省略する場合は、少なくとも 2 つの値 (font-size と font-) を定義する必要があることに注意してください。家族。
リスト
デフォルトのドットとシリアル番号をキャンセルするには、list-style:none;
list-style-type:square;
list-style-position:inside; と記述します。 -image:url(image.gif);
は 1 つの文に省略できます: list-style:square inside url(image.gif);


4 値が 0 でない限り、単位を明確に定義します


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


5. 大文字と小文字の区別


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

class と id の値は、HTML と XHTML でも大文字と小文字が区別されます。大文字と小文字を混合して使用する必要がある場合は、CSS での定義が XHTML のタグと一致していることを注意深く確認してください。

6. class と id の前に要素の修飾を解除します

要素の class または id を定義するように記述する場合、ID はページ内で一意であり、class はページ内に存在する可能性があるため、前の要素の修飾を省略できます。ページを何度も使用します。要素を修飾することは意味がありません。例:

div#id1{} は #id1{} と書くことができます
これにより、バイト数を節約できます。

7. デフォルト値

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

padding:0

}
または次のように定義します。特定の要素に対して :
padding:0;
margin:0

}

8. CSS の優先順位

ID セレクター > )、擬似クラス (擬似クラス) および属性 (属性) セレクター> カテゴリ (タイプ)、擬似オブジェクト (擬似要素)
説明:
*インライン スタイル (インライン スタイル): 要素のスタイル属性。
としてここで、 color: red; はインライン スタイルです
*ID セレクター: 要素の id 属性。たとえば、ID セレクター #content を使用できます
*pseudo-class: 最も一般的なのはアンカー (a) です。 class、たとえば、a:link、a:visited
*属性セレクター: たとえば、クラスデモを持つ div 要素を含む div[class=demo]
*タイプセレクター: div .demo などの HTML タグの選択div 要素には、クラス デモ
* の要素が含まれています。 疑似要素セレクター: たとえば、div:first-letter、div 要素の下の最初の単語。

9. 継承可能な値を繰り返し定義する必要はありません

CSS では、子要素は親要素の色やフォントなどの属性値を自動的に継承します。親要素で定義されたものは、子要素で直接継承でき、親要素の属性値を使用して現在の要素のスタイルを変更しない限り、再度定義する必要はありません。ただし、ブラウザーに注意してください。定義をいくつかのデフォルト値で上書きする可能性があります。

10. 複数の CSS スタイル定義、属性の追加と複製、最終優先原則

1 つのタグで複数のクラスを同時に定義したり、同じクラス内で属性を繰り返し定義したりできます。例:
最初に 2 つのスタイルを定義します
.one{width:200px;background:url(1.jpg) no-repeat left top;}
.two{border:10px Solid background:url(2.jpg) ) no-repeat left top;}
ページのコードでは、次のように呼び出すことができます:

この div スタイルの最終的な表示効果は何ですか? ?重複しているのはどれですか? ?
適用されるスタイルは次のとおりです:
width:200px;
border:10px Solid #000;
background:url(2.jpg) no-repeat left top;
2 つ以上のスタイルが適用されると、適用されるスタイルは、属性の追加と複製の最終優先の原則に基づいています。つまり、2 つ以上のスタイル名が定義されている場合、ブラウザによって適用されるスタイルは、繰り返しの属性値が定義されている順序になります。 2 つ以上のスタイル名が適用される場合、繰り返し定義されていない属性値が追加され、繰り返し定義された属性値が適用されます。最後の一つ。ここで注意すべき点は、スタイルの順序は、ページに適用されている名前の順序ではなく、スタイル シート内のスタイルの順序に基づくということです。

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

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

http://duote.com/# class='subnavitem'>Item 1> item 1 item 1

このコードの CSS 定義は次のとおりです:
div#subnav ul {}
Div#Subnav ul li.subnavitem {}
Div#Subnav Ul Li.Subnavitem a.Subnavitem {}
Div#SUBNAV Ul Li.SubnavitemSeleCted {}




div 以下のメソッドを使用して置き換えることができます上記のコード


スタイル定義は次のとおりです:
#subnav { }
#subnav li { }
#subnav a { }
#subnav .sel { }
#subnav .sel a { }
子セレクターを使用すると、コードと CSS がすっきりして読みやすくなります。
コンテナ内に同一の要素が複数あり、それらの要素のスタイルが異なる場合は、このメソッドの使用を避け、次のような別のクラスを使用してください:

12. 背景画像を与える必要はありません。パス 引用符を追加します


引用符は必要ないため、バイト数を節約するには、背景画像のパスに引用符を追加しないことをお勧めします。例:
background-image:url(“images
margin:0 auto;
}
しかし、IE5/Win はこの定義を正しく表示できません。これを解決するために、非常に便利なトリックを使用します。text-align 属性を使用します。これ:
body {
text-align:center;
#wrap {
width:760px;
text-align:left;
text-align:center; body IE5/Win では本文のすべての要素が中央に配置されます (他のブラウザではテキストが中央に配置されます)。2 番目の text-align:left; は #warp でテキストを中央に配置します

13. CSS をインポートして非表示にします

古いブラウザは CSS をサポートしていないため、一般的なアプローチは @import テクニックを使用して CSS を非表示にすることです。例:
@import url(main.css);
ただし、この方法は IE4 では機能しないため、しばらく頭が痛くなりました。後で、次のように書きました:
@import main.css;
これで、IE4 で CSS を非表示にすることができます。笑、また 5 バイト節約できました。 @import 構文の詳細な説明を知りたい場合は、「centricle の CSS フィルター チャート」を参照してください

14. CSS ハック

場合によっては、IE ブラウザのバグに対していくつかの特別なルールを定義する必要があります。ここには多くの CSS ハックがありますが、Microsoft が今後の IE7 ベータ版で CSS をより適切にサポートするかどうかに関係なく、これら 2 つの方法が最も安全です。
1. コメントメソッド
(a) IE で CSS 定義を非表示にするには、子セレクターを使用できます:
html>body p {
}
(b) 以下の記述メソッドは、IE ブラウザーでのみ理解できます (Hide from他のブラウザ)
* html p {
}
(c) 場合によっては、IE/Win をアクティブにして IE/Mac を非表示にしたい場合は、バックスラッシュ トリックを使用できます:
* html p {
宣言
}
( d) 以下の記述方法は IE7 ブラウザでのみ理解可能です (他のブラウザからは隠されています)
*+ html p {
}
2. 条件付きコメントの方法

もう一つの方法は、CSS Hacks よりも実績のある方法だと思います。 Microsoft のプライベート属性の条件付きコメント (条件付きコメント) を使用します。この方法を使用すると、メインのスタイル シートの定義に影響を与えることなく、IE 用にいくつかのスタイルを個別に定義できます。このようにしてください:

http://www.duote.com/style/ie.css' />

オンラインで見つけることができる CSS ハックは他にもたくさんあります。 w3c 標準に準拠していないため、IE6、IE7、FF を区別でき、w3c 標準に準拠できるスタイルを上記のハックに基づいて作成しました。 コードは次のとおりです。 width:100px;}
* +html .classname {width:95px! important;}
このように書くと、幅はIE6では100px、IE7では95px、Firefoxでは90pxになります。

15. デバッグスキル: レイヤーの大きさはどれくらいですか?

CSS のデバッグ中にエラーが発生した場合、植字作業者のように CSS コードを 1 行ずつ分析する必要があります。通常、レイヤーがどれだけのスペースを占めるかが明らかになるように、問題のレイヤーに背景色を定義します。一般的には可能な border の使用を推奨する人もいますが、問題は、border によって要素のサイズが大きくなる場合があり、border-top と boeder-bottom によって垂直マージンの値が破壊されるため、background を使用する方が安全です。
問題を引き起こすことが多いもう 1 つの属性は、アウトラインです。アウトラインはボーダーのように見えますが、要素のサイズや位置には影響しません。アウトライン属性をサポートしているブラウザはわずかで、私が知っているのは Safari、OmniWeb、Opera だけです。

16. CSS コードの書き方
CSS コードを書くとき、インデント、改行、スペースについては誰もが独自の書き方の習慣を持っています。継続的な練習の結果、次の記述スタイルを採用することにしました:
.classname {
width:100px;
}
ジョイント定義を使用する場合、通常は各セレクターを別の行に記述します。これにより、CSS ファイルに含めやすくなります。それらを見つけます。最後のセレクターと中括弧 { の間にスペースを追加します。また、各定義を属性値の直後に記述します。スペースは追加しないでください。
各属性値の後にセミコロンを追加することに慣れていますが、ルールでは最後の属性値の後にセミコロンを記述しないことができますが、新しいスタイルを追加する場合は、セミコロンを追加することを忘れがちです。エラーなので、そのまま追加した方が良いです。
最後に、閉じ中括弧} が単独で行に記述されます。スペースと改行は読みやすくします。