CSS は Web ページ レイアウトの現在の主流の形式であり、52CSS.com によって紹介されるコア コンテンツでもあります。CSS はほぼすべての Web サイトで広く使用されているため、スタイル シートを作成してそれが満たされていることを確認することに時間をかけてみましょう。良い基準。次のヒントは、CSS 初心者の開発プロセスに非常に役立ちます。 DivCSS 初心者が知っておくべき 10 のスキルと Web 標準の理解を学ぶことができます。
1. 索引ここでの定義は、あなたや他の開発者が Web サイトと CSS ファイルを理解するのに役立ちます。また、CSS ファイルの内容を理解するのにも役立ちます。インデックス セクションには、書式設定された CSS コメント段落が含まれています。
1. CSS ファイルの作成者情報を提供します。 2. Web サイトのデザインを定義します (カラム数、静的/動的) [カラム数、静的/リキッド]
3. ファイルのバージョンを継続的に追跡します (ファイルに複数の作成者がいる場合、または将来アップグレードする必要がある場合に非常に便利です)
2. アンカーポイントアンカーは同じ CSS ファイル内のブックマークのようなもので、CSS ファイル全体を明確に表示して整理することができます。
アンカーは CSS のインデックス (前述) で定義する必要がありますが、CSS には独自のアンカー システムがないため、ドキュメント内でアンカーを定義する簡単なトリックを使用しました。
比較的珍しい文字を使ってコメントを定義する方法です。アンカーポイントを見つけたい場合は、インデックスからアンカーポイントの定義子をコピーして検索し、アンカーポイントを見つけます。
3. 再定義再定義は、HTML のデフォルトのタグ スタイルをオーバーライドして再定義するために使用される方法です。このような CSS コードを見たことはありますか。このコードは、特定の要素のスタイルを設定したいだけです。
CSS での非常に美しい使用法はコンテキスト セレクターです。それを使用してみましょう。
4. 命名規則重要な要素は、要素に正確でわかりやすい名前を付けることです。これにより、混乱が避けられ、CSS がより簡単かつ迅速に読み取れるようになります。
5. 略語CSS の省略機能は、同じタイプの多数のプロパティを 1 つに結合できるようにするプロパティです。
CSS の略語を使用すると、開発プロセスが容易になり、CSS ファイルがクリーンで短く、読みやすくなります。次に、いくつかの例を示します。
6. スプライトエルフに訳しても、その論文の知覚的な理解は深まらないようです。逆に、実際に英語で読んでみると、理解できなかったので、単に訳さなかったのです。すべての背景画像を 1 つに結合し、背景の配置を使用してさまざまな部分を表示することを CSS スプライトと呼びます。
CSS スプライトを使用すると、HTTP リクエストの数が減り、帯域幅が節約され、読み取りが高速化されます。同時に、画像の不安定性も回避できます(たとえば、マウスがある画像の上を通過すると、別の画像の効果が表示され、後者の画像は遅いインターネット接続では表示されるまでに半日かかります)。 。
CSS スプライトの最もよく知られた例は、Apple の Web サイトのメニュー システムです。
7. 説明セレクターの明示化は、同じ要素に対して複数のルールを使用できる場合に、どれを使用するかを優先するプロセスです。
簡単に言えば、すべての CSS セレクターには重みがあります。セレクターのすべての重みの合計によって、ドキュメント内のセレクターのプロパティが決まります。 CSS ドキュメントが大きすぎてどの要素の重みが大きいかわからない場合、明示性は大きな助けとなります。
CSS では明確さは非常に大きな領域であるため、ほんの数文で説明するのは困難です。例を見てみましょう。
8. 属性のリセットグローバル プロパティ リセットにより、Web サイトがすべてのブラウザーでほぼ同じように表示されるようになります。いずれの場合も、さまざまなブラウザがすべての Web サイトに対して独自のデフォルト スタイル設定を使用するため、ブラウザごとに当社の Web サイトが異なって表示されます。グローバル プロパティをリセットすると、この状況が修正され、完全に一貫したベースからサイトを構築できるようになります。
CSS フレームワークの使用を常に推奨するわけではありませんが、それでも CSS リセットを使用する必要があります。単純なものから複雑なものまで、さまざまなリセット方法が存在します。
9. CSS ハックたとえ完璧な CSS であっても、すべてのブラウザでまったく同じ表示を行うことはできません。CSS の解釈方法はブラウザごとに異なります。つまり、Web サイトをすべてのブラウザーで一貫させる必要がある場合は、CSS ハックを使用する必要があります。
CSS ハックを使用すると、CSS を検証する際のエラーが減ります、私も同意します。これを実現する別の方法は、ブラウザごとに単一の異なる CSS ファイルを使用し、HTML にブラウザ固有のタグを含めることによって、どの特定の CSS を使用する必要があるかをブラウザに指示することです。私はすべてのプロジェクトで常に「fuck-ie.css」を作成します:) (翻訳者注: ここで著者は IE に対する怒りを表現するために悪口を使っています。「IE.css との結合」と翻訳されたら、世界はそうしないでしょう。もっと調和がとれるんじゃない?)
この方法を使用すると、「メイン CSS ファイル」が検証され、同時に「fuck-ie.css」ファイルも検証されますが、IE ブラウザの「メイン CSS ファイル」が上書きされるだけです。
10. 検証CSS を作成するときは常に検証することが重要です。これにより、CSS にエラーがなく、すべてのブラウザーで正しく解釈できるようになります。
W3C Validator は、非常に人気のあるオンライン CSS 検証ツールです。