做網頁的基本程式是HTML與CSS

先寫出HTML大概的格式後

就可以使用CSS來美化網頁

但各個基本CSS的書看半天都太複雜也太亂了

所以簡單紀錄一下

CSS基本就是把HTML的各個標籤當成一個框架

想像文字或圖片被多個長方形外框包住

裡面可以填入各種顏色,還有外框的粗細格式控制等等

CSS就是在做這種事

以下這個影片說明了CSS的格式

https://youtu.be/Qhaz36TZG5Y

由內而外依序為:內容、padding、border、margin

CSS框的說明
CSS框的說明

 

 

 

CSS標籤的開頭決定了他是屬於何種
例如class或id
開頭#為id
開頭.為class類別
直接寫是<>的element元素標籤
詳細可以參考https://www.w3schools.com/cssref/css_selectors.asp

以下為範例 
寫在body內表示在html內的<body></body>之間的全部背景顏色會被影響
而#header影響的為id,使用範例如<div id="header"></div>在此標籤內的會被影響
而.pagemeun影響的為class,例如在連接標籤中加上class會有效果<a href="enemy.php?page=1" class="pagemeunt" >1</a>


body {
  background-color: rgba(211, 211, 211, 0.5)
}

#header{
  background-color: LightGray;
}
.pagemeun {
 padding-left:  5px;
 padding-right: 5px;
 border: 1px solid grey;
 background-color: #ffe4c4;
}

那麼css使用id與class差異在哪裡呢?
id只能使用一次,class可以在多個標籤中使用
另外class的效果也可以疊加
例如css

.tap {
 padding-left:  5px;
}

.catty {
 background-color: #ff8c00;
}

在這段html中tap與catty兩個的效果會加在一起

<div class="tap catty">Processed in 1.51E-5 second</div>