筆記、[FE101] 前端基礎 各種裝飾


Posted by s103071049 on 2021-05-21

一、背景：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



s103071049




Related Posts

Session 與 Cookie 速記

Session 與 Cookie 速記

 Lindsay0214
About Me || 【閱讀激發思考，寫作捕捉思路】

About Me || 【閱讀激發思考，寫作捕捉思路】

 george16886
用 TypeScript 輕鬆學 Design pattern - Command Pattern

用 TypeScript 輕鬆學 Design pattern - Command Pattern

 ArvinH

Comments