プロジェクトレビューまとめ３：CSS導入方法、コメント、命名規則、背景、行高さ、文字属性_html/css_WEB-ITnose

ディレクトリ:

1. CSS コメントの書き方利点？ 2. CSS 導入方法の様々なメリット・デメリット

3. セレクターの記述とセレクターの優先順位

4. CSS の命名規則

5. 背景、行の高さ

6. テキスト ( text と font で始まる) およびその他の属性

① CSS コメント記述仕様:

1. 一行コメント:

属性値を後ろに直接書き込みます。例:

① .search{ border:1pxsolid#fff;/*検索入力ボックスの境界線を定義*/ background:url(../images/icon.gif)no-report# 333;/*検索ボックスの背景を定義します*/ } wrap{/*height：100px;*/}。先頭と末尾に次のようなコメントを配置します。

①/********検索バーの開始*************/

.search{

border:1pxsolid#fff;

background:url(../images/icon. gif)no -repeat#333; } /********終わり 検索バーの終わり*************/ ② /*.tb { フォントサイズ ; ② CSS コメントを書く利点:

1. コメントを使用して複雑なコード ページをすばやく見つけてスタイルを効率的に記述し、コード階層を明確にし、変更をより直感的に行うことができます。 2. CSS アノテーション (css アノテーション) は、CSS コードの特定の部分の場所、機能、スタイルなどを説明するなど、作成した CSS ファイルを一目で簡単に理解できるようにするのに役立ちます。同時に、チームが Web ページを開発するときに、合理的かつ適切な注釈は、CSS スタイルが HTML に対応する場所を理解するのに役立ち、Web ページをスムーズかつ迅速に開発できます。

拡張機能: JavaScript の 2 つのコメントメソッド

Line コメント

// これは行のコメントです。後に行があることに注意してください。 '//' スペース /* これはコメントです */

コメントをブロック

*コメントは 1 つにしてください行 (* の後にスペースを忘れないでください) *コメントは次のとおりです。 2 行にします (* の後) 必ずスペースを入れてください)

拡張: HTML 構造アノテーション メソッド

Use 注釈を付ける 例: CSS 導入のさまざまなメリットとデメリット

①

外部紹介 : 最も広く使用されている、cs s ファイルは、全体から複数のページを制御できます。 Web サイトの場合、コードの数を減らし、読み込み速度を向上させ、メンテナンスを容易にします

② ヘッダーの紹介 : それも使用量が多くなり、読み込みが速くなります。一般に、アクセス数の多い Web サイトやホームページに使用されますが、サイト全体のコードが多くなり、メンテナンスに役立ちません ③ タグ内に記述されます: 使用量が少なくなります。最大の重み、コード量が多く、読み込みが遅く、メンテナンスに役立たない ④ @import : リンクと同様に、@import を使用する場合はスタイル コードの先頭に @import を置く必要があります。それは機能しません

link と @inport の違い:

① @import url() メカニズムはリンクとは異なり、リンクはロードされます CSS はページの前にロードされ、@import url()はファイルを読み込んでから読み込まれるため、最初はCSSスタイルがなく、スタイルが表示された後にページが点滅します（ネットワーク速度が遅い場合）。

② @import は css2 にあるため、古代の IE5 はサポートしていません。

③ JavaScript を使用して dom を制御してスタイルを変更する場合、 @import は dom によって制御できないため、link タグのみを使用できます

④ CSS の読み込みに加えて、リンクは RSS を定義し、rel 接続を定義することもできます属性、@importはcssのみ読み込み可能

Extension: JSの3つの導入方法

セレクターはセレクターの優先度で書かれています

セレクターの種類:

① タグ名セレクター ② ID 名セレクター ③ クラス セレクター ④ 子孫セレクター ⑤ グループ セレクター ⑥ 擬似クラス セレクター ⑦ 属性セレクター ⑧ ワイルドカード ⑨ 子孫セレクター セレクターの優先順位:

① CSS導入方法の優先順位：タグインラインスタイル＞外部参照スタイル＞ブラウザデフォルトスタイル。

② CSS セレクターの優先順位: id > class >

③ 複数のセレクターが混在する場合の優先順位: example.a .b c{} と .a c{ }、それらはすべて c を指します。 , ただし、前者の方が後者よりも優先されます。

注:

同じターゲットを指すセレクターの優先順位が同じである場合、同じタグ内で複数のクラス名が定義されている場合、後の優先順位が前の優先順位よりも高くなります。 selector 優先順位は、html 内のクラス名の配置とは関係ありませんが、css ファイル内の各クラス セレクターの配置と関係があります。

CSS 命名規則

1. 命名規則では、常に小文字とアンダースコアを使用します。 2. 名前付けには中国語のピンインを使用しないでください。意味のある英語ですが組み合わせてください 3. 名前を付けるときは略語に注意してください。ただし、やみくもに略すことはできません 4. 1、2、3 などのシリアル番号を使用した名前付けは許可されません 5. クラス名と ID の重複した名前を避けます 6. IDは識別のために使用されます モジュールまたはページの親コンテナ領域の名前は一意である必要があります 勝手に新しいIDを作成しないでください 7. クラスの名前は簡潔で簡潔でなければなりません 8. ブラウザのデフォルトにリセットすることに加えて。 div {width:200px;height:100px;} 9. 各ルールでは、セレクターが一意であることを確認する必要があり、プロパティを直接設定することは禁止されています。グローバル .nav/.header/.body およびその他のクラス用

詳細は、Alone Ice Hai-CSS エンコード仕様

拡張: JS 命名仕様

2. 最初の書き込み文字は次のようにする必要があります。文字と下行 (_) または米ドル ($) ($ ) ($) ($) ($) ($) ($)

3. 頭文字以外の文字は、文字、数字、アンダースコア、ドル記号で構成できます

4. スペースは使用できません

背景、行の高さの属性 背景背景 プロパティ: * 背景色 * 背景位置 * 背景サイズ * 背景-繰り返し * 背景-原点 * 背景-クリップ * 背景-添付ファイル * 背景-画像

CSS3の新しいプロパティ: プロパティブラウザは をサポートします 背景サイズ 🎜 🎜 🎜 🎜 背景元🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 背景クリップ🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜 🎜

Background 構文: [詳細については、ブログの背景マップの統合知識を参照してください]

background-color: red | #RGB;

background-position: X 軸座標 Y 軸座標 |左 | 右 | 上.. 背景サイズ: 30% |

繰り返し: 繰り返し: ボーダー | コンテンツ

背景クリップ: ボーダーボックス | コンテンツボックス

背景イメージ: url 省略形:

背景: color ) 位置繰り返し;

