html内でcssを使うにはstyleタグ
要素に直接スタイルを付ける場合はstyleタグ
border等のように継承されないプロパティでも継承したい場合は、inheritを使う
command + option + i でデベロッパーツール
ｈ１の打ち消し線はtext-decoration: line-through;
pに下線を付けるには、text-decoraton: underline;
リンクの下線を消すには、text-decoration: none;
font-familyでフォントを変更できるが、注意したいのは、このフォントが反映されるにはこのページを見ている人の PC にそのフォントが存在している必要があるという点.
そこで、１つ目のフォントがなければ次のフォントというように、コンマで区切って指定する。
フォント名に空白が含まれる場合は ' （シングルクォーテーション）か " （ダブルクォーテーション）で囲ってあげる必要がある
CSS に日本語が含まれる場合、ブラウザによっては文字化けする可能性があるので CSS ファイルの先頭に @charset "utf-8"; と書いてあげる
日本語フォントを先に書くと、英字に日本語のフォントが適用されてしまうので、それが嫌な場合は英文フォントのあとに書いてあげる
sans-serif ですが、これは総称フォントファミリーと呼ばれていて、個々のフォント名ではなくてフォントのカテゴリーを指定するものになります
sans-serif がゴシック体系、 serif だったら明朝体系、 cursive だったら筆記体系、 monospace だったら全ての文字が同じ幅になる等幅フォント
この総称フォントファミリーを最後に指定しておくことによって、これらが全て見つからなかった場合、このカテゴリーのフォントからあるものを自動的に選んでくれるので必ず指定しておくようにしましょう
line-height を文字サイズの 3 倍にしたかった場合、いちいちこのように計算しなくても、 1 文字分を表す em という単位を使うこともできます。 line-height: 3em;（もしくは単位なしのline-height: 3; でも可）
line-height は継承されるプロパティなのですが、このように単位ありで書いた場合、計算された値がそのまま子要素に継承されます。
単位なしで指定した場合、設定された文字サイズの 2 倍という設定のみが継承されて、子要素のほうで再計算されます。
vertical-alignは垂直方向で画像などのbaselineからの位置変更を可能にする
topは上、bottomは下
middle とすると行ボックスの中央ではなくて、 英小文字の中央と画像の中央が合わせられるという点にも注意
長さの単位で設定することもできて、その場合は baseline からどれだけ離れるかという意味になります。
2pxとすると、baselineから2px上で、-2pxとすると、baselineから2px下という意味
vertical-align を使えば画像に限らず、文中で配置される要素の位置を調整できる
rgbaとHSLA
list-style-type: circleで白丸
olタグでa,b,cにするには、lower-alpha
記号を内側にしたい場合は、list-style-position: inside; とする
記号の代わりに画像にするには、list-style-img: url();
→list-style:circle lower-alpha url(); のように、半角区切りで指定すると、上記をまとめて指定できる。
list-style に限らず、一括指定プロパティで値を省略した場合は、その前に書いた個別の設定が初期値で上書きされてしまう点に注意する
領域から溢れた文字などは overflow: hidden;
overflow: scroll; にすると、領域内でスクロールできる
border-style: dashed; で点線
垂直方向でmarginが重なると、小さい方が打ち消される
z-indexは要素の重なり順を指定するもので、数値が大きいほど上に表示される
ブラウザ幅を変えてもboxの間隔が20pxで、かつそれぞれのboxの幅が同じになるようにする
3x + 40px = 100%
→ width: calc((100% - 40px) / 3
演算子の前後にはスペース必須
box-shadow: 10px 5px 3px 10px
１つ目はx方向、２つ目はy方向、３つ目は影のぼかし具合、４つ目は影の拡大
text-shadowは４つ目は不可
画像の縦横比を維持したまま表示したい場合は background-size: cover;
デフォルトだと左上を起点に伸縮するが、画像の中心を起点に伸縮させたいなら、
background-position: center;
背景も一括指定が可能。
background-size と position はまとめて指定する必要があって、その場合は / （スラッシュ）で区切って background: center/cover にしてあげて
float された要素は通常の配置から外れるので、そのあとに続く要素は画像がなかったかのように配置されるのですが、テキストだけは画像を回り込むように配置される
h２など以降を画像の下に表示したいときに使う、clear が適用できるのは display プロパティの値が block の要素だけ