[ 學習筆記系列 ] 網頁本質 (二)

前言

我一直覺得 CSS 要熟，大部分都是要靠經驗去累積出來的，沒有捷徑可以走。不過即使學到現在，也仍還是 CSS 苦手就是了。

但相對來說，它能帶給開發者的成就感也蠻大的，畢竟能設計出來的成品能直接讓使用者看到，也算是前端工程師小確幸吧。

基礎 CSS(Cascading Style Sheets)

CSS 套用的三種方法

在標籤加入 style 屬性
```
  <div style="background:black;" />
```

在 <head> 加入 <style>

  html>
  <head>
  <style type="text/css">
  h1 {color:red}
  p {color:blue}
  </style>
  </head>

  <body>
  <h1>Header 1</h1>
  <p>A paragraph.</p>
  </body>
  </html>

創建 .css 檔案，並引入 CSS 檔案位置

  <head>
  <link rel="stylesheet" href="style.css"\>
  </head>

CSS 選取元素

選取所有 *

選取標籤


  body{
    backgroung-color:black;
  }

  div{
    backgroung-color:red;
  }

選取 id / class
```
  #title{
    background-color:black;
  }

  .content{
    background-color:red;
  }
```
順帶一提，在編寫 html 時，每個 id 的名字是獨一無二的，而 class 可以重複
選取同時符合兩個以上條件以上的元素
```
  span.content{
    background-color:red;
  }

  #title.content {
    background-color:black;
  }
```
意思是我必須同時是 <span> 元素並同時擁有 class="content" 才會被選到，

第二個例子同理
選取次階層的元素 ( 下一層或以下全部 )

有分空一格和 >

如果是空一格，代表選擇底下所有的，不管是次階層、第二層、第三層都會被選擇到

如果是 > ，代表下指定下一層，若照上面例子看，只會選到第二層，第三層與第四層都不會被選擇到
```
  <div>
    <span>
      <span>
        <span>
        </span>
      </span>
    </span>
  </div>
```
```
  div span {
    background-color:black;
  }

  // 所有 <span> 都會被選擇到

  div > span {
    background-color:black;
  }

  // 只會選擇到 div 底下的那一層 span
```
選擇隔壁元素 + / ~ ( 同一層 )

+ : 僅選擇單個元素

~: 選擇旁邊所有元素
```
  <div>
  <span class="one">
  </span>
  <span class="two">
  </span>
  <span class="three">
  </span>
  </div>
```
```
  div + span {
    background-color:black;
  }  // 僅 one 會被選到

  div ~ span {
    background-color:black;
  } // one, two, three 都會被選到
```
這個選擇方法運作可以理解為兩個階段
1. 找尋符合的條件
2. 選取元素
  
  在這三周的作業中，比較常用到的是 ~
  
  通常是用在類似 List 的狀況，依賴第一個元素當定位，跟在後面的與前面都保持一定間距
Pseudo-Classes

意思是當對該元素施以指定事件時，假裝創建一個元素，我們可以將這個元素套用樣式

方法為在後方加入「:事件名稱」
```
  div:hover {
    background-color : red;
  }
```
這是最常用到事件，即滑鼠移上選取元素時，背景變為紅色

first-child / last-child 與 nth-child()

也是 Pseudo-Classes 的一種，通常搭配上述介紹過的「選下層所有」使用

  <div>
  <span class="one">
  </span>
  <span class="two">
  </span>
  <span class="three">
  </span>
  </div>


  div span:first-child {
    background-color : red;
  } 選第一個，one 會被選擇到

  div span:last-child {
    background-color: black;
  } 選最後一個，three 會被選擇到

  div span:nth-child(2) {
    background-color: blue;
  } 選 () 內中的那個，如 2，就是選第二個，two 會被選擇到

  <div>
  <span class="rules">
  </span>
  <span class="not__reles">
  </span>
  <span class="rules">
  </span>
  </div>

  div .rules:nth-child(2) {
    background-color: blue;
  } // 什麼都不會選到，而不是選到最下面那個 span

