マインドマップギャラリー CSSフロントエンドHTML基礎コース研修プログラム
CSS フロントエンド HTML 基礎コース トレーニング プログラム、Web ページは 3 つの部分で構成されます。構造とはページの全体的な構造です。タイトルはどこにあり、段落はどこにあり、画像はどこにあります。構造は HTML で記述され、パフォーマンスは、フォント、フォント サイズ、フォントの色、背景などのページの外部スタイルです。
2022-11-08 10:53:34 に編集されましたCSSフロントエンドHTML基礎コース研修プログラム
CSS
CSS はカスケード スタイル シートと呼ばれ、ページ上の要素のスタイルを設定するために使用されます。背景色、文字色、文字サイズ。 。 。
CSS は、構造、プレゼンテーション、および動作のパフォーマンスを担当します。
書かれた場所
1. インラインスタイル
タグのstyle属性にスタイルを記述します。
このスタイルは現在のタグでのみ機能し、再利用することはできません。後のメンテナンスには不便なので、お勧めできません。
2. 内部スタイルシート
head内のstyleタグにスタイルシートを記述する
内部スタイル シートを使用して、パフォーマンスと構造をさらに分離します。複数の要素のスタイルを同時に設定して、後のメンテナンスを容易にすることができます。
3. 外部スタイルシート
スタイルシートを外部CSSファイルに記述し、リンクタグを介して外部ファイルを導入します。
スタイルを外部スタイル シートに書き込むと、同じスタイル シートを別のページで使用できるため、後のメンテナンスが容易になります。
基本的な文法
セレクタ
セレクターを使用してページ上の要素のグループを選択し、それらの要素にスタイルを設定します
要素セレクター
タグ名に基づいてページ内の指定された要素を選択します
構文: タグ名 { }
例:
ディビジョン{}
p{}
h1{}
IDセレクター
id 属性値に基づいて一意の要素を選択します
構文: #id {}
例:
#ボックス1{}
#こんにちは{}
クラスセレクター
要素のクラス属性値に基づいて要素のグループを選択します
構文: .class{}
例:
。こんにちは{}
。箱{}
ワイルドカードセレクター
ページ上のすべての要素を選択します
文法:*{}
ワイルドカード セレクターのパフォーマンスは比較的低いため、使用しないようにしてください。
ユニオンセレクター
複数のセレクターに一致する要素を同時に選択できます
構文: セレクター 1、セレクター 2、セレクター N{}
例:
div,p,#box,.hello{}
交差点セレクター
複数の条件を満たす要素を選択可能
構文: セレクター 1 セレクター 2 セレクター N{}
例: p.hello{}
子孫要素セレクター
指定された要素の指定された子孫要素を選択します
構文: 祖先要素 子孫要素 {}
例:
div スパン {}
ディビジョン p{}
子要素セレクター
指定された要素の指定された子要素を選択します
構文: 親要素 > 子要素 {}
例:
div > スパン {}
div >p{}
宣言ブロック
宣言ブロックは実際には CSS 宣言です
声明
各 CSS 宣言はスタイルであり、実際には名前と値のペアの構造です。
用途: 名前と値の間のリンク
:左側はスタイルの名前です
:右側はスタイルの値です
すべてのステートメントは次で終わります。
例
赤色;
フォントサイズ:20px;
要素間の関係
親要素
子要素を直接含む要素を親要素と呼びます。
子要素
親要素に直接含まれる要素は子要素と呼ばれます。
祖先要素
子孫要素を直接的または間接的に含む要素は祖先要素と呼ばれ、親要素も祖先要素です。
子孫要素
祖先要素に直接的または間接的に含まれる要素は子孫要素と呼ばれ、子要素も子孫要素と呼ばれます。
兄弟要素
同じ親要素を持つ要素は兄弟と呼ばれます。
ブロック要素とインライン要素
ブロック要素
ブロック要素は、その内容に関係なく、ページ上の独自の行を占めます。
通常、ページのレイアウトにはブロック要素を使用します。
共通のブロック要素
ディビジョン
p
h1~h6
インライン要素
インライン要素は独自のサイズのみを占有し、行を占有しません。
インライン要素はインライン要素(インライン)とも呼ばれます。
一般に、インライン要素はテキストの効果を設定するために使用されます。
共通インライン
スパン
ある
画像
パッケージのルール
一般に、ブロック要素はインライン要素をラップするために使用されますが、インライン要素はブロック要素をラップするためには使用されません。
a 要素には、それ自体を除く任意の要素を含めることができます
p 要素にはブロック要素を含めることはできません
疑似クラスと疑似要素
疑似クラスと疑似要素は、要素の特別な状態や特別な位置を表すために使用されます。
:リンク
通常のリンク(未訪問のリンク)を表します。
:訪問しました
訪問したリンクを表します
:ホバー
マウスが移動するリンクは、他の要素に対してホバーするように設定することもできます。
:アクティブ
クリックされているリンクを他の要素に対してアクティブに設定することもできます。
:集中
フォーカスを受け取る要素の状態を示します。通常はテキスト ボックスで使用されます。
::選択
コンテンツが選択されていることを示します
Firefox では代わりに ::-moz-selection を使用してください
:最初の一文字
最初の文字を表します
:最初の行
テキストの最初の行を表します
:前に
要素の前面を選択します
一般に、この疑似クラスはコンテンツと組み合わせて使用され、これを通じて指定された場所にコンテンツを追加できます。
:後
要素の最後のエッジを選択します
一般に、この疑似クラスはコンテンツと組み合わせて使用され、これを通じて指定された場所にコンテンツを追加できます。
属性セレクター
属性に基づいて指定された要素を選択します
[属性名]
指定された属性を持つ要素を選択する
[属性名="属性値"]
属性値が指定された値と等しい要素を選択します
[属性名^="属性値"]
属性値が指定した内容で始まる要素を選択します
[属性名$="属性値"]
属性値が指定された内容で終わる要素を選択します
[属性名*="属性値"]
属性値に指定された内容が含まれる要素を選択します
兄弟要素セレクター
次の兄弟要素を選択してください
前へ 次へ
次の兄弟要素をすべて選択してください
前〜次のすべて
子要素の疑似クラス
:第一子
親要素の最初の子要素を検索し、すべての子要素間で並べ替えます。
:最後の子
親要素の最後の子要素を検索し、すべての子要素間で並べ替えます。
:n番目の子
親要素内の指定された位置で子要素を検索し、すべての子要素間で並べ替えます。
例
p:n番目の子(3)
Even を使用すると、偶数番号の子要素を検索できます
odd を使用して奇数の子要素を見つけることができます
:タイプの最初
指定された型の最初の子要素を検索します
:最後のタイプ
指定された型の最後の子要素を検索します
:n 番目の型
指定された型の指定された子要素を検索します。
疑似クラスを否定する
要素の集合から要件を満たす要素を削除する
文法:
:not(セレクター)
例:
.abc:not(div)
スタイルの継承
祖先要素のスタイルの設定は、その子孫要素にも適用されます。この機能はスタイルの継承と呼ばれます。
スタイルの継承を通じて、一部のスタイルを祖先要素に均一に設定できるため、すべての子孫に同じスタイルが適用されます。
ただし、背景関連、境界線関連、位置関連など、すべてのスタイルが継承されるわけではありません。具体的な参考文献
セレクターの優先順位
セレクターを使用して要素のスタイルを設定する場合、スタイルが競合する場合、セレクターの優先順位によってどのスタイルが使用されるかが決まります。
優先度
インラインスタイル
1000
IDセレクター
100
クラスおよび疑似クラスセレクター
10
要素セレクター
1
ワイルドカードセレクター
0
継承されたスタイル
優先順位なし
スタイルが競合する場合は、関連するセレクターの優先順位を合計して計算する必要があります。優先順位が同じ場合は、優先順位の高い方が最初に表示されます。
優先順位を計算する場合、合計サイズが最大桁を超えることはできません。
このコンテンツをスタイルに追加すると、そのスタイルが最も優先され、インライン スタイルを含むすべてのスタイルよりも前に表示されます。ただし、この属性の使用には注意が必要です。
セレクターのパフォーマンス
ブラウザはセレクターのグループを解析するときに、後ろから前に向かって 1 つずつ解析します。
セレクターが長すぎるとブラウザの解析パフォーマンスが低下するため、セレクターを記述する場合は短いほど良いです。
*ワイルドカード セレクターのパフォーマンスは低下します。ワイルドカード セレクターの使用は避けてください。
ユニット
長さの単位
ピクセル
ピクセル、ピクセルは画像を構成する最小単位です。私たちの画面はピクセルの 1 つずつで構成されています。
ピクセルはピクセルを指します
ディスプレイが異なると、ピクセルのサイズが異なります。画面が鮮明であればあるほど、ピクセルは小さくなります。
%
要素のスタイル値をパーセンテージ値に設定すると、ブラウザが親要素の値に基づいて対応する値を計算します。
親要素の値が変化すると、子要素の値も一定の割合で一緒に変化します。これはアダプティブ ページでよく使用されます。
えっと
em は、現在の要素のフォント サイズに基づいて計算されます。
1em = 1フォントサイズ
em はテキスト関連のスタイルを設定するためによく使用されます。これは、テキスト サイズが変更されると、それに応じて em も変更されるためです。
カラーユニット
色の言葉
英単語を直接使用して色を表現する
赤緑青オレンジ
RGB値
いわゆる RGB 値は、赤、緑、青の 3 原色の組み合わせによってさまざまな色を表現します。
文法:
RGB(赤、緑、青)
これら 3 つの値には 0 ~ 255 の値が必要です
0は何もないことを意味します
255 は最大値を表します
RGB(50,200,30)
パーセンテージを使用して RGB 値を設定することもできます。これには 0% ~ 100% の値が必要です。
パーセンテージは最終的に 0 ~ 255 に変換されます。
0% は 0 と同等です
100% は 255 に相当します
RGB(100%,0%,0%)
16進数のRGB値
これも RGB 値を表現する方法の 1 つであり、10 進数ではなく 16 進数を使用する点が異なります。
文法:
#赤緑青
ここの色には 00 ~ ff の値が必要です
例:
#ff0000
色が 2 つずつ繰り返される場合は、省略できます。
たとえば、#aabbcc は #abc と書くことができます。
たとえば、#bbffaa は #bfa と書くことができます。
テキストスタイル
フォント
色
フォントの色
フォントサイズ
フォントサイズ
ブラウザのデフォルトのフォントサイズは16pxが一般的ですが、開発時は12pxに統一することが多いです。
フォントファミリー
テキストのフォントを設定する
フォントスタイル
斜体を設定する
フォントの太さ
テキストの太さを設定する
フォントバリアント
小さな帽子
フォント
テキストの略語プロパティ
すべてのフォント関連のスタイルを同時に設定できます
文法:
フォント: [太字斜体小文字] サイズ [/行の高さ] フォント
太字、斜体、大小の文字、順序は関係ありません。書いても書かなくても構いません。書かない場合はデフォルト値を使用します。
文字サイズとフォントは必ず記述し、サイズは最後から 2 番目、フォントは最後でなければなりません
サイズの後に、行の高さを設定できます。書き込み可能かどうかを設定できます。そうでない場合は、デフォルト値が使用されます。
テキストスタイル
行の高さ
行の高さ
デフォルトでは、テキストは行の高い中央に垂直方向に中央揃えで配置されます。
行の高さは line-height で変更できます
行間隔 = 行の高さ - フォント サイズ
テキスト変換
テキストの大文字と小文字を設定する
テキスト装飾
文字装飾を設定する
テキスト整列
テキストの配置を設定する
テキストインデント
1行目のインデントを設定する
長さの単位が必要です。それが正の値の場合、最初の行は右に移動し、負の値の場合は左に移動します。
文字間隔
文字間隔
単語の間隔
単語の間隔
背景
背景色
背景色
背景画像
背景画像
パラメータとして URL アドレスが必要です
例:background-image:url (画像へのパス)
背景リピート
背景画像のリピートモードを設定する
オプションの値:
繰り返す
デフォルトでは、背景画像はタイル状に表示されます。
X 軸と Y 軸に沿って両方向に繰り返します
繰り返し禁止
背景画像は繰り返されません
リピート-x
背景画像を水平方向に繰り返します
繰り返します
背景画像が縦に繰り返される
背景位置
背景画像の位置を設定する
設定方法1
いくつかの位置キーワードを使用して画像の位置を直接設定できます。
上
左
右
底
中心
上記のキーワードをペアで組み合わせることで、要素の任意の位置に背景画像を設定できます。
値が 1 つだけ指定されている場合、2 番目の値はデフォルトで中央に設定されます。
設定方法2
2 つの値を直接指定して、背景画像のオフセットを設定できます。
例:
背景位置: x 軸オフセット y 軸オフセット;
x 軸オフセット。画像の水平位置を指定するために使用されます。
正の値を指定すると画像は右に移動します
負の値を指定すると画像が左に移動します
Y 軸オフセット。画像の垂直位置を指定するために使用されます。
正の値を指定すると画像が下に移動します
マイナスの値を指定すると画像が上に移動します
背景添付ファイル
背景をページと一緒にスクロールするかどうかを設定するために使用されます
オプションの値
スクロール
デフォルトでは、背景画像はページとともにスクロールします。
修理済み
背景画像はページとともにスクロールせず、ページ上の指定された位置に固定されます。
このプロパティの背景を設定すると、背景は常にブラウザ ウィンドウを基準にして配置されます。
通常、この背景は本文に設定されます
背景
背景の短縮属性
これを使用して、背景に関連するすべてのスタイルを設定できます。
この省略された属性には順序や数量の要件はありません。書き込まれない属性にはデフォルト値が使用されます。
不透明度
背景の不透明度を設定するために使用されます
オプションの値
0-1
0 は完全に透明であることを意味します
1 は完全に不透明であることを意味します
0.5 半透明
IE8 以下のブラウザはこのスタイルをサポートしていません。代わりにフィルタを使用できます。
フィルター:アルファ(不透明度=値)
ここの値には 0 ~ 100 の値が必要です
0 は完全な透明度と同等です
100 完全に不透明
HTML
ウェブページの構造
Web ページは 3 つの部分で構成されます
構造
構造とは、ページの全体的な構造であり、どこにタイトルがあり、どこに段落があり、どこに画像があるかです。
構造は HTML を使用して記述されます
パフォーマンス
パフォーマンスとは、フォント、フォント サイズ、フォントの色、背景などのページの外部スタイルです。 。 。
CSS を使用してページ上の要素のスタイルを設定する
行動
ページとユーザー間のインタラクション
JavaScript を使用してページの動作を設定する
適切にデザインされた Web ページには、構造、表示、および動作を分離する必要があります。
開発では、プログラム間の結合という問題に常に直面します。この 3 つを分離するには、結合を理解する必要があります。
HTML、ハイパーテキストマークアップ言語
ページの構造とページのさまざまなコンポーネントの定義を担当します。
HTML はプレーン テキストの形式で記述され、HTML タグを使用してページのさまざまな部分を識別します。
ラベル
ペアで登場する
自動終了タグ
属性
属性を通じてラベルの効果を設定できます
属性は開始タグまたは終了タグで定義する必要があります
プロパティは実際には名前と値のペアのセットです。
例:
HTMLページの基本構造
ドキュメントに関する声明
現在のページを識別するために使用される HTML バージョン
このステートメントは、現在のページが HTML5 標準を使用して記述されていることをブラウザーに伝えるために使用されます。
共通タグ
Webページのルートタグ
ページ内にルートタグは 1 つだけあります
Web ページ内のすべてのコンテンツは HTML タグ内に記述する必要があります
Webページのヘッダー
このタグのコンテンツは Web ページに直接表示されません。
このタグは、ブラウザによるページの解析を支援するために使用されます。
サブタグ
Webページのタイトルを設定するために使用されます
デフォルトではブラウザのタイトルバーに表示されます。
検索エンジンは Web ページを取得するときに、主にタイトルのコンテンツを取得します。これは、検索エンジンでのページのランキングに影響します。
Web ページで使用される文字セットなど、Web ページのメタデータを設定するために使用されます。
Web ページのキーワードを設定する
Webページの説明を設定します
要求されたリダイレクト
Webページの本文
Web ページのすべての表示部分を本文に記述する必要があります
~
タイトルタグ
HTML には 6 つのレベルの見出しがあります
6 段階の見出しのうち、h1 が最も重要で、h6 が最も重要ではありません。一般的なページでは h1 ~ h3 のみが使用されます。
h1 の重要性はタイトルに次いで重要であり、ブラウザは主に h1 のコンテンツを検索してページのメイン コンテンツを決定します。
通常、h1 は 1 ページに 1 つだけ記述できます。
段落タグ
改行タグ
水平線ラベル
iframe
他の外部ページをページに導入できる
属性
送信元
外部ページのアドレス。相対パスを使用できます。
幅と高さ
フレームの幅と高さを設定できます
名前
インラインフレームには名前を付けることができます
この属性値は、ハイパーリンクのターゲット属性の値に設定できます。
これにより、ハイパーリンクをクリックすると、対応するインライン フレームでページが開きます。
インライン フレーム内のコンテンツは検索エンジンで取得されないため、開発中はインライン フレームを使用しないようにしてください。
ハイパーリンク
現在のページを他のページにジャンプさせることができます
<a>リンクテキスト</a>
属性
href
リンク ジャンプのターゲット アドレスを指します。これは相対パスにすることができます。
#id 属性値を指定することもできます。これにより、ハイパーリンクがクリックされると、現在のページ上の指定された場所にジャンプします。
mailto: を使用して、電子メールを送信するハイパーリンクを作成できます。
目標
リンクを開くウィンドウを指定します
オプションの値
_自己
デフォルト値。デフォルトでは、リンクは現在のウィンドウで開かれます。
_空白
リンクを新しいウィンドウで開く
インラインフレームのname属性の値
指定された iframe 内のリンクを開きます
コメント
文法
コメントの内容はページには表示されませんが、ソースコードには表示されます。コメントを使用して Web ページのコードを説明できます。
コメントを通じてページに表示したくないコンテンツを非表示にすることもできます。
実在物
一部の特殊記号は HTML ページで直接使用できないため、これらの特殊記号を置き換えるにはエンティティを使用する必要があります。
エンティティはエスケープ文字と呼ぶこともできます
エンティティの構文
&エンティティ名;
一般的に使用されるエンティティ
空間
<
>
>
著作権マーク
©
画像タグ
<img />
イメージタグを使用して外部画像をページに導入します
属性
送信元
外部画像を指すパス。相対パスを使用できます。
代替
画像を読み込めない場合は、画像の説明を指定してください
検索エンジンは主にこの属性を使用して画像のコンテンツを識別します。
この属性を記述しないと、検索エンジンに画像が含まれます。
幅
画像の幅を設定する
身長
画像の高さを設定する
画像フォーマット
JPEG
カラフルな画像(写真など)
GIF
単色、シンプルな透明画像、ダイナミックなグラフィック
PNG
カラフルで複雑、透明感のある画像
写真選択の原則
効果は一貫しているため、少量を使用してください
効果にばらつきがあるため、より効果の高いものを使用してください
相対パス
現在のリソースが存在するディレクトリへの相対パス
../ を使用して最初のレベルのディレクトリに戻ることができ、複数のレベルに戻るには、複数の ../ を使用します。
xHtml 構文仕様
1.HTML では大文字と小文字が区別されませんが、小文字を使用するようにしてください
2.HTMLコメントはネストできません
3. ラベルは完全な構造でなければなりません
どちらかがペアで出現する
または自己終了タグ
4. タグはネストできますが、相互にネストすることはできません。
5. 属性には値が必要です。値は一重引用符と二重引用符の両方で囲む必要があります。
テキストラベル
声調で強調を表現する
コンテンツの重要性を示します
単純な斜体を意味します
単に大胆という意味です
詳細などの内容を示します
参考内容を示すために、書籍タイトルのあるものには引用を使用できます。
短い引用、インライン引用
長い参照、ブロックレベルの参照
上付き文字
添字
削除されたコンテンツ
挿入されたコンテンツ
事前にフォーマットされたタグは、コード内のスペースと改行のフォーマットを保持できます。
プログラムコードを表します
リスト
順序なしリスト
順序なしリストを作成するには ul を使用し、リスト内のリスト項目を表すには li を使用します。
記号を箇条書きとして使用する順序なしリスト
順序付きリスト
ol を使用して順序なしリストを作成し、li を使用してリスト内のリスト項目を表します。
箇条書きとして連番を使用する
定義リスト
リスト関連の要素はすべてブロック要素であり、相互に入れ子にすることができます。
箇条書きを削除する
リストスタイル:なし
レイアウト
浮く
float を使用して要素を float に設定します
オプションの値
なし
デフォルト値、フロートなし、ドキュメントフロー内の要素
左
要素は左にフロートします
右
要素は右にフロートします
特徴
1. 要素がフローティングされると、ドキュメント フローから完全に切り離されます。
2. フローティング後、要素は常に親要素の先頭に移動します。
3. 親要素または他の浮動要素の境界に遭遇するまで移動が停止します。
4. フローティング要素がブロック要素の上にある場合、フローティング要素はブロック要素を覆いません。
5. 浮動要素はその上の浮動兄弟要素を超えることはなく、最大でも片側に配置できます。
6. フローティング要素はテキストをカバーしません。テキストはフローティング要素の周囲に自動的に回り込みます。フローティングすることでテキストの回り込み効果を実現できます。
フローティング後のエレメントの特性
要素がフローティングされると、その要素はドキュメント フローから完全に削除されます。
ブロック要素
ブロック要素がドキュメント フローを離れた後
1. ラインを占有しない
2.幅と高さの両方がコンテンツによって引き伸ばされます
インライン要素
インライン要素は、ドキュメント フローを離れるとブロック要素になります。
高度に崩壊した
ドキュメント フロー内の親要素の高さは、デフォルトで子要素によって拡張されます。子要素がドキュメント フローから切り離されると、親要素の高さをサポートできなくなり、高さが低下します。折りたたむ親要素。
親要素の高さが崩れると、すべての要素の位置が上に移動してしまい、ページ全体のレイアウトが乱れてしまいます。
方法 1
親要素の BFC または hasLayout をオンにする
BFC
ブロックフォーマットコンテキスト
ブロックレベルのフォーマット環境
BFC は要素の暗黙的な属性であり、デフォルトではオフになっています。
BFC はいくつかの特別なスタイルを通じてオンにできます
BFC をオンにすると、要素は次の特性を持つようになります。
1. 親要素の縦方向の余白は子要素と重なりません。
2. BFC がオンになっている要素は、フローティング要素によってカバーされません。
3. BFC が有効になっている要素には、浮動子要素を含めることができます。
BFCを有効にする方法
1. 要素を float に設定します。
2. 要素の絶対位置を設定する
3. 要素タイプを inline-block に設定します。
4. オーバーフローをデフォルト以外の値に設定する
通常、overflow:hidden は BFC を有効にするために使用されます。
レイアウトあり
IE6 には BFC はありませんが、BFC に似た hasLayout があります。
IE6ではhasLayoutをONにすることで高さ崩れの問題を解決できます。
副作用を最小限に抑えて開く最も簡単な方法
ズーム:1
要素にデフォルト以外の幅を設定すると、hasLayout が自動的にオンになります。
方法 2
折りたたまれた親要素の最後に空の div を追加し、その div をクリアフロートします
このアプローチを使用すると、ページに不必要な構造が追加されます
方法 3
after 疑似クラスを使用して、親要素の後にブロック要素を追加し、そのフロートをクリアします
この方法の原理は方法 2 と同じですが、対応する構造をページに追加する必要はありません。
位置
位置決めにより、ページ上の要素をページ上のどこにでも配置できます。
要素の位置を設定するには、position を使用します。
オプションの値
静的
デフォルト値、要素の配置は有効ではありません
相対的
要素の相対配置をオンにする
絶対
要素の絶対配置をオンにする
修理済み
要素の固定位置をオンにする
相対的な位置決め
1. 要素の相対位置決めがオンになった後、オフセットが設定されていない場合、要素はまったく変更されません。
2. 相対的に配置された要素は、ドキュメント フロー内の独自の位置を基準にして配置されます。
3. 相対的に配置された要素はドキュメント フローから切り離されません。
4. 相対配置によって、ブロック要素かブロック要素か、インライン要素かインライン要素かに関係なく、要素の性質は変わりません。
5. 相対的に配置された要素がより高いレベルに引き上げられます
絶対位置決め
1. 要素を絶対位置に設定した後、オフセットを設定しないと要素の位置は変わりません。
2. 絶対配置要素は、配置が有効になっている最も近い祖先要素を基準にして配置されます。すべての祖先要素で配置が有効になっていない場合は、ブラウザ ウィンドウを基準にして配置されます。
3. 絶対的に配置された要素は、ドキュメント フローから完全に切り離されます。
4. 絶対配置では要素の性質が変わります。インライン変数ブロック。ブロックの高さと幅はコンテンツによって拡張され、排他的な行を占有しません。
5. 絶対位置決めは要素をより高いレベルに引き上げます
固定位置
固定位置決めは特別な種類の絶対位置決めであり、その特性のほとんどは絶対位置決めと同じです。
違いは、固定配置された要素は常にブラウザ ウィンドウを基準にして配置されることです。スクロールバーでもスクロールしません
IE6は固定位置をサポートしていません
階層
配置された要素 > フローティングされた要素 > ドキュメント フロー内の要素
要素の位置決めがオンになっている場合、z-index を通じて要素のレベルを設定できます。
z-index 値が大きいほど、より多くの優先要素が表示されます。
z-index 値が同じ場合、または z-index がない場合は、下位の要素が最初に表示されます。
親要素が子要素をカバーすることはありません
オフセット
要素の位置決めがオンになっている場合、要素の位置をオフセットによって設定できます。
左
配置位置から要素の左側までの距離
上
エレメント上端から位置決め位置までの距離
右
配置位置から要素の右側への距離
底
配置位置からの要素の下端までの距離
通常、要素の位置を定義するために使用される値は 2 つだけです。
コース紹介
ソフトウェアアーキテクチャ
C/S、クライアント/サーバー
1. 通常、使用するソフトウェアは C/S アーキテクチャです
2. たとえば、システム QQ、360、オフィス、XMind のソフトウェア
3.C はクライアントを表します。ユーザーはクライアントを通じてソフトウェアを使用します。
4.S はサーバーを表し、ソフトウェアのビジネス ロジックの処理を担当します。
特徴
1. 使用前にソフトウェアをインストールする必要があります
2. ソフトウェアを更新する場合は、サーバーとクライアントを同時に更新する必要があります。
3.C/Sアーキテクチャソフトウェアはプラットフォームをまたがって使用できません
4. C/S アーキテクチャ ソフトウェアのクライアントとサーバーは、比較的安全な独自のプロトコルを使用して通信します。
B/S、ブラウザ/サーバー
1.B/S は本質的には C/S ですが、B/S アーキテクチャ ソフトウェアはソフトウェアのクライアントとしてブラウザを使用します。
2. B/S アーキテクチャ ソフトウェアは、ブラウザを使用して Web ページにアクセスしてソフトウェアを使用します。
3. 例: JD.com Taobao 12306 Zhihu Sina Weibo
特徴
1. ソフトウェアをインストールする必要はなく、ブラウザを使用して指定の URL にアクセスするだけです。
2. ソフトウェアを更新する場合、クライアントを更新する必要はありません。
3. ソフトウェアはクロスプラットフォームであり、システムにブラウザがある限り使用できます。
4. B/S アーキテクチャ ソフトウェアは、クライアントとサーバー間の通信に一般的な HTTP プロトコルを使用しますが、これは比較的安全ではありません。
ベース
10 進法では、完全な数値に 1 を加えます。
バイナリ
0 1
10 11 100 101 110 111
10進数
0 1 2 3 4 5 6 7 8 9
10、11、12、13、14。 。 。
16進数
16 歳以上の場合は 1 を入力してください
0 1 2 3 4 5 6. 。 。 9 ABCDEF
10 11 12 ... 19 1a 1b 1c 1d 1e 1f
16 進数は 16 でいっぱいなので、10 11 12 13 14 15 を表すためにいくつかの特殊文字を設定する必要があります。
a b c d e f を使用して、それぞれ 10 11 12 13 14 15 を表します
8進数
8以上の場合は1を入力してください
0 1 2 3 4 5 6 7
10 11 12 13 14 15 16 17 20 21 22
コード化けの問題
文字化けの原因
コンピューターは非常に愚かな機械です。0 1 の 2 つのことしか知りません。
Web ページ上のコンテンツも含め、コンピューターに保存されているコンテンツは、最終的にバイナリ エンコード 0 1 に変換して保存する必要があります。
例: コンピューターの下部にある中国は、1010001001010101011010 に変換する必要がある場合があります。
コンテンツを読み取るときは、バイナリをエンコードして正しいコンテンツに変換する必要があります。
コーディング
特定のルールに従って文字をバイナリエンコーディングに変換するプロセス
デコード
特定のルールに従ってバイナリエンコーディングを文字に変換するプロセス
キャラクターセット
エンコードとデコードに使用されるルールは文字セットと呼ばれます
一般的な文字セット
アスキー
ISO-8859-1
GBK
GB2312
中国語システムのデフォルトのエンコーディング
UTF-8
ユニバーサル コード、地球上のすべてのテキストをサポート
ANSI
システムのデフォルトのエンコーディングでファイルを自動的に保存します
文字化けの根本原因は、エンコードとデコードで異なる文字セットが使用されていることです。
中国語システム ブラウザでは、デフォルトで GB2312 がデコードに使用されます。
ボックスモデル
CSS は各要素を長方形のボックスに設定します
ページ レイアウトを容易にするために、すべての要素をボックスとして設定します。
これらの要素がすべてボックスの場合、レイアウトはページ上にボックスを配置することになります。
ボックスモデル
各ボックスは次の部品で構成されています
コンテンツエリア
コンテンツ領域は、ボックスに物を保管するスペースに相当します。
コンテンツ領域はボックスの最も内側にあります
要素のすべての子要素は、親要素のコンテンツ領域に配置されます
コンテンツエリアの設定
幅
コンテンツ領域の幅
身長
コンテンツ領域の高さ
パディング
パディングは、コンテンツ領域と境界線の間の距離を指し、ボックスのサイズに影響します。
ボックスには 4 つのパディング方向があります。
パディングトップ
右パディング
パディングボトム
パディング左
パディング
4 方向のパディングを同時に設定でき、ルールは border-width と一致します。
パディング: 右上下左
パディング: 上、左、右、下
パディング: 上下左右
パディング: 上、下、左、右
表示されるボックスのサイズは、コンテンツ領域、パディング、境界線によって決まります。
フレーム
表示されているボックスの最も外側が境界ボックスであり、境界線はボックスの端です。
境界線を設定する
境界線を設定するには 3 つのスタイルを同時に設定する必要があり、そのうちの 1 つは必須です。
境界線の幅
境界線の幅
4 つの境界線の幅を同時に指定することも、個別に指定することもできます。
ルール
4つの値
ボーダー幅: 10px 20px 30px 40px;
ボーダー幅: 右上下左;
3つの価値観
ボーダー幅: 10px 20px 30px;
ボーダー幅: 上、左、下。
2つの値
ボーダー幅: 10px 20px;
ボーダー幅: 上下左右;
価値
境界線の幅: 10px;
ボーダー幅: 上下左右;
ボーダの色
ボーダの色
ボーダースタイル
ボーダースタイル
これら 3 つのスタイルに加えて、CSS には次のものも用意されています。
ボーダー-xxx-幅
ボーダー-xxx-色
ボーダーxxxスタイル
xxxは可能です
上
右
底
左
これらのスタイルを使用すると、4 つの辺の色、幅、スタイルを個別に指定できます。
境界線の短縮プロパティ
国境
左端
ボーダートップ
境界線右
ボーダーボトム
これらの属性は、境界線関連のスタイルを同時に設定できます。
borderは4辺の色、幅、スタイルを同時に設定可能
border-xxx は特定のエッジを個別に設定できます
ルール
これらのスタイルを使用すると、border-width、border-style、border-color を同時に設定でき、さまざまな属性をスペースで区切ることができ、順序の要件はありません。
余白
マージン ボックスと他のボックスの間の距離は、表示されるボックスのサイズには影響しませんが、ボックスの位置には影響します。
四方向にも余白がある
マージントップ
右マージン
マージン-ボトム
左マージン
略記属性
マージン
ルールはパディングと同じです
マージン値
自動に設定可能
左右のマージンを個別に自動に設定すると、左または右のマージンが最大値に設定されます。
左マージンと右マージンの両方が auto に設定されている場合、左マージンと右マージンは同じ値に設定され、それによって子要素が親要素内で水平方向の中央に配置されます。
マージン:0 自動
負の値に設定可能
マージンが負の値に設定されている場合、要素は反対方向に移動します。
マージンの重なり
隣接する垂直マージンが重なる
隣接する要素のマージンは最大値になります。
子要素のマージンは親要素に渡されます
水平方向のマージンは重なりませんが、合計されます。
インライン要素のボックスモデル
幅
身長
サポートしません
パディング
水平パディングをサポート
垂直方向のパディングもサポートされていますが、レイアウトには影響しません。
国境
4 方向の境界線をサポートしますが、垂直方向の境界線はレイアウトに影響しません。
マージン
水平マージンのサポート
縦向きには対応していません
ボックスモデル関連のスタイル
画面
要素の表示タイプを設定する
オプションの値
なし
要素はページ上に表示されず、ページの位置を占めません。
ブロック
要素はブロック要素として表示されます
列をなして
要素はインライン要素として表示されます
インラインブロック
要素はインライン ブロック要素として表示されます
インライン要素とブロック要素の両方を備えています
列を占有しないでください
幅と高さを設定できる
可視性
要素をページ上に表示するかどうかを設定します
オプションの値
見える
デフォルト値。要素はページ上に通常どおり表示されます。
隠れた
要素はページには表示されませんが、ページ上の位置を占めています。
オーバーフロー
要素がオーバーフロー コンテンツを処理する方法を設定する
オプションの値
見える
デフォルト値では、オーバーフローコンテンツは処理されず、親要素の外側に表示されます。
隠れた
あふれたコンテンツは非表示になり、表示されません。
スクロール
水平スクロールバーと垂直スクロールバーの両方を親要素に追加します。
コンテンツがオーバーフローするかどうかに関係なく、スクロール バーが追加されます。
自動
必要に応じてスクロール バーを自動的に生成する
書類の流れ
ドキュメント フローは Web ページ内の場所を指します
ドキュメント フローは Web ページの基礎であり、デフォルトではすべての要素がドキュメント フローに配置されます。
要素は、デフォルトでドキュメント フロー内で左から右、上から下に配置されます (執筆習慣と一致しています)。
ブロック要素
1. ブロック要素はドキュメント フローの上から下に配置されます。
2. ドキュメント フロー内のブロック要素の幅は、デフォルトでは親要素の 100% です。
3. ドキュメント フロー内のブロック要素の高さは、デフォルトではコンテンツによって引き伸ばされます。
インライン要素
1. インライン要素はドキュメント フロー内で左から右に配置されます。1 行ですべてのインライン要素を収容できない場合は、次の行に切り替えて、引き続き左から右に配置します。
2. ドキュメント フローでは、デフォルトでインライン要素の幅と高さがコンテンツによって引き伸ばされます。