css標簽選擇器，類選擇器

2024-04-27 15:18:56

字體：大中小

來源：轉載

供稿：網友

一，類選擇器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>10-CSS類選擇器.html</title>  <style> .p1{ color: red; } .p2{ color: burlywood; } .p3{ color: greenyellow; } .p4{ color: cyan; } .para1{ color: green; } .para2{ font-size:50px; } </style></head><body><h1>成功法則</h1><p class="p1">遲到毀一生</p><p class="p2">早退窮三代</p><p class="p3">按時上下班</p><p class="p4">終成高富帥</p><br><p class="para1 para2">我是段落</p></body></html>

二，id類選擇器和class選擇器的比較

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>11-cssid選擇器和class選擇器.html</title>  <style> /* .para1{ color: red; font-size: 30px;; } .para2{ font-size: 30px; text-decoration: underline; } .para3{ color: red; text-decoration: underline; }*/ .coloR{ color: red; } .size30{ font-size: 30px; } .line{ text-decoration: underline; } </style></head><body><p class="coloR size30">第一段文字</p><p class="size30 line">第二段文字</p><p class="coloR line">第三段文字</p></body></html>

上一篇：jsp通過include指令引入html亂碼的解決方法

下一篇：CSS清除浮動_清除float浮動