HTML 作為一個標記語言，建構網站的內容且賦予意義，包含了許多元素，操作起來就像 Word 在排版。但實際上網頁並不像 word 一行接著一行被列下來，老師舉例：像早期的網頁左邊有導覽列、右邊有網站內容，而導覽項目裡的按鈕由左邊的小 icon 與右邊的標題組成，藉由不斷切分空間去組成結構、從屬關係移動跟操作元素（像是當我們移動清單，清單裡的每一個 div 都會跟著動 — div 是不具備任何屬性的分隔），最終堆砌成一個有固定規則的網頁。

1/ 元素與排列

在現實中的網頁其實並不像是 word 一般散散的一個一個列下來，我們可以觀察到像是早期的網頁左邊會有導覽列，右邊有我們的網站，導覽項目裡面按鈕左邊是小 icon、右邊是標題，我們藉由不斷的切分空間去構成結構，藉由從屬關係移動跟操作元素（比如移動清單，清單裡面的每一個 div 都會跟著動），不斷的堆砌成一個有固定規則的網頁。

原本沒有任何標籤的 HTML 就是個純文字檔案，我們打什麼、它就顯示什麼，而單純按 Enter 換行是沒有特別作用的，瀏覽器不會跟著顯示換行。而如果我們想在 HTML 中加重點、比如標示粗體，我們必須告訴 HTML 哪個元素是開始、又在哪裡結束，用程式碼包起來，就像這樣 ➫
重點

<b>重點</b>

要在粗體裡加上另一個強調功能，比如斜體，則可以在粗體文字中希望更加凸顯的部分用包起來 ➫
今天天氣實在熱到歪頭

<b>今天天氣實在<i>熱</i>到歪頭</b>

HTML 如同 Word 一樣，有很多的元素可以使用，比如「headline」簡寫成「h」，「h1」是超級大的標題

大標題

<h1>大標題</h1>

「h2」是小一點的副標題，一路到 h6。
有了標題之後，內文怎麼辦呢？內文的代號是「p」paragraph

<p>內文</p>

但如同很前面提到的，即使我在 HTML 編輯器裡打了很多行字，呈現出來依然在同一行裡。這時怎麼解決這個問題呢？就是在內文後面加一個特殊的標籤「br」

break, 該換行囉
換行了

該換行囉<br>換行了<br>

而且不用結束標籤，之後的所有文字都會換行。內文打完後，記得加上結束掉一個段落。相較之下，如果在 h2 裡塞了個 h5，大多數預設元素都是會換行的，製作不換行元素要用 span，會直接接在 span 前面的後方。

若我們想要插入圖片跟連結 ➫
圖片是

<img src=“網址” width=“__px”/>

直接放在開頭的標籤裡面、指定圖片位置網址的屬性，也可以給其他屬性，譬如 width=“300px” 指定寬度縮小
連結標籤是連結的文字

<a href=“網址”>連結的文字</a>

href 屬性值是給它網址
如果希望連結跳出新視窗，則用連結的文字

<a href=“網址” target=“_blank”>連結的文字</a>

target 屬性指定為 blank 後，將跳出新視窗

我們可能會覺得這些標籤非常難記、又有好多奇怪的屬性，其實當我們要用到一個標籤（tag）的時候，直接上網查「a html tag」，會看到 w3schools 上有非常多的參考資料，告訴我們基礎的應用、每個屬性值可以怎麼用，比方說 href 代表要連結的網址、target 代表要呈現的位置。

2/ 結構與層級

剛才我們在粗體裡面加了另外一個重點、並賦予斜體的屬性，因此可以說「斜體」元素隸屬於「粗體」元素，那我們要怎麼看這樣的層級關係呢？這時，在網頁上面按右鍵並點選「檢查」，可以看到粗體下面包含了斜體。像在看許多網站的導覽列時，會認為按鈕的組合似乎是同一個東西，按「檢查」之後，可以看到有些網站會用

<ul class=“”>

