実用的なCSSの一般的な問題とスキルの概要

1. CSSの略語を適切に使用すると、ページファイルのサイズを縮小し、ダウンロード速度を上げ、コードを読むだけです。
のように：

div {
ボーダートップ：1pxソリッド#ccccccc;
国境左：1PX SOLID #CCCCCCC;
国境右：1px soli #ccccccc;
国境圏：1PX SOLID #CCCCCCC;
}

と書くことができます

p {border：1px solid #ccccccc}

別の例：

div {
マージントップ：10px;
マージン右：20px;
マージンボトム：30px;
マージンヘフト：40px;
}

次のように書き直すことができます

/*書き込み、右、下、左に書き留める順序に注意してください*/
div {マージン：10px 20px 30px 40px}
/*値とユニットにはスペースがなく、スペースが各値の間のスペースによって区切られていることに注意してください*/

（詳細については、参照してください：CSS2リファレンスマニュアル、一般的に使用されるCSS略語の概要）

2. HTML要素のクラス属性の複数のルールを同時に設定できます（複数のクラス定義）。
通常、私たちは書きます：

実際、次のようなP要素の複数のルールを指定できます。

CSS：
.a {...}
.b {…。}
HTML：

この要素には、AとBに設定されたスタイルも含まれています

注：複数のルール間のスペースと分離します。

3.値が0でない限り、ユニットを明確にします
サイズを定義するのを忘れたことは、CSS初心者の一般的な問題です。 htmlでwidth = "100"を記述できますが、CSSで正確なユニットを指定する必要があります。など：幅：100px; 0値のサイズは等しい。

注：数値と単位の間に空のグリッドを追加しないでください。

4. XHTMLの差別化された原稿は、クラスとIDの値も区別しています。
＃aaaとは異なります。
#AAAがCSSで定義されている場合、それを適用するためにHTML要素でAAAを使用すると、#AAAで定義されたスタイルを取得できません。
例コード：

CSS：
#aaa {border：1px solid #ccc}
HTML：

1ピクセルのエッジラインを表示できません

5。CSSの最近の優先原則要素で複数のスタイルを定義すると、最新の最初のレベルの最初のレベルスタイルは他のスタイルで定義されます。
のように：

CSS：
p {色：赤}
.blue {color：blue}
.yllow {color：Yellow}
HTML：

これはここで赤を示しています

これはここで青を示しています

ここでは緑を示しています

これが黄色です

知らせ：
（1）スタイルのいくつかの優先順位シーケンスに注意を払ってください（優先度が上から下に減少します）：
- ネールスタイルの設定
- ヘッドエリア設定
- 外部参照CSSファイル（2）優先度はアクセスの順序で設定されていませんが、CSSの順序は設定されています。
上記の例に示すように、黄色を示しています

.yllowが背後にあるため、黄色として表示されます。

6。サブセレクターを使用してIDとクラスを削減するための定義、例：

＃含む {..}
#contain_ul {...}
.contail_li {...}

に変更できます：

＃含む {..}
#containul {...}
.contain ul li {...}

7.背景を変更して背景画像パスを追加しないでください。
一部のブラウザに引​​用符を追加するとエラーが発生する可能性があるためです。

8。背景画像のパスは、現在のCSSページに関連しています。

例えば：
これは、次のディレクトリ構造イメージです
-xxx.gif
-CSS
-xx.css
-ddex.html
コードコンテンツ
index.htmlはxx.cssファイルを参照します。
XX.CSSは、XXX.GIFの写真を引用したいと考えています。

9. H1、H2、H3、Divなどの同じスタイルを適用するための異なる要素の使用{font-weight：16px;
次に、H1、H2、H3、Div要素はすべて16ピクセル、厚いフォントです

10。CSSとのリンクのさまざまな状態を定義する場合は、執筆注文に注意してください。
この順序で書いていない場合、希望の効果を達成できない可能性があります。この順序を覚えておくために、各単語の最初の文字を抽出します。LVHA、あなたは記憶の愛、ヒーロー、2つの単語による順序を覚えています。

11.禁止されたコンテンツの変更とテーブルまたはレイヤーの強制コンテンツの変更は、コンテンツが変更されたり、いくつかのCSS属性を変更したりすることを望んでいることを願っています。
変更が禁じられている：ホワイトスペース：Nowrap
強制変更：Word-wrap：break-break：正常;

12。違い
絶対に、CSSでの執筆は、絶対的なポジショニングを意味します親レベルのポイントは、元のポイントとして入札します。 TRBLが設定され、親レベルが位置属性を設定しない場合、現在の絶対はブラウザの左上隅にある元のポイントで配置され、位置はTRBLによって決定されます。

親relativeは次のとおりです親レベルのパディングなど、現在のレベルの現在のレベルは、親コンテンツ領域の元のポイントを参照して配置されます。

13。差動divとスパン
Divは、異なるコンテンツを配置するための段落、テーブル、その他のコンテンツを含むことができるブロックレベルの要素です。通常、Webページ上のすべてのブロックをレイアウトして、Webページ内のすべてのブロックをレイアウトします。
SPANは、実用的な意味を持たない内部の要素です。

14。差動ディスプレイと可視性
ディスプレイ：なしと可視性：非表示には要素を隠すことができますが、可視性：Hiddenは要素の内容を隠すだけですが、使用される位置空間はまだ保持されます。
表示：ページから完全に削除されるものはなく、その職業位置も削除されます。