原因是因為 nth-child 會先選到該層的第 n 個元素，再比對它是不是符合該層

比如說這個範例是先選到第二個 span，再比對該類別是否為 rules，比對結果不符合，所以不選擇

關於 nth-child() 內中的其他值
- odd : 選奇數個
- even : 選偶數個
- n ( 如 3n / 3n +2 等)
  
  n 將會是一個從 0 開始代入的數，如果是 2n ，就會選擇 0、2、4、6、8、10
  
  如果是 2n + 3 ，就會選擇　3、5、7、9、11、13
偽元素 ( Pseudo-Elements )

為了跟 Pseudo-Classes 區別，偽元素用 :: 表示

會稱為偽元素的原因是，它可以利用 CSS 產生出一個類似於 html 中的元素，所以得稱

用途會用在當符合該 CSS 條件時 ( 就是被選到 ) 可以加入單位 ( 使用 after ) 或標題 ( 使用 before )
```
  .money::after {
    content : "$";
  }
```
```
  <div>
    <span class="money">123</span>
    <span>456</span>
    <span class="money">789</span>
  </div>

  123 $

  456

  789 $
```
即符合 money 的元素都在最後面加上 $ 字號，注意 content 這個屬性，加入字串用 "" 包住

attr : 抓出所選元素內的屬性


  .money::after {
    content : attr(class);
  } 抓出選取到的 class 屬性值

  <div>
    <span class="money">123</span>
    <span>456</span>
    <span class="money">789</span>
  </div>

  123 money

  456

  789 money

偽元素的使用時機，有一個不錯的案例是你需要針對該元素內的某些文字套用上不同的顏色或外型

CSS 權重

如果兩條不同 CSS 選擇方式選擇到同一個元素，那哪一個才算是真正選到呢 ?

當選擇語法完全一樣時，後面的為重


.money {
  background-color : green;
}

.money {
  background-color : red;
}

結果: 背景將是紅色

id > class > 標籤，簡單來說就是描述越詳細者勝

在比對過程中，只比該語法中的最大值

假設我要選擇的元素同時擁有 class="prd" 與 id="apple"
```
.div.wrapper > div.production > div.prd {
  background-color : green;
}

#apple {
  background-color : red;
}
```
結果: 背景將是紅色

不論我在第一個描述了多少 class 或標籤，其權重值仍無法大於 id 的權重值

因為 id > class > 標籤

雖然如此，在 .css 檔案中套用的 CSS 樣式，無法大於在 html 屬性中的 style 樣式，除了 .css 中的 !important
```
#apple {
  background-color : red;
}
```
```
<body>
  <div id="apple" style="background-color:yellow" >123</div>
</body>
```
123 的背景為黃色

使用 !important，注意該語法的位置
```
#apple {
  background-color : red　！important;
}
```
```
<body>
  <div id="apple" style="background-color:yellow" >123</div>
</body>
```
123 的背景為紅色

所以總結：!important > html 元素中 style 屬性 > 選取 id > 選取 class > 選取標籤

CSS 盒模型 ( Box model )

所有被套用 CSS 的元素

由內而外為 content -> padding -> border -> margin

基本上這個應該用這個概念看待每一個元素

而一般在元素中的尺寸 width 與 height 指的是 box-sizing

而 box-sizing　預設是 content ( content-box )，我們一般用 div 包住的文本就是在 content 裡面

所以如果沒有特別指定 box-sizing， width 與 height 指的就是 content 的寬度與長度

而 box-sizing 可以指定為 border-box 、padding-box 或 margin-box

當 box-sizing 指定為不同的盒模型內容時，CSS 對盒子內寬高的處理也會不同

使用時機為，如果我已經規劃好這個元素我最大的寬高已經預先決定

就可以先用 box-sizing 固定

如此無論如何都不用擔心該元素的實際大小會大於我預先想好的大小

block 與 inline

block ( div、h1、p )

預設 display : block;　特性為 block 會換行顯示
inline ( span , a )

預設為 display : inline;

