よく使われるCSSカプセル化方法の概要

よく使われるCSSカプセル化方法の概要

1. pc-reset PCスタイルの初期化

/* 正規化.css */

html{
  行の高さ: 1.15;
  /* 1 */
  -ms-テキストサイズ調整: 100%;
  /* 2 */
  -webkit-テキストサイズ調整: 100%;
  /* 2 */
}

体 {
  マージン: 0;
}

記事、
さて、
フッター、
ヘッダ、
ナビ、
セクション {
  表示: ブロック;
}

h1 {
  フォントサイズ: 2em;
  マージン: 0.67em 0;
}

図キャプション、
形、
主要 {
  /* 1 */
  表示: ブロック;
}

形 {
  マージン: 1em 40px;
}

時間 {
  ボックスのサイズ: コンテンツボックス;
  /* 1 */
  高さ: 0;
  /* 1 */
  オーバーフロー: 表示可能;
  /* 2 */
}

前 {
  フォントファミリー: monospace、monospace;
  /* 1 */
  フォントサイズ: 1em;
  /* 2 */
}

{
  背景色: 透明;
  /* 1 */
  -webkit-text-decoration-skip: オブジェクト;
  /* 2 */
}

abbr[タイトル] {
  下部境界線: なし;
  /* 1 */
  テキスト装飾: 下線;
  /* 2 */
  テキスト装飾: 下線点線;
  /* 2 */
}

b、
強い {
  フォントの太さ: 継承;
}

b、
強い {
  フォントの太さ: 太字;
}

コード、
KB,
サンプル {
  フォントファミリー: monospace、monospace;
  /* 1 */
  フォントサイズ: 1em;
  /* 2 */
}

dfn {
  フォントスタイル: 斜体;
}

マーク {
  背景色: #ff0;
  色: #000;
}

小さい
  フォントサイズ: 80%;
}

サブ、
すする {
  フォントサイズ: 75%;
  行の高さ: 0;
  位置: 相対的;
  垂直位置合わせ: ベースライン;
}

サブ{
  下: -0.25em;
}

すする {
  上: -0.5em;
}

オーディオ、
ビデオ
  表示: インラインブロック;
}

オーディオ:not([コントロール]) {
  表示: なし;
  高さ: 0;
}

画像 {
  境界線スタイル: なし;
}

svg:not(:root) {
  オーバーフロー: 非表示;
}

ボタン、
入力、
optgroup、
選択、
テキストエリア {
  フォントファミリー: サンセリフ;
  /* 1 */
  フォントサイズ: 100%;
  /* 1 */
  行の高さ: 1.15;
  /* 1 */
  マージン: 0;
  /* 2 */
}

ボタン、
入力{
  /* 1 */
  オーバーフロー: 表示可能;
}

ボタン、
選択{
  /* 1 */
  テキスト変換: なし;
}

ボタン、
html [type="button"],

/* 1 */

[タイプ="リセット"],
[type="submit"] {
  -webkit-appearance: ボタン;
  /* 2 */
}

ボタン::-moz-focus-inner、
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  境界線スタイル: なし;
  パディング: 0;
}

ボタン:-moz-フォーカスリング、
[type="button"]:-moz-フォーカスリング,
[type="reset"]:-moz-フォーカスリング,
[type="submit"]:-moz-focusring {
  アウトライン: 1px の点線の ButtonText;
}

フィールドセット {
  パディング: 0.35em 0.75em 0.625em;
}

伝説
  ボックスのサイズ: 境界線ボックス;
  /* 1 */
  色: 継承;
  /* 2 */
  表示: テーブル;
  /* 1 */
  最大幅: 100%;
  /* 1 */
  パディング: 0;
  /* 3 */
  空白: 通常;
  /* 1 */
}

進捗
  表示: インラインブロック;
  /* 1 */
  垂直位置合わせ: ベースライン;
  /* 2 */
}

