<!-- （1）CSS 层叠样式表 作用：修饰网页结构 （2）css的三种引入方式 权重： 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意：行内样式的优先级是最高的 - 内接样式 - 外接样式 （3）基本选择器 id选择器 # 选中的是特性 唯一的，不能重复 （与js有关系） 标签选择器 选中的是页面中共性的标签 类选择器 . 选中的也是页面中共性的标签，类名可以有多个 通配符选择器 通常是对页面进行重置样式表 border: 1px solid #e0e0e0 设置input的边框颜色和宽度 <a href="javascript:void(0);">百度一下</a> 去除a 标签的下划线 text-decoration: underline; 普通文字加下划线 cursor: pointer; 显示小手的状态 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css三种引入方式 和四种基本选择器</title> <!-- 外接样式 --> <link rel="stylesheet" href="./index.css"> <!--内接样式--> <style type="text/css"> /*内接样式*/ /*1 选择器 选中的是 ‘共性’ */ span{ color: green; font-size: 30px; } /*组合选择器*/ ul,ol{ list-style: none; } /*2 类选择器 .类名 选中的也是共性 可以有多个*/ .active{ color:blue font-size: 30px; } /*3.id选择器 选中的是‘特性’ # id是唯一的*/ #p1{ color: green; } /*4. 通配符选择器 * 在以后工作中不要用这个 */ /*一开始布局页面如果写css,一定要重置*/ /* 将所有的边界空隙都设置为 不空格 *{ padding: 0; margin: 0; } */ a{ /*清除a标签的下划线*/ text-decoration: none; } .baidu{ color: blue; /*加下划线*/ text-decoration: underline; /*显示小手的状态*/ cursor: pointer; } input{ border: none; width: 400px; height: 40px; border: 1px solid #e0e0e0; font-size: 22px; } </style> <!--引入js文件--> <!--js文件中的内容 ： alert(22222) 网页提示;--> <script type="text/javascript" src="./javascript/index.js"></script> </head> <body> <!-- 行内样式 的优先级是最高最高的 --> <p style="color: red; font-size: 30px;">行内样式</p> <span style="color: purple;">行内样式2</span> <p id="p1">p1的id</p> <p id="p2">p2的id</p> <ul> <li class="active"> 王先生 </li> </ul> <!--a 标签的下划线被去掉了 javascript:void(0); 点击不变化正常是锚点点击刷新--> <a href="javascript:void(0);">百度一下</a> <span class="baidu">百度一下</span> <input type="text"> </body> </html>