html制作css
HTML 与 CSS 基础整合
在 HTML 中引入 CSS 的方式主要有三种：内联样式、内部样式表和外部样式表。每种方式适用于不同的场景，具体选择取决于项目需求和维护性要求。
内联样式
直接在 HTML 元素的 style 属性中编写 CSS。适用于单个元素的简单样式调整，但不利于维护和复用。
示例：
<p style="color: blue; font-size: 16px;">这是一段蓝色文字。</p>内部样式表
通过 <style> 标签在 HTML 文件的 <head> 部分定义 CSS。适用于单个页面的样式，但多页面需重复编写。
示例：
<head>
<style>
p {
color: red;
font-family: Arial;
}
</style>
</head>
<body>
<p>这段文字会显示为红色。</p>
</body>外部样式表
将 CSS 保存在独立的 .css 文件中，通过 <link> 标签引入。适合多页面项目，便于维护和缓存优化。
步骤：
- 创建
styles.css文件：body { background-color: #f0f0f0; } h1 { text-align: center; } - 在 HTML 中引入：
<head> <link rel="stylesheet" href="styles.css"> </head>
CSS 选择器与常用属性
基础选择器
- 标签选择器：直接作用于 HTML 标签。
p { margin: 10px; } - 类选择器（
.）：通过class属性匹配。.highlight { background-color: yellow; } - ID 选择器（
#）：通过id属性匹配（唯一性）。#header { font-size: 24px; }
常用样式属性
- 文本与字体：
p { color: #333; font-family: "Helvetica", sans-serif; line-height: 1.5; } - 盒模型：
div { width: 200px; padding: 20px; border: 1px solid black; margin: 10px auto; }
响应式设计与布局
媒体查询
通过 @media 实现不同屏幕尺寸的适配。
示例：
@media (max-width: 600px) {
body {
font-size: 14px;
}
}Flexbox 布局
使用 display: flex 创建弹性容器，简化对齐与分布。
示例：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}Grid 布局
二维网格布局，适合复杂结构。
示例：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}实用技巧与注意事项
CSS 变量
定义可复用的值，便于统一修改。
:root {
--primary-color: #3498db;
}
button {
background-color: var(--primary-color);
}浏览器兼容性
使用前缀确保兼容性（如 -webkit-、-moz-），或通过工具如 Autoprefixer 自动处理。
性能优化
- 避免过度嵌套选择器（如
.nav ul li a）。 - 压缩 CSS 文件（如使用工具 CSSNano）。
- 优先使用类名而非标签选择器。