テキストエリア {
  オーバーフロー:自動;
}

[type="チェックボックス"],
[タイプ=ラジオ]
  ボックスのサイズ: 境界線ボックス;
  /* 1 */
  パディング: 0;
  /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  高さ: 自動;
}

[タイプ="検索"]
  -webkit-appearance: テキストフィールド;
  /* 1 */
  アウトラインオフセット: -2px;
  /* 2 */
}

[type="search"]::-webkit-search-cancel-button、
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: なし;
}

 ::-webkit-ファイルアップロードボタン {
  -webkit-appearance: ボタン;
  /* 1 */
  フォント: 継承;
  /* 2 */
}

詳細、

/* 1 */

メニュー {
  表示: ブロック;
}

まとめ {
  表示: リスト項目;
}

キャンバス {
  表示: インラインブロック;
}

テンプレート {
  表示: なし;
}

[隠れた]
  表示: なし;
}

/* リセット */

html,
体、
h1,
h2,
h3,
h4,
h5,
h6,
div、
dl、
dt、
dd、
ウル、
オール、
李、
p、
引用ブロック、
前、
時間、
形、
テーブル、
キャプション、
番目、
td、
形状、
フィールドセット、
伝説、
入力、
ボタン、
テキストエリア、
メニュー {
  マージン: 0;
  パディング: 0;
  ボックスのサイズ: 境界線ボックス;
}

2. 電話のリセット

/* 正規化.css */

html{
  行の高さ: 1.15;
  /* 1 */
  -ms-テキストサイズ調整: 100%;
  /* 2 */
  -webkit-テキストサイズ調整: 100%;
  /* 2 */
}

体 {
  マージン: 0;
}

記事、
さて、
フッター、
ヘッダ、
ナビ、
セクション {
  表示: ブロック;
}

h1 {
  フォントサイズ: 2em;
  マージン: 0.67em 0;
}

図キャプション、
形、
主要 {
  /* 1 */
  表示: ブロック;
}

形 {
  マージン: 1em 40px;
}

時間 {
  ボックスのサイズ: コンテンツボックス;
  /* 1 */
  高さ: 0;
  /* 1 */
  オーバーフロー: 表示可能;
  /* 2 */
}

前 {
  フォントファミリー: monospace、monospace;
  /* 1 */
  フォントサイズ: 1em;
  /* 2 */
}

{
  背景色: 透明;
  /* 1 */
  -webkit-text-decoration-skip: オブジェクト;
  /* 2 */
}

abbr[タイトル] {
  下部境界線: なし;
  /* 1 */
  テキスト装飾: 下線;
  /* 2 */
  テキスト装飾: 下線点線;
  /* 2 */
}

b、
強い {
  フォントの太さ: 継承;
}

b、
強い {
  フォントの太さ: 太字;
}

コード、
KB,
サンプル {
  フォントファミリー: monospace、monospace;
  /* 1 */
  フォントサイズ: 1em;
  /* 2 */
}

dfn {
  フォントスタイル: 斜体;
}

マーク {
  背景色: #ff0;
  色: #000;
}

小さい
  フォントサイズ: 80%;
}

サブ、
すする {
  フォントサイズ: 75%;
  行の高さ: 0;
  位置: 相対的;
  垂直位置合わせ: ベースライン;
}

サブ{
  下: -0.25em;
}

すする {
  上: -0.5em;
}

オーディオ、
ビデオ
  表示: インラインブロック;
}

オーディオ:not([コントロール]) {
  表示: なし;
  高さ: 0;
}

画像 {
  境界線スタイル: なし;
}

svg:not(:root) {
  オーバーフロー: 非表示;
}

ボタン、
入力、
optgroup、
選択、
テキストエリア {
  フォントファミリー: サンセリフ;
  /* 1 */
  フォントサイズ: 100%;
  /* 1 */
  行の高さ: 1.15;
  /* 1 */
  マージン: 0;
  /* 2 */
}

