CSS 知识点及使用案例
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 基本选择器
- 元素选择器：选择所有指定类型的元素。
p { color: gray;
}- 类选择器：选择所有具有指定类的元素。
.highlight { background-color: yellow;
}- ID 选择器：选择具有指定 ID 的元素。
#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 伪类选择器
选择处于特定状态的元素。
a:hover { color: red;
}3. 常用样式
3.1 文本样式
- 颜色：使用颜色名称、十六进制代码、RGB、RGBA 等。
p { color: #333; /* 十六进制颜色 */
}- 文本对齐：设置文本的水平对齐方式。
.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. 显示属性
- display：控制元素的显示类型。
.hidden { display: none; /* 隐藏元素 */
}