css制作简介
使用CSS制作简介的基本方法
内联样式
直接在HTML元素的style属性中编写CSS代码，适用于快速测试或少量样式调整。
<p style="color: blue; font-size: 16px;">这是一段简介文本。</p>内部样式表
在HTML文件的<head>部分使用<style>标签定义CSS规则，适用于单个页面的样式设计。
<head>
<style>
.intro {
color: #333;
line-height: 1.6;
padding: 20px;
}
</style>
</head>
<body>
<div class="intro">简介内容...</div>
</body>外部样式表
将CSS代码保存在单独的.css文件中，通过<link>引入，适合多页面共享样式。
<link rel="stylesheet" href="styles.css">styles.css文件内容示例：
.intro {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
}常用样式属性
文本样式
font-family: 设置字体（如Arial, sans-serif）font-size: 字号（如14px或1.2em）color: 文字颜色（支持十六进制、RGB等格式）text-align: 对齐方式（left/center/right）
盒模型
padding: 内边距（如10px 20px）margin: 外边距（如0 auto实现水平居中）border: 边框（如1px solid #ccc）box-shadow: 阴影效果（如2px 2px 5px rgba(0,0,0,0.1)）
响应式设计技巧
使用媒体查询适配不同设备：
@media (max-width: 768px) {
.intro {
font-size: 14px;
padding: 10px;
}
}动画效果示例
通过transition或@keyframes添加交互效果：
.intro:hover {
transform: scale(1.02);
transition: all 0.3s ease;
}实用工具推荐
- CSS预处理器：Sass/Less可简化代码编写
- 框架辅助：Bootstrap/Tailwind CSS提供现成样式类
- 在线生成器：CSS Gradient/Animista等工具快速生成效果代码