ボタン、
入力{
  /* 1 */
  オーバーフロー: 表示可能;
}

ボタン、
選択{
  /* 1 */
  テキスト変換: なし;
}

ボタン、
html [type="button"],

/* 1 */

[タイプ="リセット"],
[type="submit"] {
  -webkit-appearance: ボタン;
  /* 2 */
}

ボタン::-moz-focus-inner、
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  境界線スタイル: なし;
  パディング: 0;
}

ボタン:-moz-フォーカスリング、
[type="button"]:-moz-フォーカスリング,
[type="reset"]:-moz-フォーカスリング,
[type="submit"]:-moz-focusring {
  アウトライン: 1px の点線の ButtonText;
}

フィールドセット {
  パディング: 0.35em 0.75em 0.625em;
}

伝説
  ボックスのサイズ: 境界線ボックス;
  /* 1 */
  色: 継承;
  /* 2 */
  表示: テーブル;
  /* 1 */
  最大幅: 100%;
  /* 1 */
  パディング: 0;
  /* 3 */
  空白: 通常;
  /* 1 */
}

進捗
  表示: インラインブロック;
  /* 1 */
  垂直位置合わせ: ベースライン;
  /* 2 */
}

テキストエリア {
  オーバーフロー:自動;
}

[type="チェックボックス"],
[タイプ=ラジオ]
  ボックスのサイズ: 境界線ボックス;
  /* 1 */
  パディング: 0;
  /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  高さ: 自動;
}

[タイプ="検索"]
  -webkit-appearance: テキストフィールド;
  /* 1 */
  アウトラインオフセット: -2px;
  /* 2 */
}

[type="search"]::-webkit-search-cancel-button、
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: なし;
}

 ::-webkit-ファイルアップロードボタン {
  -webkit-appearance: ボタン;
  /* 1 */
  フォント: 継承;
  /* 2 */
}

詳細、

/* 1 */

メニュー {
  表示: ブロック;
}

まとめ {
  表示: リスト項目;
}

キャンバス {
  表示: インラインブロック;
}

テンプレート {
  表示: なし;
}

[隠れた]
  表示: なし;
}

/* リセット */

html,
体、
h1,
h2,
h3,
h4,
h5,
h6,
div、
dl、
dt、
dd、
ウル、
オール、
李、
p、
引用ブロック、
前、
時間、
形、
テーブル、
キャプション、
番目、
td、
形状、
フィールドセット、
伝説、
入力、
ボタン、
テキストエリア、
メニュー {
  マージン: 0;
  パディング: 0;
  ボックスのサイズ: 境界線ボックス;
}

html,
体 {
  /* テキスト選択を無効にする */
  -webkit-user-select: なし;
  ユーザー選択: なし;
  フォント: Oswald、'Open Sans'、Helvetica、Arial、サンセリフ
}

/* リンクや画像を長押ししてメニューをポップアップするのを無効にする*/

、
画像 {
  -webkit-touch-callout: なし;
}

/*iOS Android は組み込みのシャドウのスタイルを削除します*/

