1 css引入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内嵌式引入--> <!--<style>--> <!--a{--> <!--color:rebeccapurple;--> <!--font-size:30px;--> <!--font-weight:900;--> <!--}--> <!--p{--> <!--ackground-color:gold;--> <!--}--> <!--</style>--> <!--连接式--> <!--<link rel="stylesheet" href="index.css"--> <!--导入式--> <!--<style>--> <!--@import "index.css";--> <!--</style>--> </head> <body> <p>I am P!</p> <a href="">click</a> <div>CIV</div> <div>DIV2</div> <!--行内式--> <!--<div style="color: red;background-color:darkgreen">DIV3</div>--> </body> </html>
a{ color:rebeccapurple; font-size:30px; font-weight:900; } p{ background-color:gold; }
2 基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> <!--标签选择器--> <!--p{--> <!--background-color:rebeccapurple;--> <!--}--> <!--id选择器--> <!--#p2{--> <!--background-color:rebeccapurple;--> <!--}--> <!--class选择器--> <!--.fang{--> <!--background:rebeccapurple;--> <!--}--> <!--通用选择器--> <!--*{--> <!--background:rebeccapurple;--> <!--}--> </style> </head> <body> <p class="fang">ppp1</p> <p id="p2">ppp2</p> <p class="fang">ppp3</p> <div>DIV</div> <span>SPAN</span> </body> </html>
3 组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> <!--后代选择器--> <!--.he p{--> <!--color:red;--> <!--}--> <!----> <!--.yi p{--> <!--color:red;--> <!--}--> <!--子代选择器--> <!--.yi > p{--> <!--color:red;--> <!--}--> <!--多元素选择器--> <!--.he p,.p4{--> <!--color:red;--> <!--}--> <!--毗邻选择器--> <!--.yi + a{--> <!--color:red;--> <!--}--> <!--兄弟选择器--> <!--.yi ~ p{--> <!--color:red;--> <!--}--> <!--多个选择器组合到一起使用--> <!--ul.yan li{--> <!--color:red;--> <!--}--> <!--div.jie{--> <!--color:red;--> <!--}--> </style> </head> <body> <div class="jie">c1</div> <div class="yi"> <p>p1</p> <div class="he"> <p>p3</p> </div> <p>p2</p> <a href="">click</a> </div> <a href="">aaa</a> <p>p5</p> <p class="p4">p4</p> <ul class="yan"> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <ol class="yan"> <li>222</li> <li>222</li> <li>222</li> <li>222</li> </ol> <ul> <li>333</li> <li>333</li> <li>333</li> <li>333</li> </ul> </body> </html>