# 3-1 、 CSS 基礎 2 : 基本裝飾 ###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26 --- ## 基本裝飾: Background 存成 .html 檔案格式: ``` <!DOCTYPE HTML> <html> 　<head> <meta charset="utf-8" /> 　　<title>網頁製作教學</title> 　　<link rel="stylesheet" href="./style.css" /> 　</head> 　<body> 　　body 間: 為主要語意所在，網頁主要顯示的部分。 <div id="Box1">Box1</div> <div id="Box2">Box2</div> 　</body> </html> ``` --- 另外開個類似模組的 style.css 檔案格式: ``` #Box1 { background: url("./b.gif") no-repeat center center; background-size: 250px 2500px; width: 250px; height: 2500px; } #Box2 { background: green; width: 250px; height: 2500px; } ``` - 除了用 ``#Box1 {background: orange;}`` 也可以用色碼，如: #ffa500 。 - 或是用 rgb(255, 165, 0) 值。 - 透明度 rgba(255, 165, 0, 0.5) ， 透明度 0 ~1 ， 設 0.5 會變淡橘色。 - `background: url("./b.gif");` 同資料夾底下放圖片 ， 圖檔格式就會顯示。 - 如果 height 和 width 的 px 值太高，會重複用一張圖串起來，但這個寬和高設定不會強制拉伸圖片，只會局部或依設定顯示圖片。 - 所以可以設定 `background: url("./b.gif") no-repeat;` 使圖片不再重複。 - 可以調整圖片顯示的 X Y 軸來對齊: ``background: url("./b.gif") no-repeat center center;`` ， 如 top 、 center 、 bottom...等。 - 也可以強制拉伸調整圖片寬和高 `background-size: 250px 2500px;` ; `background-size: 50% 50%;` 一半一半，設成 100% 100% 就會自動讓 div 填滿。 - `background-size: contant;` 會讓圖片按比例可以放進 div ， 如果沒有固定 width 和 height 就會隨著瀏覽器拉縮。 - `background-size: cover;` 會讓大圖片直接照比例拉縮，會填滿背景。 - 如果用 dev tool (Firefox) 看會 Elements 會發現 Styles 有很多屬性，且有按照順序。 ![](https://i.imgur.com/8Q6GziD.png) --- # 3-2 、 CSS 基礎 2 : 邊框 ###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26 --- ## 邊框: - border - outline ---- 延伸 3-1 的 .html 但修改 style.css 檔案格式: ``` #Box1 { background: orange; border: 20px solid orange; } #Box2 { background: green; width: 250px; height: 2500px; } ``` ## 1. border - ``border: 20px solid orange;`` 寬度、類型和顏色; 如果沒設定 height: 和 width: 的話，邊框會往內壓縮 Box1 ， 會把內容撐開。 - 這樣的 pixel 實際上是 寬 20px + 高 20px + 內容(假設) 30px 因此是 70px 。 ![](https://i.imgur.com/HSN7cnA.png) ![](https://i.imgur.com/e2zgz4T.png) - 如果用 dev tool(Chrome) 調整 border-style 像是 dashed 就會改變樣式，實線 soild 常用。 ## 2. outline - outline 會讓框線的外框再加框線，如: `outline: 5px solid gray;` ， outline 的功能比較少用。 ![](https://i.imgur.com/AqnzfoM.png) - outline 加不加都不會影響原本元素寬高和 pixel ， 但 border 會影響 Box 寬高和 pixel。 ## 3. border 可以拿來畫圖 - border-radius (如果沒 border 也是可以設)可以調整邊角的弧度，設定 px 或是 % 都行。 ``` #Box1 { background: url("./b.gif") no-repeat center center; width: 100px; height: 100px; border-top: 20px solid orange; border-bottom: 20px solid green; border-left: 20px solid pink; border-right: 20px solid red; outline: 5px solid gray; } ``` 會變成正方形邊框帶有各種顏色，各邊框像是梯形。 ![](https://i.imgur.com/UQw8sPp.png) 如果 width 和 height 調成 0 ， 剩下 background 、 border-top 、 border-bottom 、 border-left 、 border-right 就會變四個三角形交集。 ![](https://i.imgur.com/utrcFtI.png) 因此可以畫三角形，和調整其大小，很多圖形都能用 border 來畫。 ``` #Box1 { background: url("./b.gif") no-repeat center center; width: 0px; height: 0px; border-top: 100px solid orange; border-bottom: 100px solid transparent; border-left: 100px solid transparent; border-right: 100px solid transparent; outline: 5px solid gray; } ``` ![](https://i.imgur.com/B2aPNIW.png) --- # 3-3 、 CSS 基礎 2 : 離我比較近，所以看起來比較大 ###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26 --- ## 常用的邊距 - padding (內邊距) - margin(外邊距) --- 延續 3-1 的 .html 但修改 style.css 檔案格式: ``` #Box1 { background: orange; width: 100px; height: 100px; padding: 30px ; } #Box2 { background: green; width: 100px; height: 100px; margin: 20px; } ``` ## 1. padding (內邊距) - 會讓 ``width: 100px; height: 100px;`` 的 Box 元素內容距離本身的邊框 30px ， 被撐大了。 ![](https://i.imgur.com/YAanOnP.png) ![](https://i.imgur.com/F04Jvqb.png) - 跟 border 一樣 ， padding 也可以設定 top 、 bottom 、 left 、 right 。 - ``padding: 30px 30px; :`` 如果只寫兩個值，第一個值是上下，第二個值是左右。 - 三個值也可以: 上、下、但右和左是同個值，不好記。 --- ## 2. margin(外邊距) - 讓 Box 元素離外面東西的距離，但不會影響到寬高和 pixel 。 - 很多瀏覽器會幫你加: ``body {margin:0}`` ， 預留空間，debug 時清掉這個就正常了。 --- # 3-4 、 CSS 基礎 2 : 文字屬性(很多、超多，超級多) ###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26 --- ## Color --- 延續 3-1 的 .html 但修改 style.css 檔案格式: ``` #Box1 { background: orange; height: 100px; color: white } ``` - ``color: ;`` 會讓前景的顏色改變。 - ``color: rgba(255, 0, 0, 0.5)`` 會改變前景文字顏色和透明度。 --- ## 大小 - ``font-size: ;`` 可以改變前景字體大小。 - ``font-weight: ;`` 可以改變前景字體粗細，常用的例如 normal 、 bold...等。 - ``font-weight: ;`` 也可以用數字調整 pt ， 例如調整範圍從 100 到 900 pt 之間。 ## 字體 - ``font-family: ;`` 像是 "新細明體" ， "Arial" ， "Serif" 之類的，電腦有的字體格式才支援，否則瀏覽器會用預設。 ## 字體距離 - ``letter-spacing: ;`` 例如 1px ， 就會讓字體間的距離變大。 ## 字體行距 - ``line-height: ;`` 例如 12px 、 1.5em(1.5 倍率行高，具體為 line-height: 1.5em x font-size = 18px(line-height)) 。 ## 字體對齊 - ``text-align: ;`` 如 center 、 left 和 right ， 水平置中、水平靠左和靠右對齊。 ## 經典問題: 置中對齊 ``` #Box1 { background: orange; width: 200px; height: 100px; font-size: 12px; font-weight: bold; line-height: 100px; text-align: center; } ``` - 如果只有一行字，可以調整 height 和 line-height 相等。 - 但缺點是兩行字體就不能調整 height 和 line-height 相等，會跑出 Box 外。 __或是不要設定 height 和 line-height ， 然後用 padding 撐開:__ ``` #Box1 { background: orange; width: 200px; font-size: 12px; font-weight: bold; padding: 30px 0px; text-align: center; } ``` - 適用多行文字，但比較難指定高度，可能要計算高度。 # 3-5 、 CSS 基礎 2 : 文字屬性(很多、超多，超級多第二彈) ###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26 --- 存成 .html 檔案格式: ``` <!DOCTYPE HTML> <html> 　<head> <meta charset="utf-8" /> 　　<title> meme: 你的名字怎麼唸? </title> 　　<link rel="stylesheet" href="./style.css" /> 　</head> 　<body> 　　meme: 你的名字怎麼唸? <div id="Box1"> uvweweweweonyetenyevweuvwewenumosas </div> </body> </html> ``` ## 文字 CSS - 沒有空白的超長句子超出框怎辦? ## word-break 結合上面的 .html 檔案然後套用 CSS 屬性: ``` #Box1 { background: orange; width: 200px; font-size: 12px; font-weight: bold; text-align: center; } ``` - 如果有 ``width: 200px;`` 的設定，限制寬度，文字超長，拿掉 width 後就沒有問題。 ![](https://i.imgur.com/H5qqP6g.png) - 如果有 ``width: 200px;`` 的設定，且字體間有空白，且不拿掉寬度，可以用 word-break: - 如這行: `uvwewewewe onyetenyevweuv wewenumosas` 文字。 - ``word-break: break-all;`` 會將字體截斷，分成兩行。 ![](https://i.imgur.com/K2rW9AY.png) - ``word-break: break-word;`` 不會截斷字，而且有點小置中，分成兩行。 ![](https://i.imgur.com/EKWwALU.png) --- ## 如果文字有空白，但想把空白拿掉 ## white-space - ``white-space: nowrap;`` 會把所有字集中到同一行。 ![](https://i.imgur.com/vZzY3fz.png) --- # 3-6 、 CSS 基礎 2 : Eldwe Scroll ###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26 --- __元素或是字體超出寬度。__ --- ## overflow 以 3-5 的 .html 格式為基準，套用 style.css 格式: ``` #Box1 { background: orange; width: 200px; font-size: 12px; font-weight: bold; text-align: center; white-space: nowrap; overflow: hidden; } ``` - 會讓文字有被截斷的效果。 ![](https://i.imgur.com/GvrFX5V.png) - overflow: scroll; 垂直和水平可滾動~ ![](https://i.imgur.com/kUE1hDR.png) - overflow: auto; 依照預設自動產生可滾動捲軸~ ![](https://i.imgur.com/BqriOoa.png) ## text-overflow __針對文字使用，蠻常用。__ - ``text-overflow: ellipsis;`` 和 ``overflow: hidden;`` 以及 ``white-space: nowrap;`` 併用可以省略文字。 ![](https://i.imgur.com/7oJLRtD.png) --- 參考資料: [overflow](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/overflow) [text-overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) [CSS overflow 屬性用](https://www.wibibi.com/info.php?tid=157) --- # 3-7 、 CSS 基礎 2 : 質感瞬間昇華 ###### tags: `FE101` `HTML+CSS` `2020八月第四周` `進度筆記` `Lidemy心得` 08/26 --- ## transition 存成 .html 檔案格式: ``` <!DOCTYPE HTML> <html> 　<head> <meta charset="utf-8" /> 　　<title> Orange Box </title> 　　<link rel="stylesheet" href="./style.css" /> 　</head> 　<body> 　　Orange Box <div id="Box1">Box1</div> </body> </html> ``` 以上面 .html 格式為基準，套用 style.css 格式: `` #Box1 { width: 200px; height: 100px; border-radius: 30px; text-align: center; line-height: 100px; transition: all 1s ease-in; color: black; border: 2px solid orange; } #Box1:hover { background: orange; color: white; cursor: pointer; } `` - ``transition: all 0.3s`` ; 與 ``#Box1:hover`` 一起用，可以產生滑鼠移到樣式上有漸變的效果。 - transition 不放在 hover 那，不然 cursor 移開後就沒效了。 - all 表示所有屬性套用，秒數為 1s ， ease-in 是屬性漸變的效果，可以設計樣式。 - transition effect 屬性如果影響到周遭元素，像是寬和高...等，可能會吃效能。 ---