CSS代码压缩美化工具 | 在线CSS精简格式化工具

压缩参数配置

简化零值移除注释合并相同选择器移除末尾分号简化颜色值移除空白

原始字节大小

压缩后字节

空间节省比例

Gzip预估大小

输入原始CSS代码

/* 主容器样式 */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
/* 头部样式 */
.header {
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
    padding: 15px 0;
}
.header .logo {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
}
/* 导航样式 */
.nav {
    display: flex;
    gap: 20px;
}
.nav-link {
    color: #666666;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.nav-link:hover {
    background-color: #f5f5f5;
    color: #000000;
}
.nav-link.active {
    background-color: #007bff;
    color: #ffffff;
}
/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}
.btn-primary {
    background-color: #007bff;
    color: #ffffff;
}
.btn-primary:hover {
    background-color: #0056b3;
}
/* 响应式 */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .nav {
        flex-direction: column;
        gap: 10px;
    }
}

行数: 0 | 选择器: 0 | 属性: 0

处理后CSS代码

行数: 0

压缩选项说明

移除注释：删除所有CSS /* */格式注释，清理开发备注内容，减少代码体积
移除空白：自动清理多余换行、空格与制表符，压缩样式代码排版
移除末尾分号：去除每个样式块内最后一条属性多余的结束分号，不影响浏览器解析
简化颜色值：长十六进制色值简写，rgb颜色自动转为十六进制颜色码，精简颜色定义
简化零值：将0px、0rem、0em等单位零值统一简写为0，缩短样式代码
合并相同选择器：自动合并页面中重复的CSS选择器，整合多条样式规则，精简重复代码