、
入力{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

入力[type="text"] {
  -webkit-appearance: なし;
}

2. 電話のリセット

/* 正規化.css */

html{
  行の高さ: 1.15;
  /* 1 */
  -ms-テキストサイズ調整: 100%;
  /* 2 */
  -webkit-テキストサイズ調整: 100%;
  /* 2 */
}

体 {
  マージン: 0;
}

記事、
さて、
フッター、
ヘッダ、
ナビ、
セクション {
  表示: ブロック;
}

h1 {
  フォントサイズ: 2em;
  マージン: 0.67em 0;
}

図キャプション、
形、
主要 {
  /* 1 */
  表示: ブロック;
}

形 {
  マージン: 1em 40px;
}

時間 {
  ボックスのサイズ: コンテンツボックス;
  /* 1 */
  高さ: 0;
  /* 1 */
  オーバーフロー: 表示可能;
  /* 2 */
}

前 {
  フォントファミリー: monospace、monospace;
  /* 1 */
  フォントサイズ: 1em;
  /* 2 */
}

{
  背景色: 透明;
  /* 1 */
  -webkit-text-decoration-skip: オブジェクト;
  /* 2 */
}

abbr[タイトル] {
  下部境界線: なし;
  /* 1 */
  テキスト装飾: 下線;
  /* 2 */
  テキスト装飾: 下線点線;
  /* 2 */
}

b、
強い {
  フォントの太さ: 継承;
}

b、
強い {
  フォントの太さ: 太字;
}

コード、
KB,
サンプル {
  フォントファミリー: monospace、monospace;
  /* 1 */
  フォントサイズ: 1em;
  /* 2 */
}

dfn {
  フォントスタイル: 斜体;
}

マーク {
  背景色: #ff0;
  色: #000;
}

小さい
  フォントサイズ: 80%;
}

サブ、
すする {
  フォントサイズ: 75%;
  行の高さ: 0;
  位置: 相対的;
  垂直位置合わせ: ベースライン;
}

サブ{
  下: -0.25em;
}

すする {
  上: -0.5em;
}

オーディオ、
ビデオ
  表示: インラインブロック;
}

オーディオ:not([コントロール]) {
  表示: なし;
  高さ: 0;
}

画像 {
  境界線スタイル: なし;
}

svg:not(:root) {
  オーバーフロー: 非表示;
}

ボタン、
入力、
optgroup、
選択、
テキストエリア {
  フォントファミリー: サンセリフ;
  /* 1 */
  フォントサイズ: 100%;
  /* 1 */
  行の高さ: 1.15;
  /* 1 */
  マージン: 0;
  /* 2 */
}

ボタン、
入力{
  /* 1 */
  オーバーフロー: 表示可能;
}

ボタン、
選択{
  /* 1 */
  テキスト変換: なし;
}

ボタン、
html [type="button"],

/* 1 */

[タイプ="リセット"],
[type="submit"] {
  -webkit-appearance: ボタン;
  /* 2 */
}

ボタン::-moz-focus-inner、
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  境界線スタイル: なし;
  パディング: 0;
}

ボタン:-moz-フォーカスリング、
[type="button"]:-moz-フォーカスリング,
[type="reset"]:-moz-フォーカスリング,
[type="submit"]:-moz-focusring {
  アウトライン: 1px の点線の ButtonText;
}

フィールドセット {
  パディング: 0.35em 0.75em 0.625em;
}

伝説
  ボックスのサイズ: 境界線ボックス;
  /* 1 */
  色: 継承;
  /* 2 */
  表示: テーブル;
  /* 1 */
  最大幅: 100%;
  /* 1 */
  パディング: 0;
  /* 3 */
  空白: 通常;
  /* 1 */
}

進捗
  表示: インラインブロック;
  /* 1 */
  垂直位置合わせ: ベースライン;
  /* 2 */
}

テキストエリア {
  オーバーフロー:自動;
}

[type="チェックボックス"],
[タイプ=ラジオ]
  ボックスのサイズ: 境界線ボックス;
  /* 1 */
  パディング: 0;
  /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  高さ: 自動;
}

[タイプ="検索"]
  -webkit-appearance: テキストフィールド;
  /* 1 */
  アウトラインオフセット: -2px;
  /* 2 */
}

[type="search"]::-webkit-search-cancel-button、
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: なし;
}

 ::-webkit-ファイルアップロードボタン {
  -webkit-appearance: ボタン;
  /* 1 */
  フォント: 継承;
  /* 2 */
}

詳細、

/* 1 */

メニュー {
  表示: ブロック;
}

まとめ {
  表示: リスト項目;
}

キャンバス {
  表示: インラインブロック;
}

テンプレート {
  表示: なし;
}

[隠れた]
  表示: なし;
}

/* リセット */

