参考博客：https://www.cnblogs.com/majj/p/9021419.html
1.CSS的三种链接样式:
行内链接(优先级最高)
内接样式
外接样式
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 权重： 优先级高 权重大 谁在页面谁的权重大 --> <!-- 外接样式 --> <link rel="stylesheet" href="./index.css"> <style type="text/css"> /*内接样式*/ /*选择器*/ span{ color: green; font-size: 30px; } </style> <script type="text/javascript" src="./javascript/index.js"></script> </head> <body> <!-- 行内样式 的优先级是最高最高的 --> <p style="color: red; font-size: 30px;">wusir</p> <span style="color: purple;">alex</span> </body> </html>
2.CSS的选择器
选中的是"共性"
（1）CSS 层叠样式表 作用：修饰网页结构 <!-- 行内样式 的优先级是最高最高的 --> <p style="color: red; font-size: 30px;">wusir</p> <span style="color: purple;">alex</span> （2）css的三种引入方式 - 行内样式 注意：行内样式的优先级是最高的 - 内接样式 - 外接样式 （3）基本选择器 id选择器 选中的是特性 唯一的，不能重复 标签选择器 选中的是页面中共性的标签 类选择器 选中的也是页面中共性的标签，类名可以有多个 通配符选择器 通常是对页面进行重置样式表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="./css/reset.css"> <style type="text/css"> 1.标签选择器 选中的是 ‘共性’ p{ color: red; } ul,ol{ list-style: none; } /*重置样式*/，/*组合选择器*/ 2.类（class）选择器 .类名 选中的也是共性 可以有多个 小技巧： 不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式 每个类要尽可能的小，有共同的概念，能够让更多的标签使用 .active{ color: yellow; } .large{ font-size: 30px; } 3.id选择器 选中的是‘特性’ id是唯一的 p1{ color: green; } 4. 通配符选择器 * （在以后工作中不要用这个 一开始布局页面如果写css,一定要重置 { padding: 0; margin: 0; } a{ text-decoration: none; } 清除a标签的下划线 .baidu{ color: blue; text-decoration: underline; 下划线 cursor: pointer; 显示小手 } input{ border: none; #（边框） width: 400px; height: 40px; border: 1px solid #e0e0e0; （高度、样式、颜色） font-size: 22px; （设置字体大小） } </style> </head> <body> <p id="p1">alex</p> <p id="p2">alex2</p> <p>alex3</p> <p>alex4</p> <p>alex5</p> <ul> <li class="active large"> #类名可是多个，方便以后选择时，可以类的不同而精确选择自己想要的数据 alex1 </li> <li> alex2 </li> </ul> <ul> <li class="active"> wusir </li> </ul> <a href="javascript:void(0);">百度一下</a> <span class="baidu">百度一下</span> <input type="text"> </body> </html>