技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS の概要

CSSはカスケード スタイル シート(Cascading Style Sheets の略語) は、HTML ページのスタイルを正確に制御して、グラフィック情報をより適切に表示したり、クールでフレンドリーなインタラクティブ エクスペリエンスを生成したりするために使用されます。

没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
1

CSS ファイルの拡張子は次のとおりです。 .css

コメント

/* 注释的内容 */
1

スタイルを追加する 3 つの方法

1. スタイル インラインスタイル

<span style="color: red">红色文字</span>
1

2.CSSスタイルセレクター経由で追加

https://blog.csdn.net/weixin_41192489/article/details/140226382

3. 継承

コンテナ内の要素は、コンテナに追加されたスタイルを取得します。

  <div style="color: red">
    <p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
  </div>
1
2
3

• テキストスタイル属性はすべて継承されます。これらの属性には、color、text- で始まる、line で始まる、および font- で始まるものが含まれます。
• ボックス、配置、レイアウトの属性は継承できません。

最終的なスタイルを決めるのは誰ですか?

ブラウザーのデフォルト スタイル、スタイル インライン スタイル、さまざまな CSS セレクターによって追加されたスタイル、親要素から継承されたスタイルなど、要素には多くのスタイル ソースがあるため、最終的なスタイルは、多くのスタイルの中で最も優先度が高いスタイルになります。スタイル。

CSSスタイルの優先順位

https://blog.csdn.net/weixin_41192489/article/details/139720467

スタイルに欠かせない基本

CSSの長さの単位

https://blog.csdn.net/weixin_41192489/article/details/140236423

CSS関数

https://blog.csdn.net/weixin_41192489/article/details/140318834

ボックスモデル

https://blog.csdn.net/weixin_41192489/article/details/102411612

• 高さと行の高さの両方でボックスを開くことができますが、背景画像ではボックスを開くことができません。

インライン要素に関する注意事項

• インライン要素では内マージンと外マージンを表示できるのは先頭と末尾のみであり、可能な限り避ける必要があるため、インライン要素には内マージンと外マージンを設定しないでください。

• インライン要素を折り返した後は、枠線の表示が重なって乱れてしまいますので、インライン要素には枠線を設定しないでください。

• インライン要素に枠線や内余白、外余白を追加する必要がある場合は、インライン要素をインラインボックスに変換します。

  display：inline-block
  1

どのようなスタイルを追加できますか?

普遍的なスタイル

スタイルは、ほぼすべての HTML 要素に追加できます。

幅高さ

• width: デフォルトはコンテンツの幅です (ボックスの幅ではありません)。
• 高さ: デフォルトはコンテンツの高さです (ボックスの高さではありません)。

次のスタイルにより、要素のデフォルトの標準ボックス モデルを IE ボックス モデルに変更できます。

box-sizing:border-box;
1

現時点では

• 幅: ボックスの幅 (左の境界線 + 左のパディング + コンテンツの幅 + 右のパディング + 右の境界線)
• 高さ: ボックスの高さ (上の境界線 + 上のパディング + コンテンツの高さ + 下のパディング + 下の境界線)

パディング

• 負の値はサポートされていません
• パーセンテージ値は、水平方向か垂直方向かに関係なく、幅を基準にして計算されます。

padding: 10px;
1

パディング: 上下左右 10px

padding:10px 5px;
1

上下のパディングは10pxです

左右のパディングは5pxです

padding:10px 5px 15px;
1

上部のパディングは10pxです

左右のパディングは5pxです

下部のパディングは15pxです

padding:10px 5px 15px 20px;
1

上部のパディングは10pxです

右のパディングは5pxです

下部のパディングは15pxです

左のパディングは20pxです

境界線

関連するスタイルも

• 境界線-丸みを帯びた境界線-半径
• 境界線の塗りつぶし 境界線の画像
• 概要概要

詳細を見る https://blog.csdn.net/weixin_41192489/article/details/140325106

マージン

https://blog.csdn.net/weixin_41192489/article/details/115140348

オーバーフローオーバーフロー

• [デフォルト値] 余分なコンテンツはすべて、スクロール バーの削除や追加を行わずに表示されます。
• hidden: スクロール バーを非表示にし、オブジェクト サイズを超えるコンテンツを表示しませんが、スクロールすることはできます。
• auto: コンテンツが超えない場合はスクロール バーは表示されません。コンテンツが超える場合はスクロール バーが表示されます。
• スクロール: Windows プラットフォームでは、コンテンツが制限を超えているかどうかに関係なく、スクロール バーが常に表示されます。 Mac プラットフォームでは、auto 属性と同じです。

auto とスクロールのオーバーフロー値を持つコンテナーは、ローリング コンテナー (スクロール バーのあるコンテナー) です。互換性の問題のため、子要素の margin-bottom のみを使用して空白を使用することはお勧めできません。スクロールコンテナの下部のパディングは白です。

透明度不透明度

