CSS基本裝飾

引用 CSS 方法

• 將 CSS 另存為新的檔案，並於 HTML 的 HEAD 標籤中以下述指令嵌入。

<link rel="stylesheet" type="text/css" href="mystyle.css">
href : 放入檔案路徑
寫法:

./../資料夾/檔案名稱  

/*
./表示進入目前檔案位置
..表示回上一層
進入檔案所在資料夾
引入檔案
*/

選取

• 由標籤來選取：
  p { }： 選取所有標籤為 <p> 的內容
  ul { }：選取所有標籤為 <ul> 的內容
• 由 id 選取：
  #para1：選取 id="para1" 的內容
• 由 class 選取：
  .btn：選取 class="btn" 的內容
• 複選
  中間用 , 來隔開
  p, h1：選取所有 <p> 及 <h1> 的內容
• 全選：
  * ：全部都要選取

背景設定(background)

• 以顏色來填滿
  background: lightblue;
• 以圖片作為背景
  background-image: url( )`background-image: url("paper.gif");
• 讓圖片以垂直方向重複：
  background-repeat: repeat-y;
• 讓圖片不要重複：
  background-repeat: no-repeat;
• 讓圖片保持於右上角：
  background-position: top right;
• 合再一起寫*

body {
background: url(img_tree.png) no-repeat top right;
}

//圖片置中，等比例縮小放大 
banner 的寫法：
.banner {
background: url(./bg.png) center/cover no-repeat;
}

• 補充：要在背景上面加一個「半彩色遮罩」

//banner 要先設為 relative
.banner {
 postion: relative;
 }
 .banner::after {
  content: '';  //content 一定要加
  postion: absolute;  //抓上面的relative
  background: rgba(0,0,0,0.4);  //rgba顏色設定，紅,綠,藍,透明度
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 }

• 補充：要將四張圖片橫向排列填滿頁面

// 圖片先用一個 div 包住
<div class="content__menu__photo">
  <img src="./photo/f-001.png"/>
  <img src="./photo/f-002.png"/>
  <img src="./photo/f-003.png"/>
  <img src="./photo/f-004.png"/>    
</div>

// 外面的 div 先以 display: flex 將四張圖片橫向呈現
.content__menu__photo {
  display: flex;
}
// 再以 flex-shrink: 1; 來讓圖片等比例隨視窗大小壓縮，
// 並設定每一張圖片佔據寬度 width: 25%(100%/4=25%)
.content__menu__photo img {
  display: flex;
  flex-shrink: 1;
  width: 25%;
}

設定邊框(border)

• 設定寬度為 4px 樣式為 dotted 顏色為 red

border: 4px dotted red;
//邊框:大小，點點，顏色

• 顯示邊框

border-top: 4px dotted red; //僅顯示上方邊框
border-bottom: 4px dotted red; //僅顯示下方邊框
border-left: 4px dotted red; //僅顯示左方邊框
border-right: 4px dotted red; //僅顯示右方邊框

Height & Width

• 設定高度為 100px
  height: 100px;
• 設定寬度為 50%
  width: 50%;
• 一般網頁可以把 max-width 設成 1280px
• 平板大小可以設定在 768px 以下

Box model

• 盒模型 = Height & Width + Padding + border + Margin
  

Text 文字內容

• 設定文字顏色
  使用 color 即可，不需要使用 text-color
  h1 { color:blue; }
• 設定文字至中
  h1 { text-align: center; }
• 去除文字的超連結底線
  a { text-decoration: none; }
• 將文字轉變成大寫
  • 轉變成全部大寫 (THIS IS A HEADING)
    h1 { text-transform: uppercase; }
  • 轉變成駝峰式大寫 (This Is A Heading)
    h1 { text-transform: capitalize; }
• 將文字第一行的開頭空格
  p { text-indent: 20px; }

Font 文字字型

• 設定為斜體樣式
  p { font-style: italic; }
• 設定為粗體樣式
  p { font-weight: bold; }
• 設定字體大小
  body { font-size: 20px; }
h1 { font-size: 3em; }
• 設定字體樣式
  body { font-family: Courier New; }
• 整合使用 (斜體, 大小, 樣式)
  p { font: italic 20px Verdana; }
• 補充：改變字跟字中間的間格
  h1 { letter-spacing: 0.3em }

Link 連結

• 連結的選取可以藉由連結當下的「狀態」來區分
  其中 a:link 這邊的 : 前後不可以空格。
  初始狀態 (unvisited link)
  a:link { color: black; }
• 滑鼠移動到連結時 (mouse over link)
  a:hover { color: blue; }
• 滑鼠正在點擊的當下 (selected link 左鍵點下去，到左鍵放開的這段時間。)
  a:active { color: green; }
• 曾經訪問過的連結 (visited link)
  a:visited { color: blue; }

List 清單

• 設定清單標示
  • 設定為方塊
    ul { list-style: square; }
  • 設定為羅馬數字
    ol { list-style: upper-roman; }
  • 設定為 gif 圖示
    ul { list-style-image: url('sqpurple.gif'); }
  • 將原先的 circle 標示備份，新增樣式 img_marker.png並顯示於內容之中
    ul { list-style: circle inside url('img_marker.png'); }
  • 設定標示隱藏
    ul { list-style-type: none; }
• 清單改成橫向
  在 ul 上面加上 display: flex;

Table 表格

• 設定表格外框
  • table, th, td 均加上外框，且框線不重複

    <style>
    table,th,td {
    border: 1px soild black;
    }
    table {
    border-collapse: collapse; //框線不重複
    }
    </style>
    

Display & Visibility

• 設定元素為隱藏 (但保留元素的位置)
  此位置依然有該元素，它只是隱形了
  h1 { visibility: hidden; }
• 設定元素為移除 (不保留元素的位置)
  此位置由下方的元素替補，它已經不見了
  h1 { display: none; }

Position

• 將元素位置鎖在畫面固定位置
  h1 { position: fixed; }
• 將元素本身位置
  h1 { position: relative; }
• 將元素相對上方 relative 的元素來設定相對位置
  h1 { position: absolute; }
• 若是上方沒有任何設定為 relative 的元素，則會相對於 html page 左上來設定位置
• 將圖片設定顯示於下層
  img { z-index: -1; }
  • 注意： 設定 z-index 的時候，要考慮 position 是相對於誰

　Overflow

• 將多餘的文字隱藏，並加入滾輪
  div { overflow: scroll; }
• 將多餘的文字直接砍掉
  div { overflow: hidden; }
• 加入橫向滾輪
  div { overflow-x: scroll; }
• 將多餘的文字用 ... 表示
  text-overflow: ellipsis
  需搭配 overflow: hidden; 一起使用
  div { overflow: hidden; text-overflow: ellipsis; }
• 將多餘的文字直接強制換行 (＊英文文字好用)
  div { word-wrap: break-word; }
  將所有空間都用文字塞滿，滿了才換行 (＊中文文字好用)
  div { word-break: break-all; }

Align

• 將元素水平至中 (with margin)
  div { margin: auto; }
• 將元素靠右 (with absolute)
  div { position: absolute; right: 0px; }

Combinators

• 設定 div 底下 p 的文字要改為紅色

  • 只要在 div 底下，不論中間是否有隔其他東西
    div p { color: red; }

• 設定 div 底下的第一層 p 的文字要改為紅色

  • 只有 div 底下第一層會改到
    div > p { color: red; }

• 設定 div 之後的下一個 p 的文字要改為紅色

  • div 本身底下的都不會改
  • 只會改 div 之後的下一個，下一個之後的都不改
    div + p { color: red; }

• 設定 div 之後全部 p 的文字都要改為紅色

  • div 本身底下的不會改
    div ~ p { color: red; }

Pseudo-classes

• 設定連結的不同狀態

1.初始狀態

• a:link

2.點選過後

• a:visited

3.滑鼠移動到上方時

• a:hover

4.滑鼠正在點擊時

• a:active

• 選取第一個 p 元素
  p:first-child
• focus (clicked or active) 的元素
  input:focus

Pseudo-element

• 設定 p 的第一行文字為紅色
  p::first-line { color: red; }
• 設定 p 的第一個字為紅色大寫
  p::first-letter { color: red; font-size: xx-large; }
• 在 p 前後加上圖案
  p::before { content: url('image.gif'); }
p::after { content: url('image.gif'); }

Opacity 透明度

• 設定透明度為 0.4
  img { opacity: 0.4; }
img:hover { opacity: 1; }

Gradients

• 設定背景「由上到下」以白色及綠色漸層
  預設 linear-gradient() 左邊的值為「上方」的顏色，右邊的值為「下方」的顏色
  div { background-image: linear-gradient(white, green); }
• 自訂漸層方向 1 (to <方位>)
  在 linear-gradient 最左側加入方向參數
  方向設定為要漸層的方向 (ex. 要從左上到右下，就寫「to 右下」)
  linear-gradient( to bottom right, white, green)
• 自訂漸層方向 2 (<旋轉角>)
  在 linear-gradient 最左側加入角度參數
  方向設定為要漸層的角度 (deg)
  linear-gradient( 70deg, white, green )
• 四色漸層
  依據方向將顏色由左至右帶入
  linear-gradient( white, red, blue, green )
• 由中心向外漸層
  預設 radial-gradient() 左側值為「中心」的顏色，右側值為「外側」的顏色
  radial-gradient(white, green)
• radial-gradient 可以在最左側加入「形狀」參數，決定以什麼形狀來向外側漸層
  radial-gradient(circle, white, green)

Transitions

• 將 width 以 2 秒緩慢從 100px 放大到 300px

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

• 讓變化「緩進緩出」ease-in-out
  transition-timing-function: ease-in-out;

• 讓變化遲延 0.5 秒開始
  transition-delay: 0.5s;

• 讓背景以 2 秒變色，div 以 2 秒旋轉

<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: background 2s, transform 2s;
}

div:hover {
  background: blue;
  transform: rotate(180deg);
}
</style>

• 縮寫整合
  transition: 標的物 變化時間 變化函式 遲延時間
  transition: width 2s ease-in-out 0.5s;

<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 2s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: blue;}
}
</style>

• 動畫無限循環
  animation-iteration-count: infinite;
• 動畫開始 <-> 結束 交替重複
  animation-iteration-count: infinite; + animation-direction: alternate;
• 動畫「緩進緩出」
  animation-timing-function: ease-in-out;

補充Q & A :

Q:為什麼要初始化 CSS 樣式？

A :

因為瀏覽器的兼容問題，不同瀏覽器對有些標籤的默許值不同，如果沒對CSS初始化，會出現瀏覽器之間的葉面顯示差異。

Q:請排出 CSS 優先層級：!importent、tag、id、class?

A :

1.層級相同，例如一樣的class，會以後面為優先
2.越詳細的贏
!importent > inline style > id > class > tag

• !importent、inline style 建議不要用，因為會覆蓋掉其他的樣式，之後要新增其他樣式就會很麻煩

Q:請問什麼是盒模型（box modal）?

A :

可以想像成每個 HTML 標籤都是一個 box 方塊，而每個 box 都包含著四層寬度，會影響到 box 的長寬，以下由內至外說明：

• Content - 元素本身的大小，即是 width & height 的設定值
  • 寬度 width ： 會因為 display 的屬性，預設值會有所差異
    display: block： 寬度為 100%
    display: inline | inline-block： 寬度讓內容撐開
  • 高度 height ：
    沒有設高度的話，就是讓內容去撐開(通常比較少設定高度，因為 RWD 時會很麻煩)
• padding - 元素與內容的內邊距（ 空隙 ）
• border - 元素的邊框
• margin - 元素的外間距
  不算在元素裡面，所以設元素的 background 屬性改不到 margin 佔據的部分

border-box（ 推薦 )

• 元素的實際大小就是 width & height 的設定值

Q:display: none; 跟 visibility: hidden; 的差別？

A :

• 設定元素為隱藏 (但保留元素的位置)
  此位置依然有該元素，它只是隱形了
  h1 { visibility: hidden; }
• 設定元素為移除 (不保留元素的位置)
  此位置由下方的元素替補，它已經不見了
  h1 { display: none; }
• 設定元素的透明度為0
  此位置依然有該元素，只是內容不可見，可以點擊
  opacity: 0
• 設定h1標籤往右移消失於使用者看到的畫面
  h1{ transform :translateX(100%) } /h1標籤往右/

Q:請問 display: inline, block 跟 inline-block 的差別是什麼？

A :

• inline 行內元素
  • 常見的 inline 元素有：<span>、<a>、<strong>
  • 會向左邊排列，不會換行、直到排滿才會換行
  • 無法設定 width & height，寬、高會自然被內容撐開
  • 無法設定 上下 margin
  • inline 元素不該包著 block 元素

總結:
＊會自適應內容大小。
＊不能設定width、height、margin、background-img等。
＊如：a、span、img…

• block 塊級元素
  • 常見的 block 元素有：<div>、<h1>、<p>
  • 一個人佔滿一整行
  • 向下排列，會換行
  • 可以設定 width & height
  • 預設寬度會佔滿父容器的 100%、高度會自然被內容撐開
  • 就算「 兩個寬度加起來小於父容器 」的 block 並排，也是會換行

總結:
＊預設會佔滿父元素的寬度，可以設定寬高
＊如：div、p、ul、li、h1、h2…

• inline-block 會流動的塊級元素，兼顧 inline 跟 block 的優點
  • 常見的 inline-block 元素有： <bottom>、<input>、<select>
  • 按照畫面的流動，會向左邊排列，一行裡面可以有多個block
  • 可以設定 width & height
  • 預設寬、高會自然被內容撐開

總結:

• 外在像inline不會換行且會自適應大小，
• 內在像block可以設定width、height、margin、background-img…等參數。

Q:請問 position: static, relative, absolute 跟 fixed 的差別是什麼？分別各舉一個會用到的場合

A :

參照點：

• relative： 元素本身

  • 如果沒有設置偏移量 （ left | top | right | bottom ），則不會有任何改變。
  • 不會影響其他元素：
  • 不管元素本身怎麼偏移，都不會影響到其他元素的定位。

• absolute： 往上層找到「 第一個 」非 static 的元素
  跳脫原本的流動，定位位置有兩種可能：

  • 找到父層參照點 (relative | absolute | fixed )
    找不到父層參照點，意指上層的所有元素都以 static 定位，參照點則會是 <body> 元素。
  • 如果沒設座標，預設位置為： left: 0; top: 0;（ 即父層參照點的左上角 ）
  • 會影響其他元素：
    假設 A、B、C 是三個同級元素、且定位是 static 或 relative，當 B 設置 position: absolute，會影響到 C 元素的流動（ C 會補上原本 B 的位置 ）。

• 應用：
  某元素要定位於右上角： relative & absolute 組合技
  最常見的狀況應該是當某個元素要定位在「 右上角 」，通常是按鈕。 只要設置父容器為 relative，定位子元素為 absolute。

• fixed： viewpoint，指瀏覽器可視範圍

  • 跳脫原本的流動，直接固定在相對於 viewpoint 的某個位置
  • 不會隨著滑動頁面而移動位置
  • 一定要設定座標才有作用
    例如:一般網站的廣告
  • 水平 & 垂直 方向至少要設定一個 top | bottom & left | right
  • 會影響其他元素：
    假設 A、B、C 是三個同級元素、且定位是 static 或 relative，當 B 設置 position: fixed，會影響到 C 元素的流動（ C 會補上原本 B 的位置 ）。

• 應用：
  選單固定於上方： fixed 的主場
  這就很簡單了，可以使用 fixed 固定於上方（ 或 sticky 也可以 ）

• 新屬性 sticky： viewpoint

  • 當視窗滾到該元素時，才固定在相對於 viewpoint 的某個位置，一直到父容器離開畫面為止
  • 一定要設定座標才有作用
  • 上下滾動要設定 top | bottom （ 左右是根據原本的位置，無法更改 ）
  • 左右滾動要設定 left | right（ 上下是根據原本的位置，無法更改 ）
  • 不會影響其他元素：
    只有當視窗滾到該元素時，才會讓該元素位置改變，但同時並不會影響到其他元素。
    可以想成是 static 跟 fixed 的混合版
    視窗滾到該元素前： static
    視窗滾到該元素後： fixed

• 應用：
  當視窗滾到某段落、段落標題固定於上方： 新功能 sticky

Q:請解釋 em、rem 的差別?

A:

• em（相對長度單位）
  • em會繼承父級元素的字體大小（參考物是父元素的font-size；）
  • em中所有的字體都是相對於父元素的大小決定的；
    所以如果一個設置了font-size:1.2em的元素在另一個設置了
    font-size:1.2em的元素里，但運行結果small的字體大小為：1.2em*1.2em=1.44em
• rem（相對長度單位）
  • rem單位可謂集相對大小和絕對大小的優點於一身
  • 和em不同的是rem總是相對於根元素(如:root{})，而不像em一樣使用級聯的方式來計算尺寸。
  • 如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px

Q:向量圖和點陣圖的差異？

A:

• 點陣圖
  常見的jpg、png格式
  構成點陣圖的最小單位是畫素，
  那種不斷放大會有小格子的圖就是屬於點陣圖，
  我們可以改變影象的色相、飽和度、透明度，從而改變影象的顯示效果。

• 向量圖
  常見的svg 格式
  向量圖並不紀錄畫面上每一點的資訊，而是紀錄了元素形狀及顏色的演算法，
  體對圖形對應的函式進行運算，將運算結果圖形的形狀和顏色顯示給你看，
  無論顯示畫面是大還是小，畫面上的物件對應的演算法是不變的，
  所以，即使對畫面進行倍數相當大的縮放，其顯示效果仍然相同(不失真)。

Q:描述 Html、Css、Js 扮演的角色

A:

Html:網頁畫面的呈現
Css:網頁的裝飾
Js:與使用者互動功能

Q:請描述幾種 css 水平置中和垂直置中的方式

• 水平置中
  inline: 利用 CSS 的 text-align 屬性text-align:center;
  block: 利用 CSS 的 margin 屬性，margin: 0px auto;

• 區塊（div）的垂直置中方法

  • flex
    display: flex 搭配 align-items: center 即可將裡面的元素達到垂直置中的效果。
  • padding
    當我們的 div 沒有設定高度時，我們可以透過 padding 的指令來達到垂直置中的效果。
    透過上下都增加 100px 的 padding 就可以，讓 .inner 這個class區塊達到垂直置中的效果。
  • Position + Transform
    先利用 position: absolute 把 top: 50% 設在 50%；接著再透過 transform: translateY(-50%) 把超過的部分修正回來，達到垂直置中。

Q:css3 中的 transform 屬性和 transition 屬性？

• transition（過渡）
  可以看到元素移動的過程
  語法：
  transition: 標的物 變化時間 變化函式 遲延時間
  transition: width 2s ease-in-out 0.5s;

• transform（變形）:可以移動、旋轉、改變元素形狀
  使用者只會看到最後顯示的樣子
  語法:
  例如:改變元素形狀
  div { transform: skew(20deg, 30deg); }

Q:請描述 css3 和 html5 新特性?

• css3
  1.颜色：新增RGBA
  2.陰影（shadow）
  3.邊框： 圆角（border-radius）

1. 盒子模型：box-sizing
2. 自定義動畫
3. 2D、3D轉換

• html5
  1.語意畫更好的内容標籤(header,nav,footer,aside,article,section）

資料來源:
css單位中px和em,rem的區別
w3schools
TutorialRepublic
每個前端工程師都應該瞭解的圖片知識 (建議收藏)
[筆記] CSS垂直置中的方法