(註：ul 是不加編號排列的 list 清單）把多個按鈕歸納進同一個群組。用同樣方法去拆解網站其他內容，發現有些群組會把圖片拆成一個部分、其他文字資訊拆成一個部分，而這在網頁排版裡面是非常重要的，讓我們能把元素群組化、方便移動或修改，詳細切分空間之後就會成為我們看到的網頁。

假設我們現在要做食譜，使用「ol」（註：ol 是orderlist的縮寫，會自動排列的清單）讓我們有一個清單的物件，還需要給它每個清單的項目，可用 list 來表示

<li></li>

接下來就可以看到三個項目跑出來了。那麼群組的概念又是什麼呢？像 ol 就是個群組，包住 li 這三個 list。而當我們移動群組 ➫ 把左距加大，可以看到項目全部一起往右偏移。

群組的概念也可以用在導覽列 div，是「division」分割的意思，只要任何想要單獨修改的物件，都可以用 div 把它包住並修改。div包住之後，新增一個清單「unorderlist」（不加序號排列，簡寫成「ul」），加三個項目：首頁、簡介、作品、聯絡方式，就可以有點像是早期的網頁左邊欄的感覺。如果左邊欄全部都在在上方同一行排列，就會形成上欄。而 CSS 可以針對背景顏色、框線、各種外觀表現元素進行修改，CSS 表示標籤用大括號 li{ } 把所有的樣式包起來，裡面要告訴電腦只要標籤是li，看起來都要有我們寫的樣式表的樣子，比如希望所有東西都在同一行排列，displa（顯示的方式）: inline-block; 同一行裡面的block就是一個區塊，四個東西就分開排列，接著希望四個東西都變成按紐、有明顯框線，所以給「border」三個屬性：框線的樣式「solid」就是實線、框線粗度 1px（數字越大越粗）、顏色（不改的話預設黑色），但此時它長得還不像按鈕，因為裡面的文字跟外面框框的距離太小，讓人不覺得它可以點按，因此要給「padding」（裡面所有東西跟這個元素的距離），給 5px 就有點像按鈕了，而一般按鈕左右邊 padding 會更大，所以給 padding-left: 20px; padding-right: 20px; 左右的內距就會變得更大。接著要給「border-radius」代表角落的圓周，給 5px 就會看到框線角落明顯變得圓潤。此時依然覺得它超級粗糙，可以調整字體「font-family」來指定，不過要注意字體只有瀏覽器預設才能用，如果要用其他字型可能要用一些雲端的服務（比如 Google font 或是cloud font）。如果覺得字體有點擠，希望字的間距大一點，可以打 letter-spacing: 1px；更改背景顏色和 Adobe 一般軟體一樣直接給色票，或去 colorpicker.com 選取我們喜歡的色票。

3/ CSS 調整外觀與顏色框線

我們已經提到如何在html中放元素了，像是h1標題他有大的字體大小，而且是粗體，h2…h3依序遞減，還有超連結會有特定的顏色、底線跟形式，這些東西都是固定的，如果我們想要有自己的顏色大小… 等外觀的修改究竟該如何做呢？

直接在 tag 裡面加上一個style屬性，就可以針對這些做修改，比如

<h1 style="color: red;”>

可以將這個元素內的字體顏色改成紅色

<h1 style="color: red; letter-spacing: 10px”>

可以讓每個字的間隔為10px，或是想加框線時

<h1 style=“border: solid 2px black; background-color: #ccc; width: 400px; height: 300px;”>

就能得到類似名片、有背景顏色的區塊出現。h1, h2, h3 這些元素其實就是特化跟預先指定好字體跟形式的 div，方便我們可以直接運用，譬如調整 font-size 和 font-weight 就能得到 h1-h6。

4/ CSS 分開撰寫 – class & id概念

現在我們能透過在html上透過加上 style 直接改變一個元素的樣貌了，但是如果所有的樣式都寫在html裡面，整個網頁原始檔案將會變得很雜亂無法組織且難以管理，而且當我要賦予兩個元素相同的樣子（比如兩張名片）的時候，我們必須要將同樣的東西寫兩次，所以在網頁作業中，我們絕對是偏好將 style 分開來寫的。

但是如果分開來寫，我們要怎麼讓瀏覽器知道我們哪些呈現規則對應到哪些元素呢？

為了讓瀏覽器知道哪些樣式對應到哪些元素，我們可以賦予元素class (類別)，老師做了個比喻，如果全校有 100 個學生 3 個班，我希望Ａ班的學生都穿紅色制服戴帽子，我現在寫的規則就會是：只要是學生又是Ａ班的，就要穿紅衣戴帽子。以網頁的語言來說，我希望在畫面裡面的物體只要有 “h1” 這個標籤就要是紅色的，在 CSS 定義 h1 有以下屬性：

.h1 {background-color: red; color: white; border: solid 1px black; height: 30px;}

之後只要在 html 出現 h1，就會套用這組樣式。但是網頁中可能有很多個 h1，我們希望在大原則不變的情形下改動數個 h1 的細節，這時就引進 class 的概念，

<h1 class=“redtext”>

並在 CSS 調整 .redtext{} 的描述，之後只要符合 redtext 標籤條件的元素都會直接以我們設定的內容來呈現。

關於按鈕，在 html 新增 <div class = "button">Button 1</div>，並在 css 設定

.button{
  display: block;
  border: solid 2px grey;
}

顯示方式的預設是 block，缺點是它會盡可能地填滿外面的元素，改用 inline-block 則框線的大小得以由它包含的內容決定，而我們希望框線離文字有點距離，可以加上 padding (padding-left, padding-right 再加大會比不分上下左右的框線還像)、border-radius 會更像按鈕。而 class 還能做特化按鈕，譬如我希望某個按鈕變成灰色的，css 設定 .grey_button、把背景設為灰色，但我不需要再把前面設定 button 的屬性全部複製一次，我只要在 html class 裡的 class = “grey_button” 前面加上 button: class = "button grey_button”，這樣效果等同先套用 button 樣式表，再套用 grey_button，而如果後面 class 裡的樣式和前面重複，會蓋掉前面的 class。

除了 class 之外，還可以用 id 存取

<div id="hello">id 嗨</div>

而 css 的 id 要用 # 來存取

#hello{
  display: inline-block;
  color: white;
  letter-spacing: 4px;
  background-color: grey;
}