html,
体、
h1,
h2,
h3,
h4,
h5,
h6,
div、
dl、
dt、
dd、
ウル、
オール、
李、
p、
引用ブロック、
前、
時間、
形、
テーブル、
キャプション、
番目、
td、
形状、
フィールドセット、
伝説、
入力、
ボタン、
テキストエリア、
メニュー {
  マージン: 0;
  パディング: 0;
  ボックスのサイズ: 境界線ボックス;
}

html,
体 {
  /* テキスト選択を無効にする */
  -webkit-user-select: なし;
  ユーザー選択: なし;
  フォント: Oswald、'Open Sans'、Helvetica、Arial、サンセリフ
}

/* リンクや画像を長押ししてメニューをポップアップするのを無効にする*/

、
画像 {
  -webkit-touch-callout: なし;
}

/*iOS Android は組み込みのシャドウのスタイルを削除します*/

、
入力{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

入力[type="text"] {
  -webkit-appearance: なし;
}

3. 共通スタイルの抽出

/* テキスト選択を無効にする */
.usn{
    -webkit-user-select:なし;
    -moz-ユーザー選択:なし;
    -ms-ユーザー選択:なし;
    -o-ユーザー選択:なし;
    ユーザー選択:なし;
}
/* 浮動小数点数 */
.fl { フロート: 左; }
.fr { フロート: 右; }
.cf { ズーム: 1; }
.cf:後{
    コンテンツ："。";
    表示:ブロック;
    クリア:両方;
    可視性:非表示;
    高さ:0;
    オーバーフロー:非表示;
}

/* 要素タイプ */
.db { 表示: ブロック; }
.dn { 表示: なし; }
.di { 表示: インライン }
.dib {表示: インラインブロック;}
.transparent { 不透明度: 0 }

/*テキストレイアウト、色*/
.f12 { フォントサイズ:12px }
.f14 { フォントサイズ:14px }
.f16 { フォントサイズ:16px }
.f18 { フォントサイズ:18px }
.f20 { フォントサイズ:20px }
.fb { フォントの太さ:太字 }
.fn { フォントの太さ:normal }
.t2 { テキストインデント: 2em }
.red,a.red { 色:#cc0031 }
.darkblue,a.darkblue { 色:#039 }
.gray,a.gray { 色:#878787 }
.lh150 { 行の高さ:150% }
.lh180 { 行の高さ:180% }
.lh200 { 行の高さ:200% }
.unl { テキスト装飾:下線; }
.no_unl { テキスト装飾:なし; }
.tl { テキスト配置: 左; }
.tc { テキスト配置: 中央; }
.tr { テキスト配置: 右; }
.tj { テキスト配置: 両端揃え; テキスト配置: 文字間揃え; }
.wn { /* 改行を強制しない */
    ワードラップ:通常;
    空白:折り返しなし;
}
.wb { /* 強制改行 */
    空白:通常;
    単語折り返し:単語区切り;
    単語区切り:すべて区切り;
}
.wp { /* 空白のシーケンスを保持する*/
    オーバーフロー:非表示;テキスト配置:左;空白:事前折り返し;単語折り返し:単語区切り;単語区切り:すべて区切り;
}
.wes { /* 余分な部分は省略記号で示され、1行に使用されます*/
    オーバーフロー:非表示;
    ワードラップ:通常;
    空白:折り返しなし;
    テキストオーバーフロー:省略記号;
}
.wes-2 { /* Webkitカーネルとモバイル端末に適用可能*/
    ディスプレイ: -webkit-box;
    -webkit-box-orient: 垂直;
    -webkit-line-clamp: 2;
    オーバーフロー: 非表示;
} 
.wes-3 {
    ディスプレイ: -webkit-box;
    -webkit-box-orient: 垂直;
    -webkit-line-clamp: 3;
    オーバーフロー: 非表示;
}
.wes-4 {
    ディスプレイ: -webkit-box;
    -webkit-box-orient: 垂直;
    -webkit-line-clamp: 4;
    オーバーフロー: 非表示;
}

/* オーバーフロースタイル*/
.ofh { オーバーフロー: 非表示; }
.ofs {オーバーフロー: スクロール; }
.ofa {オーバーフロー: 自動; }
.ofv {オーバーフロー: 可視; }

/* 位置決め方法 */
.ps {位置: 静的; }
.pr {位置: 相対;ズーム:1; }
.pa {位置: 絶対; }
.pf {位置: 固定; }

/* 垂直方向の配置 */
.vt {垂直位置合わせ: 上; }
.vm {垂直位置揃え: 中央; }
.vb {垂直位置合わせ: 下; }

/* マウススタイル*/
.csd { カーソル: デフォルト; }
.csp {カーソル: ポインタ; }
.csh {カーソル: ヘルプ; }
.csm { カーソル: 移動; }

/* フレックスレイアウト */
.df-sb {
    ディスプレイ:フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの両端揃え: スペースの間;
}
.df-sa {
    ディスプレイ:フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの両端揃え: スペースを空ける;
}

/* 垂直中央 */
.df-c {
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
}
.tb-c {
    テキスト配置:中央;
    表示:テーブルセル;
    垂直位置揃え:中央;
}
.ts-c {
    位置: 絶対;
    左: 50%; 上: 50%;
    変換: translate(-50%, -50%);
}
.ts-mc {
    位置: 絶対;
    左: 0;右: 0;
    下: 0; 上: 0;
    マージン: 自動;
}

上記は、よく使われる CSS カプセル化方法の詳細な概要です。CSS カプセル化の例の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

<<:  Linuxサーバーのディスク容量を拡張する方法

>>:  MySQL 面接の質問: ハッシュ インデックスの設定方法

推薦する

MySqlエスケープの詳細な使用例

MySQL エスケープエスケープとは、エスケープ文字の本来の意味を意味します。エスケープ文字の目的は...

シンプルなHTMLとCSSの使い方の詳細な説明

HTML と CSS を含む JD.com のホームページの静的ページ効果を 3 日間で完成させます...

Docker はクラスター MongoDB 実装手順を構築します

序文会社の業務上のニーズにより、独自の MongoDB サービスを構築する予定です。MongoDB ...

Firefox で英語の文字が折り返されない問題の解決方法

テキストのレイアウトには、言語に応じていくつかの書式設定要件があります。たとえば、簡体字中国語では、...

Vue は書籍管理ケースを実装します

この記事では、書籍管理を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次の...

CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明

--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...

CSS3+JavaScript を使用したクールな呼吸効果のサンプル コード

CSS3 アニメーションで実現したシンプルでクールな効果。最終的な効果は次のようになります。 ページ...

React における useEffect と useLayoutEffect の違い

目次前提条件使用効果コミット前ミューテーション効果コミットミューテーション効果コミットレイアウト効果...

MySQL クロスデータベーストランザクション XA 操作の例

この記事では、例を使用して、MySQL のデータベース間トランザクション XA 操作について説明しま...

HTML で水平ナビゲーション構造を設定する方法

この記事では、主にリスト構造を使用して水平ナビゲーション構造を設定する 2 つの方法を紹介します。こ...

Linux入力サブシステムフレームワーク原理の分析

入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...

反応ループデータの実装（リスト）

まず、バックグラウンドから来るデータをシミュレートしてみましょう。ここでは、コードをわかりやすくする...

W3C チュートリアル (12): W3C SOAP アクティビティ

Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...

Dockerがログファイルを保存する場所の詳細な説明

目次ログはどこに保存されますか?コンテナ内のアプリケーションからのログを表示するDockerデーモン...

Docker マルチステージビルドを使用してイメージサイズを縮小する方法

この記事では、Docker のマルチステージ ビルド機能を使用してイメージ サイズを大幅に削減する方...