Sass HTMLとCSSの基本[No.1]

• cssの基本

• ブロック要素とインライン要素

• displayプロパティ

• 中央揃えにする

• 詳細度

• hover

CSSの基本

クラス名の前には . をつける
ID名の前には#をつける

小要素だけにスタイルを当てるにはスペース空けて小要素を書く↓

.contnet h1{
    color: red;
}

複数にスタイルを当てるには　,　で区切る↓

h1, p{
    color: brown
}

合わせ技↓

.content h1, .content p{
    color: green;
}

ブロック要素とインライン要素

ブロック要素は縦並びに配置される<div>,<h1><p>など

インライン要素は横並びに配置される<span>,<a><ing>など
※縦幅と横幅のスタイルは無視される

displayプロパティ

blockとinlineとinline-blockに変更できる
inline-blockは横並びだけど縦幅と横幅のスタイルを無視しない

中央揃えにする

ブロック要素にをtext-align: center;を指定すると
子になっているinline、inline-block要素も中央揃えにできる

ブロック要素はmargin: 0 atuo;で中央揃えにする
※widthが画面いっぱいになっていると変わらない

詳細度

より詳細度の高いセレクターのCSSが適用される
ID > 二つのセレクタで指定 > class > 自分のタグだけ > 親のタグだけ

メモ予測変換
#ID名　.class名　で空のdivタグを生成できる
comand D　同じ文字列の複数行を一括編集
comand B サイドバーの表示切り替え
シフト　オルト　F 　コードの自動整形

hover

セレクタ名に:hoverをつける
例）btn:hover

アニメーションに時間を設ける
例）transition all 0.5s;