它的特性是標示網頁中獨一無二的元素，原生的 JS 對網頁操作一定要透過 id 存取，第一組之後的 id 都不會被辨識。

5/ CSS 顯示方式 display block/inline

Display 預設屬性（如 h1, h2…）是 block，當我們連續給的時候會換行，把東西丟下來，也會盡可能地撐滿整個容器。如果改成 inline / inline-block 則會全部排在同一行、給框線會發現它會緊緊包著內部元素被撐開，那 inline 和 inline-block 有什麼不一樣呢？inline-block 可以想成每個物件都是完整的一塊、可單獨被操作，指定元素和上面的距離 margin-top 則物件會距離上面一段空間，而 inline 比較像打文章、只在乎該行裡有哪些東西，不管怎麼給 margin-top 它都只有左右的東西會動，像是 margin-left，牽涉到上下就無法更動。

如果要做導覽列，譬如部落格、相簿、關於、留言板，開個 unordered list，在 html 用 list 包住我要的導覽項、建立 button 的 class，css 中再用 button 來存取。

用 inline-block 的 display 方式就能讓按鈕排在同一行。設定出框線、padding、背景顏色之後，如果希望按鈕有加粗的底線，不用特地做一個對齊的小 div，只要把底線粗細調大就好 border-bottom: solid 7px #2FEDC1; 接著把其他 border 取消掉。

而如果要這些按鈕融入到背景裡，就能從 ul 下手，在 ul 新增 navigation 的新 class、把背景顏色調成跟按鈕一樣，看起來就有模有樣了。

而各個按鈕中間會有空隙，主要是因為 HTML 的換行造成，可以先在 .navigation 的 CSS 中定義 font-size: 0，並在 .button 中設置好你想要的 font-size（因為 font-size 會繼承於上層元素）即可解決問題～

display如果寫成 none，所有東西都會消失、連渲染都沒有，完全找不到它在哪裡，如果想要按完按鈕某物件消失、頁面上不要顯示特定操作後的結果，就會用這個屬性表現。

6/ CSS 元素位置 – 相對 / 絕對定位

CSS 的定位改變方式，是用左 / 右 / 上 / 下距來作定義，左距增加就往右跑，以此類推。

分成四種定位模式：

Static – 預設排列位置，把一個個元件加進來的時候，它會照著換行排下來，而且不能調整位置或偏移
Relative – 為了偏移原本預設的位置，我們使用相對預設排列位置，設定左邊、上面的距離多一些，物件就往原本位置偏移特定的距離，跑到右下方
Absolute – 絕對上層位置，給定左邊與上面的距離，物件就會出現在相對於左上角點隔的一個特定距離，捲動畫面時會跟著跑，做頭貼就能用 Absolute 做到超出邊框的效果。Absolute 也可以給個大 div，讓元素在裡面做定位，但只能針對可以定位的上層元素做調整，所以 Static 就不行、即使在 Static 的 div 裡放它，它也只會針對整個頁面去做定位；只有在 Relative、Absolute、Fixed 三種屬性的元素中做獨特的定位
Fixed – 絕對視窗位置，和 Absolute 很像，但它是針對視窗（目前在瀏覽的螢幕）做絕對定位，所以捲動畫面時不會跟著跑，常用於導覽列

