05类选择器.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 类选择器*/ .mingren { color: red; } .history { font-size: 30px; } .文物 { color: pink; } /* .246 { font-size: 30px; } */ .c-orange { color: orange; } </style> </head> <body> <div class="mingren">名人</div> <div class="history">历史</div> <div class="文物">文物</div> <div class="246">文物</div> <p class="c-orange">猥琐发育，别浪</p> </body> </html>
06google案例.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span { font-size: 100px; } .blue { color: blue; } .red { color: red; } .orange { color: orange; } .green { color: green; } </style> </head> <body> <span class="blue">G</span> <span class="red">o</span> <span class="orange">o</span> <span class="blue">g</span> <span class="green">l</span> <span class="red">e</span> </body> </html>
07一个标签携带多个类.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* .lb { color: pink; font-size: 20px; font-weight: 700; }*/ .pink { color: pink; } .font20 { font-size: 20px; } .fontWeight { font-weight: 700; } </style> </head> <body> <div class="pink font20 fontWeight">刘备</div> <div class="font20 fontWeight">张飞</div> <div class="pink fontWeight">关羽</div> </body> </html>