目次
| インポート方法 | 筆記位置 | 行動範囲 | 使用するシーン |
|---|---|---|---|
| 埋め込み | CSSはstyleタグ内に記述します。styleタグは通常head内に置かれます | 現在のページ | 小さなケース |
| アウトリーチ | CSS は別の CSS ファイルに記述され、link タグを通じてインポートされます。 | 複数のページ | 計画 |
| 列をなして | CSSはタグのstyle属性に記述します。 | 現在のタブ | jsで使う |
気をつけて：
気をつけて：
*{ CSS 属性名: 属性値; }注:デフォルトでは、ブラウザー独自の属性 margin および Padding は削除されます。。
気をつけて：
| 属性 | 説明する |
|---|---|
| [attribute] | attribute属性を持つ複数の要素を選択します |
| [attribute=value] | attribute=valueすべての要素が選択されました |
| [attribute~=value] | 属性に単語がattribute含まれるすべての要素を選択します value |
| [attribute^=value]] | 属性値valueが で始まるすべての要素を選択します。 |
| [attribute$=value] | 属性の属性値が で終わるvalueすべての要素を選択します。 |
| [attribute*=value] | value属性属性に部分文字列が含まれるすべての要素を選択します |
気をつけて：
| セレクタ | 効果 | フォーマット | 例 |
|---|---|---|---|
| 子孫セレクター | 子孫を見つける | セレクターはスペースで区切られます | .father .son { css } |
| 子セレクター | 息子を探しています | セレクターは次のように>区切られます。 |
.father > .son { css } |
| ユニオンセレクター | 複数のカテゴリの要素を見つける | セレクターは次のように,区切られます。 |
div,p,span { css } |
| 交差点セレクター | 複数のセレクターを同時に満たす要素を検索する | セレクターの横にある | p.red { css } |
| 兄弟セレクター | p タグの後のすべてのspan要素と一致します。 | セレクターは次のように~区切られます。 |
p ~ span |
| 隣接セレクター | pタグの最初のspan要素と一致します。 | セレクターは次のように+区切られます。 |
p + span |
疑似クラス: 新しい要素を生成せずに、特定のセレクターに特殊効果を追加します。
| セレクタ | 機能説明 |
|---|---|
| E:first-child | 親要素の最初の子である要素 E |
| E:last-child | 親要素の最後の子である要素 E |
| E:nth-child(n) | 親要素の n 番目の子要素 E として |
| E:nth-last-child(n) | 親要素の最後の n 番目の子要素を選択します |
| E:first-of-type | 親要素内の指定されたタイプの最初の E 要素を選択します |
| E:last-of-type | 親要素内の指定されたタイプの最後の要素を選択します |
| E:nth-of-type(n) | 親要素内の指定されたタイプの n 番目の E 要素を選択します |
| E:nth-last-of-type | 親要素内の指定された型の最後の n 番目の E 要素を選択します |
| E:root | 一致する要素 E が存在するドキュメントのルート要素、つまり html を選択します。 |
| E:only-child | 親要素に子要素が 1 つだけ含まれており、子要素が E 要素と一致することを選択します。 |
| E:only-of-type | 同じタイプの子要素を 1 つだけ含むように親要素を選択し、その子要素が E 要素と一致するようにします。 |
| E:empty | 子を持たず、テキスト ノードも含まない要素を選択します。 |
| E:link | 未訪問のリンクをすべて選択します |
| E:active | アクティブな状態のリンク要素を選択します |
| E:visited | すでに訪問した要素を選択してください |
| E:hover | マウスオーバー状態で要素を選択します |
| E:checked | 選択された<input type="checkbox" checked>要素 |
擬似要素: content 要素の前後に追加の要素またはスタイルを挿入します。これらの要素は HTML ドキュメント内では生成されず、外部からのみ表示されます。
| セレクタ | 機能説明 |
|---|---|
| ::before | 選択した要素の前に配置する疑似要素を作成します |
| ::after | 選択した要素の後に配置する疑似要素を作成します |
| ::first-letter | さまざまな要素の最初の行の最初の文字を選択します |
| ::first-line | 選択した要素の最初の行 |
| ::selection | マウスをクリックしてドラッグして、ハイライトされた部分を選択します |
| 属性名 | スタイル | 属性値 |
|---|---|---|
| font-size | フォントサイズ | 数値+px |
| font-weight | フォントの太さ | 標準: Normal または数値 400; 太字: bold または数値 700 |
| font-style | 傾けるかどうか | 通常 (デフォルト): normal; 斜め: italic |
| font-family | フォントファミリー | sans-serif (サンセリフ フォント); serif (セリフ フォント); monospace (等幅フォント) |
| font | リテラルフォント | style weight size family |
| 属性名 | スタイル | 属性値 |
|---|---|---|
| text-indent | テキストのインデント | 数値+px; 数値+em (推奨: 1em = 現在のラベルの font-size) |
| text-align | アライメント | left: 左揃え、center: 中央揃え、right: 右揃え |
| text-decoration | 文字装飾 | underline：下線、 line-through：行削除、overline：上の線、none：飾り線なし |
| line-height | テキスト行の高さ | 数値+px; 倍数 (現在のタグの font-size の倍数) |
属性名：background-color
属性値:
| 色の値 | 例 |
|---|---|
| キーワード | red、green、yellowなど。 |
| RGB表現 | RGB(255,255,255) |
| rgba表現 | rgba(255,255,255,1) |
| 16進数 | #ffffff; |
気をつけて：
属性名：background-image
属性値:background-image:url('画像のパス')
気をつけて：
属性名：background-repeat
属性値:
| 価値 | 効果 |
|---|---|
| repeat | (デフォルト) 水平方向と垂直方向の両方に並べて表示します |
| no-repeat | タイル張りではない |
| repeat-x | 水平方向 (x 軸) に沿って並べて表示します。 |
| repeat-y | 垂直方向 (y 軸) に沿って並べて表示します |
属性名：background-position
属性値：background-position：水平位置と垂直位置
属性: display::block
機能:
代表レーベル：
属性: display:inline
機能:
代表レーベル：
属性: display: inline-block
機能:
代表レーベル：
特徴：子要素はデフォルトで親要素のスタイルを継承する特徴があります（子は父親の事業を継承します）
継承されたプロパティ:
アプリケーションシナリオ:
継承の失敗: ブラウザのデフォルトのスタイルによって上書きされます
特徴:
| セレクタ | 例 | 重み |
|---|---|---|
| !important | background-color: #fff !important; | 正の無限大 |
| インラインセレクター | <span style='color: #333;'>スタイル効果要素</span> |
1000 |
| IDセレクター | #id | 100 |
| クラスセレクター、属性セレクター、疑似クラスセレクター | .class | 10 |
| ラベルセレクター、擬似要素セレクター | div、p | 1 |
| ワイルドカードセレクター | * |
0 |
| 継承されたプロパティ | <div style='color:#333;'><span>スタイル効果要素</span></div> |
-1 |
説明する
ボックスのコンセプト:
ボックスモデル: CSS では、ボックスがコンテンツ領域 (content)、内側のマージン領域 (padding)、境界領域 (border)、および外側のマージン領域 (margin)で構成されると規定しています。
役割: width 属性とheight属性を使用して、デフォルト設定をボックスのコンテンツ領域のサイズに設定します
属性: width / height
一般的な値: 数値 + px
機能: 枠線の太さ、枠線のスタイル、枠線の色の効果を設定
プロパティ:
| 効果 | 属性名 | 属性値 |
|---|---|---|
| 境界線の太さ | border-width | 数値 + px |
| ボーダースタイル | border-style | 実線solid、破線dashed、点線dotted |
| ボーダの色 | border-color | 色の値 |
枠線の書き方：枠線の太さ、枠線のスタイル、枠線の色
例: border: 1px solid #333;
一方向設定: border-top: 1px solid red;
機能:境界線とコンテンツ領域の間の距離を設定します
属性名: padding
共通の値:
| 価値 | 例 | 意味 |
|---|---|---|
| 価値 | padding: 10px; | 上下左右を10pxに設定 |
| 2つの値 | padding: 10px 20px; | 上下を10px、左右を20pxに設定 |
| 3つの価値観 | padding: 10px 20px 30px | 上が10px、左右が20px、下が30pxに設定されています |
| 4つの値 | padding: 10px 20px 30px 40px | 上が10px、右が20px、下が30px、左が40pxに設定されています |
単一方向設定: padding-top: 10px;
機能: ボックスと境界線の外側のボックス間の距離を設定します
属性名：margin
共通の値:
| 価値 | 例 | 意味 |
|---|---|---|
| 価値 | margin: 10px; | 上下左右を10pxに設定 |
| 2つの値 | margin: 10px 20px; | 上下を10px、左右を20pxに設定 |
| 3つの価値観 | margin: 10ピクセル 20ピクセル 30ピクセル | 上が10px、左右が20px、下が30pxに設定されています |
| 4つの値 | margin: 10px 20px 30px 40px | 上が10px、右が20px、下が30px、左が40pxに設定されています |
一方向設定: margin-top: 10px;
質問: ボックスがボーダーとパディングによって拡張される場合の問題を解決するにはどうすればよいですか?
シナリオ: 相互ネスト要素とブロックレベル要素。子要素の magin-top が親要素に作用します。
結果: 親要素が一緒に下に移動し、親要素が折りたたまれます。
解決策:
float をクリアし、親要素を折りたたむために一般的に使用される疑似クラス:
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
標準フロー:ドキュメント フローとも呼ばれ、要素をレンダリングするときにブラウザーがデフォルトで採用する一連のレイアウト ルールであり、要素の配置方法を指定します。
植字規則:
注:フローティング要素は、親要素を通じて text-align:center を設定したり、margin: 0 auto; を設定したりして、フローティング要素自体が水平方向に中央揃えになるようにすることはできません。
属性:float
影響: 子要素はフロートに設定されています。現時点では、子要素は標準フローから外れており、親要素を展開できません。これは、ページ上の他の要素のレイアウトに影響します。
基本的な書き方：
.clearfix::after {
content: "";
display: block;
clear: both;
}
補足：
.clearfix::after {
content: "";
display: block;
clear: both;
/* 疑似要素は Web ページに表示されません */
height: 0;
visibility: hidden;
}
二重擬似要素除去法
.clearfix::before,
.clearfix::after {
content: “”;
display: table;
}
.clearfix::after {
clear: both;
}属性名: 位置
位置決め方法：
| ターゲティング | 属性値 | 誰が相対的に移動するか | 場所を取るのですか |
|---|---|---|---|
| 静的位置決め | static | 方向プロパティでは移動できません | ポジションを占める |
| 相対的な位置決め | relative | 元の位置に対して | ポジションを占める |
| 絶対位置決め | absolute | 最も近い位置にある祖先要素を基準にして移動します | 場所をとらない（適応外） |
| 固定位置 | fixed | ブラウザの表示可能領域に対して | 場所をとらない（適応外） |
| 方向 | 属性名 | 属性値 | 意味 |
|---|---|---|---|
| レベル | left | 数値+px | 左からの距離 |
| レベル | right | 数値+px | 右への距離 |
| 垂直 | top | 数値+px | 頂上からの距離 |
| 垂直 | bottom | 数値+px | 底からの距離 |
はじめに: 静的配置はデフォルト値であり、標準フローであり、方向属性を介して移動することはできません。
コード: position: static;
はじめに: 前の位置を基準とした変位
コード: position: relative;
特徴:
アプリケーションシナリオ:
はじめに: 前の位置を基準とした変位
コード: position: absolute;
特徴:
アプリケーションシナリオ:
相対的な位置関係（息子と父親）に協力する
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>水平方向と垂直方向の中央揃え</title>
<style>
/* 相对于浏览器可视区域进行移动 */
.father {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
background-color: pink;
transform: translate(-50%, -50%);
}
/* 最も近い位置にある (非静的) 祖先要素を基準にして移動します */
.son {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: red;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
はじめに:ブラウザを基準とした
コードの位置決め: position: fixed;
機能:
アプリケーションシナリオ:
はじめに: ブラウザのテキスト タイプ要素の組版には位置揃えのベースラインがあります (baseline)
属性名：vertical-align
属性値：
| 属性値 | 効果 |
|---|---|
| baseline | デフォルトのベースライン配置 |
| top | 上を揃える |
| middle | 中央揃え |
| bottom | 下揃え |
アプリケーションシナリオ:
はじめに:マウスカーソルが要素上にあるときに表示されるスタイル
属性名を:cursor
属性値:
| 属性値 | 効果 |
|---|---|
| default | デフォルト、通常は矢印 |
| pointer | 小さな手の効果、ユーザーにクリックを促す |
| text | I フォント、ユーザーにテキストの選択を求める |
| move | 十字カーソル、ユーザーに移動を促す |
導入: ボックスの四隅を丸くし、ページの詳細を増やし、ユーザー エクスペリエンスを向上させます
属性名: border-radius
値: 数値 + px、パーセント
はじめに: オーバーフロー部分の表示効果を制御する
| 属性値 | 効果 |
|---|---|
| visible | デフォルト値、オーバーフロー部分が表示されます |
| hidden | オーバーフロー非表示 |
| scroll | オーバーフローに関係なくスクロールバーを表示する |
| auto | オーバーフローに基づいてスクロールバーを自動的に表示または非表示にする |
はじめに: 要素自体をブラウザーで非表示にする
プロパティ:
違い：
導入：要素全体（コンテンツも含む）をまとめて透明にする
属性名：opacity
属性値：0～1の数値