セミコロンの欠落
CSSルールは、セミコロンで区切られたプロパティ値の説明のペアで構成されます。 CSS仕様によると、最後の説明はセミコロンで終わらない場合があります。 ブレースは、すでに壁全体のようにルール全体を残りの部分から分離しています。 例：
body {
background-color: #444;
color: #eee
}
唯一の問題は、ルールに別の説明を追加することにした場合、最後の説明にセミコロンを入れるのを簡単に忘れることがあることです。
body {
background-color: #444;
color: #eee
font-family: Helvetica, Arial, sans-serif
}
そのため、フォントファミリの説明は機能しません。 パーサーは、colorプロパティの値の「font-family」部分を考慮します。 私は常に最後のセミコロンを入れます-それは何らかの形でコードに組織を追加します。 また、特にブラウザのキャッシュが有効になっている場合、cssファイルのサイズに数バイトの余分なバイトは大きな役割を果たしません。
逃したコロン
通常、このエラーは、CSSコードの作成ではなく、キーボードでの入力速度をトレーニングする場合に発生します。 このエラーは見にくいです。なぜなら、 行の中央にあります。 次の2行を比較してください。
body { font-family Helvetica, Arial, sans-serif; }
body { font-family: Helvetica, Arial, sans-serif; }
不足しているブレース
CSSルールを囲む{中括弧}は、ライフサイクルのようなもので、一定で、自然で、期待されています。 そして、あなたがブレースをスキップすると（通常は何らかの理由で閉じます）-死ぬことを拒否するミイラを持っているようなものです（はい、私は道化師と楽しい人を見ています） -あなたは混乱します。
疑いを持たないブラウザがこのペアのルールの解析に到達すると：
body {
font-family: Helvetica, Arial, sans-serif;
#wrap {
width: 960px; }
彼はただ窒息します。 2つの開きブレースと1つの閉じのみ：#wrapからのすべて（この例では）は無視されます。 ご覧のとおり、コードハイライトパーサーもタスクを完了できませんでした。
このようなエラーを修正するのは非常に簡単です-各閉じ規則に閉じ括弧があることを確認してください。 すでに述べたように、彼らはそれを置くことをほとんど忘れています。
cssプロパティの名前の入力ミス
一般的に言えば、私は有能な人です。 しかし、「処理中」のときは、指でこのタスクを処理するのと同じくらい速く入力します。もちろん、時々間違えます。 通常のコミュニケーションでは、間違いはそれほど重要ではありません。ほとんどの場合、私が言いたいことを人々が正確に判断できます。 残念ながら、コンピューターはもっと気まぐれです。
div { border-bototm: 5px; }
このようなエラーを追跡する最も簡単な方法は、コードを強調表示する方法を知っているエディターです（素晴らしいオープニングとアドバイス:)） 。 たとえば、 メモ帳++またはAdobe Dreamweaver。 プロパティが強調表示されていない場合は、構文エラーを意味します。
値のタイプミス
入力ミスは、プロパティ名にだけではありません。 値を書き込むときに発生することがあり、それらをキャッチするのが難しい場合があります。
#wrap { padding: 10px 20pz 25px 20px; }
ディメンションにタイプミスがあります-pxではなくpzです。 このため、ルール全体が機能しません。
クラス名またはIDのタイプミス
IDが「navigation」のdivを作成する頻度に関係なく、コードには次のルールがあります。
#navigaiton { float: left; }
この迷惑な間違いを見つけるのは非常に困難です。なぜなら、 エディターでコードを強調表示しても、ここでは役に立ちません。
このようなエラーを回避するために、CSSファイルを手動で編集するときにクラス名または識別子を入力することはほとんどありません。 htmlからCtrl + c、cssでctrl + v。
値の順序が正しくありません
一部のCSSプロパティは複雑です。 複数のプロパティの値を1行にスペースで区切って書き込むことができます。 残念ながら、これらのプロパティのほとんどは、値の順序を非常に要求しています。
div { font: 2em Helvetica, Arial, sans-serif; }
a { font: "Times New Roman", serif 1.5em; }
最初のルールは正しく、すべてのdivのテキストは特定のスタイルとサイズを取得します。 2番目のルールは間違っています。 プロパティの順序は守られません。
CSS仕様のこのようなプロパティの値の正しい順序について読むことができます。 ところで、私はいつもこの順序を混同しているので、私は通常そのようなプロパティをコピー＆ペーストで書きます。 どこかからコピー
ユニットなしの寸法
すべての測定プロパティには、測定単位を示す値が必要です。
#wrap { margin: 3; }
何の3つ？ Ems？ インチ？ ピクセル？
測定単位については、CSS仕様にも記載されています。
重複ルール
大きなcssファイルでは、同じ要素のルールが完全に見つかります。 最後の1つは常に機能します。インデントが2emではなく10pxであることに驚かないでください。
ul li { margin: 0 2em;
... ...
ul li { margin: 0; padding: 10px; }
競合するルール
まったく予期しない場合にも、同様の問題が発生する可能性があります。 たとえば、次のXHTMLがある場合：
<div id="navigation" class="nav">...</div>
この要素は、クラス名またはIDで参照できます。 クラスとIDの両方が参照されている場合、問題が発生します。
.nav { width: 50%; }
... ...
#navigation { width: 500px; }
前の段落のように、最後に適用可能なルールが機能します。
クラスをID（またはその逆）と呼びます
これはおそらく私の最も一般的な間違いです-私が混乱するたびに-ポイントまたはグリッドを入れてください:) ：
.navigation {
float: left;
width: 100%;
height: 4em; }
そして何も起こりません 要素にはid = navigationがあり、クラスではありません。
存在しないプロパティを使用する
すべてのCSSプロパティに直感的な名前が付けられるわけではありません。 例：
body { text-size: 3em; }
問題は、プロパティがテキストプロパティに属しているように見えても、font-sizeが使用されることです。 もちろん、ここでは、強調表示のオプションを備えたコードエディターが再び役立ちます。
存在しない値を使用する
エラーは前のエラーに似ています：
td { vertical-align: center; }
このようなエラーを回避するために、仕様を慎重に検討します。
プロパティと値の不一致
このCSS定義は、訓練された目でも正しいように見えるかもしれません。
a { text-transform: italic; }
ただし、正しい値に誤って正しい値が割り当てられていることがわかります。
閉じられていないコメント
cssが気に入らないのは、1行のコメントがないことです。
これら2つの説明の違いを見つけることができますか？
/* Navigation goes here. */
#nav {
float: left;
width: 100%;
height: 3em; }
/* Navigation goes here. /*
#nav {
float: left;
width: 100%;
height: 3em; }
唯一の違いは、2番目のルールでは、終了コメント文字が次のとおりであることです：* /の代わりに/ *。 したがって、2番目のルール全体がコメント化されます。
自分から追加します：
マージン、パディングの複雑なプロパティの短い記述の誤解に関連するエラーがまだあります。
正しいスペルの例を次に示します。
div#mark {
margin: 0;
margin: 0 10px;
margin: 0 10px 6px;
margin: 8px 12px 10px 8px;
}
そのため、このプロパティの値の一般的な形式は次のとおりです。
マージン：[上] [右] [下] [左];
すべての値が示されていない場合、次のルールが適用されます
マージン：[トップ] =マージン：[トップ] [トップ] [トップ] [トップ]; マージン：[上] [右] =マージン：[上] [右] [上] [右]; マージン：[上] [右] [下] =マージン：[上] [右] [下] [右];
つまり 前の例は同じです
div#mark {
margin: 0 0 0 0;
margin: 0 10px 0 10px;
margin: 0 10px 6px 10px;
margin: 8px 12px 10px 8px;
}
ゼロでは、測定単位はオプションであり、論理的です-すべてがゼロ単位に等しいのではないですか？
ご清聴ありがとうございました。 ドキュメントを読む:)
私のサイトからのクロスポスト（プロフィールを参照）