Wondershare EdrawMind
マインドマップギャラリー HTML CSS
- 21
HTML CSS
html と css の共通の基礎、CSS はカスケード スタイル シート、html はハイパー テキスト マークアップ言語です。
2023-08-22 15:01:32 に編集されました
- おすすめ
- アウトライン
HTML CSS
CSS の概念
カスケード スタイル シート
カスケード スタイル シート
CSS 構文
コメント
/* */
セレクター {プロパティ:プロパティ値;プロパティ:プロパティ値;プロパティ:プロパティ値;...プロパティ:プロパティ値;}
一般的な CSS セレクター
基本的な
ラベル
タグ名{}
ID
特徴
独自性
＃箱{}
クラス
特徴
1対多の
多対一
。赤{}
疑似クラス
:ホバー
：リンク
：アクティブ
:訪問しました
ワイルドカード
*
複雑な
グループ
セレクター 1、セレクター 2、....{}
含む
セレクター 1 セレクター 2 ...{}
特定
セレクター 1 セレクター 2...{}
共通の CSS プロパティ
文章
フォントサイズ
色
行の高さ
テキスト整列
フォントの太さ
大胆な
普通
ライター
より大胆な
フォントスタイル
普通
イタリック
フォントファミリー
フォントバリアント
普通
小さな帽子
テキストインデント
テキスト装飾
下線
上線
ラインスルー
なし
テキスト変換
大文字
小文字
大文字にする
テキストオーバーフロー
文字間隔
単語の間隔
ボックスモデル
マージン
4 値法をサポート
単一方向の定義をサポート
負の値をサポート
背景画像はサポートされていません
垂直方向に隣接するマージ
親ボックスのオーバーフロー:非表示
サブボックスフロート
国境
特徴
サポート背景画像
単一方向をサポート
4 値メソッドはサポートされていません
ボーダーウェッジ
三角形
ボーダー:100ピクセルの透明な実線;
ボーダートップカラー:赤;
高さ:0;
幅:0;
属性
境界線の幅
ボーダースタイル
固体
実線
破線
破線
点在
点線
ダブル
二重線
ボーダの色
パディング
4 値法をサポート
単一方向をサポート
サポート背景画像
負の値はサポートされていません
対応する幅と高さを減らす必要があります (奇妙なボックスには必要ありません)。
コンテンツ
幅
身長
浮く
浮く
左
右
なし
クリア
左
右
なし
両方
浮きの影響を受けたくない箱の上に置きます
位置
比較的
相対的
特徴
適応外スペースの占有なし
自分に対する相対的な位置
小さな位置移動に使用可能
絶対位置決めに使用できる参照オブジェクト
絶対
絶対
特徴
適応外でスペースを占有しない
包含ブロックを基準とした位置決め
座標を書き込まず、そのままにしておきます
息子は父親とは全く違う
修理済み
修理済み
特徴
相対的なウィンドウの位置
適応外でスペースを占有しない
座標を書き込まず、そのままにしておきます
粘度
粘着性のある
特徴
座標と組み合わせて使用する必要があります
相対位置決めと固定位置決めを組み合わせたものに相当
適応外スペースの占有なし
静的
静的
特徴
適応外スペースの占有なし
座標属性はサポートされていません
階層属性はサポートされていません
要素の種類
分類
ブロックレベル
専用ライン
設定可能な幅と高さ
行の高さは高さをサポートできます
フローティング後、水平に配置されます
列をなして
一行で表示する
幅と高さを設定できません
行の高さは高さをサポートできません
フローティング後の幅と高さを設定できます
テキストインデントはサポートされていません
ボックス モデル関連の属性はサポートされておらず、垂直方向では無効です。
変換する
画面
ブロック
インラインブロック
列をなして
なし
隠し要素
リスト項目
リストタイプ
テーブルセル
細胞の種類
応用
可変幅ナビゲーションを水平方向に中央揃え
ul{text-align:center}
li {ディスプレイ:インラインブロック;}
単一行が中央に、複数行が左に
.all {text-align:center;}
.all p {display:inline-block;text-align-left};
絵のギャップ
img{表示:ブロック;
img{vertical-align:top/middle/bottom;}
.all{font-size:0;}
画像を垂直方向の中央に配置する
方法1
.all {高さ:400ピクセル;行の高さ:400ピクセル;}
img{vertical-align:middle;}
方法 2
img{vertical-align:middle;}
スパン{vertical-align:middle;width:0;height:100%;display:inline-block}
テーブル関連
境界線の間隔
ベゼルギャップ
境界線の折りたたみ
境界線の結合
テーブルレイアウト
テーブルレイアウトを固定
価値
修理済み
テーブルレイアウトを固定
自動
自動テーブルレイアウト
空のセル
内容が表示されていないセル
価値
隠れる
内容のないセルを非表示にする
見せる
その日のセルは表示されません
背景関連
背景色
背景画像
URL();
背景リピート
繰り返す
繰り返し禁止
リピート-x
繰り返します
背景位置
水平方向と垂直方向
ピクセル
%
右上左下
背景添付ファイル
スクロール
相対ボックス
修理済み
相対ウィンドウ
リスト関連
リストスタイル:なし
css3
セレクタ
基本的な
ラベル
ID
クラス
*
階層
子孫
（空間）
子孫
>
近所の兄弟
ユニバーサル
～
疑似クラス
動的疑似クラス
:ホバー
：リンク
：アクティブ
:訪問しました
：集中
構造擬似クラス
キッズシリーズ
:n番目の子()
：第一子
：最後の子
：一人っ子
:nth-last-child()
息子シリーズ
:nth-of-type()
:タイプの最初
:最後のタイプ
:タイプのみ
:nth-last-of-type()
：根
：空の
：ない（）
疑似クラスを否定する
：ない
言語擬似クラス
:lang
ターゲット疑似クラス
：目標
アンカーリンクと組み合わせて使用する必要があります
ターゲットに置く
IDのあるものが対象です
UI要素の状態の疑似クラス
：無効
:有効
:読み取り専用
：読み書き
:チェック済み
属性
[属性]
[attr=val]
[属性^=値]
[attr$=val]
[attr*=val]
[attr~=val]
[属性|=値]
疑似要素 (インライン)
::after {コンテンツ:""}
::前 {コンテンツ:""}
::最初の行
：：最初の一文字
：：選択
重み
*
0.1
ラベル
1
クラス
10
疑似クラス
10
属性
10
ID
100
列をなして
1000
！重要
10000
属性
コーナー半径
境界半径
ボックスシャドウ
ボックスシャドウ
差し込み
内なる影
右の方へ
下
曖昧さの程度
拡大の程度
影の色
テキストシャドウ
テキストシャドウ
右の方へ
下
曖昧さの程度
変形
変換(2D)
翻訳する（）
回転()
規模（）
斜め（）
変換(3D)
被写界深度を定義する
視点
変形タイプの定義
変換スタイル:3d を保持;
3D変形
翻訳3D
ローテックス
回転性のある
回転します
スケール3D
変形の開始点を定義する
変換元
遷移
遷移
勾配
線形勾配
背景:線形グラデーション(0度、#000、#000)
放射状グラデーション
背景:radial-gradient(位置の半径、#000、#000)
半径: メジャー/マイナー
位置: x/y
線形グラデーションタイリング
背景:繰り返し線形グラデーション(0度、#000 5px、#000 10px)
放射状グラデーション タイリング
背景:繰り返し放射状グラデーション(位置の半径、#000 5px、#000 10px)
アニメーション
アニメーションステートメント
@キーフレーム名{}
アニメーションコール
アニメーション: 名前 .5 秒リニア 0 秒無限アラートネイト フォワード
レイアウト
フレックスボックスのレイアウト
容器
ディスプレイ:フレックス
フレックス方向
カラム
行
列反転
行反転
フレックスラップ
包む
ノーラップ
ラップリバース
コンテンツの正当化
フレックススタート
フレックスエンド
中心
間のスペース
周囲の空間
均等な空間
アイテムの整列
ストレッチ
フレックススタート
フレックスエンド
中心
ベースライン
整列内容
ストレッチ
フレックススタート
フレックスエンド
中心
間のスペース
周囲の空間
均等な空間
プロジェクト
フレックス
フレックスシュリンク
フレックスグロー
フレックスベース
整列自己
ストレッチ
フレックススタート
フレックスエンド
中心
ベースライン
注文
グリッドレイアウト
容器
表示:グリッド
グリッドテンプレート列
200ピクセル 200ピクセル 200ピクセル
20% 50% 30%
リピート(3,200px)
繰り返し(自動入力、20%)
1時間 1時間 1時間
1fr 1frr 1minmax(200px,1fr)
グリッドテンプレート行
200ピクセル 200ピクセル 200ピクセル
20% 50% 30%
リピート(3,200px)
繰り返し(自動入力、20%)
グリッドギャップ
行ギャップ
カラムギャップ
グリッドテンプレートエリア
コンテンツの正当化
コンテンツの整列
項目の位置揃え
アイテムの整列
プロジェクト
グリッドエリア
グリッド列
グリッド列の開始
グリッド列の端
グリッド行
グリッド行の開始
グリッド行の端
複数列のレイアウト
列
列:5 200ピクセル;
列数
列幅
カラムギャップ
列ルール
列スパン
列の塗りつぶし
メディアからのお問い合わせ
<link mate="画面と (min-width:960px) と (max-width:1200px)">
@media 画面と (min-width:960px) および (max-width:1200px)
ボックスモデル
ボックスのサイジング
ボーダーボックス
奇妙なボックスモデル
特徴
幅高さ内の境界線のパディング
コンテンツボックス
スタンダードボックスモデル
特徴
幅高さにはパディング境界線は含まれません
互換性がある
コンテンツ
トライデント
ヤモリ
ウェブキット
まばたき
プレスト
接頭辞
-モズ-
-MS-
-ウェブキット-
-o-
用語
プログレッシブエンハンスメント
最初に低バージョン、次に高バージョン、低バージョンの機能の実装に重点を置き、高バージョンにクールなエフェクトを追加
グレースフルダウングレード
最初に高、次に低、高バージョンの機能の効果に焦点を当て、低バージョンの互換性に対処する必要がある
他の
フォントアイコン
http://www.iconfont.cn
アンカーリンク
<a href="#one"></a>
ジャンプ
<a name="one"></a>
<div id="one"></div>
センタリング方式
位置
方法1
親ボックス
位置:相対;
サブボックス
位置:絶対;
トップ:50%;
左:50%;
margin-left:-半角;
margin-top:-半分の高さ;
マージン:自動
方法 2
親ボックス
位置:相対;
サブボックス
位置:絶対;
トップ:0;
下:0;
左:0;
右:0;
マージン:自動
方法 3
親ボックス
位置:相対;
サブボックス
位置:絶対;
トップ:calc(50% - 半分高い);
left:calc(50% - 幅の半分);
方法 4
親ボックス
位置:相対;
サブボックス
位置:絶対;
トップ:50%;
左:50%;
翻訳(-50%,-50%);
フレックスボックス
方法1
親ボックス
ディスプレイ:フレックス;
サブボックス
マージン:自動;
方法 2
親ボックス
ディスプレイフレックス;
コンテンツの位置揃え:中央;
整列項目:中央;
方法 3
親ボックス
ディスプレイ:フレックス;
コンテンツの位置揃え:中央;
サブボックス
自己整列:中心
グリッド
方法1
親ボックス
表示:グリッド;
コンテンツの位置揃え:中央;
コンテンツを整列:中央に配置します。
方法 2
親ボックス
表示:グリッド;
サブボックス
マージン:自動;
ライン内転送ブロック
方法1
親ボックス
行の高さ: 高;
テキスト整列:中央;
親ボックス
表示:インラインブロック;
垂直配置:中央;
行の高さ:高;
方法 2
親ボックス
テキスト整列:中央;
サブボックス
表示:インラインブロック;
垂直配置:中央;
親ボックスの疑似要素::after
コンテンツ："";
表示:インラインブロック;
垂直配置:中央;
幅:0;
高さ:100%;
方法 3
親ボックス
テキスト整列:中央;
垂直配置:中央;
表示:テーブルセル;
サブボックス
表示:インラインブロック;
複数行のテキストを垂直方向に中央揃えにする
親ボックス
垂直配置:中央;
表示:テーブルセル;
コードセグメント
省略記号
固定幅
幅
改行はありません
ホワイトスペース:ナラップ;
オーバーフロー非表示
オーバーフロー:非表示
省略記号
テキストオーバーフロー:省略記号
モバイルレイアウト
ビューポート
ビューポート、モバイルのデフォルトは 980
北朝鮮
デバイスのピクセル比
レイアウト
パーセントレイアウト
スケールレイアウト
ユニット
えっと
それ自体の倍数、または親ボックスのフォント サイズ
レム
ルート (html) フォント サイズの倍数
vw
ビューポート幅の 1 パーセント
うーん
ビューポートの高さの 1 パーセント
vmin
1パーセントの短辺
vmax
長辺の 1 パーセント
BFC
トリガー可能なプロパティ
浮く
左
右
オーバーフロー
隠れた
スクロール
自動
位置
絶対
修理済み
画面
インラインブロック
テーブルセル
表のキャプション
フレックス
応用
マージントップペネトレーション問題
高さ崩壊問題
適応可能な幅と高さ
幅対応コンテンツ
浮く
位置
インラインブロック
適応性の高いコンテンツ
高度に崩壊した
子ボックスは浮動しており、親ボックスの高さは 0 です。
解決する
固定高さ
アドバンテージ
単純
欠点がある
適応できない
親ボックスにoverflow:hiddenを追加
アドバンテージ
適応性のある
欠点がある
オーバーフロー非表示
フロートの下に空のボックスを追加し、clear:both; を設定します。
アドバンテージ
適応できる
オーバーフローせずに非表示にする
欠点がある
もう 1 つのボックスをロードする必要があります
ユニバーサルクリアフロートメソッド、add::after{content:"";display:block;clear:both;} を親ボックスに追加
アドバンテージ
適応性のある
オーバーフロー非表示の問題
追加のボックスをロードする必要はありません
高さ適応ウィンドウ
html,body{高さ:100%;}
HTML5
特徴
基本構造はもっとシンプル
文法緩和
ラベルのセマンティクス
スタイルがなくても明確な構造を提示できる
SEOに使いやすい
チームワークとメンテナンス後のコードの変更を促進します。
アクセシビリティ
将来の機能
セマンティックタグを追加する
大きな意味論
ヘッダ
フッター
主要
ナビ
セクション
記事
脇に
小さな意味論
形
図のキャプション
マーク
キャンバス
ビデオ
属性
コントロール
自動再生
ミュートされた
ループ
送信元
サポートされている形式
mp4
ああ
ウェブム
幅
身長
オーディオ
属性
コントロール
自動再生
ミュートされた
ループ
送信元
サポートされている形式
mp3
ああ
ウェーブ
詳細
まとめ
ソース
スマートなフォルム
新しい属性を追加する
必須
必須フィールド
オートフォーカス
オートフォーカス
プレースホルダー
プレースホルダー
オートコンプリート
履歴記録を有効にするかどうか
価値
の上
オフ
パターン
定期検証
新しいコントロールを追加する
電話番号
Eメール
URL
番号
分
最大
ステップ
範囲
分
最大
ステップ
色
検索
日付
月
週
時間
データタイムローカル
HTMLの共通タグ
テキストクラス
タイトル
h1
通常、ロゴを配置するために使用されます
h2
通常、列のタイトルを入れるために使用されます
h3
h4
h5
h6
段落
p
変更クラス
大胆な
b
強い
強力なセマンティクス
傾ける
私
えっと
強力なセマンティクス
下線
あなた
インス
強力なセマンティクス
取り消し線
s
デル
強力なセマンティクス
上付き文字と下付き文字
すする
上付き文字
サブ
添字
テーブルクラス
ラベル
テーブル
tr
た
番目
列ヘッダー
キャプション
表のタイトル
行のグループ化
宣伝
ボディ
tフット
列のグループ化
コルグループ
属性
ルール
グループ分割線
価値
全て
コル
行
なし
グループ
幅
身長
国境
バックカラー
整列する
水平方向の配置
価値
左
右
中心
ヴァライン
垂直方向の配置
価値
上
真ん中
底
ベースライン
コルスパン
行スパン
セル間隔
セルパディング
フォームクラス
フォームフィールド
形状
方法
投稿方法
価値
得る
危険な
共有可能
2KB未満のプロセスデータ
アドレスバーの長さの影響を受ける
効率的
データを取得するプロセス
役職
データ転送のプロセス
サイズ制限なし
比較的安全な
効率が低い
共有不可
アクション
ターゲットアドレス
価値
(ジャンプしたアドレス)
名前
目標
オープンメソッド
価値
_空白
新しいウィンドウで開く
_自己
現在のウィンドウが開いています
フォームコントロール(タイプ)
文章
文章
パスワード
パスワード
単一の選択
無線
各グループは同じ名前属性値を持つ必要があります
複数の選択肢
チェックボックス
落ちる
選択>オプション
テキストフィールド
テキストエリア
ボタン
画像
ボタン
提出する
リセット
ファイル
関連するプロパティ
名前
名前
価値
価値
複数
複数の選択肢
チェック済み
デフォルトでチェックされています
選択された
デフォルトでオンになっているドロップダウン メニュー
読み取り専用
読み取り専用
無効
無効にする
リストクラス
秩序ある
オル＞リ
属性
タイプ
価値
1
ある
あ
私
私
始める
障害
ウル>リ
属性
タイプ
価値
丸
ディスク
四角
なし
カスタマイズ
dl>dt dd
パスに依存する
写真
画像
属性
scr
タイトル
代替
幅
身長
ハイパーリンク
ある
属性
href
タイトル
目標
パス
比較的
同じレベル
./
直接書く
上位レベル
../
次のレベル
フォルダ
書類
絶対
ドライブレターから始める
ド：\……
Web ページから使用される
https://img…。
違い
比較的
参考資料あります
ドライブ文字を交差させることはできません
絶対
参考になりません
ローカルのものは複数のコンピュータにまたがることはできません (コンピュータ上のパスが同じでない限り)
他の
br
強制改行
時
水平線
ディビジョン
スパン
文字エンティティ
>
<
©
®
文法
ダブルラベル
<タグ名 属性="属性値"></タグ名>
シングルラベル
<タグ名属性="属性値" />
ラベル、マーク、要素
htmlの基本構造
文書宣言ヘッダー
ドキュメント タイプが html であることをブラウザに伝えます
文字コード
charset="utf-8"
ページタイトル
タイトル
HTMLの概念
ハイパーテキストマークアップ言語
ハイパーテキストマークアップ言語