[微精通：網頁設計Vue + Node.js + MySQL] 1.2. Style & CSS

張貼者： 日期：
Style與CSS讓HTML可以進一步的設定樣式與風格，如變大變小、變紅變藍，甚至是是否浮動於畫面上，都可由Style與CSS來設定。

 

image/svg+xml殭屍的名字就是要紅⾊、粗體、 18 ⼤⼩，怎麼設定呢 ? 1.2. Style & CSS <meta charset = "utf-8" > <html> <body> <ul> <li> 瘋狂傑克 </li> <li> 懶懶瑪琍 </li> <li> ⼤提姆 </li> <li> 史提夫 </li> <li> 功夫李 </li> </ul> </body> </html> <meta charset = "utf-8" > <html> <body> <ul> <li style = ' color : red ; font-weight : bold ; font-size : 18px ;’ > 瘋狂傑克 </li> <li style = ' color:red; font-weight: bold; font-size:18px; ’ > 懶懶瑪琍 </li> <li style = ' color:red; font-weight: bold; font-size:18px; ’ > ⼤提姆 </li> <li style = ' color:red; font-weight: bold; font-size:18px; ’ > 史提夫 </li> <li style = ' color:red; font-weight: bold; font-size:18px; ’ > 功夫李 </li> </ul> </body> </html> <meta charset = "utf-8" > <html> <body> <ul> <li style = ' color:red; font-weight: bold; font-size:18px; ’ > 瘋狂傑克 </li> <li style = ' color:red; font-weight: bold; font-size:18px; ’ > 懶懶瑪琍 </li> <li style = ' color:red; font-weight: bold; font-size:18px; ’ > ⼤提姆 </li> <li style = ' color:red; font-weight: bold; font-size:18px; ’ > 史提夫 </li> <li style = ' color:red; font-weight: bold; font-size:18px; ’ > 功夫李 </li> </ul> </body> </html> <meta charset = "utf-8" > <html> <body> < ul style = ' color:red; font-weight: bold; font-size:18px; ' > < li > 瘋狂傑克 < /li > < li > 懶懶瑪琍 < /li > < li > ⼤提姆 < /li > < li > 史提夫 < /li > < li > 功夫李 < /li > < /ul > </body> </html> <meta charset = "utf-8" > <html> <body> <ul> <li style = ' color:red; font-weight: bold; font-size:18px; ' > 瘋狂傑克 </li> <li style = ' color:red; font-weight: bold; font-size:18px; ' > 懶懶瑪琍 </li> <li style = ' color:red; font-weight: bold; font-size:18px; ' > ⼤提姆 </li> <li> 史提夫 </li> <li> 功夫李 </li> </ul> </body> </html> <meta charset = "utf-8" > <html> < head > < style > . red-zombie-name { color : red ; font-weight : bold ; font-size : 18px ; } < /style > < /head > <body> <ul> <li> 瘋狂傑克 </li> <li> 懶懶瑪琍 </li> <li> ⼤提姆 </li> <li> 史提夫 </li> <li> 功夫李 </li> </ul> </body> </html> <meta charset = "utf-8" > <html> <head> <style> . red-zombie-name { color : red ; font-weight : bold ; font-size : 18px ; } </style> </head> <body> <ul> < li class = ‘ red-zombie-name ' > 瘋狂傑克 < /li > < li class = ‘ red-zombie-name ' > 懶懶瑪琍 < /li > < li class = ‘ red-zombie-name ' > ⼤提姆 < /li > <li> 史提夫 </li> <li> 功夫李 </li> </ul> </body> </html> <meta charset = "utf-8" > <html> <head> <style> . red-zombie-name1 { color : red ; font-size : 18px ; } . red-zombie-name2 { color : red ; font-weight : bold ; font-size : 30px ; } </style> </head> <body> <ul> < li class = 'red-zombie-name1 red-zombie-name2' > 瘋狂傑克 < /li > <li class = 'red-zombie-name1 red-zombie-name2' > 懶懶瑪琍 </li> <li class = 'red-zombie-name1 red-zombie-name2' > ⼤提姆 </li> <li> 史提夫 </li> <li> 功夫李 </li> </ul> </body> </html> . red-zombie-name1 { color : red ; font-size : 18px ; } . red-zombie-name2 { color : red ; font-weight : bold ; font-size : 30px ; } <meta charset = "utf-8" > <html> < head > < link rel = ' stylesheet ' href = ' zombie.css ' > < /head > <body> <ul> <li class = ' red-zombie-name1 red-zombie-name2 ' > 瘋狂傑克 </li> <li class = 'red-zombie-name1 red-zombie-name2' > 懶懶瑪琍 </li> <li class = 'red-zombie-name1 red-zombie-name2' > ⼤提姆 </li> <li> 史提夫 </li> <li> 功夫李 </li> </ul> </body> </html> <meta charset = "utf-8" > <html> <head> </head> <body> < form > Email < input type = "email" > < br > 密碼 < input type = "password" > < br > < input type = "checkbox" > ⾃動登入 < br > < button > 送出 < /button > < /form > </body> </html> <meta charset = "utf-8" > <html> <head> < link rel = "stylesheet" href = " https://cdn.jsdelivr.net/npm/ bootstrap@4.5.3/dist/css/bootstrap.min.css " > </head> <body> < div class = “ container " > < form > < label > Email < /label > < input type = "email" class = " form-control " > <label> 密碼 </label> <input type = "password" class = "form-control" > < div class = “ form-check " > < input type = "checkbox" class = " form-check-input " > < label class = " form-check-label " > ⾃動登入 < /label > < /div > <br> < button class = " btn btn-primary " > 送出 < /button > < /form > < /div > </body> </html> 1. 能不能像 word ⼀樣改變⽂字的樣⼦，將殭屍 的名字格式變為紅⾊、粗體且為 18 ⼤⼩的字型呢 ? style 屬性，設定殭屍名字的樣式 w1_2_1 - home.html 1 1 1. 使⽤ style 樣式屬性給定 CSS 來設定殭屍名稱的格式， CSS 的全名 是階程樣式表 Cascading Style Sheets ，它是⼀種樣式語法。 2. 使⽤ color 設定字的顏⾊為紅⾊ red ，使⽤ font-weight 設 定字的權重為粗體，使⽤ font-size 設定字的⼤⼩為 18px 。 3. CSS 使⽤冒號 (:) 隔開 CSS 與值。 4. 每個 CSS 會使分號 (;) 作結束。 5. 再為另外 4 個殭屍名加上 CSS 樣式。 w1_2_2 - home.html 1 1 多個殭屍多個 style 屬性，好長的設定啊，怎麼簡化好 ? w1_2_3 - home.html 1. 寫了 5 個 style ，多⼜長，可以簡單⼀點嗎 ? 1 1 CSS ，顧如其名就是向階層下傳遞的樣式 w1_2_4 - home.html 1. 將 style 屬性移到上層的 <ul> 標籤中設定，這樣就可以透過 CSS 繼承傳遞的特性，將 style 中的 CSS 傳給其中所有的 <li> 標籤。 2. 顧名思意， CSS 階層樣式表即是以階層的⽅式 ' 向下傳遞 'CSS 。 3. 每個 <li> 則可 ' 繼承 ' ⾃上層 標籤所傳遞過來的 CSS 。 w1_2_5 - home.html 只有部份的殭屍名要變紅變粗變⼤， 但⼜不想寫長長的 style 屬性，怎麼設定好 ? 1. 只想要讓瘋狂傑克、懶懶瑪琍與⼤提姆的名字有變紅變粗與 變⼤的效果，但⼜不想寫重複長長的 CSS ，有什麼好⽅法嗎 ? 1 1 1 1 1. 打造殭屍名的 CSS 樣式類別 w1_2_6 - home.html 1. 加入 <head> ⾄ <html> 標籤中，它位於 <body> 的上⽅。 2. 在加入 <style> 標籤⾄ <head> 標籤中。 3. 建立⼀個 CSS 類別 red-zombie-name 。 4. CSS 類別會以句點 (.) 作開頭，後⾯接著⼀ 個⼤括號 ({}) 。 5. 將原先在 style 上的 CSS 改到⼤括號 ({}) 中， 寫作習慣上，每個 CSS 我們皆會換⾏表⽰。 2. class 屬性 +CSS 類別，套⽤樣式⾄每個殭屍名上 w1_2_7 - home.html 1. 我們建立的 CSS 類別 red-zombie-name 。 2. 接著只要使⽤ clas 類別屬性，將 red-zombie-name 套在想要改變殭屍名樣式的 <li> 上。 3. 注意，在使⽤ CSS 類別，前⾯是不需要加上句點 (.) 的。 4. 最後，我們就可透過 CSS 類別，⼀次的定義，然後多 次的選擇套⽤到我們想要改變殭屍名樣式的 <li> 上。 1 2 1 2 2 2 套⽤多個 CSS 類別、疊加與覆蓋的特性 w1_2_8 - home.html 1. 我們建立的 CSS 類別 red-zombie-name1 與 red-zombie-name2 。 2. red-zombie-name2 與 red- zombie-name1 不同的地⽅是多了 個 font-weight: bold; ，另外 font-size 改為 30px 。 3. 類別是可以多重套⽤的，只要以空⽩ ( ) 隔開即可， 這樣就會把兩個類別中的 CSS 累加起來套在 <li> 標籤上。 4. 這時你會發現， CSS 會把 red-zombie-name1 沒有的 font- weight: bold; ' 疊加 ' 上去，已有的 font-size 則 ' 覆蓋 ' 為 30px 。 1 1 <link> 標籤，連結 .css 檔 w1_2_9 - zombie.css w1_2_9 - home.html 1. 建立個 zombie.css 樣式檔，直將在其中建立 CSS 類別 red-zombie-name1 與 red-zombie-name2 。 2. 使⽤ <link> 標籤在 <head> 標籤中。 3. rel 屬性為 'stylesheet' ，表⽰參考的是⼀份 CSS ⽂件。 4. href 屬性指向 zombie.css 檔，以透過 <link> 標籤載入 zombie.css 檔中的 CSS 。注意，這個檔案 ⽬前與 home.html 同⼀個⽬錄。 5. 最後，我們再次透過 class 屬性與 CSS 類別 red-zombie- name1 、 red-zombie-name2 部份改變殭屍名樣式的 <li> 上。 1 1 Bootstrap 、⼀系列好⽤的 CSS 類別 w1_2_11 - zombie.css 改成 css 檔的好處是無論多少個網⾴都可以共⽤⼀份 CSS 檔，修改 CSS 檔則所有網⾴也會直 接⽣效。 提 ⽰ 1. 連結 Bootstrap 的 CSS 檔，其中製作了⼀堆好⽤的類 別 class 可直接使⽤。這個 CSS 檔的位置為 Boostrap 於網 路上分享的位置。 2.Boostrap 中的 container 類別會可將你的內容左右留下適當的邊寬， 你只要加上 container 類別即可。 3. 接著以製作⼀個表單 <form> 標籤。 4. 使⽤ bootstrap 的 'form-control' 放在 <input> 可以讓 <input> 與 <label> 標籤搭配做出適當的排版。 5. 使⽤ ’form-check’ 做出⼀個適合 <input> 為 checkbox 的排列，之 後在其中分別使⽤ 'form-check-input' 與 'form-check-label' 類別 讓 <input> 與 <label> 做出適當的排版。 6. 使⽤ 'btn' 與 'btn-primary' 類別，套⽤ Boostrap 的 btn 類別， 並透⽤ btn-primary 類別將⾊系變為主⾊藍⾊。 7. 兩個類別之間只需以空⽩ ( ) 隔開即可。 8. 透過 Bootstrap ，你會發現基本的畫⾯和排版都變漂亮了。 1 2 3 4 1 2 3 4 w1_2_10 - zombie.css 想要做個登入表單，怎麼做起來感覺非常陽春呢 ? 1. 使⽤ <form> 標籤製作表單，與 <form> 標籤相關的標籤， 即是為了做出讓使⽤者可以輸入資料的表單。 2. 分別使⽤ 3 個 <input> 標籤加上 <br> 換⾏來製作登入的表單。 3. 最後是⼀個 ’ 送出的按鈕 ' 。 4. 但怎麼感覺做出來的畫⾯非常的陽春， 有什麼好⽅法可以讓畫⾯變漂亮嗎 ?

留言

張貼留言