cssのトリセツ

<p class="anicredazo">
idは一度決めた名前は一つしか使えない</p>
<p id="anicredazo">
classは何度でも使える。</p>

//classの書き方
.anicredazo{
}
//idの書き方
#anicredazo{
}

#anicre ----id
.anicre ----class

<p class="anicre">
 AniCreは進化し続けます
</p>

.anicre{
 font-size: 40px; //サイズ
 color: #2196F3;　//色
 text-align: center;//中央によせる
 
}

<p class="a">AniCre 10px</p>
<p class="b">AniCre 20px</p>
<p class="c">AniCre 30px</P>
<style>
.a{
font-size 1o px;}
.b{
font-size 20px}
.c{
font-size 30px
}
</style>

<div class="test-anicre-frame">//親セクタ
    <div class="test-anicre">
        美人と結婚したい//子セクタ 
    </div>
</div>
<style>
.test-anicire-frame{
font-size:10px;
}
.test-anicre{
font-size:300px; //10pxの３倍が表示される
}
</style>
//セクタの話は次の一部だけ変えるを参考に

//システムhtmlファイルからの（この場合20px)相対
html{
}
<div class="oneaa">
<p>君に出会えて幸せだった</p>
<p>だから、一緒にデートしよ？</p>
</div>
<style>
/*ｃｓｓはstyleで囲む事も出来ます*/
.oneaa{
font-size: 1.5rem;(この場合、30px)
}
</style>

<div class="one">
<p>君に出会えて幸せだった</p>
<p>だから、一緒にデートしよ？</p>
</div>
<style>
/*ｃｓｓはstyleで囲む事も出来ます*/
.one{
font-size: 40px;
}
</style>

<div class="test-anicre-frame">//親セクタ
<p>疲れたガチ</p>
    <div class="test-anicre">
        美人と結婚したい//子セクタ ここdivだけ３０pxにする　pがなくてもOK
    </div>
</div>
<style>
.test-anicire-frame{
font-size:20px;
}
.test-anicre{
font-size:30px 
}
</style>

<p class="anicre">
 AniCreは進化し続けます
<span class="anicrespan"> //これ
ここだけ赤色に
</span>
</p>

.anicre{
 font-size: 40px;//サイズ
}
.anicrespan{
 color: red;	　//色
}

<ul>
<li class="bizin">美人</li>
<li class="kawaii">可愛い</li>
</ul>
<style> 
/*cssはhtmlにstyleでも書けます*/
[class="bizin"]{

 color: red;
}

</style>

<ul>
<li> <em>美人</em></li>
<li> <em>可愛い</em></li>
<li> <em>綺麗</em></li>
<li> <em>天使</em></li>
<li> スタイル最高</li>
</ul>
<style> 
/*cssはhtmlにstyleでも書けます*/
li:first-child{
background-color: silver;
}
li:last-child{
background-color: 	#666633;
}
</style>

<p class="alife">
Welcome to AniCre</p>
<style>
/*●（丸）の青をAniCreに、●AniCre●と追加してみましょう。*/
/*●AniCre　前に追加するbefore、後に追加するafter、今回は両方同時に適応してみます*/
.alife::before,
.alife::after{
 content:""; /*文字を入れる場合はここに追加します。文字を入れなくてもこの記述は必要です*/
 display: inline-block;
 width:30px;
 height:30px;
 background-color: royalblue;
 border-radius:30%;
 margin:2px;
}
</style>

 <div class="stkou">
        美人と結婚したい
 </div>

<style>
width:100px; //高さ
margin: 1px;　//要素、全４辺の大きさ
border: solid 3px #000000; //border線を引く事,solidをつけると太くなる
background-color: #ccc;
</style>

/* 四辺すべてに適用 */
margin: 1em;
margin: -3px;
margin: auto;　左右中央になる

/* 上下 | 左右 */
margin: 5% auto;

/* 上 | 左右 | 下 */
margin: 1em auto 2em;

/* 上 | 右 | 下 | 左 */
margin: 2px 1em 0 auto;

.enninaru {
  width: 50px;
  height: 50px;

  padding: 50px;
  line-height: 50px;
  border-radius: 50%;
}

.kage {
  width: 50px;
  height: 50px;

  padding: 50px;
  line-height: 50px;
  border-radius: 50%;
}