CSS - HackMD

:::warning CSS負責網頁的美化及排版要如何套用，就接著看下去吧~ ::: 如果對於HTML還不熟悉，點擊以下可以回到筆記頁面 📑[HTML筆記](https://hackmd.io/@boboshi/Bki3aQDd2) 💡[CSS 教學影片](https://youtu.be/Ml78vnNTBLw?si=05uP8XwPxQ4gySEH) > 在開始之前，要先準備好HTML的檔案喔!! # 顏色color 在需要用到顏色的標籤後，套上屬性style 會先介紹使用地方，最後會有顏色的說明喔~ ## 文字顏色 ```htmlmixed=! <body> <h1>CSS筆記示範</h1> <p style="color:purple;">文字顏色</p> </body> ``` > 執行結果 > ![](https://hackmd.io/_uploads/Bk77CCoth.png) * > color使用方法如上 * > 分號要記得 ## 文字背景 ```htmlmixed=! <body> <h1>CSS筆記示範</h1> <p style="background-color:gray;">文字背景</p> </body> ``` > 執行結果 > ![](https://hackmd.io/_uploads/SyoqJkhK2.png) * > 使用background-color * > 分號要記得 ## 文字邊框 ```htmlmixed=! <body> <h1>CSS筆記示範</h1> <p style="border:3px solid green;">文字邊框</p> </body> ``` > 執行結果 > ![](https://hackmd.io/_uploads/B1TAxy3Y3.png) * > 使用border * > 需要給他三個值，邊框粗度、邊線樣式、邊線顏色 * > px為像素，solid為實線，dashed為虛線 :::danger 甚至也可以調框的大小喔!，使用之前提過的width與height即可當然也可以將上述三種結合起來~ ::: ## 顏色知道的英文單字不多怎麼辦?怕所呈現的色彩不夠繽紛? 以下有幾種解決方法: 1. 如果是使用VScode可以直接點選顏色的框框來選取自己想要的顏色 ![](https://hackmd.io/_uploads/By7IBk2Y2.png) > 系統會跑出RGB的顏色呈現方式 2. 上網搜索"色碼表"，點選第一個網站即可 ![](https://hackmd.io/_uploads/SJb1LJht2.png) > 裡面有各種顏色的顏色代碼，可以直接放入程式碼內 3. 上網搜索"W3C CSS"點擊第一個網站內的color ![](https://hackmd.io/_uploads/Sy11kghF3.png) > 可用picker尋找自己需要的顏色 :::success 顏色使用方法有四種:顏色名稱、顏色編碼、RGB、HSL ::: # Padding & Margin 兩者皆為控制空間的屬性 >padding ->控制內部空間 >margin ->控制外部空間在開始說明使用方法之前，先來個補充 :::warning 查看一個網頁的HTML與CSS，按下電腦中的F12(我的筆電是Fn+F12啦，可能每台電腦都不太一樣) * HTML ![](https://hackmd.io/_uploads/By9l6znFh.png) * CSS ![](https://hackmd.io/_uploads/Sy58TMnY3.png) ::: > 等等執行結果都會加上網頁的CSS喔~ ## Padding ```htmlmixed=! <h1>CSS筆記示範</h1> <div style="padding:20px; color:brown; border:2px solid black ; background-color: #4dffb8;"> 這是測試padding與margin的文字 </div> ``` > 執行結果 > ![](https://hackmd.io/_uploads/SysglQhYn.png) * > 可以看到CSS內的padding為20 * > 也可以明顯看到文字空間變大了 ## Margin ```htmlmixed= <h1>CSS筆記示範</h1> <div style="margin:20px; color:brown; border:2px solid black ; background-color: #4dffb8;"> 這是測試padding與margin的文字 </div> ``` > 執行結果 > ![](https://hackmd.io/_uploads/B1cNW73F2.png) * > 可以看到CSS內的margin為20 * > 也可以看到文字方框的上下左右多了空間 * > 不清楚的話可以對比最一開始的圖XD :::warning margin的值可以為負數，一起來看看會發生甚麼事 * 值為-20 ![](https://hackmd.io/_uploads/rJ6kHQ2Kn.png) * 值為-50 ![](https://hackmd.io/_uploads/rJ0sVX2th.png) 會直接位移 **注意:padding不能為負值喔~~** ::: > 如果說要上下左右都不同的值呢? 先來個範例 ```htmlmixed= <div style="padding-top:20px; color:brown; border:2px solid black ; background-color: #4dffb8;"> 這是測試padding與margin的文字 </div> ``` ![](https://hackmd.io/_uploads/rJO_8Q3tn.png) * > 應該可以明顯看到上方多了20px :::success 其他都是一樣，以padding為例，分別使用 * 上`padding-top` * 下`padding-bottom` * 左`padding-left` * 右`padding-right` 如果是margin就直接取代padding直接使用就可以囉~ ::: > 那如果四個值都不同，難不成要寫四個嗎? 那麼可以使用**直接賦予四個值** ```htmlmixed= <div style="padding:20px 30px 40px 50px; color:brown; border:2px solid black ; background-color: #4dffb8;"> 這是測試padding與margin的文字 </div> ``` > 直接看CSS執行結果 > ![](https://hackmd.io/_uploads/HyPXK72Yh.png) * > 你會發現，賦予值的順序為，上右下左，也就是從上順時針~ :::danger 空間的利用，多多少少也可以幫助排版喔~ ::: # Float & Display ## float > 可以善用3D圖幫助理解，但這裡就不多加說明了 float稱為漂浮，意思就是讓原本平面的東西浮起來我們可以利用float來**進行排版** 先來看看原本長甚麼樣子 ```htmlmixed=! <img src="noya.jpg" width="400"/> <p>這是我大西谷，暈爛</p> ``` 內容便是一張圖以及一段文字 > 執行如下 > ![](https://hackmd.io/_uploads/S1-ERC0Fh.png) * > 會看到先圖片再來換行才接著文字那如果想要文字在圖片的左右邊呢?這時float就可以出場了~ ```htmlmixed= <img style="float:left;"; src="noya.jpg" width="200"/> <p>這是我大西谷，暈爛</p> ``` > 執行結果 > ![](https://hackmd.io/_uploads/BkookJkc3.png) * > 可以看到文字跑到圖片的右邊了 * > 使用right就會相反喔 * > float是隸屬在style底下的 * > 很常被使用在一個網頁最開頭的索引標籤或目錄 :::danger 私心的放上喜歡的推XDD ::: ## display 在之前的html我們有提過占空間的問題分別是p標籤以及span標籤而display就是再說文字占空間的顯示方式 :::warning p標籤為block顯示方式->佔一整行 span標籤為inline顯示方式->用多少占多少 ::: display就是用來轉換的 > 如果要使p標籤顯示方式變為用多少佔多少 ```htmlmixed= <p style="display:inline;">今天是7月14日</p> <p style="display:inline;">是我家長頸鹿的生日</p> ``` > 執行結果 > ![](https://hackmd.io/_uploads/rk1PLJkc2.png) * > 原本兩行直接變為一行 * > 直接曝光我家idol生日哈哈 span也是一樣喔~ ```htmlmixed= <span style="display:block;">今天是7月14日</span> <span style="display:block;">是我家長頸鹿的生日</span> ``` > 執行結果 > ![](https://hackmd.io/_uploads/rysCwJ1qh.png) * > 原本一行變成兩行 * > display是隸屬在style底下的喔 :::danger 我家長頸鹿也是有生日的~~ ::: # Position 有定位之義，使用position後，會跟float很像先放上最原始的程式碼 ```htmlmixed= <div style="width:80px; height:80px; background-color:blue;"></div> <div style="width:100px; height:100px; background-color:red;"></div> ``` > 最原先的網頁 > ![](https://hackmd.io/_uploads/HyHtNRJc2.png) * > 會看見一紅一藍的方框 position有三種定位方式，分別如下 ## 1.fixed 絕對定位 > 如果我們將藍框框固定的話 ```htmlmixed= <div style="**position:fixed** ; width:80px; height:80px; background-color:blue;"></div> <div style="width:100px; height:100px; background-color:red;"></div> ``` > 執行結果 > ![](https://hackmd.io/_uploads/r1g480ycn.png) * > 紅框框會向上移動 * > 跟float相似，使用fixed就會自行多出一層 :::success 特別的地方是，他會隨著滾輪移動，而一樣在畫面上簡單來說，就是被固定在畫面上，不論你怎麼移動網頁，他都會在同一個地方 ::: :::warning 也可以固定在網頁上下左右分別使用`top bottom right left` EX ```htmlmixed= <div style="position:fixed; top:0px; width:80px; height:80px; background-color:blue;"></div> <div style="width:100px; height:100px; background-color:red;"></div> ``` ![](https://hackmd.io/_uploads/BJSPjC19h.png) 會看到他被固定在網頁的最上方，是因為top值為0px 其他的也是一樣道理，就不一一贅述了 ::: ## 2.relative 相對定位就是很直接的，在原本應該出現的位子來做偏移 ```htmlmixed= <div style="position:relative; top:30px; width:80px; height:80px; background-color:blue;"></div> <div style="width:100px; height:100px; background-color:red;"></div> ``` > 執行結果 > ![](https://hackmd.io/_uploads/ByQsFRM9n.png) * > 不會貼著網頁最底邊來偏移 * > 而是以原先會出現的位置偏移了30px * > 相對位置通常都會搭配`top bottom right left`，沒搭配的話就根本看不出變化 ## 3.absolute 固定定位與fixed相似，會自己獨立一層我們先來看看例子 ```htmlmixed= <body> <div style="padding:30px; border: 5px red solid;"> <div style="padding:30px; border: 4px red solid;"> <div style=" width:20px; height:20px; background-color: black;"></div> </div> </div> </body> ``` ![](https://hackmd.io/_uploads/H13eHWn9n.png) > 為兩個紅框與一個黑方塊 > 接著我們對黑方塊使用absolute ```htmlmixed= <div style="position:absolute; width:20px; height:20px; background-color: black;"></div> ``` > 執行結果 > ![](https://hackmd.io/_uploads/S1khSWnqh.png) * > 會明顯看到紅框往內縮，為甚麼? :::warning 因為當黑方塊獨自自己一層時，前面兩的紅框不會知道下一個黑方塊的大小，所以便會往內縮 ::: > 那如果我們也對外層的紅框做定位呢? 使用相對定位，以及將黑方塊設top ```htmlmixed= <div style="padding:30px; border: 5px red solid;"> <div style="position: relative; padding:30px; border: 4px red solid;"> <div style="position: absolute;top:0px; width:20px; height:20px; background-color: black;"></div> </div> </div> ``` > 執行結果 > ![](https://hackmd.io/_uploads/BJIAvZhq3.png) * > 黑方塊會依照外層的相對位置來做定位 * > 如果外層沒設，那就會依照整個網頁來定位 * > 如果兩個紅框都做了定位，黑方框則會以最靠近的為主 :::success **fixed與absolute相異處** 前面提到相似處就是，兩者都會自己獨立一層，像漂浮一般相異處便是absolute就算設上下左右也不會隨著滾輪移動 ::: :::danger 這部分我花了至少有兩周，好懶 ::: # Opacity 透明度範圍為0~1，0是完全透明先來看看一開始的設定，為一方框加上文字，而兩者是重疊的 ```htmlmixed= <p style="position: relative;top: 65px;left: 25px;">哈囉</p> <div style="width:80px;height: 80px;background-color: blue;"></div> ``` ![](https://hackmd.io/_uploads/Hy5mhgxsh.png) 可以看到文字其實不怎麼明顯，Opacity就能出場了 ```htmlmixed= <p style="position: relative;top: 65px;left: 25px;">哈囉</p> <div style="opacity:0.2; width:80px;height: 80px;background-color: blue;"></div> ``` > 執行結果 >![](https://hackmd.io/_uploads/SJCNTgxsn.png) * > 變淺許多了吧 * > 0會完全透明而1就會和原先一樣了 # Border-radius 邊緣圓弧直接來用例子，原始程式碼會和剛剛的相同 ```htmlmixed= <p style="position: relative;top: 65px;left: 25px;">哈囉</p> <div style="border-radius:10px; opacity:0.2 ; width:80px;height: 80px;background-color: blue;"></div> ``` > 執行結果 > ![](https://hackmd.io/_uploads/r1ZuReein.png) * > 可以知道四個角都變成了像素10的圓弧 * > 而當值變成40圖形則會成圓 :::warning >那如果想要四個角都不同值呢? 可以這麼寫 ```htmlmixed= <div style="border-radius:10px 20px 30px 40px; opacity:0.2 ; width:80px;height: 80px;background-color: blue;"></div> ``` ![](https://hackmd.io/_uploads/rykHybxo2.png) * > 順序為左上右上右下左下，順時針，跟之前的相同 ::: :::danger 很明顯是美編所需要的~ ::: # Style標籤額外寫法 ![](https://hackmd.io/_uploads/rJeWKXrj2.png) > 如果我們要將每行的文字更改顏色，那是不是只能一行一行改呢? 當然不是，我們可以使用style的其他CSS寫法我們回到上頭的head標籤 ```htmlmixed= <head> <meta charset="UTF-8"></meta> <title> shibobo.web </title> <style> p{ color:blue; } </style> </head> ``` > 執行結果 > ![](https://hackmd.io/_uploads/By7fcQHi2.png) * > 就是只要是P標籤，都會有這個color藍色屬性 * > 下面的P標籤就也可以不用加上style * > 要加上其他style屬性可以直接在上頭做更改 :::danger ㄗ偷懶不想一個一個做更改，這個就很方便~~ ::: # 引入外部CSS檔案將剛剛所額外寫的style，放置到一個新創建的style.css檔案 ```css= p{ color:blue; } ``` 這就是CSS內檔案所寫的內容 > 那我們要怎麼引入這個檔案到我們所寫的HTML呢? ```htmlmixed= <head> <meta charset="UTF-8"></meta> <title> shibobo.web </title> <link rel="stylesheet" href="style.css" /> </head> ``` * > 寫在head標籤內 * > rel是在告訴說，現在引入的檔案是css的檔案 * > herf則是告訴這css檔案位址 * > css檔案與html在同個資料夾底下喔 > 你有可能會有疑問，為甚麼要額外多出一個檔案呢? 原因就是，你可能做了很多個網頁，而他們的style的屬性都相同這時，**你就可以直接引入這個檔案，就不用每個html檔案都寫重複的東西** :::danger 其實就C++你額外寫的function相似，需要相同的功能再引入，要更改也不用碰到其他程式碼 ::: # Class & Id 分類標籤以及識別標籤，讓我們更好的去套用CSS :::success 先來說說這兩者的差別在哪 1. class可以賦予多個標籤，而id一個標籤只能有一個 2. class一個標籤內可以有多個，而id一個標籤只能有一個 id就可以當作是每個人的個人身分證~ ::: ## class ![](https://hackmd.io/_uploads/SyxNK1dih.png) > 更正下錯誤，是href啦~~ 我們可以知道前三個是歌手而後三個是食物當要分類時，能這麼寫 ```css= <body> <p class="singer">韋禮安</p> <p class="singer">林宥嘉</p> <p class="singer">A-Lin</p> <p class="food">壽司</p> <p class="food">炒飯</p> <p class="food">便當</p> </body> ``` 加上兩個類別，分別是歌手和食物 > 那緊接著要如何運用呢? 讓我們看到我們前面所額外寫的style標籤一起看看如何寫和執行結果 ![](https://hackmd.io/_uploads/HyEyTyujn.png) ## id 這部分其實跟class很相像直接來看操作和結果 ```css= <body> <h1 id="love">超級愛長頸鹿</h1> </body> ``` **這裡必須注意，當id love已經被使用，就不能放到其他標籤了** ![](https://hackmd.io/_uploads/S1jBCydih.png) :::danger class用.而id用# ::: :::warning ### 額外使用方法 Selector 1. 想要一次套用，可以這麼做 ```css= #love, .class{ color:green; } ``` 使用逗號將其隔開 2. 全部套用到所有標籤 ```css= *{ color:green; } ``` 3. 從標籤下去找標籤(先找ul標籤，在往下找其li標籤並套用) ```css= ul li{ color:green; } ``` 4. 如果想套到屬性 ```css= [type]{ color:green; } ``` 5. 當滑鼠滑到此處會執行(這一個超酷~) ```css= hi:hover{ color:green; } ``` ::: # flex 超級好用的排版工具 > 等等資訊量會爆多，請先做好心理準備XDD 最一開始的程式碼為: ![](https://hackmd.io/_uploads/H1Cdtwkh3.png) 而style.css的內容為: ```css= .container div{ border:1px solid grey; padding:10px; width:100px; } ``` 接著我們使用flex在外層的container看看 ```css= .container{ display:flex; } ``` > 執行結果 >![](https://hackmd.io/_uploads/BJE5oD13n.png) * > 會發現從直的變成橫的，是因為flex預設顯示是橫的，由左而右 :::success 下面會有一連串flex的功用~ ::: ## 讓區塊滿版先設三個.box，給他們**flex**屬性 ```css= .box-1{ flex:1; } .box-2{ flex:1; } .box-3{ flex:1; } ``` > 執行結果 > ![image](https://hackmd.io/_uploads/rkolDVrVT.png) * > 就像是將全部分成三等份，然後各自拿一份 * > 若是將數字改成2,1,1則分成四份，而區塊一的大小會是全部的1/2 ## 改變區塊順序使用 **order** ```css= .box-1{ flex:1; order:2; } .box-2{ flex:1; order:3; } .box-3{ flex:1; order:1; } ``` > 執行結果 > ![image](https://hackmd.io/_uploads/HkD7YVSVa.png) * > 前面也提到flex是由左至右排序，也就是從小排到大 * > 因此會因為order的數字大小來更改區塊的順序 ## 滿版自動跳行若在先前的程式碼，將三個區塊加成為九個，會發生甚麼? ![image](https://hackmd.io/_uploads/B1KNjVSNp.png) * > 我們會發現，他會壓縮所有區塊，讓他們擠在同一行想要讓他滿版跳行，我們可以在container給他套上**wrap屬性** ```css= .container{ display:flex; flex-wrap: wrap; } ``` >執行結果 >![image](https://hackmd.io/_uploads/H1rO2EHEa.png) * > 每個區塊將會是100px x 10px ，而當版面不夠時，會自動跳到下一行 ## 主軸的更改想要將主軸由上至下，可以在container使用**flex-direction**中的**column** ```css= .container{ display:flex; flex-wrap: wrap; flex-direction: column; } ``` > 執行結果![image](https://hackmd.io/_uploads/SJW3uNLET.png) :::warning ### 其他使用方法和特色 1. 套上外框會變成甚麼樣子?(height和border) ```css= .container{ display:flex; flex-wrap: wrap; flex-direction: column; height:300px; border: 3px solid red; } ``` > 執行結果 > ![image](https://hackmd.io/_uploads/rkaOjN8N6.png) * > 當高度不夠時，會自動換行(wrap)，且一樣會依照我們設定的由上至下 2. 將主軸從下到上 ```css= .container{ display:flex; flex-wrap: wrap; flex-direction: column-reverse; height:300px; border: 3px solid red; } ``` > 執行結果 > ![image](https://hackmd.io/_uploads/S1foTNU4a.png) 3. 將主軸從右至左 ```css= .container{ display:flex; flex-wrap: wrap; flex-direction: row-reverse; height:300px; border: 3px solid red; } ``` > 執行結果 > ![image](https://hackmd.io/_uploads/BknRpNUNp.png) * > 預設會是使用row ::: :::danger 若是將主軸由上至下的套上前面所說的滿版屬性，則會變成拉長高度主軸的更改、區塊的順序和滿版的屬性，都可以互相交錯著搭配! ::: ## 更改區塊位置 ### 置中(主軸) **justify-content : center** ```css= .container{ height:300px; border: 3px solid red; display: flex; flex-wrap: wrap; justify-content: center; } ``` > 執行結果 > ![image](https://hackmd.io/_uploads/rydXm2PVa.png) ### 置右(主軸) **justify-content: flex-end** 與上面是將同做法，直接來看看執行結果~ ![image](https://hackmd.io/_uploads/rJj093PVp.png) ### 置左(主軸) **justify-content: flex-start** 會和先前預設的相同 ![image](https://hackmd.io/_uploads/B1xfsnPNa.png) ### 剩餘空間分配1(主軸) **justify-content: space-around** 將區塊3右方剩餘的空間，平均分配到各區塊的兩邊就會是區塊1的左邊右邊，區塊2左邊右邊，區塊3左邊右邊 ![image](https://hackmd.io/_uploads/rk9qh3vE6.png) ### 剩餘空間分配2(主軸) **justify-content: space-between** 將區塊1跟3分別放置最左和最右 ![image](https://hackmd.io/_uploads/Sy54ThvVT.png) ### 剩餘空間分配3(主軸) **justify-content: space-evenly** 將區塊中間平均分配空間 ![image](https://hackmd.io/_uploads/S1ZkR3wET.png) :::warning 若是將主軸更改了，則這些也將跟著改變，都可以搭配使用看看 ::: ### 次軸相關設定使用 **align-items** ，內容屬性和主軸的相同，也就是可以給他 center/flex-start/flex-end...和空間分配的語法 > 但若是多行及多列時，使用**justify-content**和**align-items**，將會使格式跑掉直接來看看例子(將區塊變成九個) ![image](https://hackmd.io/_uploads/BJOPmpwVp.png) > 但把 **align-items** 改為 **align-content**，就會變成 ![image](https://hackmd.io/_uploads/Hkp0mpPEa.png) > 會好看許多~~ # Animation 動畫 HTML ```htmlmixed= <body> <div class="animation box"></div> </body> ``` CSS ```css= .box{ width: 200px; height: 200px; background-color: rgb(8, 104, 229); } .animation{ } ``` ![image](https://hackmd.io/_uploads/SkVZaVcNT.png) ## 1. 定義動畫會寫上@keyframes + 自訂變數名 ```css= @keyframes change-color { from{background-color : red}; to{background-color : blue}; } ``` * > 這就代表會將顏色從紅色改成藍色也可以用%數來代表時間 ```css= @keyframes change-color { 0%{background-color : red}; 20%{background-color : blue}; /* 可以延伸下去到100% */ } ``` ## 2. 套用動畫在先前的animation內寫上 ```css= .animation{ animation-name: change-color; animation-duration: 2s; animation-iteration-count: 1; animation-delay: 2s; } ``` * > animation-name 為自定義的動畫名稱 * > animation-duration 動畫持續的秒數 infinite 為無限次 * > animation-iteration-count 動畫執行次數 * > animation-delay 載入之後隔幾秒執行動畫 ## 讓方格動起來可以在.box內加上定位position ```css= .box{ width: 200px; height: 200px; background-color: rgb(8, 104, 229); position: relative; } ``` 並且在定義動畫內套上位置 ```css= @keyframes change-color { from{background-color : red; top:20px; left:20px}; to{background-color : blue; top:40px; left:40px}; } ``` 就可以順利將方塊動起來了~~ :::danger 此部分目前無法放上動畫的執行結果，有興趣的可以寫上語法，自行操作看看 ::: CSS到這邊先告一段落了，緊接著會是我們的重頭戲 JAVA SCRIPT 最後就要說聲加油了!（￣︶￣）↗　點擊快速連結 📑[JAVA SCRIPT 筆記](/81IfLDHpQMSeq1MkP6P5dQ)