CSS基础-01选择器和样式（id选择器、class选择器、内联样式、内部样式表、外部样式表、多重样式优先级）
1. 选择器
1.1 id 选择器
- 语法
用 “
#标签名” 定义
- 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>蜀</title> <style> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">受id选择器影响</p> <p>不受选择器影响</p> </body> </html>
- 显示结果
1.2 class 选择器
- 语法
用 “
元素.标签名” 定义
如：p.class1
不写元素表示所有
- 代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CROW-SONG</title> <style> .center { text-align:center; } </style> </head> <body> <h1 class="center">标题居中</h1> <p class="center">段落居中。</p> </body> </html>
2. 样式
2.1 内联样式
- 作用
当个别元素需要使用特殊样式时
- 方法
在相关标签中加入样式属性。
- 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>蜀</title> </head> <body style="background-color:red;"> <h2 style="background-color:yellow;color:blue">黄底蓝字的标题</h2> <p style="background-color:green;">绿底黑字的段落</p> </body> </html>
2.2 内部样式表
- 语法
在head中定义CSS表
- 示例
<!DOCTYPE html> <html> <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> <meta charset="utf-8"> <title>蜀</title> </head> <body> <h1 style="text-align:center;">标题</h1> <p>段落内容和body是head中style定义的</p> </body> </html>
- 输出
2.3 外部样式表
指定外部文件定义CSS表
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
说明：
- rel 是链接的类型，此处说明是 style sheet
- type 是外联文件的类型
- href 是外联文件的位置
2.4 多重样式优先级
如果一个元素有几个样式则
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
分类:
前端开发 / CSS基础教程
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球 运作规律
· 上周热点回顾（3.3-3.9）