Css 各種裝飾

==背景：background==

• 背景顏色

#box1 {
  background: red;
}

#box2 {
  background: #ff00f0;
}

#box3 {
  background: rgba(244, 4, 50, 0.5); 
  /* 
  rgb 分別為紅綠藍色碼
  a 為 0～1，表示透明度 */
}

• 背景圖片

  #box4 {
  background: url('./ghost\ of\ tsushima.jpg') no-repeat bottom left; 
  /* 
   no-repeat 不要重複
   bottom top 為 y 軸上下對齊
   left right 為 x 軸左右對齊
   center center 為置中 
   */
  backgroung-image: url('./ghost\ of\ tsushima.jpg') /* 當有設置要放圖片的區塊時使用，讓圖片與區塊的 css 樣式一致 */
  background-size: 300px 300px ; /* 圖片尺寸，也可以用百分比顯示，會依照比例伸縮圖片。*/
  background-size: contain; /* 以圖片的正確比例（不壓縮的狀態）來填補。*/
  background-size: cover; /* 常用，會讓圖片隨著視窗大小而縮放，永久填滿背景。*/
  height: 500px;
  width: 2000px; /* 圖片超過的部分會重複顯示 */
  border-radius: 50%;/* 將圖片變原形 */
  overflow: hidden; /* 超過圓形的範圍會被隱藏 */
  }
  

• 背景尺寸

  .main {
  max-width: 645px; 
  /* 這樣設定最大寬度表示視窗比 645px 寬就會顯示 645px，比較窄就會顯示 100%，這樣就不用另外設 RWD 了 */
  margin: 10% auto;
  background: white;
  white-space: nowrap;
  }
  

• 註：通常不需要刻意設定 Zeplin 給的背景尺寸，除非有刻意限制。有時候背景是整個 body 的 background-color，要設也是各為 100vh / vw 或是百分比，在 zeplin 上面的尺寸大概就只是它自動幫你轉換或是給你參考的而已。

==border 與 border-radius==

#box1 {
  background: red;
  height: 100px;
  width: 100px;
  border-radius: 50%; /* 邊角弧度，50% 剛好是圓形。*/
  border-top: 10px solid green; /* 邊框的寬度 型態 顏色 */
  border-bottom: 10px solid yellow; /* 顏色可以透明 transparent
  border-left: 10px solid purple; 
  border-right: 10px solid blue; 
}

==padding 與 margin==

#box2 {
  background: red;
  height: 100px;
  width: 100px;
  padding: 30px 10px; 
/*內容距離邊邊 30px，所以邊邊從內容往外撐大，寫兩個值就分別是內容與上下、左右的距離，
寫四個值得話順序就分別代表上右下左，順時針 */
}

#box3 {
  background: green;
  height: 100px;
  width: 100px;
  margin: 20px; /* 離外面的距離20px，所以會與其他東西產生間隔 */
  margin: 0 auto; /* 一列元素沒有滿版時置中，auto 表示會自動與設定的方向產生平均的距離 */
}

* 註：chrome 瀏覽器會在整個畫面預設 margin: 8px;

==文字相關：color、font-family、font-weight、line-height、word-break 與 white-space==

#duke {
  background: salmon;
  height: 80px;
  width: 500px;
  color: rgb(10, 10, 10);
  font-size: 20px;
  font-size: 2rem;/*rem 是以全部的基礎字體大小為倍數的單位，所以一開始通常會先設定整個 html 的字體大小*/
  /* 
  html {
    font-size: 12px;
  }
  */
  font-weight: bold; /* normal: 正常 bold: 粗體 */
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /* 選字型，需要電腦有支援 */
  letter-spacing: 1px;
  line-height: 1em; /* em 表示幾倍行高，不管字的大小行高都會依照 em 固定 */
  text-align: center; 
  /* 
  x 軸水平置中對齊，若要 xy 軸完全置中可以將 line-height 調整與 height 相同，但此方法在有兩行以上的內容時會ＧＧ。 
  亦可以不要設 height，再用 padding 的方式將框框撐開，此時多行內容也會置中。
  */
  word-break: break-word; /* 當文字內容很長超出設定的寬度時，break-word 幫你依照字間空白來切換行來符合寬度。
  而 break-all 則是依照設定的寬度直接切字不會看空白 */
  white-space: nowrap; /* 強制不要換行 */
}

==overflow 與 text-overflow==

#duke {
  background: salmon;
  width: 500px;
  text-align: center; 
  white-space: nowrap;  /* 強制不要換行 */
  overflow: scroll; /* 應用範圍較廣，hidden: 超過的內容會隱藏 scroll: 可以滾動看超過的部分，auto 也是*/
  text-overflow: ellipsis; /* 只能在文字部分使用，會把超過的部分用...蓋掉，需要前置作業 nowrap 跟 hidden */
}

==transition==

#thought {
  border: 4px solid gold;
  color: black;
  height: 60px;
  width: 120px;
  margin: 10px;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
  border-radius: 20px;
  transition: all 0.3s ease-in; 
  /* 
  transition: 漸變效果 參數分別為：對什麼屬性作用、秒數、設定動畫方式(可以用 devtool 給設計師調) 
  小叮嚀：若在漸變的過程中影響到周遭元素的話可能會牽扯到效能問題，之後課程會細談。
  */
}

