首頁
- 詳細內容
- 作者 Super User
- 分類: CSS
- 點擊數: 1553
做網頁的基本程式是HTML與CSS
先寫出HTML大概的格式後
就可以使用CSS來美化網頁
但各個基本CSS的書看半天都太複雜也太亂了
所以簡單紀錄一下
CSS基本就是把HTML的各個標籤當成一個框架
想像文字或圖片被多個長方形外框包住
裡面可以填入各種顏色，還有外框的粗細格式控制等等
CSS就是在做這種事
以下這個影片說明了CSS的格式
由內而外依序為：內容、padding、border、margin
- 詳細內容
- 作者 Super User
- 分類: CSS
- 點擊數: 1450
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>