HTML/CSS (初心者向けパート 2)

1. 実際の仕事では、一人ではなくチームでプロジェクトに取り組んでいます。複数人によるコラボレーションは、各チームが独自の命名規則を持っていることを意味します。
1. CSS セレクターの名前を標準化する必要があります。
2. すべてに命名仕様書が付いています。

2. CSS セレクターの役割: CSS スタイルが適用されるオブジェクト (スコープ) を指定します

1. タグ セレクター: HTML タグの場合
2. ID セレクター: ページ上に 1 回だけ表示されるコンテンツの ID
3 . クラスセレクター : 特定の要素、同じスタイル、繰り返しスタイル
***** デフォルトでは、一部の HTML 要素自体に独自のデフォルト値があります。
4. すべての要素を制御します---ワイルドカードを使用します---*
ワイルドカードセレクター: *{attribute: value}、すべての HTML 要素を定義するために使用されます
***** * には幅広い効果がありますが、非常に非効率的です。慎重に使用してください
*{margin: 0; padding: 0;}//すべての要素の外側のマージンと内側のマージンをゼロにリセットします
5. セレクターのネストされた使用 ---- セレクターを含む
フロントエンド開発の制限----コードは非常に合理化されています。
6. 複数のセレクターが同じスタイルを持つ場合、これらのセレクターをグループにグループ化できます
セレクター 1、セレクター 2、... {属性: 値}
** ***css セレクターは、スタイルを使用するユーザーを示します。あなたが定義しました。
/*次のセレクターは、これらのセレクターが 1 つのグループにグループ化され、すべて同じスタイルを持つことを示します*/
body,ul,ol,li,p,hi,h2,h3,h4,h5,h6,form, fieldset ,table,top a,.top,.top a,.top a:visited
/* は、クラス名 top の a*/
.top a,.top a:visited
を意味します

3. CSS ボックス モデル

****ボックスは次の部分で構成されます:
1. ボックス内のコンテンツ
2. ボックスの境界線とコンテンツ間の距離。パディングの場合 --padding、内側のマージン (内側のパッチ)
4. 複数のボックスが存在し、ボックス間の距離をボーダーと呼びます --margin、外側のマージン (外側のパッチ)

***** はボックスの実際の幅です。例: = 左右の境界線 + 左右の境界線 + 左右の内側のパディング + コンテンツの幅

***** CSS ボックスの関連属性

【1】 、コンテンツ属性：コンテンツ自体の幅 =width、コンテンツ自体の高さ =height
[2]、パディング属性：padding、コンテンツと境界線の間の距離
*****の幅を定義する場合ボックス、パディングの存在、幅、境界線を考慮する必要があります。
パディングを追加すると、追加したパディング値からボックス全体の幅が減算されます。
(ボックス - CSS3で使用できます)
sizing:border-box; ブラウザーが指定された幅と高さでボックスをレンダリングし、そのボックスにボーダーとパディングを配置します。
)
小さなボックスの上 = 20、右側に 30、下に 50、左側に 100、外側の境界線

margin: 20 30 50 100;

margin-top:
margin-right:
margin-bottom:
左マージン:

****今後マージンを使用する場合はブラウザの互換性にご注意ください。

****値が 0 の場合を除き、ゼロ以外のすべての値の後に単位を付ける必要があります。

*****すべてのブラウザのデフォルトの内側と外側のマージンをゼロから計算する必要があります。
実際の作業では、最も効率が悪いため、この * (margin: 0、padding: 0) は使用しないでください。
そこで、これらの要素を使用した後、これらの要素のデフォルト値をゼロにリセットします。

CSS プロパティには継承特性がありますが、すべてのプロパティが継承されるわけではありません。

CSS レイアウトは主にボックス モデルを通じて実装されます。w3c は Web コンテンツをいくつかのボックスに配置し、このボックスのいくつかの属性を調整します。

コントロール。
内容: 幅 高さ
内側のパディング: パディング
外枠: border
外枠: margin

リストの属性について: --互換性の問題があります

list-style: リストの画像

構文:
list-style: list-style-image || list-style-type
リストのスタイル: リストの画像 リストのシンボルの位置 リストのスタイル
list-style-none リストのシンボルは不要です。

border 属性の説明:

css 構文:

border: border-width | 1 つ目: 太さ、2 つ目: スタイル、3 つ目: 色
色
ボーダースタイル: 2ピクセルの太さの青一色
ボーダー: 2ピクセルの青一色

*****CSS のヒント:
[1]、ボックスを水平方向に中央に配置します。オブジェクトの左右の境界を自動に設定します。
[2]、ボックス内のコンテンツを垂直方向に中央に設定します。 -height) = ボックスの高さですが、改行はありません。

【3】デバッグ時に、背景色を適切に追加できます。

*****HTML 要素の分類: ブロックとインライン
背景画像はデフォルトで水平方向と垂直方向に並べて表示されます。
デフォルトの背景画像は要素の左上隅に表示されます。

背景画像の添付方法: 固定の定義は、画像を画面上の特定の位置 (可視領域) に固定することです。

互換性: IE6 は、html と body の 2 つの要素に対してこの属性のみをサポートします

よりプロフェッショナルに見せるためのヒント: 反転効果: 実際には、通常は同じサイズで異なる内容の 2 つの写真を準備するというアイデアがあります。
下に1枚の写真が表示され、マウスをその上に置くと別の写真が表示されます。 (transform 属性は、画像の反転効果を定義するために CSS3 で一般的に使用されます)

状態を表す疑似クラス
: link

CSS Elf Tips: 主に http リクエストを減らすため[CSS3 で一般的に使用されるフォント アイコンが従来の小さなアイコンを置き換えます (将来の傾向)]
ブラウザ -- サーバー (通信) (例: ショッピング スーパー マーケット -- チェックアウト)