基礎 HTML / CSS 筆記

In Coding By Sigrid On
基礎 HTML / CSS 筆記

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 的定位改變方式，是用左 / 右 / 上 / 下距來作定義，左距增加就往右跑，以此類推。

吳哲宇老師繪製

分成四種定位模式：

吳哲宇老師繪製
  1. Static – 預設排列位置，把一個個元件加進來的時候，它會照著換行排下來，而且不能調整位置或偏移
  2. Relative – 為了偏移原本預設的位置，我們使用相對預設排列位置，設定左邊、上面的距離多一些，物件就往原本位置偏移特定的距離，跑到右下方
  3. Absolute – 絕對上層位置，給定左邊與上面的距離，物件就會出現在相對於左上角點隔的一個特定距離，捲動畫面時會跟著跑，做頭貼就能用 Absolute 做到超出邊框的效果。Absolute 也可以給個大 div，讓元素在裡面做定位，但只能針對可以定位的上層元素做調整，所以 Static 就不行、即使在 Static 的 div 裡放它，它也只會針對整個頁面去做定位；只有在 Relative、Absolute、Fixed 三種屬性的元素中做獨特的定位
  4. 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 讓元素靠左漂浮 但高度參考會消失不推薦

14,653 thoughts on “基礎 HTML / CSS 筆記”

  686. Hi there, I found your website by way of Google while looking for
    a similar subject, your web site came up, it looks good.
    I’ve bookmarked it in my google bookmarks.
    Hello there, simply become alert to your blog via
    Google, and located that it’s truly informative.

    I’m going to watch out for brussels. I’ll be grateful for those who continue this in future.

    Lots of people will probably be benefited from
    your writing. Cheers!

    Reply

  817. Consulta i dettagli sull’utilizzo dei Bonus BetFlag alla voce Bonus. Askbonus dichiara ufficialmente che tutte le informazioni disponibili sul nostro portale sono solo a scopo di intrattenimento. Non stiamo in alcun modo chiedendo o insistendo per giocare a qualsiasi gioco da casinò. Scriviamo recensioni basate sulle esperienze dei giocatori di tutto il mondo. Anche le aziende innovative sono in prima linea per combattere il cambiamento climatico. A Milano, per esempio, ne è nata una che cattura l’anidride carbonica nell’aria e la stocca per evitare che finisca nei mari acidificando l’acqua. E c’è chi si occupa di monitorare i rifiuti e utilizza l’intelligenza artificiale per gestire la differenziata. Ma attenzione al bonus fiscale. Sono sempre più numerosi i casinò online che offrono questo tipo di bonus. Tuttavia, un bonus di 10 euro senza deposito non è il tipo di bonus più comune in circolazione. Ma è uno dei migliori disponibili. È probabile che sia i casinò desktop che quelli mobili offrano questo tipo di bonus, per cui è possibile accedervi su una vasta gamma di piattaforme.
    https://cesarpyos355260.blog-ezine.com/21096311/herní-automaty-za-peníze
    Titul je vyprodaný. Buďte první, kdo napíše příspěvek k této položce. Prodejny Testováno dětmi Klub hraček Kontakt Nemáte ještě účet na maxik.cz? za dobrou cenu základní sada Sada na poker pro vášnivé hráče! Sada na poker pro vášnivé hráče! Zábava na pokraji hazardu, vášeň, životní styl, to vše je poker. Krásné Vánoce a rok 2014 podle vašich představ přeje Všechny kategorie Sada na poker pro vášnivé hráče! Zábava na pokraji hazardu, vášeň, životní styl, to vše je poker.  Balení obsahuje:200 žetonů 11,5 gramůDvě sady karet5 hracích kostekŽeton Dealer 619,01 Kč bez 21% DPH Ale nezoufejte, pomůžeme vám najít podobný. Počet hráčů: 2+ prodej skončil Sada na poker pro vášnivé hráče! Zábava na pokraji hazardu, vášeň, životní styl, to vše je poker.

    Reply

  849. Do you want to become a Canadian citizen and have a business?

    Canadian business immigration programs offer opportunities for entrepreneurs and investors to establish and expand their businesses in Canada. These programs typically include options like the Start-Up Visa Program, Provincial Nominee Programs, and the Work Permit Programs. They provide a pathway for eligible individuals to obtain permanent residency in Canada by making significant investments or starting and managing businesses, contributing to the country’s economic growth and development.

    “Unlock the secrets to business success! Read our article now and take your business to new heights. Click here to get started.”

    https://arnikavisa.com/canada-investor-visa-learn-about-investment-immigration

    Reply

  887. Hello this is kinda of off topic but I was
    wondering if blogs use WYSIWYG editors or
    if you have to manually code with HTML. I’m starting a
    blog soon but have no coding know-how so I wanted
    to get advice from someone with experience.
    Any help would be enormously appreciated!

    Reply

  889. I’m really enjoying the design and layout of your blog. It’s a
    very easy on the eyes which makes it much more enjoyable for me
    to come here and visit more often. Did you hire out a
    developer to create your theme? Exceptional work!

    Reply

  895. My spouse and I stumbled over here by a different web page and thought I
    should check things out. I like what I see so now i’m following you.
    Look forward to going over your web page repeatedly.

    Reply

  896. Just wish to say your article is as surprising.
    The clarity for your submit is just excellent and i can think you’re an expert in this subject.
    Fine along with your permission allow me to snatch your RSS feed
    to keep up to date with approaching post. Thanks 1,000,000 and please keep up the gratifying work.

    Reply

  897. My spouse and I stumbled over here from
    a different web page and thought I may as well check things out.

    I like what I see so now i’m following you. Look forward to exploring your web page for a second time.

    Reply

  898. Greetings! I know this is somewhat off topic but I was wondering if you
    knew where I could locate a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

    Reply

  899. My partner and I stumbled over here coming from a different web address and thought I might as well
    check things out. I like what I see so i am just following you.
    Look forward to looking into your web page again.

    Reply

  965. It is perfect time to make a few plans for the future and
    it is time to be happy. I’ve read this post and if I could I desire to counsel you
    few interesting issues or suggestions. Perhaps you could write subsequent articles referring to this article.

    I wish to learn more things approximately it!

    Reply

  979. Hi, unfortunately, I faced challenges with the slow loading speed of your website, leading to frustration. I recommend a service, linked below, that I’ve used personally to significantly improve my website speed. I really love your website…

    Reply

  1029. Hi there would you mind letting me know which web host you’re utilizing?
    I’ve loaded your blog in 3 different internet browsers and I must say this blog loads
    a lot faster then most. Can you recommend a good web hosting
    provider at a fair price? Kudos, I appreciate it!

    Reply

  1051. Right here is the perfect webpage for everyone who wishes to understand
    this topic. You understand so much its almost tough to
    argue with you (not that I personally would want to…HaHa).
    You certainly put a brand new spin on a subject that has been written about for a long time.
    Wonderful stuff, just great!

    Reply

  1162. Hi there to all, for the reason that I am genuinely keen of reading this website’s post to be updated on a regular basis. It carries pleasant stuff.

    Reply

  1517. Когда выйдет холоп 2. Холоп 2. Скачать фильм холоп. Холоп 2 смотреть онлайн бесплатно. Фильм холоп актеры. Холоп 2 смотреть онлайн бесплатно в хорошем. Холоп фильм смотреть онлайн бесплатно в хорошем качестве. Холоп фильм 2024 смотреть. Холоп смотреть бесплатно.

    Reply

  1528. Immediately ended up reading your blog site, and I’m merely impressed! The method every word is masterfully composed is stunning. The deepness of the subjects covered and the quality of expression show commitment and passion for sharing knowledge. Congratulations to the writer for creating such a appealing and inspiring room. I wish every person a Happy New Year full of success, health, and new accomplishments, consisting of the talented author of this blog site! May the coming year bring much more radiance to your words and inspiration to all readers. ✨. Congratulations to the author for producing such a interesting and inspiring space. I wish everyone a Happy New Year filled up with success, health and wellness, and new achievements, consisting of the talented writer of this blog site! May the coming year bring even much more brilliance to your words and ideas to all readers.

    Reply

  1567. Luar biasa blog ini! 🌟 Saya sangat menyukai bagaimana penulisannya memberikan pengetahuan yang mendalam dalam topik yang dibahas. 👌 Artikelnya menghibur dan mendidik sekaligus. 📖 Tiap artikel membuat saya tambahan rasa ingin tahu untuk membaca yang lainnya. Teruskan kerja yang bagus

    Reply

  1594. Обучение персонала по теме лидерства. Женское лидерство в инвестициях. Ситуационная теория лидерства общая характеристика. К харизматическому типу политического лидерства. Стратегии лидерства. Согласно личностной теории эффективность лидерства определяется.

    Reply

  1615. Получите перетяжку мягкой мебели с гарантией качества
    Перетяжка мягкой мебели : простой способ обновить интерьер
    Качественное обслуживание перетяжки мягкой мебели
    Легко и просто обновить диван или кресло
    ремонт и перетяжка мягкой мебели https://www.peretyazhkann.ru.

    Reply

  1620. Проведение сильных любовных приворотов по фотографии.

    Обратиться к магу за приворото, почитать отзывы mirprivorotov.ru.

    черный приворот на возврат жены

    Reply

  1641. Аренда VPS и VDS сервера – Dedicated Server
    – Почасовая оплата
    – Отлично РїРѕРґС…РѕРґРёС‚ РїРѕРґ XRumer + XEvil
    – Отлично РїРѕРґС…РѕРґРёС‚ РїРѕРґ A-Parser
    – Управляйте серверами РЅР° лету.
    – Круглосуточная техническая поддержка – бесплатно
    – Windows – 2022, 2019, 2016, 2012 R2
    – Для сервера сеть РЅР° скорости 1 Гбит!
    – Супер (аптайм, скорость, РїРёРЅРі, нагрузка)
    – Скорость порта подключения Рє сети интернет — 1000 РњР±РёС‚/сек
    – Отлично РїРѕРґС…РѕРґРёС‚ РїРѕРґ GSA Search Engine Ranker
    – Более 15 000 сервер уже РІ работе
    – Отлично РїРѕРґС…РѕРґРёС‚ РїРѕРґ CapMonster
    – Отлично РїРѕРґС…РѕРґРёС‚ РїРѕРґ Xneolinks
    – Возможность арендовать сервер РЅР° 1 час или 1 сутки
    – Автоматическая установка Windows – бесплатно
    – Ubuntu, Debian, CentOS, Oracle 9 – бесплатно
    – Быстрые серверы СЃ NVMe.
    – Мгновенное развёртывание сервера РІ несколько кликов – бесплатно
    – Дата-центр РІ РњРѕСЃРєРІРµ Рё Амстердаме
    – Windows – 2012 R2, 2016, 2019, 2022 – бесплатно
    – Outline VPN, WireGuard VPN, IPsec VPN.
    – FASTPANEL Рё HestiaCP – бесплатно

    Reply

  1646. Аренда VDS или VPS сервера
    – Windows – 2022, 2019, 2016, 2012 R2
    – Отлично подходит под XRumer + XEvil
    – Управляйте серверами на лету.
    – Круглосуточная техническая поддержка – бесплатно
    – Outline VPN, WireGuard VPN, IPsec VPN.
    – Быстрые серверы с NVMe.
    – Автоматическая установка Windows – бесплатно
    – Отлично подходит под GSA Search Engine Ranker
    – Отлично подходит под CapMonster
    – Дата-центр в Москве и Амстердаме
    – Почасовая оплата
    – Возможность арендовать сервер на 1 час или 1 сутки
    – Отлично подходит под A-Parser
    – Для сервера сеть на скорости 1 Гбит!
    – Мгновенное развёртывание сервера в несколько кликов – бесплатно
    – Отлично подходит под Xneolinks
    – Скорость порта подключения к сети интернет — 1000 Мбит/сек
    – Windows – 2012 R2, 2016, 2019, 2022 – бесплатно
    – FASTPANEL и HestiaCP – бесплатно
    – Более 15 000 сервер уже в работе
    – Супер (аптайм, скорость, пинг, нагрузка)
    – Ubuntu, Debian, CentOS, Oracle 9 – бесплатно

    Reply

  1735. Отремонтировать мягкую мебель в доме: Придать новый вид старой мебели: Как перетягивать мебель своими руками: Нюансы ткани для перетяжки мягкой мебели: секреты выбора
    обивка мебели.
    Нужна ли перетяжка мягкой мебели каждые несколько лет?

    Reply

  1746. Pcm тестирование онлайн.
    Пример словесно логического мышления.
    Какой смысл ученые вкладывают в слова индивид личность являются. Какие известные личности могут служить для вас примером в жизни и почему.
    Отражение предметов и явлений в совокупности их свойств и частей.
    Что отличает человека от животного обществознание 6 класс тест ответы 1 вариант.

    Что означает рациональный выбор приведите
    пример. Что является предметом психологии как науки тест с ответами.

    Reply

  2379. Анализ цветов на картинке. Неадекватное восприятие действительности.
    Кто ввел термин психология в научный оборот. Какие темы можно изучить для саморазвития. Индивиду.
    Какие качества относят к третьему высшему уровню индивидуальности.

    Тактильный кто это. Красивые
    книги фото.

    Reply