CSSスタイルのオブジェクト指向の考え方(1)_html/css_WEB-ITnose

今日は、CSS スタイルのオブジェクト指向の記述について話しましょう。オブジェクト指向はその名のとおり、プログラムの再利用性の高さとモジュール間の結合関係の解決を目的としているため、CSSなどのスクリプト言語もオブジェクト指向を使用できます。コードの保守性を向上させるためのアイデア パフォーマンスとスケーラビリティについてはどうですか?答えは「はい」です。オブジェクト指向の考え方を使用して CSS コードを作成すると、フロントエンド コードの効率が大幅に向上します。

一般的に使用される CSS コードの編成方法は、base.css + common.css + page.css です。この編成構造は、一般的に使用される 3 層アーキテクチャ モデルを容易に思い出させますが、ここには若干の違いがあります。基本レイヤー コードには、プロジェクトにまたがる基本的なスタイル コードである高度に統合された CSS コードが格納され、複数のプロジェクトで再利用できます。共通レイヤーには、特定のプロジェクト (Web サイト) の CSS コード モジュールが格納されます。 ; page.css は、特定の単一ページを実装するスタイル コードです。このような CSS コード編成構造により、機能が適切に抽象化され、コードの繰り返し開発が回避され、効率が向上し、メンテナンスが容易になります。 CSSコードのアーキテクチャ図は次のとおりです。 CSS 初期化関数。これらの関数は、HTML タグのデフォルトのスタイルです。ul のデフォルトのインデント スタイル、em のフォントの斜体、strong のフォントの太字などのほか、一般的に使用される *{margin:0;padding:0;} も含まれます。

2 テキスト組版

テキスト組版は、フォント スタイル、レポートのフォント サイズ、行の高さなどを簡潔に設定します。 例: f10｛font-size:10px;｝

主な位置設定はセンタリング、フロート、そしてその他の属性

through out out out through out through off off s 's ' から ‐ へ ‐ ‐‐‐ ‐ そして幅と高さまで;

あり幅と高さ ｝

h10｛width: 10px; m10{margin:10px;}

では、上記のスタイルを定義した後、考え方を変えて CSS スタイルを作成するにはどうすればよいでしょうか?まず、一般的に使用される CSS スタイルの記述方法を見てみましょう:

例 1: 3 つの p 要素があるとします。最初の要素は 50*50、テキストは 10px、2 番目の要素は 100*100、テキストは 10px です。テキストは 13px; 3 番目は 200*200、テキストは 15px です。では、従来の C スタイルはどのように記述すればよいでしょうか。 CSS コードは次のとおりです。

S .pclass1 {幅: 50px; フォントサイズ: 10px; 境界線: #000 ソリッド 1px; S .pclass2 {幅: 100px; :100px;font-size:13px;background-color:#0CF; border:#000 Solid 1px;position:relative;float:left;}

.pClass3{ width:200px;height:200px;font-size:15px;背景色:#9F9; ボーダー:#000 ソリッド 1px;位置:相対;浮動小数点:左;}

ここで、条件を 1 つ追加します:

现在テキストの 200*100 と 15px を増やすにはどうすればよいですか?

: HTMLを追加:

. -COLOR:#9F9; 位置: 相対;

- - - - - - - - -ただやってるだけですいくつかの繰り返しコード作業、明らかに不快な方向性 オブジェクト指向 オブジェクト指向 オブジェクト指向 オブジェクト指向 ターゲットのアイデア、では、上記の関数をレイヤーで組み合わせて、モジュールのアイデアを使用して作成できますか?さて、試してみましょう:

まず一般的な CSS 基本クラス (つまり、上で説明した Base.css) を作成します。スタイル コードは次のとおりです:

.w50 {width: 50px;} .h50。 {高さ:50px;} .f13{font-size:13px;}

.w200{幅:200px;} 200{高さ:200px;} .f18{font-size:18px;}

w50 h50 f13 pClass
">11111

H200 F18 pClass "& gt; 333333 & lt; p & gt;

問題をよりよく説明するために、私はここでは、クラスの記述方法が異なっていることがわかります。これはオブジェクト指向 CSS の本質であり、スタイルを生成するために大きな変更を加えることなく、既存の CSS スタイルを使用できることを意味します。それでは、pClass4 を実装しましょう:

HTML を書くだけです:

44444

🎜

先ほどのオブジェクト指向の意味を理解できましたか? ️