注: background-size の属性値が 1 つの値のみに設定されている場合、2 番目の値は「

auto 」に設定されます。

cover : 背景画像が背景領域を完全に覆うように、背景画像を十分な大きさに拡大します。

contain : 幅と高さがコンテンツ領域に完全に収まるように画像を最大サイズに拡張します

line-height line-height属性: の間で設定します行の距離 (行の高さ)。

構文: line-height:normal | |

line-height

CSS テキストプロパティ プロパティの説明

color テキストの色を設定する

方向 テキストの方向を設定する。

line-height 行の高さを設定します。

文字間隔 文字間隔を設定します。 text-align 要素内のテキストを整列させます。 text-decoration テキストに装飾を追加します。 text-indent 要素内のテキストの最初の行をインデントします。 text-shadow テキストシャドウを設定します。 CSS2 にはこのプロパティが含まれていますが、CSS2.1 ではこのプロパティが保持されません。 text-transform 要素内の文字を制御します。 unicode-bidi テキストの方向を設定します。 white-space 要素内の空白の処理方法を設定します。 word-spacing 単語の間隔を設定します。 CSS フォントプロパティ プロパティの説明 font 略語プロパティ。この機能は、すべてのフォント固有のプロパティを 1 つのステートメントで設定することです。 font-family フォントファミリーを設定します。 font-size フォントサイズを設定します。 font-size-adjust 優先フォントが使用できない場合の置換フォントのスマートなスケーリング。 (このプロパティは CSS2.1 では削除されました。) font-stretch フォントを水平方向に引き伸ばします。 (CSS2.1ではこの属性が削除されました。) font-style フォントのスタイルを設定します。 font-variant テキストを小さな大文字または通常のフォントで表示します。 font-weight フォントのウェイトを設定します。