属性値の範囲は 0.0 (完全に透明) ～ 1.0 (完全に不透明) です。0 ～ 1 の範囲制限を超える場合、最終的に計算された値が境界値となります。

    opacity: -1;    /* 解析为 0, 完全透明 */
    opacity: 2;     /* 解析为 1, 完全不透明 */
1
2

背景 背景

https://blog.csdn.net/weixin_41192489/article/details/140301618

シャドウボックス-シャドウ

影はボックスのサイズを変更せず、兄弟要素のレイアウトに影響を与えません。また、複数の境界線の影を設定して、より良い効果を実現し、3 次元効果を高めることもできます。

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值）  内/外阴影
1

• 水平オフセット: 右に正の値、左に負の値。
• 垂直オフセット: 正の値は下方向、負の値は上方向。
• ぼかしレベル: 負の値にすることはできません
• 内側/外側のシャドウ - 挿入図は内側のシャドウであり、外側のシャドウとして書き込まれません

box-shadow: 15px 21px 48px -2px #666;
1

よく使われる影

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
1

使い方をもっと見る
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

• 【実践】入力ボックスの自動塗りつぶしの背景色を上書きする

  input:-webkit-autofill {
      -webkit-box-shadow: inset 0 0 0 1000px #fff;
      background-color: transparent;
  }
  1
  2
  3
  4

• 【実用】ボタン押しの色を一括変更する

  button:active {
      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
  }
  1
  2
  3

• 【実戦】マスキング効果の初心者向けガイド

  .guide {
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
      border-radius: 50%;
  }
  1
  2
  3
  4

クリップ クリップパス

https://blog.csdn.net/weixin_41192489/article/details/121341551

• 【実用】クリップパスはPPTと同様のトランジションアニメーションを実装します
  https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation

変換変換

https://blog.csdn.net/weixin_41192489/article/details/140314866

ズームズーム

Firefox ブラウザーはこれをサポートしていません。次の属性値を持つことができます。

• パーセント値。zoom:50%、元のサイズの半分に縮小されていることを示します。
• 数値。zoom:0.5、元のサイズの半分に縮小されていることを示します。
• normalキーワード。zoom:normalに相当zoom:1, がデフォルト値です。
• resetキーワード。zoom:resetこれは、ユーザーが Ctrl と - または Ctrl と + を押してドキュメントをズームしても、それに応じて要素が縮小または拡大されないことを示します。ただし、このキーワードは互換性が低く、Safari ブラウザでのみサポートされています。

ズーム関数とスケール関数の比較

• zoom属性スケーリングの中心座標は要素の左上隅を基準にしており、変更できません。transform変身するscale()関数スケーリングのデフォルトの中心座標は要素の中心点です。
• ズーム属性のスケーリングは、要素が占めるサイズ空間をリアルタイムで変更し、再描画と再計算をトリガーするため、ズーム属性のスケーリングのパフォーマンスは、scale() 関数のパフォーマンスよりも悪くなります。
• 要素にズーム属性を適用しても、カスケード コンテキストは作成されず、固定要素の配置や、オーバーフロー属性による絶対位置の要素のオーバーフロー非表示には影響せず、絶対位置の要素を含むブロックも変更されません。

マスクマスク

https://blog.csdn.net/weixin_41192489/article/details/121158821

勾配勾配

https://blog.csdn.net/weixin_41192489/article/details/140316024

さまざまなタイプの要素に対応する独自のスタイル

文章

https://blog.csdn.net/weixin_41192489/article/details/140264311

ハイパーリンク

疑似クラス スタイル - 次の固定順序で記述する必要があります。

• :link "Link": ハイパーリンクがクリックされる前 - href 属性を持つすべてのハイパーリンク (アンカーを除く) に適用 - 省略可能、a タグで省略可能
• :visited "Visited": リンクが訪問された後 - 省略可能、a タグで省略可能
• :hover "hover": ラベル上にマウスを置いたとき
• :active "アクティブ化": マウスがラベルをクリックして放さないとき。

    /*让超链接点击之前是红色*/
    a:link{
        color:red;
    }

    /*让超链接点击之后是绿色*/
    a:visited{
        color:orange;
    }

    /*鼠标悬停，放到标签上的时候*/
    a:hover{
        color:green;
    }

    /*鼠标点击链接，但是不松手的时候*/
    a:active{
        color:black;
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

写真

ピクチャーフィルターフィルター

https://www.runoob.com/cssref/css3-pr-filter.html

アイコン

• フォントウェイトを使用してレスポンシブアイコンを実装する
  フォントサイズが大きいほどアイコンフォントは詳細になり、フォントサイズが小さいほどアイコンフォントはシンプルになります。
  https://demo.cssworld.cn/8/5-1.php

• CSS アイコンの結合 - ClipPath Sprites テクノロジー
  https://blog.csdn.net/weixin_41192489/article/details/121242735

シート

ホバー時に行を強調表示する

/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
      background: #868686;
}
1
2
3
4

色の交互の列

データの行間で色が交互に表示されるため、ユーザーの読書疲労が軽減されます。

table tr:nth-child(odd){
   background:#fff
}
table tr:nth-child(even){
   background:blue
}
1
2
3
4
5
6

