CSS 標籤整理

# CSS 標籤整理 ###### tags: `網頁` `CSS` [![](https://img.shields.io/badge/dynamic/json?color=orange&label=總觀看人數&query=%24.viewcount&url=https://hackmd.io/FlcMQiyVQO2F5WgAH2bKUQ%2Finfo)]() ### 基本HTML範例 ```htmlmixed= <!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 基本語法 ![](https://i.imgur.com/fILgwjL.gif) Selector(選擇器) - 通常是元素、類別或ID Declaration(宣告) - 由Property(屬性)和Value(值)所組成，宣告間以分號區隔，最外圍用大括號括住。 ### CSS 套用方法 1. 行內載入寫在元素標籤後面，原始的寫法，較不易更改和維護 ```htmlmixed= <p style="color:red; font-size:20px;"> ``` 2. 內部載入格式放在`<head>`的`<style>`中，設定相對應選擇器的格式，可同時做新增、修改 ```htmlmixed= <head> <style> p { width: 200px; height: 40px; background: #b6ff00; } </style> </head> ``` 3. 外部載入將CSS格式獨立寫成*.css檔，從HTML內部載入外部的檔案即可，寫法是在`<head>`使用`<link>`，或是在`<style>`中使用@import載入外部檔案 ```htmlmixed= <head> <link href="basis.css" rel="stylesheet"/> </head> ``` ```htmlmixed= <head> <style type=text/css> @import url(basis.css); </style> </head> ``` ### CSS 各類選擇器 1. 類別選擇器可多重繼承 ```htmlmixed= <style> .name { color: red; } </style> <body> <p class="name"></p> </body> ``` 2. ID選擇器只能單一繼承 ```htmlmixed= <style> #id01 { color: red; } </style> <body> <p id="id01"></p> </body> ``` 3. 標籤選擇器可指定標籤名稱，所有相同標籤名稱都會套用此格式 ```htmlmixed= <style> p { color: red; } </style> <body> <h2></h2>  <p></p>  </body> ``` 4. 群組選擇器可將多個指定的選擇器套用相同的格式 ```htmlmixed= <style> h2,p { color: red; } </style> <body> <h2></h2>  <p></p>  </body> ``` 5. 屬性選擇器可指定屬性套用相同的格式，有多種寫法 1. 標籤[屬性] 選擇標籤元素指定的屬性 2. 標籤[屬性 = "值"] 選擇標籤元素指定的屬性和值(需一模一樣) 3. 標籤[屬性 ~= "值"] 選擇標籤元素指定的屬性包含值的設定，設定包含值使用空格隔開單字，只要一個單字符合，即套用相同格式 4. 標籤[屬性 |= "值"] 選擇標籤元素的屬性值是開頭文字加上-符號 5. 標籤[屬性 ^= "值"] 選擇標籤元素的指定屬性，其值符合開頭文字 6. 標籤[屬性 \$= "值"] 選擇標籤元素的指定屬性，其值符合結尾文字 7. 標籤[屬性 \*= "值"] 選擇標籤元素的指定屬性，其值符合任何一處文字 6. 後代選擇器指定父標籤下的所有子標籤套用CSS格式 ```htmlmixed= 父名稱子名稱 { 屬性1: 值1; 屬性2: 值2; } ``` 7. 子選擇器和後代選擇器差不多，只差在層級須完全相同 ```htmlmixed= 父名稱>子名稱 { 屬性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` 選擇器緊臨前方位置的狀態 ```htmlmixed= h1::before { content: url(image.gif); } ``` - `選擇器::after` 選擇器緊臨後方位置的狀態 ```htmlmixed= 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)` 放射漸層 - 形狀，如circle、ellipse - 距離，度量單位，代表從中心點向外的半徑 - 指定位置，如 at + top、bottom、left、right - 色彩停止點，色彩後空一格加上百分比或度量單位 <h1 style="background: radial-gradient(circle,black,silver); color:white;"> 圓黑外漸</h1> <h1 style="background: radial-gradient(20px,black, silver); color:white"> 圓黑20像素</h1> <h1 style="background:radial-gradient(at top,black,silver 50%); color:white"> 圓心在上</h1> - `background:linear-gradient(方向,色彩停止點1,色彩停止點2,...,色彩停止點n)` 線性漸層 - 方向，如0deg、90deg - 指定位置，如 to + top、bottom、left、right <h1 style="background:linear-gradient(to left,silver 50%,black); color:white;"> 標題常用</h1> <h1 style="background:linear-gradient(0deg,silver,black); color:white;"> 由下而上</h1> <h1 style="background:linear-gradient(90deg,silver,black); color:white;"> 由左而右</h1> <h1 style="background:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); color:white;"> 彩虹</h1> <div style="background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); width:500px; height:500px;"></div> - `background:repeating-radial-gradient(屬性值)` 重複漸層 `background:repeating-linear-gradient(屬性值)` <h1 style="background:repeating-linear-gradient(to right,green 50%,lightgreen,darkgreen); color:white;"> 重複</h1> <h1 style="background:repeating-radial-gradient(blue 30px,lightblue,blue); color:white;"> 圓型重複</h1> <h1 style="background:repeating-linear-gradient(pink,orange 20px,red 40px); color:white; height:100px"> 上下間隔</h1> ### CSS 文字 - `font-size:值` 改變字體大小 - px 像素點 - cm 公分 - mm 公釐 - em 上層元素的相對大小 - xx-small、x-small、small、medium、large、x-large、xx-large 預設大小 - 200% 相對大小 - `font-family:字型1,字型2,...` 改變文字字型靠左優先，無法顯示時則顯示新細明體 - 標楷體 - 微軟正黑體 - 也可以從網路上抓取字型，如[Google字型](https://fonts.google.com/) - `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:粗細顏色` 文字外框線 - 粗細，thin、medium、thick - 顏色 <p style="-webkit-text-stroke:thin black; color:white; font-size:100px;">NEW YORK</p> - `text-align:值` 文字對齊方式 - center 置中 - left 靠左 - right 靠右 - `vertical-align:值` 文字垂直對齊方式 - top 對齊顯示區域上緣 - text-top 對其前標籤上緣 - bottom 對齊顯示區域下緣 - text-bottom 對其前標籤下緣 - middle 對其前標籤中緣 ### CSS 清單項目 - `list-style-type:值` 項目清單符號 <ul> <li style="list-style-type:disc;">disc 實心圓點</li> <li style="list-style-type:circle;">circle 空心圓點</li> <li style="list-style-type:square;">square 實心方塊</li> <li style="list-style-type:decimal;">decimal 阿拉伯數字</li> <li style="list-style-type:decimal-leading-zero;">decimal-leading-zero 阿拉伯數字(兩位)</li> <li style="list-style-type:lower-roman;">lower-roman 小寫羅馬字母</li> <li style="list-style-type:upper-roman;">upper-roman 大寫羅馬字母</li> <li style="list-style-type:lower-alpha;">lower-alpha 小寫英文字母</li> <li style="list-style-type:lower-greek;">lower-greek 小寫希臘字母</li> <li style="list-style-type:cjk-ideographic;">cjk-ideographic 中文數字</li> </ul> - `list-style-image:url(路徑)` 項目清單圖片 - `list-style-position:值` 清單位置 - outside 靠外 - inside 靠內 ### CSS 背景 - `background-color:顏色值` 設定背景顏色 <p style="background-color:lightblue">設定背景顏色</p> - `background-image:url(圖片檔案路徑)` 設定背景圖片 - `background-repeat:屬性值` 背景圖片重複設定 - no-repeat 不重複顯示 - repeat-x X軸方向重複 - repeat-y X軸方向重複 - repeat X軸和Y軸方向重複 - space 重複且圖片完整與自動調節間距 - round 重複且圖片完整與自動調節間距(和space差不多) - `background-position:X座標 Y座標` 設定背景圖片位置 - X座標 - left 靠左 - center 置中 - right 靠右 - Y座標` - top 置頂 - center 置中 - bottom 置底 - `background-origin:原點位置` 設定原點位置 - padding-box 以內距的左上角為原點，預設值 - border-box 以框線的左上角為原點 - content+box 以內容的左上角為原點 - `background-clip:裁切位置` 設定背景裁切方式 - border-box 將框線以外的部分去除，預設值 - padding-box 將內距以外的部分去除 - content-box 將內容以外的部分去除 - `background-attachment:屬性值` 設定背景圖片捲動跟隨 - fixed 隨之跟隨 - scroll 停留原地 <h4 style="color:blue;">補充 - 浮動廣告</h4> 讓廣告可以跟著畫面移動，點擊即可進入連結 ```htmlmixed=1 <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 ![](https://i.imgur.com/ED5MMEU.png) - margin 外距 - `margin-top:屬性值` 設定上方外距 - `margin-bottom:屬性值` 設定下方外距 - `margin-left:屬性值` 設定左方外距 - `margin-right:屬性值` 設定右方外距 - `margin:上右下左` 設定全方向外距(簡便寫法) - 度量單位 - 百分比 - auto - 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 主軸與交錯軸觀念([測試工具](https://codepen.io/peiqun/pen/WYzzYX)) - `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 ##### 參考 [體驗營第二週講義](https://hackmd.io/@YmcMgo-NSKOqgTGAjl_5tg/ry5tmBcoI/%2FBYKpMG2cQv2svK-wH20vCQ) ##### Flex 補充資源 * [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/) * [卡斯伯完整 Flex 影音教學(40分鐘)](https://www.youtube.com/watch?v=lmBM7_OTDBQ) ### CSS 變形效果 > 範例 : CSS15.htm 對照組 <img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px;"> - `transform:屬性值` - `translate(x位移量,y位移量)` 移動 `translateX(x位移量)` `translateY(y位移量)` - x位移量(px) 水平位置 - y位移量(px) 垂直位置 [](https://i.imgur.com/rlnPfUZ.jpg) <img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px; transform:translate(100px,10px);"> <p></p> - `scale(x位移量,y位移量)` 縮放 `scaleX(x位移量)` `scaleY(y位移量)` <img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px; transform:scale(1.2,0.8);"> - `rotate(角度)` 旋轉 - 角度，以deg為單位 <img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px; transform:rotate(30deg);"> <p><br></p> - `skew(x位移量,y位移量)` 傾斜 `skewX(x位移量)` `skewY(y位移量)` <img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px; transform:skewX(15deg);"> <p></p> <img src="https://i.imgur.com/rlnPfUZ.jpg" style="width:100px; height:100px; transform:skewY(15deg);"> ### CSS 2D轉場效果 > 範例 : CSS17.htm - `transition-duration:秒數` 轉場時間 <head> <meta charset="utf-8"/> <title></title> <style> #arrow { width:100px; height:100px; transform:scale(1); opacity:1; transition:1.5s transform ease 1s; } #arrow:hover { transform:scale(1.5); opacity:0.5; } #arrow02 { width:100px; height:100px; transform:rotate(0deg); transition:5s linear; } #arrow02:hover { transform:rotate(360deg); } #arrow03 { width:100px; height:100px; transform:rotate(0deg); transition:5s ease; } #arrow03:hover { transform:rotate(360deg); } #arrow04 { width:100px; height:100px; transform:rotate(0deg); transition:5s ease-in; } #arrow04:hover { transform:rotate(360deg); } #arrow05 { width:100px; height:100px; transform:rotate(0deg); transition:5s ease-out; } #arrow05:hover { transform:rotate(360deg); } #arrow06 { width:100px; height:100px; transform:rotate(0deg); transition:5s ease-in-out; } #arrow06:hover { transform:rotate(360deg); } #arrow07 { width:100px; height:100px; transform:rotate(0deg); transition:5s ease-in-out 1s; } #arrow07:hover { transform:rotate(360deg); } @keyframes arrow-animaion { from{transform:rotate(0deg);} to{transform:rotate(360deg);} } #arrow08 { width:100px; height:100px; animation: arrow-animaion 5s linear infinite normal; } #arrow09 { width:100px; height:100px; animation: arrow-animaion 5s linear infinite reverse; } #arrow10 { width:100px; height:100px; animation: arrow-animaion 5s linear infinite alternate; } #arrow11 { width:100px; height:100px; animation: arrow-animaion 5s linear infinite alternate-reverse; } #arrow12 { width:100px; height:100px; animation: arrow-animaion 5s linear infinite normal; } #arrow12:hover { animation-play-state:paused; } #arrow13 { width:100px; height:100px; animation: arrow-animaion 5s linear infinite normal; animation-play-state:paused; } #arrow13:hover { animation-play-state:running; } </style> </head> <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow"> - `transition-property:css屬性` 指定轉場屬性 - `transition-timing-function:屬性值` 轉場模式 - linear 線性轉換，保持相同的速度轉場 - ease 先慢再快再慢，預設值 - ease-in 先慢再快 - ease-out 先快再慢 - ease-in-out 先慢再快再慢，速度變化較ease平均，相對平穩 <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow02" title="linear"> <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow03" title="ease"> <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow04" title="ease-in"> <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow05" title="ease-out"> <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow06" title="ease-in-out"> <p><br/></p> - `transition-delay:秒數` 轉場延遲 <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow07"> <p><br/></p> - `transition:轉場時間轉場屬性轉場模式轉場延遲` ### CSS 動畫效果 - `@keyframes` 動畫關鍵影格 - from...to ```html= @keyframes arrow-animaion01 { from{transform:rotate(0deg);} to{transform:rotate(360deg);} } ``` - 百分比 ```html= @keyframes arrow-animaion02 { 0%{transform:rotate(0deg);} 50%{transform:rotate(360deg);} 100%{transform:rotate(0deg);} } ``` - `animation-name:關鍵影格名稱` 動畫名稱設定 - `animation-duration:秒數` 動畫持續時間 - `animation-time-function:屬性值` 動畫轉換模式 - 和"轉場模式"一樣 - `animation-iteration-count:重複次數` 重複次數設定 - 數字，代表動畫重複的次數，如`animation-iteration-count:2`代表重複2次 - infinite，無限次數播放，永遠不會停 - `animation-direction:播放方向` 播放方向設定 - normal 代表從動畫開頭到結束，預設值 - reverse 代表從動畫結束倒帶回開頭，和normal相反效果 - alternate 從動畫開頭到結束，再從動畫結束倒帶回開頭。:warning:注意，開頭到結束算第1次播放，結束倒帶回開頭算第2次播放，所以設定播放次數必須大於1次，才能正常顯示效果 - alternate-reverse 動畫結束倒帶回開頭，再從動畫開頭到結束，與alternate相反效果 <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow08" title="normal"> <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow09" title="reverse"> <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow10" title="alternate"> <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow11" title="alternate-reverse"> <p></p> - `animation-delay:秒數` 播放延遲設定 - `animation-play-state:播放狀態` 播放狀態設定 - paused 暫停播放 - running 開始播放 <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow12" title="碰到不轉"> <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow13" title="碰到才轉"> <p></p> - `animation:影格名稱動畫時間轉換效果重複次數播放次數延遲時間播放狀態` ### :memo: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 進階補充 - 文字填滿圖片 ```htmlmixed= <!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> ``` [](https://i.imgur.com/9w8O0O8.jpg) <style> #p01 { width:100%; text-align:center; font-size:100px; font-family:Arial Black; background-image: url(https://i.imgur.com/9w8O0O8.jpg); background-position: center 20%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } #p02 { width:100%; text-align:center; font-size:100px; font-family:Arial Black; background-image: url(https://i.imgur.com/9w8O0O8.jpg); background-position: center 20%; color:white; } </style> <p id="p01">NEW YORK</p> <p id="p02">NEW YORK</p> - `font-variant:字體` 轉換特殊字體 - normal 預設值 - small-caps 以大寫小字顯示小寫 <p style="font-variant:small-caps;">Small Caps</p> - `font-size-adjust:長寬比` 自動調整文字大小 - 百分比 - `text-emphasis:樣式填滿顏色` 強調標記 `text-emphasis-position:顯示位置` 強調標記的顯示位置 - 樣式，dot、circle、double-circle、triangle等等 - 填滿，filled、open - 顏色 - 顯示位置，如over、under <p><span style="-webkit-text-emphasis:circle filled red;">紐約</span>是美國第一大城</p> <p><span style="-webkit-text-emphasis:circle filled red; -webkit-text-emphasis-position:under">紐約</span>是美國第一大城</p> - `writing-mode:直書或橫書` 指定直書或橫書 - horizontal-tb 橫書，預設值 - vertical-rl 直書，欄從右到左排列 - vertical-lr 直書，欄從左到右排列 - `z-index:屬性值` 設定圖層順序 - auto 和上層元素相同，預設值 - 數字數字大的會擋住數字小的元素，如1>(-1)，1就會擋住(-1) - [詳細](https://www.w3schools.com/cssref/pr_pos_z-index.asp) - `cursor:游標形狀` 設定游標形狀 - <span style="cursor: auto;">auto 預設值</span> - <span style="cursor: all-scroll;">all-scroll</span> - <span style="cursor: cursor: -webkit-grab; cursor: grab;">grab</span> - <span style="cursor: none;">none</span> - <span style="cursor: not-allowed;">not-allowed</span> - <span style="cursor: pointer;">pointer</span> - <span style="cursor: progress;">progress</span> - <span style="cursor: wait;">wait</span> - [更多](https://www.w3schools.com/cssref/pr_class_cursor.asp) - CSS 導航欄垂直導航欄 > 範例 : CSSad01.htm 水平導航欄 > 範例 : CSSad02.htm [詳細](https://www.w3schools.com/css/css_navbar.asp) - CSS 下拉式功能表文字 > 範例 : CSSad03.htm > 按鈕 > 範例 : CSSad04.htm > 圖片 > 範例 : CSSad05.htm > [詳細](https://www.w3schools.com/css/css_dropdowns.asp) - CSS 導航欄+下拉式功能表 > 範例 : CSSad06.htm > - CSS 3D轉場效果 - `rotateX()` 以X軸為軸心做旋轉 - `rotateY()` 以Y軸為軸心做旋轉 - `rotateZ()` 以Z軸為軸心做旋轉 <style> #arrow14 { width:100px; height:100px; transform:rotateX(0deg); transition:2s; } #arrow14:hover { transform:rotateX(360deg); } </style> <img src="https://i.imgur.com/rlnPfUZ.jpg" id="arrow14"> --- #### CSS學完囉，接下來繼續學[HTML](/wHIiu44rSWKkAjss2PvleA)和[JavaScript](https://hackmd.io/@AndyChiang/JSnote)吧

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.