1. CSS の略語をうまく活用すると、ページ ファイルのサイズが削減され、ダウンロード速度が向上し、コードが簡潔で読みやすくなります。
のように：
ディブ{
ボーダートップ:1px ソリッド #cccccc;
ボーダー左:1px ソリッド #cccccc;
ボーダー右:1px ソリ #cccccc;
ボーダーボトム:1px ソリッド #cccccc;
} は
次のように書くことができます
p{border:1px Solid #cccccc}
別の例:
ディブ{
マージントップ:10px;
マージン右:20px;
マージン-ボトム:30ピクセル;
マージン左:40px;
} は
次のように書き換えることができます。
/*上・右・下・左の書き順に注意してください*/
div{マージン:10px 20px 30px 40px}
/*値と単位にはスペースを含めることはできず、各値はスペースで区切られることに注意してください*/
(詳細は、css2 リファレンスマニュアル、一般的な CSS 略語のまとめを参照してください)
2. 複数のクラス属性を設定できます。 HTML 要素は同時に規則 (複数のクラス定義) を適用します。
通常、次のように書きます。
実際、p 要素には次のような複数のルールを指定できます。
CSS:
.a{…}
.b{….}
HTML:
この要素には、a と b の両方で設定されたスタイルが含まれます。
注: 複数のルールはスペースで区切ります。
3. 値が 0 でない場合は単位を明確に定義してください
ディメンションの定義を忘れることは、CSS 初心者の間でよくある問題です。 htmlではwidth="100"と記述できますが、正確な単位はcssで指定する必要があります。例: width:100px;height:50px;font-size:9pt ただし、値 0 はどの単位でも重要ではないため除きます。 0 の値はすべて同じサイズです。
注: 値と単位の間にスペースを入れないでください。
4. 大文字と小文字の区別 xhtml では、css で定義される要素名は大文字と小文字が区別されます。そのため、エラーを避けるために、常に小文字を使用することをお勧めします。
たとえば、xhtml では、#aaa と #AAA は異なります。p と P も上書きされません。
CSS で #aaa が定義されている場合、AAA を使用してそれを html 要素に適用しても、#aaa で定義されたスタイルは取得されません。
サンプルコード:
CSS:
#aaa{ボーダー:1px ソリッド #ccc}
HTML:
1 ピクセルのエッジを表示できません
。 5. CSS の最新の優先原則。要素に複数のスタイルが定義されている場合、最新のレベルが優先され、最新のスタイルが他のスタイル定義をオーバーライドします。
のように：
CSS:
p{色:赤}
.blue{色:青}
. yellow{色:黄色}
HTML:
ここでは赤色で表示されます
ここでは青色で示されています
ここでは緑色で示されています
ここでは黄色で示されています
知らせ：
(1) スタイルのいくつかの優先順位に注意してください (優先順位は上から下に向かって低くなります)。
--要素のスタイル設定
--ヘッドエリアの設定
--外部参照cssファイル (2) 優先度はアクセス順ではなく、css内の宣言順で設定されます。
上の例と同様に、
CSS定義では. yellow が .blue の後ろにあるため、ここでは黄色で表示されます。
6. サブセレクターを使用して、ID とクラスの定義を減らします。次に例を示します。
＃含む{..}
#contain_ul{...}
.contail_li{...} は次
のように変更できます。
＃含む{..}
#containul{...}
.contain ul li{...}
7. 背景画像のパスに引用符を追加せず、background:url("xxx.gif") をbackground:url(xxx.gif) に変更します。
引用符を追加すると、一部のブラウザでエラーが発生するためです。
8. 背景画像のパスは、現在の CSS ページのパスを基準としています。
例えば：
次のディレクトリ構造があります --images
--xxx.gif
--css
--xx.css
--index.html
コードの内容
index.html は xx.css ファイルを指します。
xx.css は xxx.gif 画像を参照する必要があり、その記述方法は次のとおりです。background:url(../images/xxx.gif)
9. グループ セレクターを使用して、h1、h2、h3 などのさまざまな要素に同じスタイルを適用します。 、div{font-size:16px;font-weight:bold}
h1、h2、h3、および div 要素のスタイルはすべて 16 ピクセルのフォントで太字になります。
10. CSS を使用してリンクのさまざまな状態を定義するときは、書き込み順序に注意する必要があります。は: :link: 訪問しました :hover :active。
この順番で書かないと、期待する効果が得られない可能性があります。順序を覚えるために、各単語の最初の文字を抽出します: LVHA LoVe と Hate の 2 つの単語を覚えることで順序を覚えることができます。
11. コンテンツのラップの禁止とコンテンツのラップの強制 テーブルまたはレイヤーでは、一部の CSS 属性を使用して、コンテンツをラップしないようにしたり、コンテンツを強制的にラップしたりすることができます。
改行を無効にする：white-space:nowrap
強制改行: ワードラップ: ブレークワード: 通常;
12. 相対と絶対の違い
Absolute、CSSでの書き方は、position:absolute; ブラウザの左上隅を参照し、TOP、RIGHT、BOTTOM、LEFTと連携して位置決めを行います。 TRBL は設定されていません。デフォルトでは、原点は親の原点です。 TRBL が設定されており、親が位置属性を設定していない場合、現在の絶対値はブラウザの左上隅を原点として配置され、位置は TRBL によって決定されます。
Relative の CSS での書き方は、position:relative; 親の原点を原点として参照するという意味です。 、親にパディングなどの CSS 属性がある場合、親コンテンツ領域の原点を基準に現在のレベルの原点が配置されます。
13. divとspanの区別
div は、段落や表などを含めることができるブロックレベルの要素で、さまざまなコンテンツを配置するために使用されます。通常、Web ページ内の各ブロックのレイアウトと配置には div を使用します。
スパンは、実質的な意味を持たないインライン要素です。コンテンツにマークアップを追加すると、スパンでスタイルを定義することによって、そのコンテンツのスタイルを設定できます。
14. 表示と可視性を区別する
display:none と Visibility:hidden は両方とも要素を非表示にできますが、visibility:hidden は要素のコンテンツを非表示にするだけで、使用される位置スペースは保持されます。
Display:none はページから要素を削除するのと同等で、その要素が占有している位置も削除されます。