7/ CSS 內間隔 / 外間隔 (Padding / Margin)

Padding ➠ 裡面的文字和框線的距離，設定左右邊的框線 padding-left、padding-right 就會讓文字撐開框框，而如果還想對整個 padding 做設定，要小心後面的 CSS 會蓋掉前面的，所以建議先設定四邊的 padding 再單獨設定左右兩邊

Margin ➠ 元素與包含它的外部元素、或是併排物件之間的距離。上一點所說的定位，比如 Relative 的調整是不會改變其他物件的距離，但 Margin 就會連動地調動，比如有兩個併排的 div，設定 margin-left 會讓最左邊的距離外部一段距離，而它併排的右側物件則會根據它的位置再往右側偏移同等距離

8/ CSS 字體變化與 Span

字體的變化包含種類、大小、顏色、粗細、間距、行距，分別是 font-family、font-size、color、font-weight（兩種表示方法，數字是 100-900，100 最細，900 最粗，也和字體有沒有做這麼多變化有關）、letter-spacing、line-height。

在一個文章段落中，想調整部分內容的字體變化，除了土炮用之類的方式去括起來，可以試試 div。但如果只單純用 div 去括，會發現被括起來的自動換行，因為 div 預設屬性是會換行的，也可以在 display 換成 inline 讓文字在同一行，不過這麼做就有點多餘。這時可以用 span，span 預設就是同一行、也能加 class 調整樣式。

9/ 實務名片製作

老師習慣先把物件的架構（元素大小、內距、外距）指定好，再套顏色與框線，最後才是字體。在 CSS 先加 * 米字號，代表沒有指定特定標籤、選擇全部的元素，可以先設定整份文件的框線、字體、Position… 等。以設計名片來說，先調整 width、height 把名片大小做出來 ➠ 用 padding 設定內部文素跟框線的距離 ➠ 用 margin 設定物體與外層元件框架的距離，來把名片放到頁面中間，用 margin-left: auto; margin-right: auto 左右邊就會給一樣的大小，得到左右置中的名片；垂直置中有點麻煩，所以先設定 margin-top 就可以 ➠ 調整名片內容物件的大小，譬如 namecard 裡面的 h2 在 CSS 要做設定是打 .namecard h2{} 去改變字體，如果 h2 裡面還有包一個 span 則是打 .namecard h2 span{} 做調整。這時就會發現，如果在最前面 *{} 整份文件先設定好字體，就不用來來回回一直改動內容文字的字體，很方便。

這時，畫面上除了名片以外，會看到外面有兩個黑框框，最外面的是 html 整份文件，而裡面的則是 body。而我們希望網頁是整頁的，所以在 CSS 可以一起設定 html, body{} 就能同時套用到兩者，width: 100%; height: 100%; 就設定為滿版了；預設的 body 是有 padding 的，會離外面的 html 有段距離，所以還要再加上 padding: 0px; margin: 0px; 外層框框就能完整地貼著視窗 ➠ 先單獨設定 body 的顏色，CSS 打 body{background-color: } 做設定，再去 namecard 調整背景顏色 ➠ 如果想在名片裡加上圖形，比如圓圈，去 namecard 裡的 html 再新增 circle 的 class，想放兩個不同屬性的圈圈則 class 可以打 .circle.circle1 和 2 按 tab 展開，就有兩個元件可以放圈圈 ➠ 因為頁面上只有這裡有 circle，CSS 可以直接打 .circle{} 調整寬高，會先看到兩個框框，要變成圓的需要設定 border-radius: 100%; 才能全部變成圓弧 ➠ 分別針對兩個圓做設定，希望它們在名片中有特定的位置，不參與自動排列，所以 position 要設定為 absolute 針對左上角去定位。這時，如果在 circle 的 CSS 繼續打 right: 100px; 會發現圓跑到右邊去了，為什麼呢？因為如果上層元素不可定位，就會變成對整個頁面做定位，所以我們回到 *{} 把整份文件的 position 設定成 relative，這也是建議在最開始開發時先設定好的 ➠ 在 CSS 打 .circle1{} 及 .circle2{} 設定它的位置，如果想放在右上角，可以設定 right: -50px; top: -50px; 就會類似陷進去鑲嵌在右上角，如果想鑲嵌在圓心，那麼 right 和 left 就設定成圓圈大小的一半。此時如果想調整個別圈圈的大小，也可以各自做設定。

