CSS


Posted by stella572322 on 2020-09-11

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垂直置中的方法










Related Posts

PHP會員管理系統 - 超入門版登入串接

PHP會員管理系統 - 超入門版登入串接

ES6 的 export 與 import

ES6 的 export 與 import

[00] VuePattern 實作筆記-目次

[00] VuePattern 實作筆記-目次


Comments