1.样式：
1.1内联式（行内）
<div style="color:red";></div>
1.2内嵌式（写在<head>内）
<style>
div{color:red;}
</style>
1.3外链式（写在.css文件内，加载引用）在head内写
<link rel="stylesheet"(样式表) href="./XXX.css">
xxx.css文件：div{color:red;}
<head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="test.css"> <!--外部加载引用 test.css : h3{color: green} --> <style> /*内嵌式*/ h2{color: blue} </style> </head> <body> <h1 style="color:red">行内式</h1> <!--行内式--> <h2>内嵌式</h2> <h3>外链式</h3> </body>
2.标签选择器
<head> <meta charset="utf-8"> <title>无标题文档</title> <style> /* *{color:red;} 所有标签*/ /* p{color:blue} 标签选择*/ /* #id1{color:green} id选择*/ /* .cla1{color:aqua} class选择器*/ /* p[name="nm1"]{color:yellow} 属性选择*/ /* p,h4{color:red} 并列选择*/ /* div p{color:aqua} 子孙元素选择 （权值可以相加）*/ /* div>p{color:green} 子元素选择*/ /* P+span{color:red} 下一个兄弟元素*/ /* p~span{color:aqua} 所有兄弟元素*/ div p:nth-of-type(2){color:aqua} /* 第二个P元素*/ a:link{color:aqua} /*未访问链接*/ a:visited{color:green} /*访问过链接*/ a:active{color:yellow} /*正在跳转的链接*/ a:hover{color:darkorchid} /*鼠标在链接上面时*/ inupt:checked{height: 50px;width: 50px;} </style></head> <body> <div> <p name="nm1">哈哈哈哈</p> <span id="id1">嘿嘿嘿嘿</span> <span> <p>呼呼呼呼</p> <h4 class="cla1">呵呵呵呵</h4> </span> <p>啊啊啊啊</p> </div> <a id="id1" href="02.jianli.html">简历</a> <a href="a.html">A网站</a></body>
3.优先级（权值）
内联：1000 id:100 class:10 标签名（属性）：1 通用：0