接著，指定框線和顏色，先把一樣顏色的物件找出來，在它們的 CSS 做設定，圓圈本體是 background-color、圓圈邊線是 border，顏色如果是重複可以只打三碼 (比如 #ff2244 可以打 #f24 就好 ➠ 當框線都定義完，去 *{} 把 border 註解掉 (Sublime 快速鍵 crtl + /)，名片大致雛形就出來囉 ➠ 去名片修改想要調整顏色的文字、間距，如果想調整名片整體的設定，可以去 namecard 的 CSS 一起改。有透明度的黑色修正起來比找色票方便，打 rgba(0,0,0,0.1)，rgb 都是 0 代表黑色，第四個 0.1 則是透明度疊加的程度，0.1 很透明、0.5 就差不多 ➠ 圓圈還沒被切掉，先把名片想像成遮罩，只顯示名片範圍內的物件，在 namecard 的 CSS 加上 overflow (可以控制卷軸或顯示的狀態) 定義該元素裡超出去的範圍要如何顯示，打 scroll 可以在小範圍內滑動，也可以指定 overflow-Y 獨立調整；不過我們現在希望超出去的地方都隱藏起來，所以是要打 overflow: hidden 才能把圓多出去的部分切掉 ➠ 調整名片的框線，因為剛剛已經註解掉了整份文件的框線，所以現在要在 namecard 的 CSS 重新加上 border ➠ 如果在 namecard 的 CSS 有改字體，主要改到的會是 p，h2、h5 之類的原先預設字體是不會被調整的，會蓋過整體，想讓 h2 及 h5 的粗細就要額外去它們的 CSS 調整 ➠ 加陰影是 box-shadow，跟 Illustrator 一樣，參數包含 x 偏移指定陰影的 x 位置要偏移多少＋y 偏移＋擴散模糊程度＋外縮內擴程度＋顏色 (老師喜歡陰影有透明度，如果後面有東西看起來是蝶加上去的)；如果 x y 偏移都設為 0，看起來就是從中間直接糊掉，如果 x y 都偏移 10 就會右下有陰影、看起來像是往左上浮，而第四個參數如果給 10 會往外擴、-10 就往內縮，material design 通常是往內縮的，比如 box-shadow: 0px 25px 15px -20px rgba(0,0,0,0.2); 看起來像是浮在桌面上的一張卡片，而不想偏移的話第四個參數就不用打 ➠ 最後想加整個頁面最上和最下的兩條粗框，不用額外加 div，在 body 的 CSS 調整 border-top 和 border-bottom 就可以了；但這時如果滑動頁面，會覺得框線好像是多出來的，因為 CSS 裡框線其實是會佔體積的，如果希望不佔體積可以直接往內縮填滿頁面，則用 border-box 的屬性，在 body 的 CSS 打 box-sizing: border-box，框線體積就算在本體之內，整個頁面就不能滾動了 ➠ 想把標題放在頁面中間、名片下面，因為預設是 block，它的寬度其實是填滿整個頁面的。不過文字左右置中相對來說沒那麼麻煩，在 CSS 打 text-align: center 就會往中央靠齊 (left / right 則是靠左或靠右) ➠ 最後想在頁面最後放個類似浮水印的文字，把 div 加在 namecard 的前面，這時它是自動排列的元素，會把名片擠下去，所以要把 namecard 變成絕對定位，不參與自動排列；接著就能去修改字體大小、字重、顏色，但這時後發現因為字體改的比較大，浮水印的字超出頁面，這樣左右就會可以滑動，那一樣去 body 修改 overflow: hidden 讓多餘的浮水印不會被看到。

https://codepen.io/albieching/pen/poJdpyg

10/ 實務技能簡歷

版面規劃需要遵循「大區塊分割成小區塊」的原則，用 inline-block 處理，分成上、下方，下方可以再切分左、右方，把 padding 變成 0 以後就成為三分版。下方的左右方一起調整的話，CSS 打

.left,.right{
  display: inline-block;
  width: 50%;
}

如此一來，他們會因為 inline-block 被排在同一行 (不是在包住他們的 bottom 去設定)，而 width 設成 50% 則會直接佔版面的一半，但我們發現他還是沒被排在同一行，為什麼呢？先把 width 設成 48%，發現有被排在一起但中間有個空格，這個空格就是 html 裡

<div class="left">left
  </div>
  <div class="right">right</div>

兩個 div 之間的換行，所以如果把它們接在一起，中間空格就會不見。但調回 50% 寬度，還是會掉下去，因為 border 預設是在本來體積外的，所以同樣要援引 box-sizing: border-box 就能把 border 包在裡面，就能排在同一行了。

CSS的預設垂直排列並不是靠上排，所以老師建議在 CSS 的 *{} 加上 vertical-align: top; 多個方塊在同一個 div 裡就會正中定位 middle，改回 top 就可以對齊最上。

工作經驗值相對容易，使用 padding / margin 讓裡面的物件可以隔一段距離，裡面的物件再用 background-color 或 border 做上色，文字則可用 absolute 絕對定位，經驗值的圓圈則用 margin 彼此隔開。進度條可以說是改良版，用 absolute 虛線 (border: dashed) 加上不同階段的位置，用格線切分開來，並在邊界加上圓角。

文字段落的字距、行距要多注意留出來，不要太擠沒有閱讀時呼吸的空間，h1 – h6、p 內文、hr 水平線之間的距離是 margin 來調整。

時間分配圓餅圖，圓是從方塊延伸出來的，border-radius 設定為 100%。在圓裡放一個方塊做絕對定位 ➠ 填顏色 ➠ overflow: hidden 隱藏多餘的部分、超過不顯示，就能得到漂亮的圓餅圖，可以每 90 度用一個方塊來呈現位置，用多個方塊組合後再遮罩掉。transform roate/origin ➠ 變換的原點定義在左下角開始旋轉；rotate 內部元件再 rotate 可以用在拉兩個 div 並把其中一個塞在裡面，文字最後先放在線裡，再用 relative 偏移一段特定距離，字看起來就會在線上而且會跟著跑。

長條圖先用一個 div 包裹很多小 div ➠ 特定邊界註解掉或 border-right / top: none 讓它消失，看起來就會像軸向。特殊應用是調整 width 是 1 或 0，裡面再塞一個圈圈，把長方形 opacity: 0 [0-100%] 隱藏起來之後，就能做到類似點圖的效果。

顏色則先挑選好自己喜歡的主色、輔色和功能性顏色，也能做輔色裝飾，比如方塊裡面裝長條。

補充資料

. w3schools
https://www.w3schools.com/

. HTML

插入圖片：img，src 中放圖片的網址；在網址後可設定屬性，如 width=“300px”
連結文字：連結的文字；想要點進去變成新視窗 -> 連結的文字
UL (unorderlist): 不加編號排列的 list 清單
OL (orderlist): 會自動排列的清單 ->
1. 項目
2. 項目
3. 項目; 想讓左距加大 ->
1. 項目
2. 項目
3. 項目
做導覽列: 用特殊的標籤包起來, 用 nav 或 div (division 分割, 不具備任何屬性的標籤分割; h1-h5 是 div 的特化，有著預設 style 的 div) 都可以, 只是為了區分用。
- 首頁
- 簡介
- 作品
- 聯絡方式
做按鈕: 用 div (不具備任何屬性的元素), 按鈕，在 CSS 就要去處理按鈕的性質 .button{display: inline-block; border: solid 1px black; border-radius: 5px; padding: 10px; font-family: 微軟正黑體;} div 預設的顯示方式是 block, 缺點是會盡可能填滿外面的元素, 用 inline-block 就可以跟內文排在一起, 大小會由內容決定; 希望框線距離內文有點距離 (內距) 則用 padding; 希望對 border 的圓角操作讓他圓圓的。如果現在要新增一個白字黑色背景的按鈕, 而其他性質希望跟其他按鈕一樣, 那麼只要在 css 新增一個 class 如 .black_button{background-color: black; color: white;} 再去 HTML 新增新按鈕那麼效果就是先套用了 button 的樣式表, 然後再套用 black_button 的, 後面 class 裡的樣式如果和前面重複, 或我想修改裡面的元素, 也可以在新的 CSS class 裡直接修改, 會蓋掉之前的 class 樣式
Id 存取: id 存取, CSS 要用井字號存取 #sp_text{color: blue;} 放我要對它改的內容, id 用來標示網頁上獨一無二的元素, 只能有一個, 在原生的 JS 裡要對網頁上的東西進行操作一定要透過 id 存取, 而且只能有一個, 之後的 id 都會被忽略, 只有第一組會被改動, 第二組以後會完全無法辨識
大部分元素預設都是會換行的，分隔 div (不具備任何屬性的分隔), h2 / h3 可視為 div 的特化; 想把字打在同一行可用 span 標籤, 預設不換行
加入水平線:
在 HTML 加上 class 並在 CSS 做調整。如標題，在 CSS 寫 .redtext{color: red;} 這樣就只會改到該 h1！
用 HTML 調整外觀，但一般偏好分開來寫，否則蠻混亂：想改變元素顯示的方式，要加上 style: 紅的標題字。不過 HTML 的順位還是優先於 CSS，比如標題，即使 CSS 裡 redtext 已經設定小字，但因為在 HTML 又改了字的大小，最後會以 HTML 為主；但一般希望沒有特殊情況就盡量不要用 style
定位: 譬如 CSS 定位方式, 用 div.static 再按 tab 就可以展開成 class 而且會自動填入 -> 會自動排列下來, 會自動排列且可以調整偏移, 可以絕對定位, 會固定在視窗中特定的位置. 此時去 CSS給框框才看得到他們之間怎麼定位 (請看下面 CSS 定位實作案例)
特殊的定位: 如果希望在特定元素中 absolute 定位, 比如給一個大的 div 然後在裡面做定位, 如 HTML: 會自動排列下來可以絕對定位, CSS: .static{position: static; left: 30px; width: 400px; height: 250px;}; relative 也做一樣的調整. 而 .absolute{position: absolute; right: 50px; top: 50px(想針對右上方定位, 離右邊、上面各隔了 50px, 很像直接給座標); width: 100px; height: 100px;}, 然後直接放到 static & relative 的 div 裡 —> static 沒有出現, 因為代表只能用自動排列的位置, 不能調整偏移, 而 absolute 的特性是只能針對可以定位的上層元素 (relative, absolute, fixed) 中做調整、獨特的定位, 此時把原本 HTML 裡面 (上一點) 的 absolute 拿掉會發現他還在, 因為放在 static 裡面的 absolute 抓到這個頁面中的定位, 而不是針對 static 做定位. 所以以後如果希望元素離上層有特定的距離, 如頭貼 absolute CSS 給 top: -50 有時出現在超過框框的位置直接蓋在上面, 可透過 absolute 來實現
Padding 內間隔 / Margin 外間隔: 大框框裡面包小框框, 要記得用 inline-block 上下左右的距離才都可以調; padding 是文字和框線的距離, margin 是該元素和外部包含它的元素、或並排的東西之間的距離有些文字有些文字接著去 CSS .outer{display: inline-block; border: solid 2px black; width: 400px; height: 300px;} .inner{display: inline-block; border: solid 2px black; padding: 10px; padding-left: 30px; padding-right(看到文字左右都和框框撐出一段距離, 注意後面的 CSS 會蓋掉前面的, 故要先設定四邊、再去設定左右兩邊的): 30px; margin-left(如果有並排的物件, 如本範例, 就會看到並排的也會同樣往右推移, 這跟 display 中 relative 不同, relative 不會影響他和其他物件距離, 而網頁多自動排列, 故偏好用 padding/margin 來建構網頁): 20px; margin-top: 20px;}
(1) 調整字體變化: 1.字體的種類對應到 CSS .fdemo_1{font-family: 微軟正黑體;} (2)要調整字體大小, 可以不用再先展開 div 才在 div 中加上 class=“fdemo_2, 可以直接 div.fdemo_2 就按 tab, 它就會直接幫你展開已經包含 class 名稱的 div. 1.字體的大小對應到 CSS .fdemo_2{font-size: 30px;} (3)字體顏色: div.fdemo_3 按 tab 後變成 1.字體的顏色對應到 CSS .fdemo_3{color: blue;} (4)字體的粗細 div.fdemo_4 -> 1.字體的粗細對應到 CSS .fdemo_4{font-weight(兩種表示方式, 第一種 100-900, 100細900粗, 但這和字體種類也有關, 看字體有沒有做那麼多粗細的版本): 900;} (5)字體間距: div.fdemo_5 按 tab 後變成 1.字體的間距對應到 CSS .fdemo_5{letter-spacing: 10px;} (6)字體行距: div.fdemo_6 按 tab 後變成字體的行距
字體的行距
字體的行距對應到 CSS .fdemo_3{line-height(要多行才看得出來): 30px;}
上點如何應用在一篇文章？比方說「陳醫師今年一月到職，對台大 Routine 不熟，大多是 Social Round、蠻快，病人的 Plan 可自己決定」，我想要強調「一月到職」，當然可以在原文中前後加, 但這樣無法改其他東西, 所以用包起來, 不過因為系統預設是 block 會自動換行, 所以可以改用預設就在同一行, 也可以加 class 來掌控他。比如：一月到職, 那就在 CSS .title{font-size: 30px; color: red; font-family: 微軟正黑體; letter-spacing: 10px; line-height: 50px; font-weight: 900;}

. CSS

.body (對整份文件做調整, 所有內容都會被包在裡面) {height: 2000px (網頁就會變很長);}
關於 list: 希望所有東西在同一行排列、看起來像按鈕 -> li{display(顯示的方式): inline-block; border(給框線): 三個屬性 solid (框線樣式, 實線) 1px (框線粗度) black (顏色); border-radius(角落的圓周, 框線角落圓潤): 5px; padding(要讓按鈕看起來可以按, 就要讓字和框線之間有些距離): 5px; padding-left(一般按鈕左右邊寬度會更大): 10px; padding-right: 10px; font-family(字體): 微軟正黑體; font-weight(字體粗細): bold; letter-spacing(文字間距): 1px; background-color(背景顏色): #}
符合標籤的就會一起改動，如 h1{ color: blue; } 的，只要 HTML 有 h1 就會同時變更，但這樣挺麻煩，所以在 HTML 會引入 class 的概念，這樣每個 class 就能做對應修改
Display: 預設是 block, 連續打就會換行 (比如在 html 打了很多個標題而在 CSS 打 .title{display: block; 就會有很多個換行的標題); 把 block 換成 inline: 全排在同一行; inline-block: 表現跟 inline 很像, 不過每個東西都是完整的一塊, 可單獨被操作, 比如可指定元素跟上面的距離 margin-top: 10px 可是如果是 inline 就只能動左右, 上下都不能動; 而如果加上 border: solid 1px black 且用 inline / inline-block 的話, 它的大小是緊緊包著內部元素被撐開的, 而 block 就會換行並充滿每一行. Display 如果變成 none 就完全不會顯示, 用在按完按鈕選項消失、頁面上操作特別的東西不見之後希望不要顯示的屬性改變
想做按鈕的底線, 等於是把 border 下面加粗 -> border-bottom: solid 7px (顏色), 其他 border 取消掉就好; 想做導覽列在按鈕後還有背景, 可在 ul 的 html 新增 class 後再在 CSS 操作, 加上 background-color
元素相對位置/定位: (1) Static (預設排列的位置), 把一個個元件加進去後, 會照著排下來、不能調整位置; (2) Relative (相對預設排列位置), 原本排下來在某個位置, 給他左邊和上面的距離多一點, 就會根據原本排的位置, 偏移特定的距離; (3) Absolute (絕對上層位置) 希望他離左邊、上面特定的距離, 就會出現在相對於左上角點隔一個特定距離, 看要用哪個點做定位都可以; (4) Fixed (絕對視窗位置) 和 absolute 很像, 但是針對視窗 (正瀏覽的螢幕) 做絕對定位, 所以在捲動時不會跟著跑 (如導覽列或蓋板廣告), 但 absolute 會 ;用 left/top/right/bottom四個方向來定義, 如果左距增加就等於往右跑
定位實作案例: 因為所有都是 div, 直接針對所有 div 標籤調整. .div{border: solid 2px; width(寬度): 200px; height(高度): 100px; } 不改變就會預設 static 自動排下來而且不能調整. 再來 (1) .static{position: static(原本就預設如此); left: 30px(打完發現沒有動, 因為本來 static 就不能動);} (2) .relative{position: relative; left: 30px(打完看到開始可以調整偏移位置, 離左邊 30px 就會往右偏 30px); top: 30px(相對往下移 30px);} (3) .absolute{position: absolute; right: 50px; top: 50px(想針對右上方定位, 離右邊、上面各隔了 50px, 很像直接給座標);} (4) .fixed{position: fixed; right: 50px; top: 200px(固定在頁面中特定位置);}
Padding 內間隔 / Margin 外間隔實例: 在 HTML
項目清單
項目清單

＊老師重要補充：如果在pug(jade)中沒有辦法去除空白字元，消除排版時候的空白方式有幾種：
1.包裹層字體大小設定為0 (font-size: 0px)，內部回復一般字體大小 (font-size: initial)，空白就會消失了
2.使用display: flexbox，要再額外設定flex-wrap: wrap，讓超過100%時會自動換行，會忽略空白直接排版，省去調整字體的問題。
3.使用float: left 讓元素靠左漂浮但高度參考會消失不推薦

基礎 HTML / CSS 筆記

大標題

補充資料

Leave a Reply Cancel reply