# CSS 標籤整理
###### tags: `網頁` `CSS`
[]()
### 基本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 基本語法
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
- 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)吧
Sign in with Wallet
Connect another wallet