前端
前端語言是讓瀏覽器讀取的語法（通過瀏覽器來視覺化），主要跟顯示＆排版有關。
前端跟後端明顯的差別在於，前端裡運算的東西，不會寫入主機裡儲存，重新整理以後會回到原始狀態。ex:頁籤被按下去以後，樣式有變化，重新整理後會回復成原始樣式。
如果是要把資料傳回主機的話，就要後端程式 。ex:顯示瀏覽人次的功能，每次有人載入網頁後，要在計數器加一，並且傳回主機裡面儲存，下次再有人載入網頁，再把計數器拿出來加一，就會比一開始多二 。
常見的前端語法html、css、javascript等等逐一簡介
HTML是網頁裡面所有的元素（我自己覺得元件會比較貼切），CSS是網頁元素的排列方式以及樣式，javascript是網頁裡面讓瀏覽器運算的功能。
當然三者會有重複的功能，例如html中本身就可以寫入一些樣式，你也可以透過javascript移除或增加一些網頁元素。
壹、HTML
HTML是網頁裡面所有的元素
一、基本規則
例子一
<head>
<title>基本語法教學</title>
<meta name="keywords" content="teach">
<link rel="stylesheet" href="/css/master.css">
</head>
<body>
<div class="displaywords"id="displaywords1"style="display:block;">
<p>顯示的字</p>
</div>
</body>
1.網頁架構
一個網頁基本上會有例子一中的head和body兩個標籤，head大部分是肉眼看不到的資訊，記載這個網頁的基本資訊，以及連結其他的功能文件，像是串連樣式表，或是連結你的google analytics分析。
body裡面就都是真的看得到的元素，一般部落格寫手或是網路行銷人員可以編輯的都是這個部分。
2.閉合
從<字母>到有一撇的就是完整的閉合，例子一所示<head>到</head>就是一個完整的元素，中間還可以夾其他的元素，上面的head中間就還夾著<title><meta><link>這三個元素。
那html中有幾種元素中間是不能再夾東西的就不用閉合，包括:
A.連結<link>（連結資源）
B.給瀏覽器看不會顯示（視覺化）的標籤<meta>
C.換行<br>
D.分斷線<hr>
E.圖片<img>等等
3.父元素子元素
簡單來說就是包覆的概念，例子一所示head中間就還夾著<title><meta><link>這三個元素，這三個元素就是head的子元素；head就是這三個元素的父元素。
這種階層的關係會讓已經設定的樣式延續繼承下去，(子元素預設父元素的樣式)。
＊請把例子二的code打入文字框內並按下我打好了
例子二
<div name="div1"style="color:red;background:#aaa;padding:3px">
<p>div1的子元素</p>
<div name="div2"style="color:blue;background:#bbb">
<p>div2的子元素</p>
<p style="color:yellow;">div2的子元素二號自我設定</p>
</div>
</div>
按我打好了在這邊顯示喔！
我打好了
深灰色的區塊就是整塊div1，淺灰色的區塊就是整塊div2。
div1的子元素繼承了div1的紅色的字的樣式設定，div2的子元素同時繼承了div2和div1的字的顏色樣式設定，但是比較內層的是div2所以蓋掉了div1的紅色字的設定。
div2的子元素二號因為自己就有黃色字的設定所以同時蓋掉了從div1和div2繼承來的設定。
所以從電腦的角度來看他是從div1>div2>div2的子元素這個流程讀入，所以越後面的設定會覆蓋前面的設定，換一個比較好記的方式就是，對越細部的元素做的設定，他的優先度越高。
4.閱讀性
因為html上述的階層關係，要找一個元素，很常時候會需要看上下階層，所以在編輯的時候會讓位在相同階層的元素齊頭，下一階層的元素都統一再空兩格（tab按一次），來增加文件的易讀性。可以看例子一和二。
二、元素elements標籤tag
例子三
<div class='divgroup'id="abc"style="color:red;">
</div>
<>之間夾的字或是</>之間夾的字我們叫做標籤（tag）他定義了這個元素是什麼，上面例子三<div>說明了這個元素是一個區塊(div)。
我們就針對一些常用的標籤來介紹。
常用標籤一覽表
| 標籤名稱 | 瀏覽器預設情況下的特性 |
| p | 文字段落，跟span很像但是在排版上他是一行文字，就算只有一個字也佔一整行 |
| span | 段落內文字，跟p很像但是在排版上他比較像是文字塊，文字有多少他就有多大 |
| h1 | 標題文字段落，類似p，在排版上一次就一行，但是他的字會加粗加黑。隨著數字變大，文字大小越小 |
| h2 | 標題文字段落，跟h1一樣，但是字比較小，一般極限就用到h4 |
| div | 在網頁上分隔出一個區塊。預設情況一次就是一列，連續寫兩個div會是上下排。 |
| a | 俗稱錨點，我會說超連結，屬性是像span的段落內文字，但是可以在裡面夾圖片 |
| img | 圖片元素，像文字一樣排列 |
| video | 影片元素 |
| kbd | 鍵盤輸入 |
| iframe | 嵌入式視窗，可以跨網域嵌入資料，像是youtube |
| form | 表單，可以向主機傳回資訊 |
| input | 表單裡的元素，可以讓使用者輸入值 |
| textarea | 表單裡的元素，可以讓使用者輸入文字 |
| button | 按鈕，有預設的按鈕樣式 |
| ol | 數字排序列表 |
| ul | 符號標示列表 |
| li | ol和ul列表裡的細項 |
| table | 表格 |
| colgroup | 表格裡呼叫欄的群組，放在table裡面 |
| col | 表格裡欄群組的細項，放在colgroup裡面 |
| tbody | 表格內容，放在table裡面 |
| tr | 表格裡的列，放在tbody裡面 |
| th | 表格裡的標題欄位，和td是一樣的，但是預設字會帶粗體，要放在tr裡面 |
| td | 表格列裡的欄，要放在tr裡面 |
| i | 符號 |
| script | 外掛插件或是網頁功能，javascript插入時要用，後面會說到 |
| style | 設定樣式時(網頁內css)要用，和屬性的style功能一樣，後面會說到 |
| title | 網頁的標題，這和屬性裡的title是兩個不一樣的東西，寫在head標籤裡 |
| meta | 網頁的設定，，寫在head標籤裡 |
| br | 斷行符號 |
| hr | 斷頁線 |
| <!----> | 讓瀏覽器跳過不讀取 |
這邊有幾個比較困難理解的元素要解釋一下
1.table系列
*把例子四打進對話框並按下我打好了
例子四
<table>
<colgroup>
<col style="background:#ccc">
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>第一列第一欄</td>
<td>第一列第二欄</td>
<td>第一列第三欄</td>
</tr>
<tr>
<td>第二列第一欄</td>
<td id="td1">第二列第二欄</td>
<td id="td2">第二列第三欄</td>
</tr>
<tr>
<td>第三列第一欄</td>
<td id="td3">第三列第二欄</td>
<td id="td4">第三列第三欄</td>
</tr>
</tbody>
</table>
按我打好了在這邊顯示喔！
我打好了
可以看到一個列就是一個tr，要幾欄就要在每個tr裡放入幾個td，像是例子四是三乘三的表格，所以要有三個tr，每個tr裡要有三個td
colgroup就是把一整欄變成一個群組，colgroup裡面的第一個col就是指第一欄，他的樣式會被繼承給下面所有列的第一欄。另外要注意，每列有幾欄，colgroup裡面就要有幾個col
td有兩個屬性比較特殊，就是colspan（橫的佔幾欄）、rowspan（直的佔幾行），現在把id="id1"的td改成<td id="td1"colspan="2">第二列第二欄</td>，然後按我打好了
第二列第三欄被擠出來了對吧，所以要刪掉id="td2"的td
現在先複製例子三貼上，並回復成原始表格，然後再把id="id1"的td改成<td id="td1"rowspan="2">第二列第二欄</td>，然後按我打好了
因為上面那格往下延伸了一行，所以第三列的第二欄跟第三欄都會被往後擠，要刪掉多出來的id="td4"這個td
從這邊可以發現，colspan跟rowspan只能往下或是往右延伸，並且原本的td元素都會被往右擠，這要特別注意
2.ol、ul系列
＊把例子五打進文字框並按下我打好了。
例子五
<p>我只是要讓大家對照下面的排版而已</p>
<ol>
<li>第一細項</li>
<li>第二細項</li>
</ol>
<ul>
<li>第一細項</li>
<li>第二細項</li>
</ul>
按我打好了在這邊顯示喔！
我打好了
ol就是會有數字、ul就是會有項目符號在前面，他們裡面的細項都是li。ol跟ul都有預設的空行，而li預設是像p一樣的字行元素。
ol可以透過start的屬性來控制從哪個數字開始。
3.<!---->
＊把例子六打進文字框內並按下我打好了
例子六
<p>我只是要讓大家對照下面的排版而已</p>
<!--我裡面的東西是不會顯示的喔-->
<p>我只是要讓大家對照下面的排版而已</p>
按我打好了在這邊顯示喔！
我打好了
<!--裡面的字-->裡面的字是不會被讀取到的，這個元素常見於在寫備忘錄，或是標示網頁裡面的東西的作用，因為一個頁面可能是由數人合作完成，在每個人的邏輯之下，寫程式的習慣也不一樣，所以需要一些提示來幫助他人理解程式內容，也能加速找東西的速度。另外還會作為刪除東西的做法，有時候要回復已刪除的文字很困難，這時候就會把要刪除的元素用<!---->包覆起來，下次只要拿掉<!---->就可以回復。要注意的是前面跟後面各要兩個橫槓。
4.p、span、div
這邊要解釋一下行元素跟行內元素的概念＊把例子七打進文字框內並按下我打好了
例子七
--寫法正確--
<p style="background:#ccc">我是一個文字行
<span style="background:#000;color:#fff">我是一個行內文字</span>
</p>
<div style="background:#aaa">我是一個區塊
<p style="background:#ccc;">我是一個文字行</p>
<p style="background:#ccc;">我是一個文字行</p>
</div>
--寫法錯誤--
<span style="background:#000;color:#fff">我是一個行內文字
<p style="background:#ccc">我是一個文字行</p>
</span>
按我打好了在這邊顯示喔！
我打好了
文字行下面只能再加入行內元素，相對的行內元素是不能再包含行元素的，顯示起來會像兩個位在同階層的元素。p包含p也是顯示像同位階的元素。
如果要包含兩個p的話就只能用div區塊了
三、屬性attributes
例子八
<div class='divgroup'id="abc"style="color:red;">
</div>
屬性就是寫在標籤之後>之間的東西，例子八中<div標籤之後一直到>之前的都是在定義div這個元素的屬性，記得要用空格空開標籤和屬性，而每一種標籤後面可以定義的屬性都不一樣。
屬性的寫法是id(屬性名稱)加上＝（對屬性名稱定義）"abc"（兩個點點表示中間夾的東西是字串，就是定義的值）
例子八中div這個元素的class屬性被定義叫做divgroup，他的id被定義成abc，他的樣式加入了color:red;的定義（現在不會沒關係，我們css的地方再介紹） 我們下面拿常用的屬性來介紹。
1.class
class能給任何種類的元素使用，就是把很多的元素做成一個群組。
＊請把例子九的code打入文字框內並按下我打好了
例子九
<div class='divgroup'id="div1">div1裡的字
</div>
<div class='groupgroup'id="div2">div2裡的字
</div>
<div class='divgroup'id="div3">div3裡的字
</div>
<div class='groupgroup'id="div4">div4裡的字
</div>
<style>
.divgroup{
color:blue
}
</style>
按我打好了在這邊顯示喔！
我打好了
例子九中div1跟div3裡面的藍字因為後面樣式設定裡用.divgroup就完成了這個群組的樣式設定
現在再把<style>標籤裡面的".divgroup"換成".groupgroup"，（一定要有點點，點點跟字中間不能有空格喔）再重新按一次我打好了試試看！
你會發現你現在是針對groupgroup這個群組做藍色的字這個設定。
2.id
id能給任何種類的元素使用，id就是對特定的元素給予一個獨一無二的識別字號，因為是獨一無二的，所以同一頁面中一個id只能給一個元素，不能同時有複數個元素使用相同id。
id最大的用處就是讓瀏覽器精準地找到你要的元件。
*把例子十的code貼進去文字框並按下我打好了
例子十
<div class='divgroup'id="div5">div5裡的字
</div>
<div class='groupgroup'id="div6">div6裡的字
</div>
<style>
#div5{
color:blue
}
</style>
按我打好了在這邊顯示喔！
我打好了
現在就是針對div5來設定藍色文字，現在你也可以試試看把#div5換成#div6
3.src
src就是來源source的縮寫，常常是給img、iframe、video或是script作為外部文件導入用的屬性，意思是去抓來源網址的內容
*把例子十一的code貼進去文字框並按下我打好了
例子十一
<img src="https://www.tkbgo.com.tw/tkbgo/images/tkbgo_logo.png"style='max-height:100px'>
<iframe src="https://www.youtube.com/embed/0FPV6muy1BE"style='max-height:100px'>
</iframe>
按我打好了在這邊顯示喔！
我打好了
img的圖片來源最後面一定要打出檔案類型，jpg、png、gif都是常用的檔案類型，尤其是png因為可以去背，所以可以壓在網頁背景上。
4.alt
alt是給img圖片標籤用的屬性，alt就是alter當圖片不能顯示的時候就會代替顯示出來的字。
*把例子十二的code貼進去文字框並按下我打好了
例子十二
<img src="https://www.tkbgo.com.tw/tkbgo/images/tkbgo_logo"alt="tkbgo_logo代替品"style='max-height:100px'>
按我打好了在這邊顯示喔！
我打好了
圖片不能顯示吧～因為我網址後面沒加檔案類型，所以代替顯示的會換成alt的字"tkbgo_logo代替品"。
5.href
href是給標籤a用的屬性，是超連結的意思，按下去以後會跳轉畫面。有兩個主要用途一個是把畫面帶往其他頁面，另一個是把畫面帶往同一個頁面中的特定元素
*把例子十三的code貼進去文字框並按下我打好了
例子十三
<a href="#example10">前往例子十</a>
<a href="https://www.google.com"target="_blank">前往google</a>
按我打好了在這邊顯示喔！
我打好了
點擊前往例子十試試看，頁面會跳轉。這邊href後面跳轉的目標是指定一個頁面中元素的id
點擊前往google試試看，頁面會另開分頁跳轉。記得如果是跳往其他網頁前面網址一定要從http開始打，另外這邊會另開分頁是因為有用target屬性定義開啟方式
6.target
target是給a標籤用的屬性，定義頁面跳轉的方式，有兩種比較常用的方式：
A._blank在瀏覽器的新頁籤中開啟
B._self在瀏覽器原本的頁籤中開啟（如無另外設定瀏覽器就會用這個預設）
例子十四
<a href="#example8"target="_blank">_blank新頁籤開啟</a>
<a href="#example8"target="_self">_self原頁籤開啟</a>
按我打好了在這邊顯示喔！
我打好了
7.title
可用於有顯示的標籤，像是img圖片、p文字段落、span特定文字，title的作用是當滑鼠滑過去的時候可以顯示一段提示。
*把例子十五打進文字框試試看吧
例子十五
<p title='我是一段文字的意思'>我是P標籤內的文字</p>
<a href="https://www.google.com"target="_blank"title='按了我會前往google'>前往google</a>
<img src="https://www.tkbgo.com.tw/tkbgo/images/tkbgo_logo.png"style='max-height:100px'title='我是TKB購課網的logo'>
按我打好了在這邊顯示喔！
我打好了
8.type
type定義了這個標籤的種類，常用在script、input等，定義script的文字編碼方式、input的輸入類型。
9.style
style就是設定這個特定元素的樣式。和css有著一樣的功能，我們就留著在介紹css的時候再詳述
貳、CSS
CSS是網頁元素的排列方式以及樣式
一、基本規則
css會出現在三種地方，一個是外連的樣式表(stylesheet)用.css作為結尾的檔案類型，通常會在網頁的head裡面用link來插入，並且套用在整個全域網站裡。
第二個是在網頁html文字檔內用style標籤寫入，通常是用在對單個頁面做統一的樣式設定。
第三個就是在各個標籤內用style屬性來對單一元素設定樣式。
就如上面所說的會有樣式覆寫的問題，一樣對越細的元素做的設定顯示的優先度會越高。
例如用stylesheet針對id比針對class做設定優先顯示id的;用html對單個元素用屬性寫比用標籤style設定class，前者的優先度也較高。
1.閉合及完整語句
因為在stylesheet跟html裡面都可以寫，所以寫法上是會有些微的差別。
例子十六
被選取的元素{
屬性:值;
屬性1:值;
}
.className{
color:#000;
margin:5px;
}
例子十六是寫在stylesheet裡面的寫法，先寫被選取的元素然後用{和}包住所有樣式設定，然後就可以再寫下一個。
那樣式的屬性跟值要用：分開，樣式跟樣式中間要用；分開。
這邊要用註解的話，要用/*註解文字*/夾起來，在讀stylesheet的時候就會被瀏覽器跳過。
例子十七
<style>
被選取的元素{
樣式屬性:值;
樣式屬性1:值;
}
.className{
color:#000;
margin:5px;
}
</style>
<div style="樣式屬性:值;樣式屬性1:值;"></div>
例子十七是寫在html裡面的，就要用style標籤來框住所有的樣式碼
最後如果是要寫在元素裡面則是對div的style做設定，然後把所有的樣式用“跟”框住，中間樣式也要用;和:區分值和屬性。
這邊要用註解的話就跟一般的html一樣用<!--註解文字-->就可以了。
2.selectors 選取物件
selector就是跟瀏覽器說，你現在要針對哪個元素來做調整。要特別注意名稱前面的符號，那代表選取不一樣的元素。
例子十八
<style>
#id{
background:blue;
padding:5px;
}
.democlass{
background:red;
padding:5px;
}
</style>
<div class="democlass"></div>
<div class="democlass"id="id"></div>
按我打好了在這邊顯示喔！
我打好了
| Selector | 舉例 | 解釋 |
|---|---|---|
| .class | .intro | 前面加"."是選取所有class名稱是"intro"的元素。 |
| #id | #firstname | 前面加"#"是選取ID名稱是"firstname"的單個元素。 |
| * | * | 選取所有元素。 |
| element | p | 前面不加任何符號是選取標籤，舉例是選取所有p標籤。 |
| element,element | div, p | ","是和的意思，可以一次選取多個元素。例子中是選取所有div和p標籤。 |
| element element | div p | 空格是選取在元素裡面的元素，例子中是選取所有在div標籤裡面的p標籤。 |
| element>element | div > p | 選取特定元素的子元素，跟空格不一樣的是，空格有可能選到子元素的子元素，但是>只會選到下一層子元素。 |
| [attribute] | [target] | 選取所有有特定html屬性的元素，例子中是選取所有有target屬性的元素。 |
| [attribute=value] | [target=_blank] | 選取所有特定屬性跟值的元素，例子中是選取所有有target=_blank的元素。 |
| :active | a:active | 選取所有被點擊過的元素，例子中是選取有被點擊過的連結。這裡要注意並不是所有的元素都適用。 |
| ::after | p::after | 在特定的元素後面增加一個物件，例子中就是對所有p標籤後面插入一個物件。 |
| ::before | p::before | 在特定的元素前面增加一個物件，例子中就是對所有p標籤前面插入一個物件。 |
| :first-child | p:first-child | 選取是第一個子元素的元素，例子中是選取是第一個子元素的所有p標籤。 |
| :nth-child(n) | p:nth-child(2) | 選取是第n個子元素的元素，例子中是選取是第2個子元素的所有p標籤。 |
| :last-child | p:last-child | 選取是最後一個子元素的元素，例子中是選取是最後一個子元素的所有p標籤。 |
| :hover | a:hover | 選取所有滑鼠指到的元素，手機版不適用，例子中就是選取所有被指到的連結。 |
二、css property & value 屬性跟值
display
設定元素的顯示方式，那有哪些值能選呢？一般常用的有block、inline-block、none等，當然還是有一些content、table、table-cell等等的值可以選，但是那些值都是特定的標籤的預設值，所以一般用不到。
例子十九
<style>
.democlass{
background:red;
padding:5px;
display:block;
width:50px;
}
</style>
<div class="democlass">div1</div>
<div class="democlass"id="id">div2</div>
按我打好了在這邊顯示喔！
我打好了
block就是行元素，就算你寬度有設定不填滿，但是他的白邊(margin)會自動填滿到100%，所以像例子19中連續寫兩個，他會呈現上下排列。
現在把block改成inline-block再送出一次試試看，你會發現兩個方塊變成左右排列，因為他們現在變成行內元素了，要擺滿這行以後才會換行。
這個好處就是說，第一個是元素可以往左排列，第二個是當標籤<a>要設定成像按鈕才不會自動換行。那設定成none很直觀的就是不顯示了，雖然有這個元素，但是不顯示，所以要注意的是這還是會耗損一定的載入速度。
position
這是設定元素要以什麼方式來做基準，放置這個元素，常用的值有relative、absolute、fixed。
例子二十
<style>
.positionrelative{
background:red;
padding:5px;
position:relative;
width:100px;
}
.positionabsolute{
background:blue;
padding:5px;
position:absolute;
width:50px;
}
.positionfixed{
background:green;
padding:5px;
position:fixed;
width:50px;
top:0px;
}
</style>
<div class="positionfixed">div0</div>
<div class="">div1</div>
<div class="">div2</div>
<div class="positionabsolute">div3</div>
<div class="positionabsolute">div4</div>
按我打好了在這邊顯示喔！
我打好了
relative是直接排列跟預設類似，那為什麼還要設定呢，因為position的排列會去找上一個有設定position的元素，所以relative的會跟著relative的排列。
absolute就是從（他原本設定是relative時應該在的位置）開始排列，連續擺放會疊在一起，因為是絕對位置，另外如果有relative的元素在後面會被蓋過去。現在試試看在div4下面再加一個帶有class="positionrelative"的區塊試試看。
absolute常用在要做出圖層效果的地方（搭配css的z-index屬性）。
另外要注意有時候會跑版是因為父元素沒有設定position。
那fixed則是固定在畫面的特定位置上，不會因為畫面滾動而變換位置。
height
在介紹高度之前要先講數值在css裡面要如何輸入。數值可以用兩種方式輸入像素（圖像顯示的最小單位）或是趴數。如果是像素的話比較簡單的，就是固定的數值像是”5px“這就是五個像素的意思。
趴數就比較麻煩，他會隨著螢幕或上層的元素變動而跟著變動，例如輸入50%，在上層元素是100px的時候顯示出來就是50px，上層元素300px的時候顯示出來就是150px。
這邊要介紹幾個跟高度有關的屬性，height、max-height、min-height、line-height。一般來說是不用特地幫元素設定高度的，高度會隨著裡面裝的東西來自動調整高度，但是會有例外像是設定了position:absolute、float、overflow等等就會發生。再來就是為了做效果啦，那例外要怎麼解決就接下來再說。
高度實在沒什麼好解說的，就純粹的中文翻譯max-height是最大高度，min-height是最小高度，height是固定高度，line-height是專門給字行用的例如<p>
margin,padding,border
margin、padding、border都有上下左右，分別是margin-top,margin-bottom,margin-left,margin-right等依此類推。
他們可以用比較省略的方式寫，像是margin:5px;這樣上下左右都是5px，或是可以用空格隔開margin:10px 5px;這樣上下就是10px，左右是5px，或是用四個數值來依序代表上右下左。
margin是元素要和其他元素相隔的距離。
border是元素的邊界，邊界以及裡面屬於這個元素，外面則不屬於這個元素。
padding則是元素裡面的東西跟邊界的距離。
例子二十一
<style>
.padding5{
padding:5px;
width:100px;
}
.green{
background:green;
}
.red{
background:red;
}
.margin5{
margin:5px;
width:100px;
}
</style>
<div class="padding5 red">
<div class="green">div1</div>
</div>
<div class="red">
<div class="margin5 green">div2</div>
</div>
按我打好了在這邊顯示喔！
我打好了
一個元素從最外面到裡面依序是margin>border>padding>width如下圖
margin
border
padding
width
真正屬於這個元素的是從border那層開始到最裡面，所以把code顯示出來，div1的外層我們設定了padding和背景紅色，因為padding也屬於元素，所以也是紅色的。
但是一個是往內縮，一個是往外擴張，應該要長一樣的啊，為什麼div2上下沒有紅框？
而且同樣是設定寬度100px，為什麼一個是設定裡面的元素，一個是設定外框，div1跟div2還是一樣寬呢？
第一個問題是因為div2外框是行元素，試試看對他的外框的display設定成inline-block就會變成一樣了。
第二個問題是因為視覺看到的width應該是border+padding+width才是真正的寬，所以外框設定了100px要再加上2*5px，再減去他的2*5px的padding就一樣是100px了
現在加入這行style='border:5px solid black'在div2，你就會發現徹底跑版啦！
為了免去這個麻煩，對元素設定box-sizing:border-size;padding跟border將不會再增加它的寬度。
這邊要注意的是border要一次設定3個屬性，寬度、邊界類型、顏色，像是border:3px solid #333;
另外margin的數值後面用空格隔開以後打auto可以使這個元素置中，像是margin:5px auto;
width
width比height還有複雜一些，同樣有min-width,max-width,跟width，但因為螢幕有很多種寬度，所以在排版上，一般會限制寬度，讓長度能自由變動。
寬度要特別注意的就是如上所說，真正顯示出來的寬度應該是border+padding+width，所以除了box-sizing:border-size;padding這個方式外。
我們再教一個calc()這個方法。
例子二十二
<style>
.width80{
height:20px;
background:red;
width:80%;
}
.widthcalc{
background:green;
padding:10px;
width:calc(80% - 20px);
}
</style>
<div class="width80">
</div>
<div class="widthcalc">
</div>
按我打好了在這邊顯示喔！
我打好了
把code顯示出來以後發現，第二個綠塊雖然有設定padding，但是居然跟紅色一樣寬也。
因為我們使用calc()讓瀏覽器自己去運算，最後要顯示成80%，所以預先扣掉左右的paading共20px。
calc的好處是趴數跟像素是可以同時存在，同時運算，所以螢幕換的時候還是不會跑版。
這邊要注意的是運算符號要用空格跟數字隔開。
最後還是要跟大家提醒一下圖片設定，如果同時設定高度跟寬度的話很有可能讓圖片比例跑掉，所以一般我們圖片只會設定寬度，讓高度依照比例放大縮小。
再提醒一下網頁圖片盡量要讓他檔案盡量壓縮，載入速度才會快；如果再網頁裡面有不同大小的需求最好上傳不同尺寸的圖片，不要100px的格子用1000px的圖片去縮小，很浪費流量。
top,bottom,left,right
top,bottom,left,right是幫助微調元素位置的設定，只能在position設定成fixed或是absolute的時候才能用。意思是和父元素靠特定方向對齊並設定中間的距離。
例子二十三
<style>
.right{
right:0px;
width:30px;
height:30px;
background:#ff0
}
</style>
<div class="right"style="position:relative">div1
</div>
<div class="right"style="position:absolute">div2
</div>
按我打好了在這邊顯示喔！
我打好了
讓code顯示出來後可以看到，div1並沒有往右對齊，因為position是設定relative，那div2就成功的與框框的右邊距離0px了。
那你會問position:relative的元素要怎麼微調位置？那就是要用margin來微調了，如果要靠右對齊的話就要用float屬性。
這邊要注意數值是可以負數的
background
background有一系列相關的屬性，background-color、background-img、background-attachment、background-size、background-position等等，都是在設定元素的背景。
在開始講之前要先講一下顏色的寫法，可以直接用英文打例如blue，可以用rgba例如rgba(255,0,255,0.5)，也可以用三碼色碼或是六碼色碼例如#fff、#000000。
rgb顏色的原理是三種紅綠藍顏色光合起來是白色，所以rgba(255,255,255,1)是白色，那a是飽和度的意思，1是完全飽和；那色碼的概念就是rgb依序轉成16進位的概念，白色就是#ffffff或是#fff，三碼是數字直接平方的概念（#aaa=#aaaaaa,#555=#555555）
例子二十四
<style>
.bcg1{
width:100%;
height:50px;
background:#ff0
}
.bcg2{
width:100%;
height:50px;
background-image:url('https://www.tkbgo.com.tw/go_edm/edm162/img/background.png');
background-size:cover;
background-position:center;
}
</style>
<div class="bcg1">div1
</div>
<div class="bcg2">div2
</div>
按我打好了在這邊顯示喔！
我打好了
div1很單純的就是上了背景色而已，那我們要來研究的重點是div2，我們用一張網路圖片作為他的背景，插入的方式要注意url後面要有括弧跟點點，接著我們就可以來微調了。
» background-size有cover、contain、auto等等，cover是舖滿整個元素，按照比例放大縮小後比較最小的一邊跟元素等寬
contain剛好相反，是等比放大縮小後較大的一邊跟元素等寬，然後會重複擺放來舖滿。auto則是原始大小。
如果不夠精準可以用兩個數字來調整大小，試試看background-size:50% 70%;，寬會是原本的50%，高會是原本的70%，整個比例就會被拉高了。
» background-position是用來選擇背景如何對齊，可選擇top、bottom、left、right、或是用兩個數字來代表x軸跟y軸的位移量。
試試看改成background-position:50% 100px;。
» 另外background-repeat可以選擇repeat讓圖片一直重複做成像是background-size:contain的感覺;
» 這邊要講比較有趣的background-attachment:fixed;，當螢幕滑動的時候會讓背景定住不動，但是手機是不支持這功能的，現在就把它加上去試試看。
但是要注意的是當你用background-attachment:fixed;後，背景會變成鋪滿螢幕，background-size要重新調整，background-repeat也要跟著調整。
» 最後要講一個進階一點的漸層背景，background-image:linear-gradient(to bottom right,rgba(255,250,250,1)20%,rgba(235,250,250,1)50%,rgba(255,250,250,1)80%)。
background-image:linear-gradient(方向,第一個顏色以及他的位置,第二個顏色以及她的位置,第三個顏色以及她的位置,第n個顏色以及他的位置)，這邊說的位置其實也可以想做比例，要在0-100%之間，那就試試看上面的code吧。
text
這邊要介紹color、text-align、text-decoration、text-shadow這幾個屬性
例子二十五
<style>
.textdemo{
color:#558;
text-align:center;
text-decoration:underline;
text-shadow:3px 3px 3px #99a
}
</style>
<p class="textdemo">div1demo!!!!!
</p>
按我打好了在這邊顯示喔！
我打好了
» color是調整字的顏色，後面就接顏色就可以了。
» text-align是調整字對齊的方式，可以選擇left、center、right
» text-decoration是幫字加線，可以選擇line-through、overline、underline等等，這些是常用的樣式
» text-shadow就比較有趣啦，是幫字加上陰影，要一次打上四個值，text-shadow:x軸位移量 y軸位移量 擴散量 顏色，記得要用空格隔開每個值。
font
這邊要介紹font-size、font-style、font-weight、font-family等，幾個跟文字有關的屬性
例子二十六
<style>
.fontdemo{
font-size:20px;
font-style:italic;
font-weight:bold;
font-family:MicrosoftJenhei;
}
</style>
<p class="fontdemo">div1demo!!!!!
</p>
按我打好了在這邊顯示喔！
我打好了
» font-size是在調整字型的大小，可以用pt,px,em,%等等作為單位來設定，一般最常用的還是px，要注意的是%是跟著父元素的字體大小來調整
» font-style通常用在調整文字傾斜，常用的只有italic這個值。
» font-weight是在調整字體的筆畫粗細，常用的像是light,heavy,bold等等，也可以用數字來輸入。
» font-family是在選擇字型，在網頁完全沒有設定的狀況下，一般瀏覽器也有預設字型。
這邊要跟大家特別說明，有時候使用者的電腦沒有字型包怎麼辦，這時候可以使用google提供的網路字型包，當你選定你要的字型後，他右下角會有視窗給你一段像“<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">”這樣的code，你把它放進html裡面，你就可以使用Roboto這個自型了。
box-shadow
box-shadow跟text-shadow是類似的東西，就是幫區塊加上陰影
例子二十七
<style>
.boxshadow{
width:50%;
padding:20px;
background:gray;
box-shadow:5px 5px 5px #887;
}
</style>
<p class="boxshadow">div1demo!!!!!
</p>
按我打好了在這邊顯示喔！
我打好了
box-shadow這個跟text-shadow是一樣的，基本要輸入4個值，依序是x軸位移量 y軸位移量 陰影擴散量 跟陰影顏色，中間要用空格隔開。
這邊再補充一下，你可以在四個值之前在加入inset他會變成內陰影喔，試試看用這條code取代原先的"box-shadow:inset 5px 5px 5px #887;"
cursor
cursor是在設定滑鼠放在這個元素上顯示的樣式，一般常用的就pointer
例子二十八
<style>
.cursordemo{
width:50%;
padding:20px;
background:gray;
cursor:pointer;
}
</style>
<p class="cursordemo">div1demo!!!!!
</p>
按我打好了在這邊顯示喔！
我打好了
pointer的用途一般是讓原本不是按鈕的東西看起來更像按鈕，讓網頁比較有互動性，但是很可惜的手機版不能用。他其實滑鼠有很多有趣樣式可以用google的開發人員工具去試試
float
讓區塊變成文字包覆周圍的概念，就像是圖片一樣。當div下了float以後，就會變成display:inline-block，的感覺。最重要的是下了float以後，父元素就不會抓到這個元素的高度，這一定要萬萬注意。
例子二十九
<style>
.floatdemo{
float:left;
padding:20px;
background:gray;
}
.parent{
padding:10px;
background:yellow;
}
</style>
<div class="parent">parentdiv
<div class="floatdemo">!!!!!</div>
<div class="floatdemo">!!!!!</div>
</div>
按我打好了在這邊顯示喔！
我打好了
讓code顯示出來以後會發現parentdiv的高度居然沒有因為裡面的元素而被撐高，就是因為下了float:left;。
那解決辦法有兩個，一個是在父元素下overflow:auto;或是在floatdemo同階層再加入一個有clear:both的元素。
overflow
字面上的溢出指的就是子元素比父元素還要大的時候，要怎麼顯示，
例子三十
<style>
.overflowdemo{
overflow:hidden;
width:50px;
height:50px;
background:gray;
}
.child{
width:100px;
height:30px;
background:yellow;
}
</style>
<div class="overflowdemo">parentdiv
<div class="child">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>></div>
</div>
按我打好了在這邊顯示喔！
我打好了
overflow:hidden是隱藏多出來的部分，如果是換成scroll就會變成是可以被滑鼠拉動（手機上是用手指滑）。
那overflow也有分x軸y軸，所以可以一次輸入兩個值，中間用空格隔開，前面代表x軸，後面代表y軸。試試看換成overflow:scroll hidden;
這邊要特別注意的是，如果父元素有設定overflow，那就算子元素有下float，子元素的高度還是會被算進父元素裡。
clear
clear就是用來清除float用的
例子三十一
<style>
.floatdemo{
float:left;
padding:20px;
background:gray;
}
.parent{
padding:10px;
background:yellow;
}
.clearboth{
clear:both;
}
</style>
<div class="parent">parentdiv
<div class="floatdemo">!!!!!</div>
<div class="floatdemo">!!!!!</div>
<div class="clearboth"></div>
</div>
按我打好了在這邊顯示喔！
我打好了
這邊就不多作說明，很明顯的子元素的高度有被算進父元素裡。
z-index
z-index是用來製造圖層的效果。之前有提到像是position:absolute;會讓元素都疊在一起，那就會有誰在上誰在下的問題，一般來說都是越後讀到的會在越上面，那有辦法換順序嗎？有，那就是用z-index。
例子三十二
<style>
.div1demo{
z-index:999;
position:absolute;
padding:10px;
background:gray;
}
.div2demo{
position:absolute;
padding:30px;
background:yellow;
}
</style>
<div class="div1demo">div1!!!!!</div>
<div class="div2demo">div2!!!!!</div>
按我打好了在這邊顯示喔！
我打好了
這邊要注意的是，如果是父子元素的關係，在父元素裡下z-index要顯示在子元素上面是不行的。
另外z-index必須作用在有下position的元素。
transition
動畫執行的時間長度
例子三十三
<style>
.transitiondemo{
padding:10px;
background:black;
transition:1s all
}
.transitiondemo:hover{
padding:20px;
background:white;
}
</style>
<div class="transitiondemo">div1!!!!!</div>
按我打好了在這邊顯示喔！
我打好了
滑鼠放在黑色區塊上，或是點一下黑色區塊，就會觸發動畫。transition一般需要兩個值，一個是動畫的持續時間，一個是要變化的css屬性（也可以是all），中間要用空格隔開。
這邊要注意的是，transition是不能獨立運作的，要讓元素原本就有設定css，並且在特定的時間點改變css值，才會有動畫。
例如一開始是設定width改變後是對height設定，那就不會成功，必須要前後都對width設定。
改變css設定的手段可以是用css的hover,active等屬性，或是增加元素的class或是id，甚至是用js改變樣式，都能套用transition的變化時間。
filter
濾鏡功能常用的有blur()、grayscale()、brightness()、contrast()、opacity()等等，就是照片的修飾功能
例子三十四
<style>
.bcg2{
width:100%;
min-height:50px;
background-image:url('https://www.tkbgo.com.tw/go_edm/edm162/img/background.png');
filter:blur(2px);
background-position:center;
}
</style>
<div class="bcg2">div2
</div>
<img src="https://www.tkbgo.com.tw/go_edm/edm162/img/background.png"class="bcg2">
按我打好了在這邊顯示喔！
我打好了
這邊要特別注意的是每個屬性相對應的值單位都是不一樣的，模糊blur()裡的值要放px、灰階grayscale()裡面要用%、亮度brightness()裡面要用%、對比度contrast()裡面要用%、飽和度opacity()裡面要用%
::before, ::after
::before是在特定的元素前面加入一個東西，相對的::after則是在之後加入一些東西。常用的像金額單位。
例子三十五
<style>
.dollar::after{
content:"$";
color:gray;
}
</style>
<div class="dollar">1000
</div>
<div class="dollar">5300
</div>
按我打好了在這邊顯示喔！
我打好了
這邊要特別注意的是::before跟::after一定要下content才會真的有出現，如果不要有字也可以用空白代替。
:hover,:active
hover是滑鼠放在元素上的時候，才會執行的樣式，滑鼠移開後就不再顯示此樣式，並且沒有執行次數的限制。:active則是連結被點擊過後才會執行的樣式。
例子三十六
<style>
.hoverdemo:hover{
background:black;
color:white;
}
.hoverdemo{
background:white;
color:black;
}
</style>
<div class="hoverdemo">1000
</div>
按我打好了在這邊顯示喔！
我打好了
滑鼠放到1000上面試試看，背景跟字的顏色就都換了。
三、進階css
1.rwd螢幕寬適應
一般如果用%數作為單位的話，在不同的螢幕寬度上元素的css值就會自己改變。那我們要教另外一種就是在不同螢幕上，適用不同的css設定。
例子三十七
<style>
.rwd{
padding:15%;
margin:5%;
background:black;
float:left;
}
@media screen and (min-width: 100px) and (max-width: 400px){
.rwd{
padding:45%;
margin:5%;
background:black;
float:none;
}
}
</style>
<div class="rwd">div1
</div>
<div class="rwd">div2
</div>
按我打好了在這邊顯示喔！
我打好了
一般的css會用廣義的，但是當螢幕寬度大於200px且小於400px時就會先適用@media裡面的css，一般會設定三種大小：一般通用、760px以下、和400px以下，這樣就符合一般的電腦、平板電腦跟手機的不同排版。
那還有其他的方式可以用<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 700px)" href="test.css" />這樣的html方式在一開始先判斷螢幕，在選擇適合的css檔案輸入
2.動畫
第一種動畫方式就是用:hover、:active、javascript設定條件等等有條件式的觸發動畫，另一種就是隨時都在動的，無條件式觸發。
例子三十八
<style>
.animated{
padding:30px;
background:black;
animation:myfirst 2s infinite;
}
@keyframes myfirst{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
</style>
<div class="animated">div1
</div>
按我打好了在這邊顯示喔！
我打好了
這邊要注意@keyframes 是在定義動畫，@keyframes 動畫名稱{時間段1{動作1}時間段2{動作2}時間段3{動作3}}，然後再用animate:動畫名稱 時間長度 infinite;來把動畫套用在元素上，所以animate跟@keyframes一定要同時存在。
keyframes裡面的時間段要用%數來定義，因為後面animate的時間用固定的s(秒數)定義，瀏覽器會按比例自動調配keyframes裡面動作123的持續時間，不會造成”只有3秒的時間卻要跑5秒的動畫“這種窘境。
@keyframes裡面的動作可以有無限多段，可以有動作1動作2到動作n，相對的時間就要切成n個比例，並由小到大排列，頭一定是要0%，尾盡量是100%讓他變成一個完整的循環。
肆、工具
一、google chrome 開發人員工具
超級好用的工具，簡單來說就兩個功能，一是檢視原始碼、二是開始和你的瀏覽器對話。
檢視原始碼應該是很好理解，就是看單個網頁裡面的元素。
那開始跟瀏覽器對話是可以跟他講什麼咧？其實就是修改網頁的概念，你可以修改任何地方，但是不能把修改的地方回傳給主機（我的功力無法，可以的話就是駭客的行為了），所以你改了任何地方，重新整理以後就會回到初始狀態（你一開始載入網頁的狀態）。
現在先把他叫出來吧，從你的瀏覽器右上方三個點點的功能選單裡點更多工具，就可以看到開發人員工具了（mac是option+command+I windows是F12）。
打開之後在開發人員工具的右上角有三個點點的選單，把他按開以後選擇dock side右邊，把整個打開的視窗放到右邊，並且拉開到約一半的螢幕大，這樣比較好解說。
從圖片中可以看出來分成四個部分，第一部分是網頁的html原始碼，可以用左上角的
工具指網頁上的元件，他能幫你快速的在原始碼中找到他寫在哪邊。
相對應的，用滑鼠點了原始碼後，網頁上會出現像
的圖片，他就是跟你說你點的原始碼顯示在網頁上的哪邊。
左上角的
工具，能讓網頁變成不同寬度的螢幕來顯示，方便製作rwd網頁，但是要注意的是有時候要重整網頁才會重置rwd的畫面。
在程式碼上點兩下可以直接改寫html程式碼，瀏覽器會直接運算出改寫後的模樣，並在畫面上直接呈現。
第二個部分是css的樣式碼，是針對在部分一裡點擊的元素他被設定的樣式，第一行的element.style指的是直接下在html裡的樣式，第二排以下會依據顯示優先度表列出所有樣式。
圖片中的html,body{右邊的w3.css:20按下去以後，他會跳到w3.css這個檔案的第20行，就能查看原始碼寫了些什麼。
當有css碼被劃掉的時候，代表有其他一樣的屬性，優先度高過這行被畫掉的樣式碼。
在element.style那欄的空白處點擊滑鼠左鍵，能直接寫樣式，他會跳出推薦的樣式屬性跟值，輸入後在螢幕上就能直接預覽套用後的視覺呈現。
如果出現驚嘆號的時候，滑鼠指到驚嘆號，他會跟你說錯誤在哪邊。
這邊要注意的是，修改在不管第一還是第二部分的程式碼，是都不會寫進網頁主機裡面並儲存，也就是說重新整理後就會回複原樣。
第三部分是表列所有樣式最後運算出來的值。
第四部分是瀏覽器跟你說運算的部分哪邊有問題，通常用在網頁除錯或是開發一些運算功能(例如javascript)。
沒有留言:
張貼留言