3_基本选择器
标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1 { color: aqua; background: #3cbda6; border-radius:20px; } p{ font-size: 30px; } </style> </head> <body> <h1>学Java</h1> <h1>你真帅！！！</h1> <p>听狂神说</p> </body> </html>
结果展示
类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式:，class的名称{} 好处，可以多个标签归类，是同一个class */ .tuyin{ color: maroon; } .xiaoming{ color: aquamarine; } </style> </head> <body> <h1 class="tuyin">标题1</h1> <h1 class="xiaoming">标题2</h1> <h1 class="tuyin">标题3</h1> <p class="xiaoming">P标签</p> </body> </html>
结果展示
id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器的格式：#id名称{} id必须保证全局唯一！ 不遵循就近原则，固定的 id选择器>class选择器>标签选择器 */ #tuyin{ color: #925242; } .style{ color: aqua; } h1{ color: #af0f66; } </style> </head> <body> <h1 class="style" id="tuyin">标题1</h1> <h1 class="style">标题2</h1> <h1>标题3</h1> <h1>标题4</h1> <h1>标题5</h1> </body> </html>
结果展示
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律