スクロール

マウスカーソル

カーソル

カーソルの色 キャレットの色
入力ボックスの挿入カーソルの色を設定します (IE および Edge ブラウザではまだサポートされていません)

input {
    caret-color: red;
}
1
2
3

関連するスタイルの表示と非表示を切り替える

要素を非表示にできる次のスタイルがない場合、要素が表示されます (カスケードが覆われているため、一部は表示されません)。

• display: none [一般的に使用される] 非表示の要素。スペースを占有せず、リソースが読み込まれます。DOM にアクセスできます (html タグに hidden を追加すると、タグの表示が非表示に変更されます)。
• visibility: hidden 非表示の要素が位置を占め、リソースがロードされ、DOM にアクセス可能になります
  • 親要素がvisibility:hiddenを設定すると、子要素も非表示になります(継承)。
  • 子要素にvisibility:visibleが設定されている場合、子要素は再度表示されます。
• opacity: 0 要素は表示されず、所定の位置に配置され、クリックまたは選択できます。
• clip: rect(0 0 0 0) 要素は非表示でクリックできず、スペースも占有しませんが、キーボードでアクセスできます
• 負の z-index 値は要素を非表示にし、要素をクリックすることはできませんが、スペースを占有し、キーボードからアクセスできます。

  .lower {
  　position: relative;
  　z-index: -1;
  }
  1
  2
  3
  4

位置依存のスタイル

ページ上の要素の位置は、配置、表示、フロート、マージンなどのさまざまなスタイルによって決まります。

位置、表示、およびフロートが同時に存在する場合、要素の最終的な表示効果は、以下のリンクで説明されているロジックに従って決定されます。

https://blog.csdn.net/weixin_41192489/article/details/119009647

位置 位置

https://blog.csdn.net/weixin_41192489/article/details/140242430

レイアウト表示

https://blog.csdn.net/weixin_41192489/article/details/140250775

マージン

https://blog.csdn.net/weixin_41192489/article/details/115140348

位置合わせ

https://blog.csdn.net/weixin_41192489/article/details/140255028

カスケード Z インデックス

https://blog.csdn.net/weixin_41192489/article/details/140297366

インタラクション関連のスタイル

スムーズなスクロール スクロール動作: スムーズ

https://blog.csdn.net/weixin_41192489/article/details/121365831

ストレッチサイズ変更

https://blog.csdn.net/weixin_41192489/article/details/121396794

デバイス アダプテーション関連のスタイル

メディアに関するお問い合わせ @media

https://blog.csdn.net/weixin_41192489/article/details/126028971

【実践】モバイル端末適応ソリューション（3種類）

https://blog.csdn.net/weixin_41192489/article/details/120999355

カスタム CSS スタイル (CSS 変数/カスタム プロパティ)

https://blog.csdn.net/weixin_41192489/article/details/140317369

CSS記述の効率化

CSSプリプロセッサ

CSS プリプロセッサは、CSS にいくつかのプログラミング機能を追加するために使用される特殊なプログラミング言語です (CSS 自体はプログラミング言語ではありません)。 CSS プリプロセッサは最終的に標準の CSS スタイルをコンパイルして出力するため、ブラウザーの互換性の問題を考慮する必要はありません。 変数、単純な論理判断、CSS プリプロセッサの関数などの基本的なプログラミング スキルを使用できます。

主流の CSS プリプロセッサには、Sass (Scss)、Less、Stylus などがあります。
(SASS はバージョン 3.0 以降 SCSS に名前変更されました)

• SSS実践チュートリアル
  https://blog.csdn.net/weixin_41192489/article/details/134313564

CSSフレームワーク

• UnoCSS実践チュートリアル
  https://blog.csdn.net/weixin_41192489/article/details/140034188

CSSコーディング規約

• ブラウザのデフォルトスタイルをリセットする
• スタイルの使用を避けるようにしてください
• 単位は属性値がゼロの場合にのみ省略できます
• 通常、値は 5 ピクセルではなく 6 ピクセルなどの偶数です (特に行の高さとフォント サイズは、それらの差が 2 で割り切れるようにして、フォントが行の中央に配置されるようにします)。
• クラス名は、クラス名がどの要素に作用するか、クラス名によって達成されるスタイル効果を一目で識別できるように、セマンティックである必要があります。

/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
   display:flex
}
/* 设置颜色为红色 */
.red{
  color:red
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

推奨されるテキストスタイル

• テキストコンテナには font-size:medium を使用します (ブラウザのデフォルトサイズを変更すると、それに応じてテキストを拡大または縮小できます)。
• 相対単位 (パーセンテージまたは em) を使用したテキスト コンテナ内のテキスト
• テキストの余白の単位として em を使用する

高性能アニメーション

CSS の高パフォーマンス アニメーションの 3 つの要素は、絶対配置、不透明度属性、および変換属性を指します。したがって、同じアニメーション効果は、まず、transform 属性を使用して実現されます。たとえば、要素の移動アニメーションでは、マージン属性ではなくトランスフォーム属性を使用する必要があります。