一、背景：background
基本裝飾 background
範例
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2</div>
</body>
</html>
背景設定成顏色
針對 id 給背景顏色，並不是所有顏色都可以用文字打。
#box1 {
background: red;
}
#box2 {
background: green;
}
也可以透過色碼、rgb，表示顏色
#box1 {
background: rgb(244, 4, 10);
}
#box2 {
background: #ff00f0;
}
除了上述 rgb 外，還有 rgba ， a 表示透明度(介於 0~1)，1 = 一般顏色，0 = 全部透明。
#box1 {
background: rgb(244, 4, 10, 0.5);
}
背景設定成圖片
url() ，括弧內接圖片的位址。也可以用字串將括弧內參數給括起來。
#box1 {
background: url("./CIMG0376.jpg");
}
因為 div 不夠高，無法看到完整圖片，所以我們可以這麼做
#box1 {
background: url("./CIMG0376.jpg");
height:500px;
width:100000px;
}
當圖片不夠寬或不夠高時，它會重複排列，如果不要重複排列，我們可以這麼做
#box1 {
background: url("./CIMG0376.jpg") no-repeat;
height:1000px;
width:100000px;
}
可以自己調整圖片要向哪對齊
center 表示置中、left、right、top、bottom
最常見的為 center center，兩個都對齊中間
#box1 {
background: url("./CIMG0376.jpg") no-repeat bottom left;
height:4000px;
width:4000px;
}
我們可以藉由 px 調整圖片大小
#box1 {
background: url("./CIMG0376.jpg") no-repeat center center;
height:1000px;
background-size: 400px 400px
}
或是藉由百分比調整圖片大小
#box1 {
background: url("./CIMG0376.jpg") no-repeat center center;
height:3000px;
background-size: 100% 100%
}
以上都會幫圖片做伸縮。如果不想做伸縮，我們可以這麼做 :
contain它會幫你的圖片縮到可以放進裡面。要馬高貼合，要馬寬貼合，以圖片的尺寸決定，(不壓縮按照比例放在裡面)。
#box1 {
background: url("./CIMG0376.jpg") no-repeat center center;
background-size: contain;
height:4000px;
}
cover永遠會填滿整個背景，圖片比例會一起縮放。
rmk : 右鍵 => 檢查 => style => 將對應箭頭點開；另外如果是按顏色，可以將調色盤點下去。
二、把自己框起來：border 與 border-radius
邊框有兩種，一種是 border，一種是 outline。實際開發很少用 outline。
範例一、border 、 outline
第一個參數 : 寬度；第二個參數 : 類型；第三個參數 : 顏色
#box1 {
background: red;
border: 20px solid green;
}
內容區會被邊框擠掉，因為邊框是往裡面長的。它的高度 = box1高度 + border 兩個的高度。現在盒子的高度設為 30px，兩邊 border 的高度設為 20 px，所以總高度 = 70px。概念參照盒模型(如何調、原理是甚麼)。
#box1 {
background: red;
border: 20px solid green;
height: 30px
}
一樣可從 devtool 調東西。最常用的為 solid。
border-radius 是設定角的弧度。
outline 像是元素的外框，往外面去長。
差異 outline => 不影響元素的寬度、高度；border => 會影響元素的寬度、高度。
範例二、border 的應用
#box1 {
background: red;
width:100px;
height:100px;
border-radius: 4px;
}
如果 border-radius: 50px => 剛好是圓形，也可以寫 50%。
#box1 {
background: red;
width:100px;
height:100px;
border-radius: 50%;
}
border 也可以分開設。邊框的交界因為是不同的顏色，會發現像是梯形。
#box1 {
background: red;
width:100px;
height:100px;
border-top:90px solid green;
border-bottom:90px solid yellow;
border-left:90px solid pink;
border-right:90px solid blue;
}
把寬、高設成 0 ，就變成三角形。所以可以用 css 來畫三角形。
#box1 {
background: transparent;
width:0px;
height:0px;
border-top:90px solid transparent;
border-bottom:90px solid yellow;
border-left:90px solid transparent;
border-right:90px solid transparent;
}
三角形的大小怎麼設定 ? 依據不同邊的 px 決定。
三、離我遠一點，或我離你遠一點：margin 與 padding
邊距 margin 與 padding
首先，準備兩個相同的 box
#box1 {
background: orange;
width:100px;
height:100px;
}
#box2 {
background: green;
width:100px;
height:100px;
}
增加 padding 30px => 1.變大 2.內容離自己的邊距 30px
#box1 {
background: orange;
width:100px;
height:100px;
padding: 30px;
}
可以設定不同方向的 padding。 padding-right、padding-left；padding-top、padding-bottom。
簡寫表示 : 只寫一個參數表上下左右；寫兩個參數，第一個參數=上下，第二個參數=左右。
margin 表示離外面的距離，離其他東西有多遠。它不會影響內部元素的寬度、高度。
#box2 {
background: green;
width:100px;
height:100px;
margin:20px;
}
很多瀏覽器都會預留 margin: 8px 。為了將 body 的 margin 清掉，很多 css 都會做這件事。清完後就會貼合邊邊。
body {
margin:0;
}
概要整理 : padding=內邊距，margin = 外邊距
四、文字相關 part1：color、font-family、font-weight 與 line-height
color
文字的 color，不像 background 要寫成 background-color，直接寫 color 就可以了。一樣可以用 rgba()、rgb()、十六進位做顏色調整。
#box1 {
background: orange;
height:100px;
color:rgba(30,4,222,0.4);
}
font 系列
font-size 為字的大小
font-weight 為字的粗細。normal = 一般大小、bold = 粗體，從 100~900 字的重量不同，粗細亦不同，通常調多少由設計師決定。
font-family 決定字體。若電腦無支援，瀏覽器會選擇預設字體。
#box1 {
background: orange;
height:100px;
font-size:30px;
font-weight:bold;
font-family: "標楷體"
}
距離
letter-spacing 字距、line-height 行高
在處理行高時，通常會用 em ，em 對應到的可以先想成字體大小。基本上 line-height = font-size * em ，所以下面的 line-height 也可以寫成 line-height :18px。
line-height:1.5em，表示行高比例為 1.5em，換句話說，不管怎麼調整 font-size 它的行高比例都不變。
#box1 {
background: orange;
height:100px;
font-size:12px;
font-weight:bold;
font-family: 標楷體;
letter-spacing:1px;
line-height:1.5em;
}
text-align 表靠哪對齊，僅限於水平對齊。
#box1 {
background: orange;
height:100px;
font-size:12px;
font-weight:bold;
font-family: 標楷體;
letter-spacing:1px;
line-height:1.5em;
text-align: center;
}
css 如何置中對齊 ?
法一、line-height
承上文，如果高度 = 100px，我就把 line-height 調成 100px，它的行高就會和盒子一樣。但如果有多行字，每一行中間就會隔著 100px，會破功。
#box1 {
background: orange;
height:100px;
font-size:12px;
font-weight:bold;
font-family: 標楷體;
letter-spacing:1px;
line-height:100px;
text-align: center;
}
法二、padding
不設高度、不設 line-height，用 padding 將其撐開，上下 y(px) 左右 x(px)，缺點是較難制定它的高度，需要自己算，優點 : 多行仍可置中。
#box1 {
background: orange;
font-size:12px;
font-weight:bold;
font-family: 標楷體;
letter-spacing:1px;
padding:30px 0px;
text-align: center;
}
五、文字相關 part2：word-break 與 white-space
有些語言沒有空格或句子特別長，要怎麼調整 ? 文字很長、有空白的時候行為該如何顯示 ?
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div id="box1">box1sssssssssssssssssssssssssddddddddddddddddddgggggggggggggggggfffffffffffffddddddddddsssssssseeeeeeeeeeeeeeeee
</div>
<div id="box2">box2</div>
</body>
</html>
如果沒有設定寬度，它會占滿整個空間，沒有問題~
如果有設定寬度，文字會超出設定的寬度。解決方法 : 調整 css屬性，word-break。
break-all，單字會從中間被切開(一個單字被切成兩行)；break-word，會按照字來切。
想讓文字放在同一行 : 調整 css屬性 white space => nowrap => 字永遠都換在同一行
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div id="box1">BRYCE:All I've wanted is for Juli Baker to leave me alone. => But there was no going back. I liked her.
</div>
<div id="box2">box2</div>
</body>
</html>
六、你滿了，那我就漫出來了：overflow 與 text-overflow
超出寬度，該如何處理 ?
- overflow: hidden => 超出的部份會被藏起來
- overflow: scroll => 全部都變成滾動區
- overflow: auto => 超出的部份會變成滾動區
#box1 { background: orange; width: 200px; font-size:12px; font-weight:bold; text-align: center; white-space:nowrap; overflow: hidden; } - text-overflow: ellipsis=> 超出的部份會用 ... 蓋掉
前提 : overflow: hidden 且 white-space:nowrap(不然不能變成一整行)#box1 { background: orange; width: 200px; font-size:12px; font-weight:bold; text-align: center; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; }差異點: over-flow 應用範圍較廣，text-overflow 是針對文字。
七、加了我質感瞬間升級：transition (漸變)
css 屬性 transition 用途為定義漸變效果。
transition: 第一個參數 第二個參數 第三個參數;
- 第一個參數 : 表對誰作用。選 all 表對所有屬性作用。
- 第二個參數 : 表對其描述。1s 表漸變時間。
- 第三個參數 : 漸變時間的動畫。
#box1 {
background: orange;
width: 200px;
height:100px;
transition:all 1s;
}
#box1:hover{
background: green;
color:white;
}
做的精美一點。
cursor pointer 表示移動鼠標上去，可以點。
不會將 transition:all 1s 放到 #box1:hover，因為這表示移上去有，放開就沒有。
#box1 {
width: 200px;
height:100px;
border-radius:20px;
text-align:center;
line-height: 100px;
transition:all 1s;
color:black;
border:5px solid orange;
}
#box1:hover{
background: orange;
color:white;
cursor:pointer;
}
當然，也可以用漸變，變寬度、高度
#box1:hover{
background: orange;
color:white;
cursor:pointer;
width:300px;
height: 500px
}
要注意 : 可能會有效能問題。例如 : 動寬跟高，旁邊的元素會需要重些排列。
八、Die Verwandlung：transform 的妙用
參照：CSS 基礎 Part4 定位 position
用途：置中、3D 特效、搭配 transition
<!DOCTYPE html>
<html>
<head>
<meta charset="urf-8">
<title>i am title</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<div class="box" id=box1>box1</div>
</body>
</html>
transform 後面接的類似在程式裡面呼叫一個 function。
scale(x) 會依照圖形的中心點，放大 x 倍。
#box1 {
width:200px;
height:100px;
border-radius:30px;
text-align:center;
line-height:100px;
color:white;
background:orange;
transition: all 0.3s;
margin:100px;
}
#box1:hover {
transform:scale(2);
}
將 dev-tool 打開，element => hover，裡面會告訴你有那些特效。
- rotate(360deg) 會旋轉 360 度
- translateX(50px) 往右移 50px
- translate(50px, 20px) 往右移 50px 往下移 20px
使用 transform 移位，不會影響其它元素，且它是按照原本位置偏移。所以在動畫中移動位置，通常是使用 transform。
另外，也可以使用 transform 將圖形置中。
現在圖形佔畫面畫面的高度，會是 50%。 left 一樣也可以設成 50%，所以現在這個圖形左上角的點就會是螢幕正中心。但元素是以左上角的點為起點畫出的圖形，故元素本身並不在正中間。
可以利用 transform:translate(a%, b%) 這個 % 是按照元素的寬度、高度。所以 x軸移動圖形自己的 a% 過去，同理 y軸一樣移動圖形自己的 b% 過去。
透過這樣的操作，圖形就移到正中間，達成既垂直又水平置中的效果。
#box1 {
width:200px;
height:100px;
border-radius:30px;
text-align:center;
line-height:100px;
color:white;
background:orange;
top:50%;
left:50%;
position:absolute;
transform:translate(-50%, -50%);
}
也可以將 position:fixed
