CSSの機能一覧表です。 最低限必要な内容に絞り込んで、分かりやすくしました。 発展的な内容はこちら

セレクタ

tag.クラス名{プロパティ:値;...} tagはh1などのHTML要素名

*{} /*全て選択*/
#id名{}
.class名{}
X Y{} /*Xの孫要素であるY*/
X > Y {} /*Xの子要素であるY*/

場所決め

<>中に子要素が入る</> 数値は,px,%,emで表すことができる

display: none | block | inline | inline-block | flex
/*noneなら表示されない。flexおすすめ*/
top | bottom | right | left: 数値
z-index: 数値 /*表示順序*/
overflow: visible | hidden | scroll | auto
/*はみ出た部分をどうするか*/

Flexbox

ここを見た方が分かりやすいです... どんな要素にも使える一押しのレイアウト機能

flex-direction: row | column ... /*整列方向*/
flex-wrap : nowrap | wrap ... /*折り返すか*/
justify-content: flex-start | flex-end | center ...
/*水平方向の左詰め、右詰め、中央揃え...*/
align-items : flex-start | flex-end | center
/*垂直方向の左詰め、右詰め、中央揃え...*/

色

色は#HEX, rgb(),rgba()で指定可能

color: 色 /*テキスト色*/
background-color: 色 /*テキスト色*/
background-image: url("画像のURL")
background-size: cover | auto | contain | 値 /*背景画像のサイズ*/
opacity: 数値 /*透明度, 0~1*/

文章

font-family: "フォント名"
font-style: normal | italic | oblique
font-weight: normal | bold | bolder | lighter | 100~900 /*フォントに含まれていることが前提*/
font-size: 値
text-align: start | end | center ... /*水平方向の左揃え、右揃え、中央揃え*/
vertical-align: top | baseline | bottom ... /*垂直方向の左揃え、右揃え、中央揃え*/
line-height: 値 /*一行の高さ*/
white-space: normal | pre | nowrap | pre-wrap | pre-line 
/*改行コードがあっても、これなしでは改行しない*/

サイズ

width: 値  height: 値
max-width: 値 /*最小幅, heightも同様*/
min-width: 値 /*最大幅*/

空白

marginは要素の外、border(枠線)は要素の端、paddingは要素の中の空白です。

margin: 値
border-width: 値
padding: 値
border-color: 色
border-radius: 値 /*枠線がなかった場合でも、角が丸くなる。多用されている!*/
box-shadow: x座標, y座標, ボケの強さ, 影の拡張, 色