重要なトピック

Flexboxレイアウト:Flexboxレイアウトは、CSS 3の柔軟な箱レイアウトモジュールとしても知られています.これは、任意のfloatまたは位置決めプロパティを使用せずに柔軟な応答レイアウトを設計することができます.それは、コンテナのアイテムのアライメント、方向と順序を改善することができます.Flexboxレイアウトは、それの子供の幅または高さを変更することができます.
レイアウトとグリッドレイアウト
Flexboxのレイアウトは、1つの次元システムは、それが唯一の列または行を処理できることを意味します.
グリッドレイアウトは、同時に両方の列と行を扱うことができる2次元システムです.
CSS位置プロパティ

static -は、通常の要素としてページに流入する要素の既定の位置です.上部、右、下、左、Z - indexプロパティは適用されません.

相対位置は-レイアウトを変更せずに自分自身に調整されます.

絶対:-は、要素がページのフローから削除される指定された位置です.絶対位置合わせを使用して、親に対して正確に位置する要素を配置できます.親がない場合、ドキュメント本体を親として扱います.

−:ページの流れから要素が取り除かれる指定された位置です.固定ポジショニングを使用すると、ビューポート位置に対して必要な要素を配置できます.これらの要素は、スクロール時に移動しません.

スティッキー:-相対と固定位置の組み合わせです.この特定の距離を通過した後、要素は一定の距離に相対的な位置として動作します.

ボックスモデル:四角形のボックスは、すべてのHTML要素にラップされます.CSSボックスモデルは、長方形ボックスの高さと幅を決定するために使用されます.ボックスモデルのさまざまな要素は、コンテンツ、パディング、ボーダー、マージンです.
擬似要素:-擬似要素は、要素の指定された部分のスタイルに使用されるCSSの機能です.これは、通常、ドキュメントツリーに存在しない項目を作成するために使用されます.いくつかの擬似要素:-::after ::before::: first letter ::first - line , : selection
擬似クラス:-擬似クラスは、HTML要素の特別な状態を定義するために使用されるクラスです.それは定期的な要素を選択するが、特定の条件の下でユーザーがホバリング/リンクを介してフォーカスしているような.いくつかの擬似クラス:-: link , :訪問: Hover , : Active , Focus
遷移プロパティ:- CSSの遷移プロパティを使用していくつかのトランジション効果を作成します.この効果は、2つの状態で定義されます.以下の構文

**transition:** transition-property transition-duration transition-timing-function transition-delay;

遷移は以下の4つのプロパティの組み合わせです.

Transitionプロパティ:遷移効果を適用するCSSプロパティを指定します.

遷移期間:移行アニメーションが完了するまでの時間の長さを指定します.

遷移タイミング機能:遷移の速度を指定します.

遷移遅延:遷移が開始されるときの遷移遅延または時間を指定します.

Transformプロパティ:- CSSのTransformプロパティを使用して、ビジュアル書式モデルの座標空間を変更します.これは、要素の上にスキュー、回転、翻訳などの効果を追加するために使用されます.変換は2 Dまたは3 D型である.以下の構文

transform: none|transform-functions|initial|inherit;

メディアクエリはCSSのテクニックCSS 3で導入されます.これは、特定の条件がtrueの場合のみCSSプロパティのブロックを含めるように@メディアルールを使用します.以下のようなメディアクエリを書くことができます.‘declaration’ only ‘media type’ and (‘specifying amount of screen to cover’) {
‘element/class’ {
// styles to apply when all all conditions are met
}
}

**Example:**  If the screen size is 600px wide or less, hide the element for container class.
`@media only screen and (max-width: 600px) {
  .container {
    display: none;
  }
}`

フォントサイズ応答:-私たちは、フォントサイズをメディアクエリを使用して応答することができます.画面サイズが901 px以上の場合、コンテナークラスのフォントサイズを40 pxに設定し、画面サイズを900 pxワイド以下に設定し、<div>のフォントサイズを20 pxに設定します.

@media screen and (min-width: 901px) {
  .container {
    font-size: 40px;
  }
}

@media screen and (max-width: 600px) {
  .container{
    font-size: 20px;
  }
}

ハイパーリンクのアンダールール:コントロールステートメントと外部スタイルシートはハイパーリンクのアンダーラインをオーバーライドするために使用されます.

**Example:**
 p {
text-decoration: none;
}

<p href="about.html" style="text-decoration: none">link text</p>

ボックスシャドウ:-ボックスシャドウCSSプロパティは、要素のフレームの周りにシャドウ効果を追加します.コンマで区切られた複数の効果を設定できます.以下はボックスシャドウのいくつかの実装です

**box-shadow:** 5px 15px 5px green;
**box-shadow:** 60px -16px teal;
**box-shadow:** 12px 12px 2px 1px rgba(0, 0, 255, .2);
            box-shadow: inset 5em 1em black;