初めてのCSS

佐藤さん

■CSSはhtmlで書いた文字などに装飾をするもの

※html上に<h1>があるものと仮定する場合

・html上の文字に色味を変更する


---------------------------
h1{
color: #色味;
} 
--------------------------- 
！注意！
セミコロ「；」は終わりにつける！
コロンと間違えない。



・html上の文字の大きさを変更する


--------------------------- 
h1{
font-size: 40px;
}
---------------------------


・html上の文字の種類を変更する
！注意！ ダブルコーテーションを忘れない

--------------------------- 
h1{
font-family: "種類";
}
---------------------------


・html上の文字の背景色をつける

--------------------------- 
h1{
background: 色味;
}
---------------------------


・html上の文字の高さと幅を変更する

--------------------------- 
h1{
height: 80px;
width: 80px;
}
---------------------------


・複数のセレクタに同じCSSを指定する「,カンマ」で複数選択

h1,p{
 color: #色味;
}


=================================================
※html上に段落の<ul>と黒点リストの<li>があるものと仮定

・html上にある<li>のリストの一部のみ文字変更 

--------------------------- 
#htmlの<li>に名前をつける
<ul>
<li class="koredakekaetai">いっこめ</li>
<li>名前はない２</li>
<li>名前はない３</li>
</ul>
#classの名前をつけたものをcssで色を変更
.koredakekaetai{
color: #カラー;
}
---------------------------


・<li>の黒点がいらない場合

---------------------------
li{
list-style; none;
}
---------------------------



=================================================
※html上に<img>があるものと仮定する場合

・html上にある画像の高さと幅を変更する

--------------------------- 
img{
heigth: 80px;
width: 80px;
}
---------------------------

=================================================

・右寄せと左寄せ


--------------------------- 

・float: right or left;

---------------------------