[微精通:網頁設計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