CSS の A から Z まで

WBOY
リリース: 2024-08-06 01:21:49
オリジナル
949 人が閲覧しました

An A to Z of CSS

これは、私が部屋に入ると、両親と甥が車の A から Z までを調べようとしていたのを見つけたことからインスピレーションを得ました。

アクセシビリティ

多くの人が忘れていることですが、私はこれが応答性と同じくらい重要だと考えています。

Bブロック

書き込み方向に対して垂直です。

C計算

CSS で計算を実行します。とても便利です。

Dディスプレイ

ブロック、インライン、インラインブロック、フレックス、インラインフレックス、グリッド、インライングリッド、なしなど

E:空

子のない要素をスタイリングするための便利な疑似クラス。中に空白がない限り。

F フレックスボックス

私が初めて CSS を始めたとき、インスペクターを見ていろいろ遊んで勉強しました。そして、float を使ってレイアウトを作成した人の真似をしました。そして、物事の位置を決めるのがとても難しかったです。フレックスボックスについて学ぶことで、大きな違いが生まれました。

Gグリッド

私にとって、フレックスボックスのより複雑で強力な兄弟のように今でも感じられるもの。

H高さ

何かが水平方向に占めるスペースの量。

インライン化します

書き込み方向。 margin-inline: auto を使用できるので、センタリングに非常に役立ちます。

J 正当化する

フレックスボックス ゾンビでは、位置調整レーザーを使用して、発射している方向のゾンビをターゲットにします。

K @キーフレーム

アニメーションのステップ。

L 行の高さ

テキストが大きすぎたり小さすぎたりすると、まったく読めなくなる可能性があります。

Mマージン

要素を大きくしない要素の周囲のスペース。

N なし

何かの表示を停止したり、境界線を削除したりするのに役立ちます。

O オブジェクトフィット

これはずっと存在しているように思えますが、少し前に比較的あるものに出会いました。これには、object-fit が新しく、まだすべてのブラウザで動作しないことに対処するために誰かが書いた JavaScript が含まれていました。

P パディング

要素を大きくする要素の周囲の間隔。負のパディングは、負のマージンのようなものではありません。

Qクエリ

メディア クエリとコンテナ クエリ。レスポンシブ デザインとアクセシビリティに使用されます。

Rの応答性

サイトがすべての画面に収まるようにするために重要です。かなり基本的なことのように思えますが、サイズによっては適切に適合しないサイトがたくさんあります。

S特異性

これは、サードパーティのスタイルをオーバーライドしようとするときに面倒になります。最近では、:where を使用している CMS プラグインをいくつか見かけましたが、これは非常に役立ちます。

T テキスト

フォントのスタイル設定に使用されることもあります。フォントを使用する場合もあります。ただし、テキストの色を変更したい場合は除きます。その場合はどちらでもありません。

U単位

これらの中で最もよく使用されるのは、%、px、em、rem です。また、グリッドでは fr、トランジションとアニメーションでは s と ms も使用できます。

V の可視性

興味深いことに、可視の反対は隠されています。それは論理的に考えられることではありません。

W幅

何かが水平方向に占めるスペースの量。

X オーバーフロー-x

x についてはちょっとしたチートですが、x から始まるものは何もありません。これは水平方向のオーバーフローを制御します。 x は Tailwind でも使用されます。たとえば、mx は水平マージンです。

Y オーバーフロー -y

x と同様に、これは垂直方向のオーバーフローを制御します。そして、y は通常、Tailwind の垂直方向を表します。

Z z-インデックス

使用できる最高/最低の Z インデックスは (-)2,147,483,647 です。あるいは、無限大でも同じことが得られます。しかし、9 秒を入力して、なぜ機能しないのかを考える方がはるかに簡単な方法です。

以上がCSS の A から Z までの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート