css文件是一个长句子

Question

我从一个网站上抓取了一个 CSS 文件来查看他们是如何做的，但是该文件主要是一个长句子。 我想把它拆开以便于阅读。我以为我会在每个 (}) 处打破它，但在一行 CSS 文件中有超过 4100 个。 包括文件的一部分。 知道我可以做些什么来使其可读吗？

*{margin:0;padding:0;outline:0;border:none;text-decoration:none}html{height:100%}body{width:100%;height:100%;background:#191919;color:#fff;font-family:'PT Sans',sans-serif;font-weight:400}textarea{font-family:'PT Sans',sans-serif;font-weight:400;font-size:18px;resize:none;overflow:hidden}button{cursor:pointer;display:inline-block}.clear{clear:both;margin:0!important}.hide{display:none}.wrapper{width:960px;margin:0 auto;min-height:100%}.header-bg{width:100%;height:115px;z-index:-1;position:absolute}.header{width:100%;height:115px;position:relative}.logo{float:left;display:block}.header-btns{float:right;width:284px;margin-top:32px}.header .user-info .full-name:before{display:none}.header-btns .btn{font-size:14px;display:block;width:131px;padding:6px 0 9px 0;text-align:center;color:#fff;font-weight:400}.header-btns a:before{content:"";vertical-align:middle;display:inline-block;margin:-3px 8px 0 0;background:url(../images/icons.png) no-repeat}.btn{display:inline-block}.btn.login{float:right}.btn.login:before{width:13px;height:13px;background-position:0 0}.btn.back{float:left}.btn.back:before{width:12px;height:11px;background-position:-13px 0}.calendar .form{padding:21px 19px}.calendar .form .selectpicker{position:relative;width:154px}.calendar .selectpicker .dropdown{top:42px;width:100%;max-height:300px;overflow:auto}.calendar .selectpicker .dropdown p{padding:11px 0 11px 15px}.calendar .selectpicker .dropdown p.active{padding:11px 0 11px 15px}.main-menu{width:960px;height:45px}.main-menu ul{list-style:none}.main-menu-nav.logged>li>a{padding:0 28px}.main-menu .main-menu-nav>li{float:left}.main-menu .main-menu-nav>li>a{display:block;height:45px;line-height:45px;color:#fff;font-family:'PT Sans',sans-serif;font-weight:700;font-size:15px;letter-spacing:-.1px;word-spacing:1px;text-align:center}.main-menu .main-menu-nav>li.last-item{float:left}.main-menu .main-menu-nav.logged>li.last-item a{color:#ffc600}.main-menu .main-menu-nav>li.last-item.join-now a{float:none}.main-menu .main-menu-nav:not(.logged)>li.last-item a{border-right:0}.main-menu .main-menu-nav>

Answer 1

这是一个缩小的 css，但你可以使用 CSS beautifier可读性:

*{
    margin:0;
    padding:0;
    outline:0;
    border:none;
    text-decoration:none
}
html{
    height:100%
}
body{
    width:100%;
    height:100%;
    background:#191919;
    color:#fff;
    font-family:'PT Sans',sans-serif;
    font-weight:400
}
textarea{
    font-family:'PT Sans',sans-serif;
    font-weight:400;
    font-size:18px;
    resize:none;
    overflow:hidden
}
button{
    cursor:pointer;
    display:inline-block
}
.clear{
    clear:both;
    margin:0!important
}
.hide{
    display:none
}
.wrapper{
    width:960px;
    margin:0 auto;
    min-height:100%
}
.header-bg{
    width:100%;
    height:115px;
    z-index:-1;
    position:absolute
}
.header{
    width:100%;
    height:115px;
    position:relative
}
.logo{
    float:left;
    display:block
}
.header-btns{
    float:right;
    width:284px;
    margin-top:32px
}
.header .user-info .full-name:before{
    display:none
}
.header-btns .btn{
    font-size:14px;
    display:block;
    width:131px;
    padding:6px 0 9px 0;
    text-align:center;
    color:#fff;
    font-weight:400
}
.header-btns a:before{
    content:"";
    vertical-align:middle;
    display:inline-block;
    margin:-3px 8px 0 0;
    background:url(../images/icons.png) no-repeat
}
.btn{
    display:inline-block
}
.btn.login{
    float:right
}
.btn.login:before{
    width:13px;
    height:13px;
    background-position:0 0
}
.btn.back{
    float:left
}
.btn.back:before{
    width:12px;
    height:11px;
    background-position:-13px 0
}
.calendar .form{
    padding:21px 19px
}
.calendar .form .selectpicker{
    position:relative;
    width:154px
}
.calendar .selectpicker .dropdown{
    top:42px;
    width:100%;
    max-height:300px;
    overflow:auto
}
.calendar .selectpicker .dropdown p{
    padding:11px 0 11px 15px
}
.calendar .selectpicker .dropdown p.active{
    padding:11px 0 11px 15px
}
.main-menu{
    width:960px;
    height:45px
}
.main-menu ul{
    list-style:none
}
.main-menu-nav.logged>li>a{
    padding:0 28px
}
.main-menu .main-menu-nav>li{
    float:left
}
.main-menu .main-menu-nav>li>a{
    display:block;
    height:45px;
    line-height:45px;
    color:#fff;
    font-family:'PT Sans',sans-serif;
    font-weight:700;
    font-size:15px;
    letter-spacing:-.1px;
    word-spacing:1px;
    text-align:center
}
.main-menu .main-menu-nav>li.last-item{
    float:left
}
.main-menu .main-menu-nav.logged>li.last-item a{
    color:#ffc600
}
.main-menu .main-menu-nav>li.last-item.join-now a{
    float:none
}
.main-menu .main-menu-nav:not(.logged)>li.last-item a{
    border-right:0
}
.main-menu .main-menu-nav>

要还原它，您可以使用类似 this one 的压缩器，这甚至对于 javascript 代码也很常见。