不適切な CSS の使用法 1_html/css_WEB-ITnose

現在、Web サイトはますます美しく、華やかになっているため、CSS は不可欠ですが、多くの人が CSS を間違った方法で使用していることがわかりました

例えば、次のような CSS です。使い方が間違っています

(1) 1ページは1つのCSSファイルに対応します

このやり方は私は大嫌いですが、なぜですか?再利用性が悪すぎます!

例えば、ある日突然、ボタン スタイルが壊れています。ページのスタイルにボタンが含まれている限り、スタイルを変更する必要があります。たとえば、ボタンが含まれるページが 20 個ある場合、20 個の CSS ファイルを変更する必要があります。保存していますか?

根本原因: 同じスタイルが複数のファイルで繰り返し表示されます

(2) CSS スタイルを記述するときに HTML タグのスタイルを直接変更します

例:

ID を渡さないまたはクラスでは、このメソッドは非常に悪いです。その影響は
完全にオープンであるため、このCSSファイルを紹介するすべてのページが影響を受けます。当時、私たちはWebCalendar.jsを日付コントロールとして使用していました。元のインターフェイスは次のようになります:

しかし、実際の効果は次のとおりです:

理由:
によって導入された CSS は実際には他のコントロールに影響を与えます

正しい方法は次のとおりです。

この CSS を適用したい場合はどうすればよいですか? クラスを追加するだけで済みます

(3) 同じコードが複数の場所に出現します

この CSS コードが実際には少なくとも 4 回出現します。顧客が行の高さ (line-height) を変更したい場合、少なくとも 4 か所を同時に変更する必要があります
これは、日々の開発で頻繁に遭遇することです。次の状況:

#header a { border:2px dashed #000 }

これが私たちのプロジェクトの 1 つで、ヘッダーに別のリンクをボーダレスに設定することにしたとします。それを記述して、今すぐ追加します:

.special-link { border:none }

次に、特別なリンク クラスを追加しました。これで問題は解決しましたか? 答えは「

いいえ

」です！ id の重みが非常に高いため、ニーズを達成するにはより重みの高い宣言が必要です。

以下が正しい書き方です:

#header .special-link { border: none }附件是我总结的html笔记:html02.zip

html02.zip (1.9 MB)