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; /* 隐藏元素 */
}