特性為寬與高不會被 width 與 height 影響，只會被內中的文字影響

而若是使用 margin，則只能影響左右間距，不會影響上下間距

原因是因為 span 與 a 常被使用在段落中的某段文字，通常我們要對某段文字做特別處理時，都是調整左右 ( 因為格式是左到右書寫 )，而非調整上下 ( 那已經是行距了 )

padding 的部分，則是會從內中文字為起點往外撐開元素
inline-block

可以理解成與 inline 相同可以並排，但 inline 不能調整寬高與 margin 上下等限制被取消了，可以使用。

也可以更好理解為 inline-block 是可以並排的 block

CSS 定位 ( position : )

static

其實就是預設的定位方式，都是以左上角為中心點
relative

relative 是相對的意思，預設是相對於 static

所以這時候可以設定 top，若 top 為 20px;

則這個定位點就會向上遠離 20px，該元素會往下移 20px 的距離

right 若為 20px，該元素則會往左移動 20px ( 注意這時候指定了 right，元素會被判定為從 right 為起始 )

以此類推
fixed

fixed 是相對於使用者使用瀏覽器所見之窗口做定位

本身是可以跳過元素排序並蓋過其他元素，不會影響原本元素的排序
absolute : 針對參考點進行定位

absolute 會先找尋一個參考點，這個參考點是逐漸往上尋找的，absolute 尋找的是一個非預設 static 的元素

如果找不到參考點，它就會找以 body 為參考點

另外，該元素被 absolute 定位之後，會脫離原本元素排序，並且可會蓋過其他元素，不會影響原本元素的排序
sticky

很好用的一個元素，當瀏覽器滾論往下拉即將蓋住該元素時，該元素就會如同 fixed 黏住瀏覽器邊框
圖層順序 z-index

簡單來說可以想像該預設都是 0，值比 0 大的如 1 就會顯示在前面，-1 同理，會顯示在後面

CSS 好用屬性介紹

Chrome 瀏覽器中 body 預設不留白邊

  body {
    margin: 0;
    padding: 0;
  }

如何左右置中

  .wrapper {
    width:100px;
    margin: 0 auto;
  }

上下左右置中

  .wrapper {
    width: 100px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -50px;
  }

元素內文字左右置中

  .wrapper {
    text-align: center;
  }

元素內文字垂直置中

  .wrapper {
    height:100px;
    line-height:100px
  } 即 line-height 與 height 同

元素內文字換行

  .wrapper {
    word-break : break-word;
  }

  若使用 break-all ，則不保證字的完整性

結語

這篇筆記的 CSS 真的很基礎，而且也剛好沒有筆記到 flex 的部分，偏偏現在 flex 用得最兇 XD

通常學會 HTML 與 CSS 之後，就可以切出一些自己想要的版面了，不要小看這兩個部分，基本上如果夠用心，做出媲美線上產品的網頁版面也是沒有問題的。

但即使如此，一些網頁的操作與互動，若少了 JavaScript 仍是無法實現。所以下一篇筆記將介紹瀏覽器中的 JavaScript，以及了解 JavaScript 是如何操作 DOM 的。

[ 學習筆記系列 ] 網頁本質 (二) - CSS 篇

前言

基礎 CSS(Cascading Style Sheets)

CSS 套用的三種方法

CSS 選取元素

CSS 權重

CSS 盒模型 ( Box model )

block 與 inline

CSS 定位 ( position : )

CSS 好用屬性介紹

結語

ClayGao

Related Posts

Comments

前言

基礎 CSS(Cascading Style Sheets)

CSS 套用的三種方法

CSS 選取元素

CSS 權重

CSS 盒模型 ( Box model )

block 與 inline

CSS 定位 ( position : )

CSS 好用屬性介紹

結語

ClayGao

Related Posts

每日心得筆記 2020-06-22(一)

[JavaScript] 操控 DOM 元素

Python 程式設計函式的 內建函式和自訂函式 入門教學

Comments

Python 程式設計函式的內建函式和自訂函式入門教學