1. CSS 三种引入方式
1.1 行内样式
直接在 HTML 元素上通过 style
属性定义样式。
html
<p style="color: red; font-size: 20px;">这是行内样式。</p>
1.2 内部样式表
在 HTML 文档的 <head>
部分使用 <style>
标签定义样式。
html
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>这是内部样式。</p>
</body>
1.3 外部样式表
通过 <link>
标签在 HTML 文档的 <head>
部分链接外部 CSS 文件。
html
1.3 外部样式表
通过 <link> 标签在 HTML 文档的 <head> 部分链接外部 CSS 文件。
styles.css
文件内容:
css
p {
color: green;
font-size: 22px;
}
2. CSS 选择器
2.1 基本选择器
- 元素选择器:选择所有指定类型的元素。
html
p {
color: gray;
}
- 类选择器:选择所有具有指定类的元素。
html
.highlight {
background-color: yellow;
}
- ID 选择器:选择具有指定 ID 的元素。
html
#unique {
border: 1px solid black;
}
2.2 符号选择器
- 交集选择器:选择具有特定父元素的后代元素。
css
#parent .child {
font-size: 14px;
}
- 并集选择器:为多个选择器指定相同的样式。
css
h1, h2, h3 {
color: purple;
}
2.3 属性选择器
选择具有特定属性或属性值的元素。
css
a[target="_blank"] {
color: orange;
}
2.4 伪类选择器
选择处于特定状态的元素。
css
a:hover {
color: red;
}
3. 常用样式
3.1 文本样式
- 颜色:使用颜色名称、十六进制代码、RGB、RGBA 等。
css
p {
color: #333; /* 十六进制颜色 */
}
- 文本对齐:设置文本的水平对齐方式。
css
.text-center {
text-align: center;
}
- 文本装饰:设置或删除文本的装饰线。
css
a {
text-decoration: none;
}
3.2 字体样式
- 字体家族:设置文本的字体。
css
body {
font-family: Arial, sans-serif;
}
- 字体粗细:设置文本的粗细。
css
.bold-text {
font-weight: bold;
}
- 字体风格:设置文本的斜体。
css
.italic-text {
font-style: italic;
}
3.3 列表样式
- 列表样式类型:设置列表项前面的标记类型。
css
ul {
list-style-type: none; /* 移除列表项前的标记 */
}
3.4 背景样式
- 背景颜色:设置元素的背景颜色。
css
.bg-color {
background-color: lightblue;
}
- 背景图片:设置元素的背景图片。
css
.bg-image {
background-image: url('background.jpg');
}
4. 显示属性
- display:控制元素的显示类型。
css
.hidden {
display: none; /* 隐藏元素 */
}