<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 将body中要使用的样式 抽取到head中 --> <style> /* 对input元素生效 这里是css的注释方式*/ /* input { width: 60px; height: 40px; background-color: bisque; border: 1px solid yellowgreen; font-size: 22px; font-family: '隶书'; border-radius: 5px; } */ /* 元素选择器 根据标签名找到要作用的范围 */ /* id选择器 id是用来识别一个唯一元素的属性 id值是唯一的 */ /* #btn2 { width: 60px; height: 40px; background-color: bisque; border: 1px solid yellowgreen; font-size: 22px; font-family: '隶书'; border-radius: 5px; } */ /* class选择器 根据元素class属性的值 确定作用范围 class属性 可以使用一个对应的样式 也可以使用多个 */ .shapeClass { width: 60px; height: 40px; border-radius: 5px; } .colorClass { background-color: bisque; border: 1px solid yellowgreen; color: red; } .fontClass { font-size: 22px; font-family: '隶书'; } button { padding: 5px 16px; background-color: #f0f0f0; border: none; border-radius: 4px; transition: background-color 0.3s ease; } button:active { background-color: #007bff; color: white; } </style> </head> <body> <!-- 内嵌式 css --> <!-- 缺点:生效范围在当前的html页面中 如果想要复用这个效果 在新的页面还需要复制一份 --> <input id="btn1" class="shapeClass colorClass fontClass" type="button" value="按钮1" /> <br /> <br /> <input id="btn2" class="shapeClass" type="button" value="按钮2" /> <br /> <br /> <input id="btn3" class="fontClass" type="button" value="按钮3" /> <br /> <br /> <button id="btn4">按钮</button> </body> </html>