行內標簽:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <!--style="background-color: red;"--> <body style="background-color: red;"> <!--行內樣式--> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> <p style="font-size: 40px; color: yellow;">旭寶愛吃魚</p> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> <div style="font-size: 30px; color: red; background-color: green;">旭寶愛吃魚</div> </body> </html>
圖片
業內標簽:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-- css遵循一個規律: 1.就近原則 2.疊加原則 --> <style> div{ color: purple; font-size: 40px; background-color: yellowgreen; } p{ color: deeppink; font-size: 50px; } </style> <link href="css/index.css" rel="stylesheet"> </head> <body> <div style="color: hotpink; background-color: red;">旭寶愛吃魚</div> <div>旭寶愛吃魚</div> <div>旭寶愛吃魚</div> <div>旭寶愛吃魚</div> <div>旭寶愛吃魚</div> <p>旭寶愛吃魚</p> <p>旭寶愛吃魚</p> <p>旭寶愛吃魚</p> <p>旭寶愛吃魚</p> </body> </html>
圖片:
外部樣式:
div{
color: brown;
font-size: 50px;
}
p{
background-color: yellow;
color: darkgreen;
font-size: 39px;
}
圖片:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div>旭寶愛吃魚</div> <p>旭寶愛吃魚</p> </body> </html>
圖片:
