CSS 提供了丰富的样式属性，包括背景颜色、内边距、外边距、边框颜色等，用于全面控制网页的视觉效果。每个 CSS 属性都采用"名称:值"的格式，多个属性之间使用分号分隔。
基础示例
<body style="text-align: center;">
<h2 style="color: #2c3e50; font-family: 'Arial', sans-serif;">欢迎学习前端技术</h2>
<p style="color: #34495e; font-size: 18px; line-height: 1.6;">
代码号这是一个提供实用技术学习资源的平台。
</p>
</body>
代码说明：上述示例使用 style 属性为 HTML 元素添加了基础样式，包括文本对齐方式、颜色和字体设置。
CSS 的三种应用方式
1. 内联样式 (Inline CSS)内联样式直接在 HTML 元素中使用 style 属性定义，适用于单个元素的独特样式。
<h3 style="color: #e74c3c;
font-style: normal;
text-align: center;
font-size: 24px;
padding: 15px;">
使用内联样式学习CSS基础
</h3>
注意： 虽然内联样式使用方便，但在大型项目中不建议使用，因为它会将内容与表现混合，降低代码的可维护性。2. 内部样式表 (Internal CSS)
内部样式表位于 HTML 文档的 <head> 部分，使用 <style> 标签包含，适用于单个页面的样式定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
/* 基于元素选择器的样式 */
body {
background-color: #f8f9fa;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
h2 {
color: #2980b9;
font-size: 28px;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.6;
color: #2c3e50;
}
/* 基于类选择器的样式 */
.primary { color: #3498db; }
.secondary { color: #7f8c8d; }
.accent { color: #e74c3c; }
</style>
</head>
<body>
<h2>使用内部样式表学习CSS</h2>
<p class="primary">这是主要颜色的段落文本</p>
<p class="secondary">这是次要颜色的段落文本</p>
<p class="accent">这是强调颜色的段落文本</p>
</body>
</html>
3. 外部样式表 (External CSS)外部样式表将 CSS 代码保存在独立的 .css 文件中，通过 <link> 标签引入 HTML 文档。这是最推荐的方式，特别适合多页面项目。
HTML 文件 (index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container">
<h2>使用外部样式表学习CSS</h2>
<p class="info-text">这是使用外部CSS文件样式的段落文本</p>
<p class="highlight">这是突出显示的文本内容</p>
</div>
</body>
</html>
CSS 文件 (styles.css):
/* 基础样式 */
body {
background-color: #ecf0f1;
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #2c3e50;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 30px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
color: #2980b9;
text-align: center;
margin-bottom: 25px;
}
.info-text {
font-size: 16px;
color: #34495e;
margin-bottom: 15px;
}
.highlight {
background-color: #fff3cd;
padding: 15px;
border-left: 4px solid #ffc107;
border-radius: 4px;
}
常用 CSS 属性参考
| 属性名称 | 语法示例 | 描述说明 |
|---|---|---|
| background-color | background-color: #f8f9fa; |
设置元素的背景颜色 |
| color | color: #2c3e50; |
设置文本颜色 |
| padding | padding: 15px 20px; |
设置内容与边框之间的空间 |
| margin | margin: 20px 0; |
设置元素外部的空间 |
| font-family | font-family: 'Arial', sans-serif; |
设置字体类型 |
| font-size | font-size: 16px; |
设置字体大小 |
| text-align | text-align: center; |
设置文本对齐方式 |
现代 CSS 开发实践
1. 使用 CSS 变量保持一致性CSS 自定义属性（变量）有助于在整个项目中保持设计一致性。
:root {
--primary-color: #3498db;
--secondary-color: #2c3e50;
--spacing-unit: 16px;
--border-radius: 6px;
}
.container {
background-color: var(--primary-color);
color: var(--secondary-color);
padding: calc(var(--spacing-unit) * 2);
border-radius: var(--border-radius);
}
2. 使用 Flexbox 和 Grid 实现响应式布局Flexbox 适合一维布局，Grid 适合二维复杂布局。
Flexbox 示例：
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.nav-item {
flex: 1;
text-align: center;
}
Grid 示例：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 20px 0;
}
3. 移动优先的响应式设计采用移动优先策略，使用媒体查询适配不同屏幕尺寸。
/* 基础样式（移动设备） */
.container {
padding: 15px;
font-size: 16px;
}
/* 中等屏幕设备 */
@media (min-width: 768px) {
.container {
padding: 25px;
font-size: 18px;
}
}
/* 大屏幕设备 */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
4. 支持深色模式使用媒体查询检测用户偏好，提供深色主题支持。
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
CSS 作为网页设计的核心技术，不断演进发展。从基础样式设置到现代响应式设计，掌握 CSS 的各种应用方式和实践对于创建美观、可用且可访问的网站至关重要。通过使用 CSS 变量、Flexbox、Grid 布局和媒体查询等现代特性，开发者可以创建出适应各种设备和用户需求的网页体验。持续学习和实践这些技术，将有助于提升前端开发技能，创建出符合当代网页设计标准的网站作品。
