Embedded Files
基本法則
基本法則
繼承：文字屬性父承子繼
覆蓋：後面覆蓋前面
權限：!important >> id > class > tag
背景屬性
背景屬性
BackGround-Color: □/transparent; 背景顏色/透明
BackGround-Image: url("圖片路徑"); 背景圖片
Width: □px/○%; 寬度
max-width: □px; 最大寬度
min-width: □px; 最小寬度
Height: □px/○%; 高度
max-height: □px; 最大高度
min-height: □px; 最小高度
background-repeat: no-repeat/repeat-x/repeat-y; 重複背景，無、橫向、縱向
BackGround-Position: □/○px □/○px; 背景位置，□得為center置中、top靠上
border: □px solid/dashed/dotted ○; 邊框線，框寬、樣式、框色
border-width: □px; 邊框線寬
border-style: solid/dashed/dotted; 邊框樣式，實線、虛線、點線
border-color: ○; 邊框線色
border-top 上框線
border-bottom 下框線
border-left 左框線
border-right 右框線
outline: □px solid/dashed/dotted ○; 外框線，框寬、樣式(實線/虛線/點線)、框色
文字屬性[行內]
文字屬性[行內]
font-family: 𝑨, 𝕬, 𝓐; 字型
Color: □; 字色
Font-siZe: □px; 字級
font-weight: bold/normal; 字重，粗、普
font-style: italic; 字風，斜
Line-Height: □(倍數)/□px; 行高
letter-spacing: □px; 字距
word-spacing: □px; 詞距，僅限洋文
Text-Align: Center/Left/Right; 文字水平對齊，置中、齊左、齊右
vertical-align: middle/top/bottom; 垂直對齊，置中、齊上、齊下
Text-Decoration: None/underline/line-through; 裝飾文字，無、底線、刪除線
text-indent: □px; 首行文字縮排
text-transform: uppercase; 大寫文字轉換
E.g. Line-Height: □px; 設一行高即可使單行文字垂直置中，且高度與行高相等效果亦同
圖片屬性[行內]
圖片屬性[行內]
img{} 網頁中唯一會自動等比例縮放的物件
Display: Block/inline/none; 顯示模式，區塊、行內、隱藏
清單屬性
清單屬性
list-style-type: none/decimal; 項目符號，無、數字，-type得省略
連結屬性[行內]
連結屬性[行內]
a:link{} 未瀏覽的連結
a:visited{} 已瀏覽的連結
a:hover{} 滑鼠觸碰該連結
a:active{} 滑鼠點擊該連結
Display: Block/inline/none; 顯示模式，區塊、行內、隱藏
ps. mailto:𝒆𝑴𝒂𝒊𝒍 電子郵件連結
間距屬性
間距屬性
Padding: auto/□px; 內間距
Padding-Top 上內間距
Padding-Bottom 下內間距
Padding-Left 左內間距
Padding-Right 右內間距
Margin: auto/□px; 外間距
Margin-Top 上外間距
Margin-Bottom 下外間距
Margin-Left 左外間距
Margin-Right 右外間距
一個數字：四邊相同
兩個數字：上下 左右
三個數字：上 左右 下
四個數字：上 右 下 左
box-sizing: border-box; 無視內間距規則(CSS3.0)
E.g. Padding/Margin: 0 auto; 水平置中
排版屬性
排版屬性
float: none/left/right; 浮動區塊，無、靠左、靠右，可由縱轉橫或作文繞圖
clear: both; 清除浮動(受影響者)
overflow: hidden; 還原應有高度、隱藏超出範圍子層(該浮動者)
display: inline-block; 橫向排列[行內]且得調整寬高[區塊]，且其具文字特性得水平置中
position: relative/absolute/fixed; 座標定位，相對[父]、絕對[子]、固定，可使兩實體重疊
z-index: 0; 圖層序列(數值大者位上)
CSS 選取器
CSS 選取器
CSS 2.0
CSS 2.0
萬用選取器：代表網頁內所有的標籤
*{
margin: 0;
padding: 0;
}
ID與Class選取器：標籤重複時之命名方法
識別碼(id) → #□ (同頁面id不得重複)
類別(class) → .□
ps. □勿以數字開頭
後代選取器：選取該父層內之子層(含孫層)
父層 子層{}
CSS 3.0
CSS 3.0
子代選取器：僅選取該父層內之子層(不含孫層)
父層 > 子層{}
相鄰選取器：僅選取甲區塊後之乙區塊
甲區塊 + 乙區塊{}
兄弟選取器：選取甲區塊後之乙區塊
甲區塊 ~ 乙區塊{}
Child Family(特定子代選取器)
父層 子層:first/last-child{} 首/末子層
父層 子層:nth-child(數/odd/even/an+b){} 第數/奇/偶/等差子層
父層 子層:nth-last-child(數/odd/even/an+b){} 從後面數來第數/奇/偶/等差子層
父層 子層:nth-of-type(數){} 第數子層(指定類別)
屬性選取器：僅選取特定屬性之子層
父層 子層[屬性]{}
排除選取器：排除特定標籤之子層
父層 :not(子層){}
群組選取器：將特定標籤組成群組
父層 子層甲, 父層 子層乙{}
偽元素：不存在於原始碼且表單、圖片無[行內]
父層 子層::before/after{
/* 一個冒號為CSS 2.0寫法 */
content: '文字';
}
單位
單位
px 像素
pt 點（印刷）
% 百分比
em 相對單位，以父層為基準
rem 根式相對單位，以最外層<html>為基準
E.g. html{
font-size: 62.5%; /* 預設字級16px × 62.5% = 10px，較便於計算 */
}
vw 視區寬百分比
vh 視區高百分比
其他
其他
@import url('reset.css'); 載入CSS Reset Eric將預設值消除
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reseter.css/1.0.8/reseter.min.css"> 𝐂𝐃𝐍𝐉𝐒 𝐂𝐒𝐒 𝐑𝐞𝐬𝐞𝐭
/* 文字 */ 註解，快捷鍵為Ctrl+/
url(../) 資料夾路徑向外一層
.block-main{} 模組化，即將重複的步驟合併，可於同一標籤加入複數模組
網頁特效設計 CSS 3.0
網頁特效設計 CSS 3.0
透明度
透明度
opacity: 0~1; 不透明度(內部子層將一併更改)
background-color: rgba(𝑹, 𝑮, 𝑩, 𝑨)/hsla(𝑯, 𝑺, 𝑳, 𝑨); 純色透明度
rgba(red紅, green綠, blue藍, alpha不透明度)
hsla(hue色相, saturation飽和度, lightness明度, alpha不透明度)
漸層
漸層
background-image: linear-gradient(𝜭deg, ○ △%, ○ △%…); 線性漸層，角度、顏色、範圍，角度亦可作to right/left top/bottom
background-image: radial-gradient(𝑿px 𝒀px at 𝒙px 𝒚px, □, □…); 放射狀漸層，尺寸(水平半徑、垂直半徑)或形狀(circle圓形/ellipse橢圓)、位置(水平座標、垂直座標)、顏色
多重背景
多重背景
background-image: url('路徑'), url('路徑')…;
BackGround-Size: auto □px/cover/contain; 背景尺寸/寬填滿/長填滿
ps. 有幾張背景圖就該有幾項設定，且前者位於上層
導角
導角
border-radius: □px/○%; 圓角
border-radius: 𝑿px / 𝒀px; 水平垂直半徑圓角
E.g. border-radius: 50%; 圓形
陰影
陰影
text-shadow: 𝑿px 𝒀px □px ○; 文字陰影，水平位移、垂直位移、模糊、顏色
box-shadow: inset 𝑿px 𝒀px □px ○px △; 區塊陰影，(內陰影)、水平位移、垂直位移、模糊、(擴大)、顏色
轉場動畫
轉場動畫
transition: □ 𝑻s 𝔗s; 轉場動畫，屬性、時長、延遲，僅時長𝑻為必要
transition-property: all/background-color/width/multi-change/position; 轉場屬性，全屬性、底色、寬度、多重變化、位置
transition-duration: 𝑻s; 轉場持續時間
transition-delay: 𝔗s; 轉場延遲時間
transition-timing-function: ease; 轉場播放方式，慢快慢
二維變形
二維變形
transform-origin: left/right/center/□px top/bottom/center/□px; 變形原點
transform: rotate(𝜞deg); 旋轉(↻)
transform: rotateX(𝜭deg); 橫軸旋轉
transform: rotateY(𝜱deg); 縱軸旋轉
transform: skew(𝜭deg 𝜱deg); 傾斜(↔)
transform: skewX(𝜭deg); 水平傾斜
transform: skewY(𝜱deg); 垂直傾斜
transform: scale(𝑿, 𝒀); 縮放倍率
transform: scaleX(𝑿); 水平縮放
transform: scaleY(𝒀); 垂直縮放
transform: translate(𝑿px, 𝒀px); 位移
transform: translateX(𝑿px); 水平位移
transform: translateY(𝒀px); 垂直位移
三維變形
三維變形
perspective: 500px; 透視點[父]
transform-style: preserve-3d; 三維旋轉形式[父]
transform: rotate3d(1,0,0, 𝜭deg); 三維旋轉
transform: rotateX(𝜭deg); 橫軸旋轉
transform: rotateY(𝜱deg); 縱軸旋轉
transform: rotateZ(𝜞deg); 深軸旋轉
transform: scale3d(𝑿, 𝒀, 𝒁); 三維縮放
transform: scaleX(𝑿); 橫軸縮放
transform: scaleY(𝒀); 縱軸縮放
transform: scaleZ(𝒁); 深軸縮放
transform: translate3d(𝑿px, 𝒀px, 𝒁px); 三維位移
transform: translateX(𝑿px); 橫向位移
transform: translateY(𝒀px); 縱向位移
transform: translateZ(𝒁px); 深向位移
動畫
動畫
ANniMation: □ 𝑻s 𝔗s ease ○ forward; 動畫，僅名稱□、時長𝑻為必要
animation-name: □; 動畫名稱
animation-duration: 𝑻s; 動畫持續時間
animation-delay: 𝔗s; 動畫延遲時間
animation-timing-function: ease/linear/cubic-bezier(𝒊,𝒋,𝒌,𝒍)/steps(60, end); 動畫播放方式，慢快慢、等速、自定義曲線、逐格
animation-iteration-count: □/infinite; 動畫播放次數，次回、無限
animation-fill-mode: forwards/backwards; 動畫映後模式，映後、映前位置
@keyframes □{ /* 關鍵影格 */
0%{
right: 0; /* 位移 */
bottom: □px; /* 與底下的距離 */
transform: rotate(0deg); /* 旋轉 */
}
100%{
right: □px/100%;
bottom: □px;
transform: rotate(360deg);
}
}
濾鏡
濾鏡
filter: grayscale(0~1); 灰階
filter: sepia(0~1); 懷舊
filter: saturate(0~𝒏); 飽和度
filter: hue-rotate(𝜭deg); 色相旋轉
filter: invert(0~1); 負片
filter: opacity(0~1); 不透明度
filter: brightness(0~𝒏); 亮度
filter: contrast(0~𝒏); 對比
filter: blur(□px); 模糊
filter: drop-shadow(𝑿px 𝒀px □px ○); 下拉陰影，水平位移、垂直位移、模糊、顏色
其他
其他
point-event: none; 滑鼠點擊事件，無
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> 𝐂𝐃𝐍𝐉𝐒 𝐅𝐨𝐧𝐭 𝐀𝐰𝐞𝐬𝐨𝐦𝐞
網頁排版設計 CSS 3.0
網頁排版設計 CSS 3.0
發展歷史
發展歷史
<table> → float → flex → grid
Float 浮動
Float 浮動
float: none/left/right; 浮動區塊，無、靠左、靠右，可由縱轉橫或作文繞圖
clear: both; 清除浮動(受影響者)
overflow: hidden; 還原應有高度、隱藏超出範圍子層(該浮動者)
display: inline-block; 橫向排列[行內]且得調整寬高[區塊]，且其具文字特性得水平置中
position: relative/absolute/fixed; 座標定位，相對[父]、絕對[子]、固定，可使兩實體重疊
z-index: 0; 圖層序列(數值大者位上)
E.g. position: absolute; /* 置中固定寬高物件 */
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
E.g. position: absolute; /* 置中無固定寬高物件 */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
Flexbox 彈性盒子
Flexbox 彈性盒子
display: flex; 彈性盒子顯示[父]，子層即成為Flex-item，其僅影響子層且等高，並不受父層寬度影響
display: inline-flex; 橫向排列(行內)且得調整寬高(區塊)，但會因其文字特性產生空隙
尺寸
flex: 𝒈𝒓𝒐𝒘 𝒔𝒉𝒓𝒊𝒏𝒌 𝒃𝒂𝒔𝒊𝒔; 彈性盒子縮寫
flex-grow: 0; 伸展[子]，不公平分配
flex-shrink: 1; 收縮[子]，不公平分配
flex-basis: auto/□px; 基礎值[子]，似寬度但權限較大，可忽視內容寬度
流向
flex-direction: row/column; 流向[父]，橫向、縱向
flex-wrap: no-wrap/wrap; 斷行[父]，延續、斷行
對齊
align-content: flex-start/end/center; 多行垂直對齊[父]，靠上、靠下、置中，解除等高狀態
align-content: space-between/around; 分散、等距對齊
align-items: flex-start/end/center; 單行垂直對齊[父]，靠上、靠下、置中，解除等高狀態
align-self: flex-start/end/center; 單行垂直對齊[子]，靠上、靠下、置中，解除等高狀態
justify-content: flex-start/end/center; 水平對齊[父]，靠上、靠下、置中justify-content: space-between/around; 分散、等距對齊
排序
order: 0; 變更Flex-item順序，數值小者位前，得為負值
E.g. img{
width: 100%; 限縮圖片尺寸避免版面外溢
}
ps. 於Flexbox 內Float 無效，欲靠右需寫margin-left: auto; 將其左外間距拉滿
Grid 格線
Grid 格線
display: grid; 格線顯示[父]
grid-template-columns: 1fr/□px/auto 1fr/□px/auto…; 剩餘欄位[父]
grid-template-rows: 1fr/□px/auto 1fr/□px/auto…; 剩餘列位[父]
grid-area: 𝑹𝑺 / 𝑪𝑺 / 𝑹𝑬 / 𝑪𝑬; 格線範圍縮寫[子]，列始、欄始、列迄、欄迄
grid-column: 𝑪𝑺 / 𝑪𝑬; 欄線範圍[子]，始、迄
grid-column-start: 1; 開始欄線[子]
grid-column-end: 2; 結束欄線[子]
grid-row: 𝑹𝑺 / 𝑹𝑬; 列線範圍[子]，始、迄
grid-row-start: 1; 開始列線[子]
grid-row-end: 2; 結束列線[子]
grid-area: 𝒈𝒓𝒊𝒅𝑵𝒂𝒎𝒆; 格線區塊名稱[子]
grid-template-areas: '𝑲 𝑲 𝑲 𝑲' /* 第一列 */
'𝑳 𝑴 𝑴 𝑵' /* 第二列 */; 區塊排序[父]
手機網頁顯示介面
手機網頁顯示介面
響應式網頁設計(Responsive Web Design)，即手機和電腦用相同網頁，並利用CSS修改以兼容手機介面
手機版網頁(Mobile Web)，即完全為手機量身製作的網頁
應用程式(Application)，最佳體驗但成本亦最高
響應式網頁設計 RWD
響應式網頁設計 RWD
設至伺服器模式後，編碼將會即時同步更新！且當開發者工具與手機網頁顯示不符時，請以手機為準！
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 可視區域，裝置寬度、預設倍率、最大倍率、能否縮放(0為No／1為Yes)
@media screen and (max-width: 375px){ /* 斷點 */
body{
img{
width: 100%; 限縮圖片尺寸避免版面外溢
}
}
}
ps. My Device: https://www.mydevice.io/ 預覽裝置介面寬度，市面上主要手機介面寬度為414px和375px
calc(𝑬𝒒) 參數運算，得寫於任一數值位置
E.g. width: calc(50% - 5px); 運算符得為加(+)、減(-)、乘(*)、除(/)，其前後須以空格分隔
Page updated
Google Sites
Report abuse