1. CSS 三种引入方式
1.1 行内样式
直接在 HTML 元素上通过 style 属性定义样式。
| <p style="color: red; font-size: 20px;">这是行内样式。</p> |
1.2 内部样式表
在 HTML 文档的 <head> 部分使用 <style> 标签定义样式。
| <head> |
| <style> |
| p { |
| color: blue; |
| font-size: 18px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>这是内部样式。</p> |
| </body> |
1.3 外部样式表
通过 <link> 标签在 HTML 文档的 <head> 部分链接外部 CSS 文件。
| 1.3 外部样式表 |
| 通过 <link> 标签在 HTML 文档的 <head> 部分链接外部 CSS 文件。 |
styles.css 文件内容：
| p { |
| color: green; |
| font-size: 22px; |
| } |
2. CSS 选择器
2.1 基本选择器
| .highlight { |
| background-color: yellow; |
| } |
| #unique { |
| border: 1px solid black; |
| } |
2.2 符号选择器
| #parent .child { |
| font-size: 14px; |
| } |
| h1, h2, h3 { |
| color: purple; |
| } |
2.3 属性选择器
选择具有特定属性或属性值的元素。
| a[target="_blank"] { |
| color: orange; |
| } |
2.4 伪类选择器
选择处于特定状态的元素。
3. 常用样式
3.1 文本样式
- 颜色：使用颜色名称、十六进制代码、RGB、RGBA 等。
| .text-center { |
| text-align: center; |
| } |
| a { |
| text-decoration: none; |
| } |
3.2 字体样式
| body { |
| font-family: Arial, sans-serif; |
| } |
| .bold-text { |
| font-weight: bold; |
| } |
| .italic-text { |
| font-style: italic; |
| } |
3.3 列表样式
| ul { |
| list-style-type: none; |
| } |
3.4 背景样式
| .bg-color { |
| background-color: lightblue; |
| } |
| .bg-image { |
| background-image: url('background.jpg'); |
| } |
4. 显示属性
| .hidden { |
| display: none; |
| } |
