建電網頁社展3
CSS入門
什麼是CSS
Cascading Style Sheets
# CHAPTER 2
讓你的html變好看
排版
改變形狀
改變顏色
動畫
# CHAPTER 2
嵌入
首先先創好一個css檔
嵌入方法：
在head裡面打
<link rel="stylesheet" href="css檔連結">
<link rel="stylesheet" href="hello.css"># CHAPTER 2
最基礎
直接寫在html element裡面
<p style="color:red ">hello</p>改變文字的顏色
直接寫在html裡面
用<style>包起來
<style>
p{
color:red;
}
</style>CSS是用
分號隔開
# CHAPTER 2
常用屬性
color：文字顏色
background-color：背景顏色
顏色
#色碼 or 色票 -> #28004D
rgba(紅,綠,藍,透明度) -> rgba(37,98,117,0.5)
直接打顏色 -> red , blue
# CHAPTER 2
常用屬性
padding：內距
margin：外距
橘色是margin，綠色是padding，中間那個是我的div範圍
單位：
px：像素
vh：螢幕高度的幾%
vw：螢幕寬度的幾%
也是可以直接打% 或其他東西
# CHAPTER 2
常用屬性
border：邊框
borderstyle：邊框的類型
border-radius：角角圓弧程度
上面說的幾乎
都能加 -top / -left / -right / -bottom
去單一改變他的上下左右性質
# CHAPTER 2
常用屬性
font-size：字體大小
font-family：字型
font-weight：字體粗度
line-height：行距
letter-spacing：文字間距
text-align：靠左(left) or 靠右(right) or 置中(center)
# CHAPTER 2
常用屬性
定位time
static （靜態定位）：預設的，由上而下排列
relative （相對定位）：可利用top、left、right、bottom（物件的左上角距原上／左／右／下偏移多少）調整
absolute （絕對定位）：根據外層relative元素左上角的位置進行調整，若外層元素無relative則以整個頁面最左上角的位置進行調整，可利用top、left、right、bottom調整
fixed （固定定位）：固定在距離整個螢幕最上角的某個距離
sticky （黏貼定位）：滑到最上面就固定
# CHAPTER 2
常用屬性
排列time
我上禮拜有偷偷講到
如果改成flex
就可以用上面兩個方式改裡面的對齊方式
CSS選擇器
CSS selector
| 選擇器 | 名稱 | 效果 |
|---|---|---|
| * | 通用選擇器 | 選擇所有元素 |
| E (h1, p, img...) | 類型選擇器 | 選擇html元素 |
| #id (可隨便取名) | id選擇器 | 選擇id為id的元素 |
| .class | class選擇器 | 選擇class為class的元素 |
id? class?
就像身分證字號一樣
每一個id只能給一個元素
1.id
2.class
像你的班號一樣
可以很多人同班
所以class可以大家都一樣
# CHAPTER 2
建電網頁社展3
By reg941125