#thought:hover {
  background: gold;
  cursor: pointer; /* 鼠標的樣式 */
  height: 90px; /* 也可以調整大小，這樣會有變大的動畫 */
  width: 180px;
  /* 註：transiton 放在 hover 的話滑鼠移開會沒效果，只有移上去有效果。*/
}

==transform==

• 搭配 transition 使用效果佳。

  #thought:hover {
  background: gold;
  cursor: pointer; /* 鼠標的樣式 */
  transform: scale(2) /*放大兩倍*/
  transform: rotate(180deg) /*轉180度*/
  transform: translate(10px, 20px) /*位移（x 軸, y 軸）*/
  filter: brightness(1.2);/*亮度變亮 1.2 倍*/
  

• 也可以用來將元素移到整個畫面中間

  #turtle:nth-child(2) {
  position: absolute; 
  top: 50%;
  left:50%;
  /*此時元素的左上角在整個畫面的絕對位置*/
  transform: translate(-50%, -50%); 
  /*因為是元素左上角在畫面中央，
   所以要再將元素往自身長寬的 50% 小幅度移動*/
  }
  

• !important 可以避免 css 被 bootstrap 之類的套件中的 css 蓋掉。

==盒模型 box model==

#turtle {
  background: limegreen;
  height: 100px;
  width: 200px;
  border: 5px solid black; /* 此時寬高會向外擴張 5px，整體寬高會各自增加 10px */
  padding: 5px; /* 此時寬高也會向外擴張 5px，整體寬高會各自再增加 10px  */
  box-sizing: border-box; 
  /* 
  使用 border-box 會將 border 與 padding 納入一開始設定的寬高，原先的內容尺寸就會相對縮小，整體會維持並不會向外擴張。
  若使用 content-box，就是內容會保持一開始設定的寬高，再加 border padding 就會向外擴張。 
  */
  font-size: 30px;
}

上述 css 示意圖

==display 的三種形式：block、inline 與 inline-block 加補充==

• ==block==:
  • 代表：<div>、<h1>、<p>
  • 一個元素會佔滿一整行，不會併成一列。
  • 調什麼都可以，padding、寬高等等。
• ==inline==:
  • 代表：<span>、<a>
  • 調寬高沒用，上下邊距沒用，其寬度會依據內容長度來顯示。
• ==inline-block==:
  • 代表：<button>、<input>、<select>
  • 對外像 inline 可併排，對內像 block 可調各種屬性。
  • 直接調整 css display: inline-block;
  • 與 block 的差別是可以併成一列。
• ==flex==: 底下的元素可以左右並排。以下是display: flex;的預設指令：
  • flex-direction: row; 由左到右排成一列，但在collum 屬性時，底下兩指令的座標軸排列方式會不同。
  • align-items: flex-start;
  • justify-content: flex-start;
    
    
• display: inline-flex: 範圍內的元素左右併排成一列。
• flex-wrap: wrap: 元素多時會自動換行。
• 當視窗縮放時，flex 元素 如何處理多餘或不夠的 container(放flex 元素的地方) 空間。
  • flex-wrap: wrap;: 此時在視窗縮小的時候會換行。
  • flex-grow: 數字比例: 視窗放大時多餘空間分配的比例。
  • flex-shrink: 數字比例 : 視窗所小時多餘空間分配的比例。
    

==定位 position==

• ==stasic==: 預設值，照順序定位。
• ==relative==: 以相對位置定位，以原本的位置為原點來做移動，不會影響其他元素的位置。(但在有其他的<div>時會失效，原因待補)

  #turtle:nth-child(2) {
  position: relative;
  left: 20px;
  top: 30px
  }
  

• ==fixed==:相對於 viewport (瀏覽器視窗可見部分)定位，不管畫面如何滾動都會固定在設定的位置。
• ==absolute==: 針對某個參考點（往上層找第一個 position ==不是 static== 的元素）來進行定位，此時這個元素會脫離離正常的排版流程(見底下 turtle-inner)，此時若有其他普通元素則會無視使用 absolute 來定位的元素的存在，而直接遞補。

  <body>
    <div id="turtle">box1</div>
    <div id="turtle">
      <div id="turtle-inner">
        X
      </div>
    </div>
    <div id="turtle">box3</div>
    <div id="turtle">box4</div>
    <div id="turtle">box5</div>
  </body>
  

  ```css=
  #turtle {
  background: limegreen;
  height: 100px;
  width: 200px;
  margin: 5px;
  border: 5px solid black;
  font-size: 30px;
  position: relative;
  }

turtle-inner {

position: absolute;
top: 10px; /若上層的 turtle 沒有設定 relative 的話則會針對 body 做定位/
right: 10px;
}

---
* ==z-index==: `z-index: number`數字越大，z 軸越大，元素可以排越上面。
* ==sticky==: 元素滾動到設定位置時會固定住。
```css=
#turtle:nth-child(2) {
  z-index: 2;
  position: sticky;
  top: 0px; /* 網頁可以滾動時，元素頂端到達這個位置的時候黏住，常用於索引、導覽列 */
}

Css BEM 命名規則

• 狀態跟連詞的 BEM 一般==連詞會用單底線 _==、==分層雙底線 __==、==狀態使用 -== e.g. .game_page-desc, .stream__box-empty
  ###### tags: Week6