初めて CSS に触れたとき、どこから始めればよいのか、どうやって始めればよいのか、何度も戸惑いました。レンダリングを取得した後、どのようにレイアウトするかという多くの疑問が私たちを悩ませました。絶対位置と相対位置、どちらのラベルを選択しますか?どのような構造を採用するか。 。等。 . もちろん、コードを書く過程では、特に私たち初心者はあらゆる面に精通しておらず、経験が不足しているため、問題に遭遇したときに困惑することがよくあります。問題に遭遇したときは、次回同じ間違いをしないように、それを要約する方法を学ばなければならないと思います。
以下は、私が仕事でよくある間違いをいくつかまとめたものです。
そして解決策のヒントが CSS 初心者に役立つことを願っています。
1. HTML 要素にスペルミスがないか、タグを閉じ忘れていないかを確認します。
ページ構造が非常に複雑で多くのレイヤーにネストされている場合、終了タグが失われやすいため、優秀な専門家でもこのような間違いを犯します。特に私のようにメモ帳で書くことに慣れていると、間違いを犯しやすくなります。したがって、書くときは注意してください。
2.CSSが正しいか確認する
一般に、CSS で最も一般的なエラーは、スタイルと HTML の属性名が一致しないことです。その結果、スタイルは明確に書かれていますが、効果はありません。
3.背景を使用して、対応するレイヤーを見つけます
エラーをデバッグするとき、特にブラウザの互換性をデバッグするときは、多くのネストされたレイヤーが存在するため、位置がずれたり重なったりする傾向があります。このとき、違いを示すために主要なレイヤーに背景色を追加します。これはエラーをなくすのに役立ちます。
4. 消去法によりエラー箇所を特定する
CSS コーディングを記述するときは、通常、少しだけコーディングしてからプレビューします。このときにエラーが発生した場合は、正常に表示されるまで新しく追加したレイヤーを削除して、どのレイヤーに問題があるかを判断できます。
5. float 要素は width 属性を指定する必要があります
多くのブラウザには、幅が指定されていない float 要素を表示するときにバグがあります。したがって、float 要素の内容に関係なく、それに width 属性を指定する必要があります。
6. 重複したスタイルを削除する
多くの場合、パブリック スタイルを先頭で宣言し、下に記述するときにそのスタイルを忘れてしまいます。たとえば、最初に img{border:none;} と宣言しました。
そして、imgタグに出会ったので、もう一度書きました。この状況は避けるべきです。
7. エンコード形式に注意してください
通常の状況では、使用するエンコード形式は gb2312 および UTF8 です。良いことと悪いことの区別はありません。ただし、混ぜないでください。多くのエディターはデフォルトで UTF8 形式を使用します。
8. リンクスタイルの記述順序
リンク スタイルを作成した後、クリック後の色が希望どおりにならない場合は、リンク スタイルの記述順序を確認する必要があります。正しい書き込み順序は LVHA である必要があります。