マインドマップギャラリー HTML5 と CSS3 の知識ポイント
これは、HTML ページ要素と属性、CSS の概要、CSS ボックス モデル、フローティングと配置、フォーム アプリケーションなどを含む、HTML5 CSS3 の知識ポイントに関するマインド マップです。
2021-07-06 01:12:01 に編集されましたHTML CSS3
初めての HTML 入門
テキストコントロールタグ
タイトルタグ
<hn align="alignment">タイトルのテキスト</hn>
段落記号
<p align="alignment">タイトルのテキスト</p>
横線マーク
<hr 属性="属性値"/>
改行記号
<br/>
テキストの書式設定タグ
<b></b> および <strong></strong> のテキストは太字で表示されます (b は太字のテキストを定義し、strong は強調されたテキストを定義します)。
画像タグ
<img src=”画像URL”/>
画像が表示できない場合の代替テキスト
ハイパーリンクタグ
<a href="ジャンプ ターゲット" target="ターゲット ウィンドウのポップアップ方法">テキストまたは画像</a> target _self はデフォルト値で、元のウィンドウで開くことを意味し、_blank は新しいウィンドウで開くことを意味します。
アンカー リンク <a href="#id name">リンク テキスト</a>
HTML ページの要素と属性
リスト要素
<ul> 順序なしリスト <li>リスト項目 1</li> (<ul></ul> は <li> </li> のみネストできます)
<ol> 順序付きリスト <li>リスト項目 1</li> リスト番号の開始値を変更します <ol start="2">
dl 要素は、用語や名詞を説明するためによく使用されます。 <dl> <dt>名詞 1</dt> <dd>名詞 1 の説明<dd>
構造要素
ヘッダー要素
header 要素 (通常はページの先頭に配置されるすべてのコンテンツを含めることができる、ガイドおよびナビゲーションの役割を持つ構造要素) 基本的な文法形式。 <ヘッダー> <h1>ウェブテーマ</h1> …。 </ヘッダ>
ナビ要素
nav 要素 (ナビゲーション プロパティを持つリンクを 1 つの領域に要約できます) 基本的な構文形式: <ナビ> <ul> <li><a href=”#”>ホームページ</li> </ul> </nav>
ページのインタラクティブ要素
詳細要素と概要要素
詳細要素と概要要素の概要は詳細のタイトルを定義し、クリックすると非表示のコンテンツが表示されます。 <詳細> <summary>リストを表示</summary> <ul> <li>リスト 1</li> <li>リスト 2</li> </ul> </詳細>
CSS の入門
CSSスタイルシート
列をなして
<tagname style="属性1:属性値1";"属性2:属性値2";>内容</tagname>
埋め込み
<頭> <style type="text/css"> セレクター {属性 1: 属性値 1; 属性 2: 属性値 2} </スタイル> </head>
type=テキスト/CSS
リンクイン
<link href="CSS ファイルへのパス" type="text/css" rel="stylesheet"> 3 つすべてが存在する必要があります
CSSの基本セレクター
タグセレクター
タグ名 {属性1:属性値1; 属性2:属性値2}
クラスセレクター
.クラス名 {属性 1: 属性値 1; 属性 2: 属性値 2}
IDセレクター
#id 名 {属性 1: 属性値 1; 属性 2: 属性値 2}
ワイルドカードセレクター
*{属性 1: 属性値 1; 属性 2: 属性値 2}
ページ上のすべての要素と一致する可能性があります
ユニオンセレクター
セレクターはカンマで接続されており、任意のセレクターを共用体セレクターの一部として使用できます。
テキストスタイルのプロパティ
font-size: フォントサイズ
em フォント サイズ px ピクセルが最も一般的に使用されます
フォントファミリー: フォント
em フォント サイズ px ピクセルが最も一般的に使用されます
font-weight: フォントの太さ
通常 デフォルト 太字 太字を定義します。 太字 太字を定義します。 より軽い文字を定義します (100-900) 400 は通常に等しい
フォントスタイル: フォントスタイル
通常のデフォルト値 斜体 斜体 斜体
テキストの外観プロパティ
colorer: テキストの色
行の高さの行間隔
一般に、属性値の単位には次の 3 種類があります: ピクセル px 相対値 em パーセンテージ %
テキスト装飾 テキスト装飾
なし 装飾なし 下線 下線 上線 上線 取り消し線
text-align: 水平配置モード
左 左揃え 右 右揃え 中央 中央
Taxt-indent: 最初の行のインデント
フォーム申請
フォームの作成
<from action="URLアドレス" method="送信方法(投稿)" name="フォーム名"> さまざまなフォームコントロール </から>
入力要素と属性
単一行のテキスト入力ボックス ,<input type="text">
パスワード入力ボックス <入力タイプ="パスワード">
単一のボタン <input type="ラジオ">
チェックボックス <input type="チェックボックス">
送信ボタン <input type="送信">
リセットボタン <input type="リセット">
要素を選択
<選択> <オプション>オプション</オプション> <オプション>オプション</オプション> <選択>
フローティングと位置決め
要素フロート
float要素のfloat属性 left 要素は左にフロートします right 要素は右にフロートします none 要素はフロートしません
要素の配置
位置: 属性値 静的 静的位置決め 相対的 相対的位置決め 絶対的 絶対的位置決め 固定 固定位置決め
要素の種類
<span> タグにはテキストとさまざまなインライン タグのみを含めることができます
CSSボックスモデル
<div>ボックスモデル
<div> はブロックレベルの要素を置き換えることができます
<div> と </div> の間のスペースはボックスに相当します。同時に、段落、タイトル、表、画像などのさまざまなネットワーク要素を収容できます。等
ボックスモデル関連のプロパティ
境界線のプロパティ
ボーダースタイル
border-style: /ボーダースタイルの総合設定/
境界線の幅
境界線の幅 4 辺の値
ボーダの色
ボーダの色
包括的な境界線設定
ボーダー:幅のスタイルの色
マージンのプロパティ
自動 自動
パディング パディング
パディングトップのトップパディング パディング - 底部の底部パディング パディング-左の左パディング パディング-右右パディング
マージンマージン
マージントップの上部パディング マージンとボトムの下のパディング マージン左の左パディング マージン右の右パディング 右上余白 左下余白
内側と外側の余白を明確にする
*{ パディング: 0; マージン: 0; }
背景のプロパティ
ボックスに写真を追加する場合 幅と高さが両方とも 100% の場合、カバレッジを自動的に調整できます。
背景色 背景色の設定
背景画像 背景画像を設定する
背景リピート 背景画像タイルを設定する
背景 - タイルを水平方向と垂直方向に繰り返します -no-repeat タイリングしない 水平方向に x 個のタイルを繰り返します y を繰り返して垂直方向に並べて表示します
背景位置 背景画像の位置を制御するピクセル値
背景サイズ 画像サイズの設定
背景サイズ: 属性 1 属性 2; カバーは十分な大きさで、最大収容サイズはコンテンツ領域に完全に収まります。
CSS3セレクター
:セレクタの前
選択した要素のコンテンツの前にコンテンツを挿入するには、content 属性でコンテンツを指定する必要があります。 <要素>: 前 { コンテンツ: テキスト。 }
リンク疑似クラス
a: link{css style rules;} 未訪問のハイパーリンクのステータス
a: Visited{css style rules;} 訪問後のハイパーリンクのステータス
a: hover {css style rules;} マウスが通過またはホバーしたときのハイパーリンクの状態
a: active {css style rules;} マウスが動いていないときのハイパーリンクの状態
左左 そうそう センターセンター
幅(幅) 身長 タイトル(マウスオーバーで表示される内容)