css制作存放代码
使用CSS制作代码存放区域的几种方法
内联样式
直接在HTML元素的style属性中编写CSS代码，适用于简单样式调整。
<div style="background: #f5f5f5; padding: 10px; border-radius: 5px;">
// Your code here
</div>内部样式表
在HTML文档的<head>部分通过<style>标签定义样式，适合单页面使用。
<style>
.code-container {
background: #f0f0f0;
border-left: 4px solid #3498db;
padding: 15px;
font-family: monospace;
white-space: pre;
}
</style>外部样式表
创建独立的.css文件并通过<link>引入，推荐用于多页面项目。
/* styles.css */
.code-box {
background-color: #282c34;
color: #abb2bf;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
tab-size: 4;
}CSS预处理器 使用Sass/Less等预处理器增强代码可维护性：
// _code.scss
$code-bg: #2d2d2d;
$code-font: 'Fira Code', monospace;
.code-block {
background: $code-bg;
font-family: $code-font;
line-height: 1.6;
@include box-shadow(0 2px 10px rgba(0,0,0,0.1));
}伪元素美化 通过CSS伪元素添加装饰性元素：
.code-header::before {
content: '•••';
color: #ff5f56;
margin-right: 8px;
}响应式设计 确保代码区域在不同设备上的显示效果：
@media (max-width: 768px) {
.responsive-code {
font-size: 14px;
padding: 10px;
}
}语法高亮方案 使用特定类名实现语法高亮效果：
.code-keyword { color: #c678dd; }
.code-string { color: #98c379; }
.code-comment { color: #5c6370; font-style: italic; }注意事项
- 优先使用
monospace字体族保证等宽显示 - 设置
white-space: pre保留代码格式 - 考虑添加水平滚动条避免代码换行
- 为代码块添加适当的
line-height提升可读性
