1.HTML部分
1. 2 つのボックス
<div>、<span>
2.画像ラベル
<img scr="url">
3. 相対パスと絶対パス
①相対パス：参照ファイルの位置を基準として設定されたディレクトリパスです。同階層パス、下位パス/、上位パスのファイル名を直接記述します../。
②絶対パス：完全なパス名
4. ハイパーリンクラベル
<a href="跳转路径" target="目标窗口弹出方式">文本或图像</a>、ターゲット ウィンドウのポップアップ モード: 現在のウィンドウまたは新しいウィンドウなど。アンカー リンクをクリックする<a href="#xxx"></a>と、#xxx という名前の ID を持つタグにジャンプします。
5. フォームラベル
①基本的な文法は
<table></table>テーブルの label の定義に使用され
<tr</tr>、テーブルの行の定義に使用され、テーブルの
<th></th>ヘッダー
<td></td>セルの定義に使用され、tr にネストされます。
②セルの結合 行をまたいで結合:列をまたがって結合: の 3 つのステップで結合します。最初に行と列を交差していることを確認し、次にターゲットセルを見つけて、最後に冗長なセルを削除しますrowspan="合并单元格个数"colsspan="合并单元格个数"
6. リストラベル
① 順序なしリスト
<ul>
<li>xxx</li>
<li>xxx</li>
...
</ul>
②順序付きリスト
<ol>
<li>xxx</li>
<li>xxx</li>
...
</ol>
③カスタムリスト（dtの内容の周囲にddの内容を記述する）
<dl>
<dt>xxx</dt>
<dd>xxx</dd>
<dd>xxx</dd>
...
</dl>
7. フォームラベル
①フォームフィールド、フォームコントロール（フォーム要素）、プロンプト情報の3 つの部分からなります
。 ② フォームフィールド
<form action="提交的url" method="get/post" name="表单域名称">各种表单元素</form>
③フォーム要素
(1) <input type="属性值" name="xx" value="xx" checked="checked" maxlength="正整数">
type の属性値は、text(テキスト)、button(ボタン)、checkbox(チェックボックス)、radio(ラジオボックス)、file()、password(パスワードボックス)、submit( submit ボタン)、rwset (リセット ボタン)、file (アップロード ボタン)
name: 入力要素の名前を定義します
value: 入力要素の値を指定します
check: 最初にロードされるときに入力要素が選択されるように指定しますtime
maxlength: 入力フィールドの文字を指定します。最大長
(2)<labal for="xxx"></labal>タグは入力要素のラベルを定義し、for は入力の ID 値に対応します。
(3) ドロップダウンフォーム要素
<select>
<option>xxx</option>
<option>xxx</option>
...
</select>
(4) テキストフィールド要素 ``` テキストコンテンツ
8. HTML5の新機能
①新しいセマンティックタグの追加
<header>：ヘッドタグ
<nav>：ナビゲーションタグ
<article>：コンテンツタグ
<section>：ドキュメントの特定の領域を定義
<aside>：サイドバータグ
<footer>：テールタグ
これらの新しいタグはモバイル端末で一般的に使用されます
②新しいマルチメディアタブ
(1) 音声
<audio src="url" controls="controls"></audio>
その他のプロパティ:
(2)ビデオ
<vidio src="url" controls="controls"></vidio>
その他のプロパティ:
③ 入力フォームと属性の追加
(1) 入力フォームの追加
(2) 入力属性の追加
2.CSS部分
1.CSSセレクター
①タグセレクター
HTMLタグ名をセレクターとして使用します。
②クラスセレクター（xxxはクラス名）
.xxx{
xxx:xxx;
...
}
③idセレクター(xxxはid名)
#xxx{
xxx:xxx;
...
}
④ワイルドカードセレクター
ページ内のすべての要素を選択します
*{
xxx:xxx;
...
}
最初のいくつかは基本的なセレクターであり、次のいくつかは複合セレクターです。
⑤ 子孫セレクター
構文:
元素1 元素2{
xxx:xxx;
}
要素 1 の要素 2 を選択します。要素 2 は子または下位レベルにすることができます。
⑥ サブセレクターの
構文:
元素1>元素2{
xxx:xxx;
}
要素の最も近い子要素としてのみ選択できます。簡単に理解すると、親子要素を選択することになります。
⑦共用体セレクター
構文:
元素1,
元素2{
xxx:xxx;
}
カンマで区切られた「および」は、
⑧疑似クラスセレクタ
コロン(:)で指定します。
(1) リンク疑似クラス
開発時は、確実に有効にするため、上記の順序で記述してください。
(2): フォーカス疑似クラス
は、通常、フォーム、どのフォーム要素が選択されているか、スタイルが与えられます
2.CSSフォントのプロパティ
body:{
font:font-style font-weight font-size/line-height font-family;
}
これは、フォント ファミリー、太さ、サイズ (px)/行の高さ、テキスト スタイル (斜体など) をそれぞれ示す組み合わせの書き込み方法ですが、
font-size 属性と font-family 属性は保持する必要があります。
3. CSS テキストのプロパティ
このうち、text-align:centerテキストを水平方向に中央揃え、
line-height:盒子高度テキストを垂直方向に中央揃え、line-height:小于盒子高度テキストを上に配置、line-height:大于盒子高度テキストを上に配置することができます。
4. CSSのインポート方法
① インラインスタイル
② 内部スタイル
③ 外部スタイル<link rel="stylesheet" href="url">
5. CSS要素表示モード
①etcなどのブロック要素は<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>全てブロック要素です
特徴:
単一行を占有します。
高さ、幅、内側と外側のマージンを制御できます。デフォルトの幅はコンテナ
(親の幅) の 100% です。
②etcなどのインライン要素(インライン要素)は<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>全てインライン要素です
特徴:
隣接するインライン要素は 1 行上にあり、1 行に複数の
高さを表示できます。幅を直接設定することは無効です。
デフォルトの幅は、それ自体のコンテンツの幅です。
インライン要素にはテキストまたは他のインライン要素のみを収容できます
③ インラインブロック要素は、
<img>、<input>、<td>ブロック要素とインライン要素の性質を同時に持ちます。
特徴:
隣接するインライン要素 (インライン ブロック) がある行上ですが、それらの間には空白のギャップが生じます。1行に複数表示可能（インライン要素の特徴）
デフォルトの幅は自身の内容の幅（インラインブロックの特徴）
高さ、行の高さ、マージン、内側のマージンを制御可能（ブロックレベル要素の特徴）
④ 要素表示モードの変換
ブロック要素に変換：display:block
インラインブロック要素に変換：display:inline
ブロック要素に変換：display:inline-block
6.CSS背景スタイル
background:背景颜色 背景图片地址 背景平铺 背景图片位置 背景图像滚动;
背景画像 (-image): 実際の開発では、ロゴや一部の装飾的な小さな画像、または超大きな背景画像でよく使用され、位置を制御するのに非常に便利であるという利点があります (スプライト画像も使用シナリオです)
背景のタイリング (-repeat): repeat（默认平铺）、および、no-repeat（不平铺）、repeat-x（向x方向平铺）repeat-y（向y方向平铺）
背景位置 (-position):background-position:x y;
背景画像のスクロール (-attachment): パラメーター値はscroll（背景图像随着对象内容滚动）と を持ちます。fixed（背景图像固定）
CSS3 に新たに追加された背景色の半透明度:
background:rgba(0,0,0,0.3);
最後のパラメータは透明度で、値の範囲は 0 ～ 2 です。
7. CSSの3大特徴
① カスケード
同じセレクターは同じスタイルを設定します。このとき、一方のスタイルが競合する別のスタイルをカバー (カスケード) します。カスケードは主にスタイルの競合の問題を解決します。
カスケード原則:
スタイルの競合。従うべき原則は近接性の原則です。構造に最も近いスタイルが実行されます。スタイルは
競合せず、カスケードされません。
②継承CSS
の継承: 子タグは、文字色やフォントサイズなど、親タグの特定のスタイルを継承します。
継承を適切に使用すると、コードが簡素化され、CSS スタイルの複雑さが軽減されます。
子要素は親要素のスタイルを継承できます (text-、font-、line、これらの要素の先頭を継承可能、および color 属性)。
③優先度同一要素に対して複数のセレクタを指定した場合、セレクタが同じ場合はカスケード実行、セレクタが異なる場合はセレクタの重みに従って実行する
優先度が生成されます。
セレクターの重み:
!重要 使用法: 属性の後に追加するだけです:
重みの重ね合わせ: 複合セレクターの場合、重みの重ね合わせがあり、重みを計算する必要があります。
例:
この子孫セレクターの重みは 0020 ( 2 つのクラス セレクターの重みを加算)
8. ボックスモデル
①ボックス モデルの 4 つのコンポーネント
CSS ボックス モデルは基本的に、境界線、マージン、マージン、実際のコンテンツなど、周囲の HTML 要素をカプセル化するボックスです。
border: border:border-width border-style border-color;、片側のみを設定できます。たとえば、上側の境界線を設定します。border-top:border-width border-style border-color;
border-width: 境界線の太さを定義します。単位は pxです
border-style: 境界線のスタイル、値: 実線 (実線) 、破線（点線）、点線（点線）など
border-color: 境界線の色
注: 境界線はボックスの実際のサイズにさらに追加されます。
②内余白（パディング）
注: パディングを指定した後:
1. コンテンツと境界線の間に距離があり、パディングが追加されます。
2. パディングはボックスの実際のサイズにも影響します
。つまり、ボックスに幅と高さがある場合、この時点でパディングを指定すると、それがサポートされます。 大きなボックス
ボックスの幅または高さが指定されていない場合、大きなボックスは引き伸ばされず、100% のままです。
③マージン（余白）
マージンは、次の 2 つの条件が与えられた場合に、ブロック レベルのボックスを水平方向に中央に配置できます:
(1) 幅を指定する必要がある
(2) ボックスの左右のマージンを自動に設定する
インライン要素は親要素に対して水平方向に中央揃えされます。text-align:center
ネストされたブロック要素の垂直マージンの縮小:
2 つのネストされた関係 (親子関係) を持つブロック要素の場合。親要素には上マージンがあり、子要素にも上マージンがあります。このとき、親要素はより大きなマージン値で折りたたまれます: 解決策: (1) 親要素の上ボーダーを定義できます(
2 )親要素の上部内側マージンを定義できます。親要素にマージン (3) を追加できます。overflow:hidden
内側と外側のマージンをクリアする: 多くの Web ページ要素にはデフォルトの内側と外側のマージンがあり、ブラウザによってデフォルトが一貫していないため、レイアウトの前にまず Web ページ要素の内側と外側のマージンをクリアする必要があります。
/* 这句话也是CSS的第一行代码 */
*{
margin:0;
padding:0;
}
④丸い境界線
CSS3 では、新しい丸い境界線スタイルの
border-radius:length;
半径半径 (円半径) の原則: (楕円) 円と境界線の交差により、丸い角の効果が形成されます。
パラメータ値は数値またはパーセンテージの形式にすることができます。
正方形の場合、円として設定したい場合は、値を高さまたは幅の半分に変更し、値に直接 50% を書き込みます。 ; この属性は
略語であり、その後に左上隅、右上隅、右下隅、左下隅、、、、、を表す 4 つの値を続けることが
border-top-left-radiusできborder-top-right-radiusますborder-bottom-left-radius。border-bottom-left-radius
⑤ ボックスの影
box-shadow:h-shadow v-shadow blur speead color inset;
属性は以下を表します。
9. 従来の Web ページ レイアウトの 3 つの方法
従来の Web ページ レイアウトの 3 つの方法: 標準フロー、フローティング、位置決め
①標準フローとは、
指定されたデフォルトの方法に従ってラベルが配置されることを意味します
②フローティング
floatプロパティはフローティングボックスを作成するために使用され、左または右の端が包含ブロックまたは別のフローティングボックスの端に触れるまで脇に移動します。
文法：选择器{float:属性}
フローティング機能
フロート追加後の要素:
(1) フローティング要素は標準フロー (ラベル外) から外れ、元の位置を保持しなくなります。
(2) フローティング要素は 1 行で表示され、先頭に揃えられます。要素
(3) 浮動要素はインラインブロック要素のプロパティを持ちます。
フローティングレイアウトの注意点
1. フローティングフローと標準フローの親ボックスを一致させる
まず標準フローの親要素を使って上下の位置を配置し、内部の子要素は左右の位置をフローティング配置とします
2. 要素がフローティングの場合、他の兄弟要素もフローティングになる必要があります
クリアフローティング
親ボックスの高さを与えるのは不便な場合が多いため、子ボックスはフローティングで位置を占めません最後に、親ボックスの高さが0の場合、標準のフローボックスに影響します
フローティングの本質をクリアする
- 浮遊の本質をクリアする際に浮遊要素の影響をクリアする
- 親ボックス自体に高さがある場合、フロートをクリアする必要はありません
- フローティングがクリアされた後、親はフローティング サブボックスに従って高さを自動的に検出します。親に高さがある場合、それは以下の標準フローには影響しません。
フローティング メソッドをクリアする 1:
構文:选择器{clear:属性值}
フローティング メソッドをクリアする 2:
親要素に属性を追加しoverflow、その属性値を次のように設定できます。hidden、auto或scroll
クリアフローティング方式３（：疑似要素方式後）：
クリアフローティング方式４（ダブル疑似要素方式）：
③位置決め
フローティングを使用すると、複数のブロック レベルのボックスを確認せずに一列に表示でき、ボックスを水平に配置するためによく使用されます。配置を使用すると、ボックス内の
位置を移動したり、独自に使用するために画面上の位置を固定したりできます。その他のボックス。
位置決め: ボックスを特定の位置に設定するため、位置決めとは、ボックスを配置し、位置決め方法に従ってボックスを移動することも意味します。
位置決め = 位置決めモード + エッジオフセット
配置モードは、ドキュメント内で要素を配置する方法を指定するために使用されます。
エッジ オフセットによって要素の最終的な位置が決まります。
位置決めモードはposition属性、その値は次の 4 つのタイプに分類できます。
选择器{
position:属性值;
top:xxx;
left:xxx;
}
静的位置決めに加えて、他の 3 つについては以下で説明します。
相対的な位置決め
选择器{position:relative;}
特徴:
(1) 元の位置を基準に移動します (つまり、位置を移動するときに元の位置を参照します)。 (
2) 標準フローの元の位置は引き続き占有され、次のボックスは依然として表示されます。標準フローモード 処理します（ラベルを剥がさず、元の位置を維持し続けます）
したがって、相対位置決めはラベル外ではないため、その最も一般的な用途は、後続の絶対位置決めの親要素として使用することです。（息子は決して父親には似ません）
絶対位置決め
选择器{position:absolute;}
特徴:
(1) 要素が移動している場合、絶対位置はその祖先要素を基準にします
(2) 祖先要素が存在しないか、祖先要素が配置されていない場合は、ブラウザが優先されます
(3) 祖先要素に位置決めがある場合(相対、絶対、固定)、位置は、位置決めされた祖先要素の最も近いレベルを参照点として移動されます
(4) 絶対位置決めは、元の位置を占めなくなります (ラベル外)
固定配置
选择器{position:fixed;}
機能:
(1) ブラウザの表示ウィンドウを基準点として要素を移動します
(2) 親要素とは関係ありません
(3) スクロール バーでスクロールしません
(4) 固定配置は領域を占有しません元の位置（適応外）
配置の重なり順 配置レイアウト
を使用すると、ボックスが重なる場合がありますが、このとき、 を使用してz-indexボックスの順序を制御できます。
选择器{z-index:1;}
値は正の整数、負の整数、または 0 です。デフォルトは自動です。値が大きいほど、ボックスの高さが高くなります。
属性値が同じ場合は優先順に書き込まれます
番号の後に単位を追加することはできません
配置されたボックスのみがz-indexプロパティを持ちます
ポジショニングの拡大
(1) 絶対配置ボックスを中央揃えにする
絶対配置ボックスはmargin:auto;水平方向に中央揃えにすることはできませんが、以下の計算方法により水平方向および垂直方向に中央揃えにすることができます。
选择器{
position:absolute;
/* 走父容器宽度的一半 */
left:50%;
magin-left:负的自己盒子宽度的一半;
}
(2) 位置決めの特徴
絶対位置決めは、固定位置決めやフローティングと同様です。
- インライン要素に絶対位置または固定位置を追加し、高さと幅を直接設定できます
- ブロックレベルの要素に絶対または固定の位置を追加します。幅または高さが指定されていない場合、デフォルトのサイズはコンテンツのサイズになります。
(3) ラベル外のボックスはマージンの崩壊を引き起こしません
。フローティング要素と絶対的に配置された (固定) 要素はマージンのマージの問題を引き起こしません。
(4) 絶対 (固定) 配置では、ボックスが完全に抑制されます。
フローティング要素は異なり、下の図に示すように、下部の標準フロー ボックスのみが抑制され、下部の標準フロー ボックス内のテキストは抑制されません
。絶対配置 (固定) は、以下の標準ストリーム内のすべてのコンテンツを抑制します。
フローティングの目的は元々テキストの折り返し効果であり、テキストはフローティング要素を囲むため、フローティングの場所はテキストを保持しません。
10. CSS属性の記述順序（標準コード）
レイアウト配置属性、独自属性、テキスト属性、その他属性の順序で記述することを推奨します。
ページ レイアウトの全体的な考え方:
(1) コア (表示領域) を決定する必要があります。
(2) ページ内の行モジュールと各行モジュール内の列モジュールを分析する必要があります。ページレイアウトの第一原則
(3) 行内の列モジュールはフローティング方式でレイアウトされることが多く、最初に各列のサイズを決定し、次に列の位置を決定します。ページレイアウトの第二ルール
(4) HRML構造を作る。既存の構造を踏襲した上でのスタイルがある。
(5) コードを記述する前にレイアウト構造を明確にすることが特に重要です
11. 要素の表示と非表示
本質：ページ上で要素を非表示にしたり表示したりする
①表示と非表示を切り替える（非表示にした後の位置は保持しない）
(1)display:none;非表示のオブジェクト
(2)display:block;ブロックレベルの要素に変換するだけでなく、要素を表示することも意味します
②可視性の表示と非表示（非表示後の位置を保持）
(1)visibility:hidden;要素が非表示になります
(2)visibility:visible;要素が表示されます
③オーバーフロー オーバーフロー表示非表示
(1)overflow:visible;コンテンツをカットせず、スクロールバーを追加
(2)overflow:hidden;オブジェクトのサイズを超えるコンテンツは表示せず、余分な部分は非表示
(3)オーバーするかどうかに関係なく、常に表示overflow:scroll;スクロールバー
(4)overflow:auto;自動的に削除 スクロールバーを表示します。それを超えない場合はスクロールバーを表示しません。
一般に、はみ出した部分はレイアウトに影響を与えるため、はみ出したコンテンツを表示することは望ましくありません。
ただし、位置決めボックスがある場合は、overflow:hidden冗長な部分が隠れてしまうため、使用には注意してください。
12.CSSの高度なスキル
①スピリットマップ
(1) スプライトマップは主に小さな背景画像に実装されます
(2) 主に背景の位置によって実現されますbackground-position
(3) 一般的にスプライトマップはネガティブです
注:
Web ページ内の座標: x 軸の右側が正、左側が負、y 軸の下が正、上が負です。
②フォントアイコン
使用手順：
(1) ファイルをダウンロードし、同じディレクトリに配置
(2) インポート
(3) 使用
(4) ラベルのフォントを指定
③CSS Triangle
いくつかの三角形は Web ページでよく使用されます。CSS Triangle を使用して直接描画できます。画像やフォントアイコンを作成する必要はありません。
④ユーザーインターフェース関連のスタイル
(1) マウススタイル
选择器{cursor:属性值;}
(2) フォームのデフォルトの青い枠線を消す
input{outline:none;}
フォームに追加した後、デフォルトの青い枠線を削除することができます。
(3) テキスト フィールドのドラッグを防止する
デフォルトでは、テキスト フィールドをドラッグして拡大または縮小することができ、
textatea{resize:none;}テキスト フィールドのドラッグを防止することもできます。
⑤vertical-align プロパティは、
CSS 使用シナリオのvertical-align プロパティを適用します。ピクチャやフォーム (インライン ブロック要素) とテキストの垂直方向の配置を設定するためによく使用されます。
vertica-align:属性值;
これは、要素の垂直方向の配置を設定するために使用されますが、インライン要素とインライン ブロック要素
にのみ使用されます。
ピクチャとテキストはデフォルトでベースラインに配置され、ピクチャはボトムラインに変更できます。
img{vertica-align:bottom;}
⑥あふれた文字の省略表示
(1) 単行テキストのオーバーフロー省略記号表示
(2) 複数行テキストのオーバーフロー省略記号表示
⑦ 一般的なレイアウトテクニック
(1) 負のマージン値の使用
(2) フローティング要素の周囲のテキスト
(3) インラインブロック要素の工夫
⑧CSSの初期化
などの初期化。
13. CSS3の新機能
① 新しいセレクター (重みは 10)
(1) 属性セレクター
属性セレクターは、特定の属性に従って要素を選択できるため、クラスや ID セレクターを使用する必要はありません。
(2) 構造擬似クラスセレクター
構造擬似クラスセレクターは主に文書構造に従って要素を選択し、親セレクター内の子要素に応じてよく使用されます (3
) 擬似要素セレクター
擬似要素セレクターは、次のような用途に役立ちます。 CSS を使用すると、HTML タグを必要とせずに新しいタグ要素を作成できるため、HTML 構造が簡素化されます。
知らせ：
- 要素を作成する前と後はインライン要素です
- 新しく作成された要素はドキュメント ツリー内に見つからないため、これを擬似要素と呼びます
- 構文: 要素::前{}
- コンテンツを書き込むには前後に content 属性が必要です
- before は親要素のコンテンツに最初の要素を作成し、after は親要素のコンテンツの最後に要素を挿入します。
- 疑似要素セレクターはラベル セレクターと同じで、重みは 1 です。
②新しいボックスモデル
css3 を使用してボックスモデルを指定できますbox-sizing。指定できる値は 2 つありcontent-box、border-box
(1) box-sizing:content-box;: 合計のサイズは width+padding+border (以前のデフォルト)
(2) box-sizing:border-box;:ボックスのサイズは幅、パディング、ボーダーの順です。大きなボックスはサポートされません（パディングとボーダーが幅を超えない場合）
③CSS3フィルターフィルター
属性は要素にぼかしや色などの画像効果を適用します
④ボックス幅の計算calc() CSSの属性値を宣言する際に一部の計算を行うことができる
CSS関数です。
width:calc(100%-80px);+ - * /
⑤ トランジション
(1) トランジションアニメーション: ある状態から別の状態に徐々に遷移するアニメーション:hover。
(2) 文法:
transition:要过渡的属性 花费时间 运动曲线 何时开始;
複数の属性を遷移する必要がある場合は、次のように記述します。
transition:要过渡的属性1 花费时间 运动曲线 何时开始,要过渡的属性1 花费时间 运动曲线 何时开始,...;
そのうちの4つは、
- 属性: 変更したいCSS属性、幅と高さ、背景色、内外の余白などを変更できます。すべての属性を変更して遷移させたい場合は、すべてを記述できます
- 費やした時間: 単位は s (単位は記述する必要があります) など: 0.5 秒
- モーション カーブ (省略可能): デフォルトのease()
モーション カーブは次のとおりです。
- いつ開始するか (省略可能): 単位は秒 (単位は必ず記述する必要があります)、遅延トリガー時間を設定できます。デフォルトは 0 秒です。
遷移式：誰（属性）が遷移して追加するか
⑥2D変形（トランスフォーム）
(1) 要素の平行移動、回転、拡大縮小などの効果を実現できます。
(2) Translate は、
位置決めと同様に、ページ上の要素の位置を変更できます。
文法：transform:translate(x,y);
- 翻訳の最大の利点: 他の要素の位置に影響を与えない
- 変換のパーセント単位は、それ自体の要素の高さと幅に相対的です
- インライン要素には影響しません
(3) 回転
transform:rotate(度数)
- 回転の後に度が続きます。単位は度です (rotate(45deg) など)。
- 角度が正の場合は時計回り、負の場合は反時計回り
- デフォルトの回転中心点の場合の要素の中心点
transform-origin:x y;要素の回転の中心点を手動で設定できます。x と y はピクセル、または位置名詞 (上、下、左、右、中央) にすることができます。
(4) スケーリング(スケール)
transform:scale(x,y);
- transform:scale(2,2): 高さと幅が 2 倍に拡大されます
- パラメータが 1 つだけ記述されている場合、2 番目のパラメータはデフォルトで同じになります。
- パラメータが 1 未満の場合は縮小します
- サクルスケーリングは他のボックスに影響を与えることなく変換中心点を設定できます
(5) 総合的な書き方 順番
transform:translate() rotate() scale()...
が変形効果に影響します（先に回転させると座標軸の方向が変わります） ディスプレイスメント
と他の属性を同時に持つ場合はディスプレイスメントを前に置く必要があります
⑦アニメーションの基本的な使い方
ステップ 1: 最初にアニメーションを定義
する キーフレームを使用してアニメーションを定義します (クラス セレクターの定義と同様)
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
}
0% はアニメーションの開始、100% はアニメーションの終了、このような規則がアニメーション シーケンスです。
@keyframes に特定の CSS スタイルを指定すると、現在のスタイルが徐々に新しいスタイルに変化するアニメーション効果を得ることができます。
0% と 100% は from と to で置き換えることもできます。
ステップ 2: アニメーションを使用する (呼び出し)呼び出しに
使用する 呼び出し時に記述するこれら 2 つの必須属性に加えて、他の多くの属性を記述することもできます。animation-name:动画名称
animation-duration:持续时间
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画其实或者结束状态
⑧3D変換
(1)パース（視距離）パース
- Web ページに 3D 効果を付け加えたい場合は、遠近法 (2D 平面に投影された 3D オブジェクトとして理解されます) が必要です。
- 遠近感とは人間の目から画面までの距離です
- 視点に近づくほどコンピュータ平面上の画像は大きくなり、遠ざかるほど画像は小さくなります。
- 遠近感の単位はピクセルです
- 視点は観測要素の親ボックスに書かれます
3D 変換は 2D と似ていますが、追加の Z 軸がある点が異なります。
最後に書かれています:
これは、復習するために戻ってきます。前に学習したときにメモを取らなかったことが多かったので、戻って復習して記録したいと思います。このメモは重要なポイントについてすべてです初めて学んだときほど詳細ではありません
ピンク先生のチュートリアルから記録されています、とても良いチュートリアルです、行って学んでください 後で、
モバイル端末のレイアウト、JavaScriptなどを確認し、いくつかのメモを記録します。