Toptalの迅速で実用的なCSSチートシート

公開: 2022-03-11

カスケードスタイルシート（略してCSS）は、マークアップ言語で記述されたスタイルシート言語です。 CSSは、レイアウト、色、フォントなど、Webドキュメントの表示、外観、および書式設定要素を定義します。

CSS構文は包括的であり、正確な構文を常に把握したり、使用可能なすべてのCSSプロパティと対応する値を把握したりすることは容易ではありません。 CSS開発者と設計者を支援するために、Toptalはクイックリファレンスガイドを作成し、無料ダウンロードとしてコミュニティに提供しました。 CSSリファレンスガイドには、CSS構文、最も重要なセレクター、プロパティ、サイズと単位、およびその他の有用なCSS情報が短く有益な形式で含まれています。 CSSチートシートが貴重なリソースになることを願っています。

また、Toptalのリソースページで、一般的なCSSの間違い、CSS採用ガイド、CSS面接の質問、CSSのヒントとベストプラクティスに関する追加情報を確認することもできます。

CSSチートシートをダウンロードするには、ここをクリックしてください

CSSチートシート

構文		ボックスモデル
/コメント/ @メディアタイプ { セレクター{ プロパティ：値; } } 注：メディアタイプはオプションです
インラインスタイル <タグ>
埋め込みスタイル <頭> <style type = "text / css"> セレクター{プロパティ：値; } </ style> </ head>
外部スタイルシート <頭> <link rel = "stylesheet" type = "text / css" href = "style.css" /> </ head>		ボックス
		マージン	マージントップマージン右マージンボトムマージン左

セレクター		パディング	パディングトップパディング-右パディングボトムパディング-左
*	すべての要素
鬼ごっこ	すべてのタグ要素	国境	ボーダートップボーダー右ボーダーボトムボーダー左
鬼ごっこ *	タグ内のすべての要素
タグtag2	タグ内のtag2要素	ボーダの色	ボーダートップカラーボーダー-右-色 border-bottom-color ボーダー-左-色
タグ、tag2	すべてのtagおよびtag2要素
タグ>tag2	tag2はtagの子です	ボーダースタイル	ボーダートップスタイルボーダーライトスタイルボーダーボトムスタイルボーダーレフトスタイル
タグ+タグ2	tag2の前にtag
。クラス	クラス'class'の要素	ボーダー幅	border-top-width border-right-width border-bottom-width border-left-width
tag.class	クラス'class'のすべてのタグ
#id	id'id'の要素	サイズと色
tag＃id	id'id'のタグ	相対サイズ	em \| レム\| 例\| ch vw \| vh \| vmin \| vmax \| ％
疑似セレクター
：アクティブ	アクティブな要素にスタイルを追加します	絶対サイズ	cm \| mm \| の px \| pt \| PC
：後	要素の後にコンテンツを追加します
：前	要素の前の広告コンテンツ	色	16進数＃ff00ff
：第一子	最初の子にスタイルを追加します		RGB rgb（255,0,255）
：最初の文字	最初の文字にスタイルを追加します	ポジショニング
：最初の行	最初の行にスタイルを追加します	位置	絶対\| 修正済み\| 相対\| 静的\| 継承する
：集中	フォーカスされた要素にスタイルを追加します
：ホバー	マウスが上にあるときにスタイルを追加します	浮く	左\| 右\| なし\| 継承する
：リンク	未訪問のリンクにスタイルを追加します
：訪問	訪問したリンクにスタイルを追加します	右上、左下の	エッジからのオフセットを設定します
文章
フォントファミリー	フォントファミリーを指定します	クリア	左\| 右\| 両方\| なし\| 継承する
フォントサイズ	フォントサイズを指定します
フォントスタイル	通常\| イタリック\| 斜め\| 継承する	画面	ドキュメントフローに配置する要素を指定します

フォントバリアント	通常\| スモールキャップス\| 継承する	オーバーフロー	見える\| 非表示\| スクロール\| 自動\| 継承する
フォント -重さ	通常\| 太字\| 大胆な\| ライター\| int（100-900）\| 継承する
		視認性	見える\| 非表示\| 崩壊\| 継承する
色	テキストの色を設定します
行の高さ	通常\| int \| ％\| 継承する	z-index	自動\| int \| 継承する
text-align	左\| 右\| センター\| 正当化\| 継承する	寸法
		高さ	自動\| int \| ％\| 継承する
文章- 装飾	なし\| 下線\| オーバーライン\| ラインスルー\| 点滅\| 継承する	最大高さ	なし\| int \| ％\| 継承する
		最大幅	なし\| int \| ％\| 継承する
テキストインデント	int \| ％\| 継承する	最小の高さ	int \| ％\| 継承する
文章- 変身	なし\| 大文字にする\| 大文字\| 小文字\| 継承する	最小幅	int \| ％\| 継承する
		幅	自動\| int \| ％\| 継承する
垂直 -整列	int \| ％\| ベースライン\| サブ\| スーパー\| トップ\| テキスト-トップミドル\| 下\| テキスト-下\| 継承する	他の
		バックグラウンド	フォーマット：背景（色）（画像）（リピート）（ポジション）
白 -スペース	通常\| nowrap \| プレ\| プレライン\| プレラップ\| 継承する
		カーソル	カーソルの種類を設定する
単語間隔	通常\| 長さ\| 継承する	引用符	引用符の種類を設定する