基本HTML範例 Comment
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <style></style></head><body> <p>Hello CSS!</p> <p>These paragraphs are styled with CSS.</p></body></html>
CSS 基本語法
Selector(選擇器) - 通常是元素、類別或ID
Declaration(宣告) - 由Property(屬性)和Value(值)所組成，宣告間以分號區隔，最外圍用大括號括住。
CSS 套用方法
行內載入
寫在元素標籤後面，原始的寫法，較不易更改和維護
<p style="color:red; font-size:20px;">
內部載入
格式放在<head>的<style>中，設定相對應選擇器的格式，可同時做新增、修改
<head>
<style>
p
{ width: 200px; height: 40px; background: #b6ff00;
} </style></head>外部載入
將CSS格式獨立寫成*.css檔，從HTML內部載入外部的檔案即可，寫法是在<head>使用<link>，或是在<style>中使用@import載入外部檔案
<head> <link href="basis.css" rel="stylesheet"/></head>
<head> <style type=text/css> @import url(basis.css); </style></head>
CSS 各類選擇器
類別選擇器
可多重繼承
<style>
.name
{
color: red;
}</style><body>
<p class="name"></p></body>ID選擇器
只能單一繼承
<style>
#id01
{ color: red;
}</style><body>
<p id="id01"></p></body>標籤選擇器
可指定標籤名稱，所有相同標籤名稱都會套用此格式
<style>
p
{
color: red;
}</style><body>
<h2></h2> <!--這項不套用紅字-->
<p></p> <!--這項套用紅字--></body>群組選擇器
可將多個指定的選擇器套用相同的格式
<style>
h2,p
{
color: red;
}</style><body>
<h2></h2> <!--這項套用紅字-->
<p></p> <!--這項套用紅字--></body>屬性選擇器
可指定屬性套用相同的格式，有多種寫法標籤[屬性]
選擇標籤元素指定的屬性標籤[屬性 = “值”]
選擇標籤元素指定的屬性和值(需一模一樣)標籤[屬性 ~= “值”]
選擇標籤元素指定的屬性包含值的設定，設定包含值使用空格隔開單字，只要一個單字符合，即套用相同格式標籤[屬性 |= “值”]
選擇標籤元素的屬性值是開頭文字加上-符號標籤[屬性 ^= “值”]
選擇標籤元素的指定屬性，其值符合開頭文字標籤[屬性 $= “值”]
選擇標籤元素的指定屬性，其值符合結尾文字標籤[屬性 *= “值”]
選擇標籤元素的指定屬性，其值符合任何一處文字後代選擇器
指定父標籤下的所有子標籤套用CSS格式
父名稱 子名稱
{
屬性1: 值1;
屬性2: 值2;
}子選擇器
和後代選擇器差不多，只差在層級須完全相同
父名稱>子名稱
{
屬性1: 值1;
屬性2: 值2;
}CSS 虛構類別
a:link未照訪的網站a:visited照訪過的網站選擇器:hover游標觸碰到的狀態選擇器:active點擊時的狀態選擇器:focus按下元件後的狀態選擇器:enable啟用元件的狀態，通常是input元件選擇器:disable未啟用元件的狀態，通常是input元件選擇器:first-child該選擇器中第一個出現的選擇器:last-child該選擇器中最後一個出現的選擇器:n-child(odd)選擇器中的奇數個出現的選擇器:n-child(odd)選擇器中的偶數個出現的
CSS 虛構元素
選擇器::first-line選擇器中第一行的狀態選擇器::first-letter選擇器中第一行第一個字母的狀態選擇器::before選擇器緊臨前方位置的狀態h1::before { content: url(image.gif); }選擇器::after選擇器緊臨後方位置的狀態h1::after { content: url(image.gif); }選擇器::selection反白部分的狀態
CSS 顏色
範例 : CSS08.htm
color:值設定文字顏色，可以顏色名稱、數字和百分比來呈現顏色名稱，如red、blue
數字，如#ff00a3、rgb(255,255,0)
百分比，如rgb(100%,50%,0%)
rgb(紅色,綠色,藍色)
rgba(紅色,綠色,藍色,透明度)
opacity:值設定透明度(圖片)
屬性是0~1小數，數字越小代表透明度越高
漸層
background:radial-gradient(形狀/大小/指定位置,色彩停止點1,色彩停止點2,...,色彩停止點n)放射漸層圓黑外漸
圓黑20像素
圓心在上
形狀，如circle、ellipse
距離，度量單位，代表從中心點向外的半徑
指定位置，如 at + top、bottom、left、right
色彩停止點，色彩後空一格加上百分比或度量單位
background:linear-gradient(方向,色彩停止點1,色彩停止點2,...,色彩停止點n)線性漸層標題常用
由下而上
由左而右
彩虹
方向，如0deg、90deg
指定位置，如 to + top、bottom、left、right
background:repeating-radial-gradient(屬性值)重複漸層background:repeating-linear-gradient(屬性值)重複
圓型重複
上下間隔
CSS 文字
font-size:值改變字體大小px 像素點
cm 公分
mm 公釐
em 上層元素的相對大小
xx-small、x-small、small、medium、large、x-large、xx-large 預設大小
200% 相對大小
font-family:字型1,字型2,...改變文字字型
靠左優先，無法顯示時則顯示新細明體標楷體
微軟正黑體
也可以從網路上抓取字型，如Google字型
font-style:值斜體字iralic 斜體字
normal 正常
font-weight:值改變文字粗細數值，100~900數字越大越粗
lighter、normal、bold、bolder，預設值
font:斜體字 文字粗細 字體大小 文字字型設定font簡便寫法text-decoration:值裝飾線underline 底線
overline 頂線
line-through 刪除線
text-transform:值英文大小寫轉換uppercase 全部大寫
lowercase 全部小寫
capitalize 字首大寫
line-height:值行高text-indent:值首行縮排word-spacing:值文字間距letter-spacing:值字母間距text-shadow:水平移動量 垂直移動量 模糊值 色彩
可設定雙重陰影，兩者間用,符號隔開box-shadow:水平移動量 垂直移動量 模糊程度 色彩
可設定雙重陰影，與text-shadow相似text-stroke:粗細 顏色文字外框線NEW YORK
粗細，thin、medium、thick
顏色
text-align:值文字對齊方式center 置中
left 靠左
right 靠右
vertical-align:值文字垂直對齊方式top 對齊顯示區域上緣
text-top 對其前標籤上緣
bottom 對齊顯示區域下緣
text-bottom 對其前標籤下緣
middle 對其前標籤中緣
CSS 清單項目
list-style-type:值項目清單符號disc 實心圓點
circle 空心圓點
square 實心方塊
decimal 阿拉伯數字
decimal-leading-zero 阿拉伯數字(兩位)
lower-roman 小寫羅馬字母
upper-roman 大寫羅馬字母
lower-alpha 小寫英文字母
lower-greek 小寫希臘字母
cjk-ideographic 中文數字
list-style-image:url(路徑)項目清單圖片list-style-position:值清單位置outside 靠外
inside 靠內
CSS 背景
background-color:顏色值設定背景顏色設定背景顏色
background-image:url(圖片檔案路徑)設定背景圖片background-repeat:屬性值背景圖片重複設定no-repeat 不重複顯示
repeat-x X軸方向重複
repeat-y X軸方向重複
repeat X軸和Y軸方向重複
space 重複且圖片完整與自動調節間距
round 重複且圖片完整與自動調節間距(和space差不多)
background-position:X座標 Y座標設定背景圖片位置top 置頂
center 置中
bottom 置底
left 靠左
center 置中
right 靠右
X座標
Y座標`
background-origin:原點位置設定原點位置padding-box 以內距的左上角為原點，預設值
border-box 以框線的左上角為原點
content+box 以內容的左上角為原點
background-clip:裁切位置設定背景裁切方式border-box 將框線以外的部分去除，預設值
padding-box 將內距以外的部分去除
content-box 將內容以外的部分去除
background-attachment:屬性值設定背景圖片捲動跟隨fixed 隨之跟隨
scroll 停留原地
補充 - 浮動廣告
讓廣告可以跟著畫面移動，點擊即可進入連結
<div style="position:fixed; right:10px; top:10px;"> <a href="連結"> <img src="圖片/star.jpg" style="opacity:0.5;"> </a></div>
background-size:屬性值設定背景圖片大小度量單位
百分比
contain 符合區塊大小
cover 覆蓋區塊大小
auto
CSS 版面定位
box model
margin 外距
度量單位
百分比
auto
margin-top:屬性值設定上方外距margin-bottom:屬性值設定下方外距margin-left:屬性值設定左方外距margin-right:屬性值設定右方外距margin:上 右 下 左設定全方向外距(簡便寫法)onuline 外框線
下節有詳細介紹border 框線
下節有詳細介紹padding 內距
padding-top:屬性值設定上方內距padding-bottom:屬性值設定下方內距padding-left:屬性值設定左方內距padding-right:屬性值設定右方內距padding:上 右 下 左設定全方向內距(簡便寫法)content 內容
max-width:屬性值設定內容最大寬度min-width:屬性值設定內容最小寬度max-height:屬性值設定內容最大高度min-height:屬性值設定內容最小高度overflow:屬性值內容溢出處置visible 超出部分顯示
hidden 超出部分隱藏
auto 隨內容自動顯示卷軸
scroll 有無溢出都會顯示卷軸
display:狀態值設定元素狀態none 隱藏元素
block 區塊元素，會自動分行
inline 行內元素，為預設值
inline-block 行內元素與區塊元素隨文字段落顯示
list-item 清單項目
flex 浮動元素，之後章節獨立說明
visibility:屬性值設定元素可見/不可見visible 可見
hidden 不可見
flaot:屬性值浮動元素none 不變
left 置左
right 置右
clear:屬性值去除浮動元素none 無動作
left 去除左側
right 去除右側
both 去除兩側
position:屬性值設定元素位置static 預設值，不指定位置
relative 相對定位，以該元素為基準點
absolute 絕對定位，以父元素制定的位置為基準點
fixed 固定定位，以瀏覽器左上角為基準點
box-sizing:屬性值設定Box尺寸
設定Box設定Box的尺寸，設定的尺寸就是看到的尺寸，省去調整內外距的麻煩
CSS 框線設定
border-style:屬性值設定框線樣式none 預設值，不顯示框線
solid 單線框線
double 雙線框線
dotted 點狀虛線
dashed 線狀虛線
groove 3D立體內凹框線
ridge 3D立體外凸框線
inset 內凹框線
outset 外凸框線
border-top-style:屬性值也可針對單邊進行設定border-width:屬性值設定框線寬度thin 細
medium 中
thick 粗
度量單位
百分比
border-top-width:屬性值也可針對單邊進行設定border-color:顏色設定框線顏色border-top-color:屬性值也可針對單邊進行設定border-radius:圓角半徑設定圓角框線border-top-left-radius:圓角半徑左上角border-top-right-radius:圓角半徑右上角border-bottom-left-radius:圓角半徑左下角border-bottom-right-radius:圓角半徑右下角border: 寬度 樣式 顏色框線簡便寫法border: 寬度 樣式 顏色也可針對單邊進行設定
CSS 外框線設定
outline-style:屬性值設定外框線樣式outline-width:屬性值設定外框線寬度outline-color:顏色設定外框線顏色
與border相同屬性值，參照"CSS 框線設定"outline:樣式 寬度 顏色外框線簡便寫法
不可針對單邊進行設定outline-offset:數字設定框線和外框線的間距
CSS 表格框線
border-collapse:屬性值表格框線分離/不分離separate 分離
collapse 重疊
border-spacing:屬性值表格框線距離度量單位
table-layout:屬性值設定版面編排auto 預設值，隨著內容改變
fixed 固定
empty-cells:屬性值設定空白儲存格顯示/影藏show 顯示
hide 影藏
caption-side:屬性值表格標題位置top 表格上
bottom 表格下
CSS Flex
祕訣一: 要讓內元件有效果，要在外元件加上 display:flex
祕訣二: 每個 HTML 標籤，能同時擁有內元件跟外容器身份
Flex 主軸與交錯軸觀念(測試工具)
flex-direction: 決定軸線row : 水平
row-reverse : 水平，但順序相反
column : 垂直
column-reverse : 垂直，但順序相反
justify-content: 主軸對齊flex-start : 對齊靠左
center : 對齊置中
flex-end : 對齊置左
space-between : 平均分散
space-around
space-evenly
flex-wrap: 換行屬性nowrap
wrap
align-item: 交錯軸對齊(垂直置中)flex-start
center
flex-end
stretch
baseline
參考
Flex 補充資源
CSS 變形效果
範例 : CSS15.htm
對照組
transform:屬性值translate(x位移量,y位移量)移動translateX(x位移量)translateY(y位移量)x位移量(px) 水平位置
y位移量(px) 垂直位置
scale(x位移量,y位移量)縮放scaleX(x位移量)scaleY(y位移量)
rotate(角度)旋轉角度，以deg為單位
skew(x位移量,y位移量)傾斜skewX(x位移量)skewY(y位移量)
CSS 2D轉場效果
範例 : CSS17.htm
transition-duration:秒數轉場時間
transition-property:css屬性指定轉場屬性transition-timing-function:屬性值轉場模式linear 線性轉換，保持相同的速度轉場
ease 先慢再快再慢，預設值
ease-in 先慢再快
ease-out 先快再慢
ease-in-out 先慢再快再慢，速度變化較ease平均，相對平穩
transition-delay:秒數轉場延遲
transition:轉場時間 轉場屬性 轉場模式 轉場延遲
CSS 動畫效果
@keyframes動畫關鍵影格@keyframes arrow-animaion01 { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }@keyframes arrow-animaion02 { 0%{transform:rotate(0deg);} 50%{transform:rotate(360deg);} 100%{transform:rotate(0deg);} }百分比
from…to
animation-name:關鍵影格名稱動畫名稱設定animation-duration:秒數動畫持續時間animation-time-function:屬性值動畫轉換模式和"轉場模式"一樣
animation-iteration-count:重複次數重複次數設定數字，代表動畫重複的次數，如
animation-iteration-count:2代表重複2次infinite，無限次數播放，永遠不會停
animation-direction:播放方向播放方向設定normal 代表從動畫開頭到結束，預設值
reverse 代表從動畫結束倒帶回開頭，和normal相反效果
alternate 從動畫開頭到結束，再從動畫結束倒帶回開頭。
注意，開頭到結束算第1次播放，結束倒帶回開頭算第2次播放，所以設定播放次數必須大於1次，才能正常顯示效果alternate-reverse 動畫結束倒帶回開頭，再從動畫開頭到結束，與alternate相反效果
animation-delay:秒數播放延遲設定animation-play-state:播放狀態播放狀態設定paused 暫停播放
running 開始播放
animation:影格名稱 動畫時間 轉換效果 重複次數 播放次數 延遲時間 播放狀態
RWD 響應式網站
格式
@media 裝置 and (裝置屬性: 值)
例子：@media screen and (min-width: 900px)
@media 媒體不同裝置all 預設值，全部
screen PC、手機瀏覽器都是
print 印表機
min-width求最大寬度max-width求最小寬度min-height求最大高度max-height求最小高度min-device-width求最大螢幕寬度max-device-width求最小螢幕寬度min-device-height求最大螢幕高度max-device-height求最小螢幕高度<meta name="viewport" content="width=device-width, initial-scale=1.0">
響應式網站常用，放在<head>中
CSS 進階補充
文字填滿圖片
<!DOCTYPE html><html><head>
<meta charset="utf-8"/>
<title></title>
<style>
h1
{
width:100%;
text-align:center;
font-size:200px;
font-family:Arial Black;
background-image: url(圖片/NewYork.jpg);
background-position: center 20%; -webkit-background-clip:text; /*圖片裁切:以文字為標準*/
-webkit-text-fill-color:transparent; /*文字顏色改為透明*/
} </style></head><body>
<h1>NEW YORK</h1></body></html>NEW YORK
NEW YORK
font-variant:字體轉換特殊字體Small Caps
normal 預設值
small-caps 以大寫小字顯示小寫
font-size-adjust:長寬比自動調整文字大小百分比
text-emphasis:樣式 填滿 顏色強調標記text-emphasis-position:顯示位置強調標記的顯示位置紐約是美國第一大城
紐約是美國第一大城
樣式，dot、circle、double-circle、triangle等等
填滿，filled、open
顏色
顯示位置，如over、under
writing-mode:直書或橫書指定直書或橫書horizontal-tb 橫書，預設值
vertical-rl 直書，欄從右到左排列
vertical-lr 直書，欄從左到右排列
z-index:屬性值設定圖層順序auto 和上層元素相同，預設值
數字 數字大的會擋住數字小的元素，如1>(-1)，1就會擋住(-1)
cursor:游標形狀設定游標形狀auto 預設值
all-scroll
grab
none
not-allowed
pointer
progress
wait
CSS 導航欄
垂直導航欄
範例 : CSSad01.htm
水平導航欄
範例 : CSSad02.htm
CSS 下拉式功能表
文字
範例 : CSSad03.htm
按鈕
範例 : CSSad04.htm
圖片
範例 : CSSad05.htm
CSS 導航欄+下拉式功能表
範例 : CSSad06.htm
CSS 3D轉場效果
rotateX()以X軸為軸心做旋轉rotateY()以Y軸為軸心做旋轉rotateZ()以Z軸為軸心做旋轉
