<CSS排版>

網頁小社第三堂

講師:嗯嗯

<複習-CSS>

就是變漂亮

常用屬性-顏色

color:文字顏色

background-color:背景顏色

#色票#A7D0D9

rgba(r,g,b,透明度0~1)rgba(168, 208, 217, 0.85)

直接寫顏色→redblue

常用屬性-距離

padding:內距

margin:外距

常用單位:

px:就像cm一樣的道理

vw:螢幕寬度的幾%

vh:螢幕寬度的幾%

常用屬性-距離

margin/padding-top/bottom/left/right:分別設定上下左右

margin/padding:上  下  左  右

margin/padding:上  左右  下

margin/padding:上下  左右

margin/padding:上下左右

auto→剩下空間

margin:auto→置中

margin-left:auto→置右

常用屬性-寬度高度

height:高度

width:寬度

ㄉㄅㄑ我上次忘記講

常用屬性-邊框

border:邊框粗細 邊框顏色 邊框樣式

border-radius:圓角

border-top/bottom/left/right:設定上下左右邊框

常用屬性-文字

font-size:字體大小

font-family:字型

font-weight:字體粗度

line-height:行距

letter-spacing:文字間距

text-align:靠左(left) or 靠右(right) or 置中(center)

選擇器

選擇器 名稱 說明
* 通用選擇器 選取所有元素
E (h1, img...) 類型選擇器 選取HTML元素
#idname ID選擇器 選擇id為idname的元素
.classname class選擇器 選擇class為classname的元素
[attr] 屬性選擇器 選取有該屬性的元素
[attr="value"] 屬性選擇器 選取該屬性為value的元素

選擇器{

    屬性: 值;

}

h1{
  color: red;
  font-size: 16px;
}

class/id

class:像是一個班級

可以有很多人都是同一個class

一個人也可以有很多個class

 

id:像是身分證

一個id只能有一個人擁有

一個人也只能有一個id

<進階一點點的CSS>

進入排版嘍

常用屬性-位子

position

常用屬性-位子

position

static (靜態定位):預設的,由上而下排列

relative (相對定位):可利用topleftrightbottom物件的左上角距原上/左/右/下偏移多少)調整

absolute (絕對定位):根據外層relative元素左上角的位置進行調整,若外層元素無relative則以整個頁面最左上角的位置進行調整,可利用topleftrightbottom調整

fixed (固定定位):固定在距離整個螢幕最上角的某個距離

sticky (黏貼定位):滑到最上面就固定

position練習

常用屬性-排列

display

常用屬性-排列

display:flex

justify-content

align-items

display練習

下一節課要來實作啦