[ CSS 02 ] 各種裝飾


Posted by tzutzu858 on 2020-07-26

background

顏色可以有的表示方法

  • 寫顏色名稱 red、green 等等
  • 色碼 #ff00f0;
  • rgb(244, 40, 100);
  • rgba(244, 40, 100, 0.5);

放圖片

  • background: url("./bg.jpg");
  • background: url("./bg.jpg")no-repeat; 圖片不重複
  • background: url("./bg.jpg")no-repeat center center; X Y 軸都放中間,另外還有bottom、top、left、right 可以放
  • background-size: 200px 100px ,寬 200px ,高 100px,單位也可以用%
  • background-size: contain ,不變形,剛剛好放進去
  • background-size: cover ,不變型,但要把這個區塊塞好塞滿,所以放大的圖片可能會被切到一些

把自己框起來:border 與 border-radius

  • border: 2px solid green 出現 2px 綠色的框框,內容區會被邊框給擠掉,因為邊框是往裡面長
  • border-radius: 5px ,四個角被圓化,數字越大越圓
  • outline: 5px solid black ,不會吃掉內容,它是往外長

可以分開設置

  • border-top: 2px solid green
  • border-bottom: 2px solid red
  • border-left: 20px solid blue
  • transparent 透明

margin 與 padding

  • padding: 10px 上下左右都 10px
  • padding: 10px 20px 上下 10px 左右 20px

通常瀏覽器會自動加個 margin: 8px
所以想要完全貼合邊邊,加上下面這串就可以了

body {
  margin: 0;
}

文字相關:color、font-family、font-weight 與 line-height

  • font-weight: normal; 字的粗細,normal一般大小
  • font-weight: bold; 粗體
  • font-weight: 500;
  • font-family: 新細明體 字體樣式
  • letter-spacing: 1px; 字距
  • line-height: 12px line-height: 1.5em 行距
  • text-align: center 橫的對齊
  • text-decoration 設置文本的修飾線外觀的(下劃線、上劃線、貫穿線/刪除線或閃爍)

文字相關 part2:word-break 與 white-space

  • word-break: break-word; 不會超出範圍,單字也不會被切開
  • white-space: nowrap 句子永遠都會在同一行

你滿了,那我就漫出來了:overflow 與 text-overflow

<div>設有用,<span>沒有用

  • overflow: auto : 會自動使用捲軸。
  • overflow: visible : 不使用捲軸,超出的範圍的文字或圖片並不會隱藏,直接顯示出來。
  • overflow: hidden; : 超出的字被隱藏起來。
  • overflow: scroll; : 超出範圍會變成可以滾動的區域。
  • overflow: inherit : 繼承自父元素的可見性

  • text-overflow: ellipsis 超出的字用點點點蓋掉,前提是要設 hidden 和 nowrap


加了我質感瞬間升級:transition

  • transition: all 1s 漸變效果
  • transition: all 1s ease-in 動畫效果

Die Verwandlung:transform 的妙用

後面接的有點像是 function 的感覺

  • transform: scale(2); : 依照中心點變大兩倍
  • transform: rotate(180deg); : 轉 180 度
  • transform: translateX(50px); : 往右移 50px
  • transform: translateX(50px, -20px); 往右移 50px,往上移 20px (定位點是左上角,所以往下是正數)

讓物體在畫面的正中央(定位點是左上角)

top: 50%;
position: absolute;
transform: translateX(-50%, -50%);

因此要把物件往左上移自己的長寬一半一半

往左移自己的一半,往上移自己的一半,利用 transform: translate(-50%, -50%); 就可以了










Related Posts

Laravel and Cypress integration

Laravel and Cypress integration

環境變數 Environment Variable

環境變數 Environment Variable

前言

前言


Comments