时间戳

首页 > 解决方案 > 如何合并这两个 css 文件以使样式完美运行？

html - 如何合并这两个 css 文件以使样式完美运行？

问题描述

我有这两个 css 文件。一个实际上是 html 文件下的样式标签，我希望这个标签包含在我的原始 css 文件中。我如何合并它以便正确包含样式。我试过这样做，但这会破坏我的标题样式。这是两个文件。我已经将样式标签中的元素添加到我的 css 文件中，但这可能由于属性冲突、属性顺序不正确或其他原因而无法正常工作。我该如何解决这个问题，以便一切正常显示？

样式标签

<style>
        main {
            top: 110px !important;
            /* padding-bottom: 110px; */
        }
        .header-main {
            height: 90px;
        }
        .header-main .nav-header img {
            width: 85%;
        }
        .nav>li>a:focus, .nav>li>a:hover {
            background-color:unset !important;
        }
        .li-img-btn-container{
            display: flex !important;
            flex-direction: column;
            align-items: center;
        }
        .center-content
        {
            display: flex !important;
            align-items: center;
            justify-content: center;
        }
        .margin-left-right-for-btn {
            margin: 0 10px;
        }
        .img-btn-navs
        {
            
            display: flex !important;
            justify-content: space-around;
            border: none;
            min-height: 154px;
        }
        .nav-header{
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
        .header-main .menu2,
        .header-main .menu1 {
            display: flex;
            flex-direction: row;
        }
        .header-main .menu2 li,
        .header-main .menu1 li {
            display: inline-block;
        }
        .header-main .menu2 li:nth-child(2),
        .header-main .menu1 li:nth-child(2) {
            margin: 0 10px
        }
        .header-main .menu li:nth-child(1) {
            width: 40%;
        }
        /* .footer-main {
            position: relative;
            top: 100%;
        } */

        
        .hover_btn,
        .hover_btn:hover,
        .hover_btn4,
        .hover_btn4:hover,
        .hover_btn3,
        .hover_btn3:hover,
        .hover_btn1,
        .hover_btn1:hover,
        .hover_btn2,
        .hover_btn2:hover
        {
            height: 120px;
            width: 120px
        }
        
        .menu1,
        .menu2 {
            padding-inline-start: 0;
        }

        .menu1 li,
        .menu2 li {
            list-style-type: none;
            margin-top: 10px;
        }

        .menu1 li {
            margin-right: 10px;
        }
        .menu2 li {
            margin-left: 10px;
        }

        #sediment_data{
            width:35%;
        }
        #bio_stuff_data{
            width:65%;
        }
        #water_data{ 
            width:40%;
        }
        #veggies_data{
            width:20%;
        }
        #air_data{
            width:40%
        }
        /* body {
            overflow: hidden;
        } */
        @media screen and (min-width:367px) and (max-width:867px) {
            body {
                overflow: auto;
            }
            .img-btn-navs {
                flex-direction: column;
            }
            .header-main .menu2,
            .header-main .menu1 {
                display:none;
            }
            .header-main .menu li:nth-child(1) {
                width: 35%;
            }
            .header-main .nav-header img {
                width: 85%;
            }
            #sediment_data,
            #bio_stuff_data,
            #water_data,
            #veggies_data,
            #air_data{
                width:100% !important;
            }
        }
       
    </style>

css 文件

*,
:after,
:before {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    background: #fff;
    font-family: Poppins, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #0a0a0a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
}

img {
    display: inline-block;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
    -ms-interpolation-mode: bicubic
}

textarea {
    height: auto;
    min-height: 50px;
    border-radius: 0
}

select {
    box-sizing: border-box;
    width: 100%;
    border-radius: 0
}

main {

    margin-right: -.9575rem;
    margin-left: -.9575rem;
    /*margin-top: 155px;*/
    padding-bottom: 50px;
    top: 110px;
    position: absolute;
    left: 7%;
    right: 7%;
    text-align: justify
}

.log {
    max-height: 100px;
}

.header-main {
    background-color: #fff;
    box-shadow: 0 3px 6px 0 #c2c2c2;
    height: 90px;
    padding: 0 20px;
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    transition: color .25s linear .4s, background-color .25s linear .4s, transform .4s ease;
    z-index: 100
}
.header-main .nav-header img {
    width: 85%;
    height: 54px;
    top: unset
}
.nav>li>a:focus, .nav>li>a:hover {
    background-color:unset !important;
}


.li-img-btn-container{
    display: flex !important;
    flex-direction: column;
    align-items: center;
}
.center-content
{
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.margin-left-right-for-btn {
    margin: 0 10px;
}
.img-btn-navs
{
    
    display: flex !important;
    justify-content: space-around;
    border: none;
    min-height: 154px;
}
.nav-header{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.header-main.hidden {
    transform: translateY(-100%)
}

@media print,
screen and (min-width:64em) {
    .header-main {
        height: 150px;
        padding: 0 30px
    }
}

.header-main .nav-container {
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden
}

@media print,
screen and (min-width:64em) {
    .header-main .nav-container {
        padding-top: 30px;
        padding-bottom: 30px
    }
}

.header-main .nav-header {
    float: left;
    font-size: 22px
}



@media print,
screen and (min-width:64em) {
    .header-main .nav-header img {
        width: 265px;
        height: auto;
        position: relative;
        top: -10px
    }
}

.header-main .nav-header li {
    line-height: 40px
}

.header-main .nav-header li a {
    padding: 24px 25px;
    color: #0a0a0a
}

.header-main .nav-header li a:focus,
.header-main .nav-header li a:hover {
    color: #005aa0
}

.header-main .nav-header li:first-child a {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0
}

.header-main .nav-header li:not(:first-child) {
    display: none
}
.header-main .menu2,
.header-main .menu1 {
    display: flex;
    flex-direction: row;
}
.header-main .menu2 li,
.header-main .menu1 li {
    display: inline-block;
}
.header-main .menu2 li:nth-child(2),
.header-main .menu1 li:nth-child(2) {
    margin: 0 10px
}
.header-main .menu li:nth-child(1) {
    width: 40%;
}


@media print,
screen and (min-width:64em) {
    .header-main .nav-header li:not(:first-child) {
        display: block
    }
}


.grid-container {
    padding-right: .625rem;
    padding-left: .625rem;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto
}

@media print,
screen and (min-width:40em) {
    .grid-container {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
}

.grid-container.fluid {
    padding-right: .625rem;
    padding-left: .625rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}

@media print,
screen and (min-width:40em) {
    .grid-container.fluid {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
}

.grid-container.full {
    padding-right: 0;
    padding-left: 0;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}

.grid-container:not(.full)>.grid-padding-x {
    margin-right: -.625rem;
    margin-left: -.625rem
}

@media print,
screen and (min-width:40em) {
    .grid-container:not(.full)>.grid-padding-x {
        margin-right: -.9375rem;
        margin-left: -.9375rem
    }
}

.grid-container-large {
    padding-right: .625rem;
    padding-left: .625rem;
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto
}

@media print,
screen and (min-width:40em) {
    .grid-container-large {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
}

.grid-container-header {
    padding-right: .625rem;
    padding-left: .625rem;
    max-width: 90rem;
    margin-left: auto;
    margin-right: auto;
    float: left;
}

@media print,
screen and (min-width:40em) {
    .grid-container-header {
        padding-right: .9375rem;
        padding-left: .9375rem
    }
}

section.grid-container {
    background-color: #fff
}

.menu {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: flex;
    flex-wrap: wrap
}

[data-whatinput=mouse] .menu li {
    outline: 0
}

.menu .button,
.menu a {
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: .7rem 1rem
}

.menu a,
.menu button,
.menu input,
.menu select {
    margin-bottom: 0
}

.menu input {
    display: inline-block
}

.menu,
.menu.horizontal {
    flex-wrap: wrap;
    flex-direction: row
}

.menu.icon-top li a i,
.menu.icon-top li a img,
.menu.icon-top li a svg {
    align-self: stretch;
    margin-bottom: .25rem;
    text-align: center
}

.menu.icon-bottom li a i,
.menu.icon-bottom li a img,
.menu.icon-bottom li a svg {
    align-self: stretch;
    margin-bottom: .25rem;
    text-align: center
}

.menu .button,
.menu a {
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: .7rem 1rem
}

.menu a,
.menu button,
.menu input,
.menu select {
    margin-bottom: 0
}

.show-for-sr,
.show-on-focus {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.logocms10 {
    width: 297px;
    height: 82px
}

.boxLogo img {
    max-width: 100% !important;
    float: left;
    z-index: 1;
}

.hero {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 32px
}

.hero video {
    -o-object-fit: cover;
    object-fit: cover;
    width: 100vw;
    height: 100vh
}

.hero-text {
    color: #fff;
    align-self: flex-end;
    justify-content: center;
    text-align: center;
    margin-bottom: 5rem;
    position: absolute;
    padding: 0 1rem;
    max-width: 1024px
}

.hero-text h1 {
    font-size: 40px;
    line-height: 1.2em
}

@media print,
screen and (min-width:64em) {
    .hero-text h1 {
        font-size: 62px
    }
}

.hero-text .lead {
    font-size: 18px
}

@media print,
screen and (min-width:64em) {
    .hero-text .lead {
        font-size: 27px
    }
}

.hero-text button {
    font-size: 18px
}

.hero-text button.hollow {
    color: #fff;
    border-color: #fff
}

#customTab a {
    padding: 0;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    .container {
        padding: 0;
    }

    .btn {
        padding: 3px 6px;
        font-size: 12px;
    }

    .flex .panel-default {
        margin-right: 4px;
    }

    .flex .panel-default>.panel-heading {
        padding: 0;
    }

    .flex .panel-default>.panel-body .btn:last-child {
        margin-top: 4px;
    }
}

.btn-dark {
    background-color: #343a40;
    color: #fff;
}

.btn-dark:hover,
.btn.focus,
.btn:focus {
    color: #fff;
}

.btn.focus,
.btn:focus,
.btn:active,
.btn:hover,
.active>a .btn {
    color: #fff;
    background: darkblue;
}

.nav-tabs {
    border: none;
}

.hover_btn {
    background-image: url(water1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_btn:hover {
    background-image: url(water1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
}

.hover_btn1 {
    background-image: url(sediment1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_btn1:hover {
    background-image: url(sediment1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
}

.hover_btn2 {
    background-image: url(bio1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_btn2:hover {
    background-image: url(bio1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
}

.hover_btn3 {
    background-image: url(air.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_btn3:hover {
    background-image: url(air.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
}

.hover_btn4 {
    background-image: url(pic1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hover_btn4:hover {
    background-image: url(pic1.PNG);
    background-size: cover;
    color: #000;
    height: 120px;
    width: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .9;
}
.menu1,
.menu2 {
    padding-inline-start: 0;
}

.menu1 li,
.menu2 li {
    list-style-type: none;
    margin-top: 10px;
}

.menu1 li {
    margin-right: 10px;
}
.menu2 li {
    margin-left: 10px;
}

#sediment_data{
    width:35%;
}
#bio_stuff_data{
    width:65%;
}
#water_data{ 
    width:40%;
}
#veggies_data{
    width:20%;
}
#air_data{
    width:40%
}


p.lead {
    font-weight: 400
}

.grid-x {
    display: flex;
    flex-flow: row wrap
}

.grid-x>.auto,
.grid-x>.shrink {
    width: auto
}

.grid-x>.small-1,
.grid-x>.small-2,
.grid-x>.small-3,
.grid-x>.small-4,
.grid-x>.small-5,
.grid-x>.small-6,
.grid-x>.small-7,
.grid-x>.small-8,
.grid-x>.small-9,
.grid-x>.small-10,
.grid-x>.small-11,
.grid-x>.small-12,
.grid-x>.small-full,
.grid-x>.small-shrink {
    flex-basis: auto
}

@media print,
screen and (min-width:40em) {

    .grid-x>.medium-1,
    .grid-x>.medium-2,
    .grid-x>.medium-3,
    .grid-x>.medium-4,
    .grid-x>.medium-5,
    .grid-x>.medium-6,
    .grid-x>.medium-7,
    .grid-x>.medium-8,
    .grid-x>.medium-9,
    .grid-x>.medium-10,
    .grid-x>.medium-11,
    .grid-x>.medium-12,
    .grid-x>.medium-full,
    .grid-x>.medium-shrink {
        flex-basis: auto
    }
}



.grid-x>.small-1,
.grid-x>.small-2,
.grid-x>.small-3,
.grid-x>.small-4,
.grid-x>.small-5,
.grid-x>.small-6,
.grid-x>.small-7,
.grid-x>.small-8,
.grid-x>.small-9,
.grid-x>.small-10,
.grid-x>.small-11,
.grid-x>.small-12 {
    flex: 0 0 auto
}

.grid-x>.small-1 {
    width: 8.33333%
}

.grid-x>.small-2 {
    width: 16.66667%
}

.grid-x>.small-3 {
    width: 25%
}

.grid-x>.small-4 {
    width: 33.33333%
}

.grid-x>.small-5 {
    width: 41.66667%
}

.grid-x>.small-6 {
    width: 50%
}

.grid-x>.small-7 {
    width: 58.33333%
}

.grid-x>.small-8 {
    width: 66.66667%
}

.grid-x>.small-9 {
    width: 75%
}

.grid-x>.small-10 {
    width: 83.33333%
}

.grid-x>.small-11 {
    width: 91.66667%
}

.grid-x>.small-12 {
    width: 100%
}

@media print,
screen and (min-width:40em) {
    .grid-x>.medium-auto {
        flex: 1 1 0px;
        width: auto
    }

    .grid-x>.medium-1,
    .grid-x>.medium-2,
    .grid-x>.medium-3,
    .grid-x>.medium-4,
    .grid-x>.medium-5,
    .grid-x>.medium-6,
    .grid-x>.medium-7,
    .grid-x>.medium-8,
    .grid-x>.medium-9,
    .grid-x>.medium-10,
    .grid-x>.medium-11,
    .grid-x>.medium-12,
    .grid-x>.medium-shrink {
        flex: 0 0 auto
    }

    .grid-x>.medium-shrink {
        width: auto
    }

    .grid-x>.medium-1 {
        width: 8.33333%
    }

    .grid-x>.medium-2 {
        width: 16.66667%
    }

    .grid-x>.medium-3 {
        width: 25%
    }

    .grid-x>.medium-4 {
        width: 33.33333%
    }

    .grid-x>.medium-5 {
        width: 41.66667%
    }

    .grid-x>.medium-6 {
        width: 50%
    }

    .grid-x>.medium-7 {
        width: 58.33333%
    }

    .grid-x>.medium-8 {
        width: 66.66667%
    }

    .grid-x>.medium-9 {
        width: 75%
    }

    .grid-x>.medium-10 {
        width: 83.33333%
    }

    .grid-x>.medium-11 {
        width: 91.66667%
    }

    .grid-x>.medium-12 {
        width: 100%
    }
}

.grid-padding-x {
    margin-right: -.625rem;
    margin-left: -.625rem;
    /*align-items: stretch*/
}

@media print,
screen and (min-width:40em) {
    .grid-padding-x {
        margin-right: -.9375rem;
        margin-left: -.9375rem;
    }
}

.footer-main {
    background-color: #d8d8d8;
    overflow: hidden;
    position: fixed;
    width: 100%;
    bottom: 0;
    text-align: center;
    z-index: 1000;
}

.footer-main-icons {
    text-align: center
}

.footer-main-nav {
    border-top: 1px solid #909090
}

@media print,
screen and (min-width:64em) {
    .footer-main-nav {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center
    }
}

@media screen and (max-width: 1024px) {
    .footer-main .nav-footer .menu {
        display: flex !important;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center
    }

    .footer-main {
        overflow: scroll;
    }
}

@media screen and (max-width: 600px) {
    .footer-main .nav-footer .menu {
        display: flex !important;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center
    }

    .footer-main {
        overflow: scroll;
    }
}
@media screen and (min-width:367px) and (max-width:867px) {
    body {
        overflow: auto;
    }
    .img-btn-navs {
        flex-direction: column;
    }
    .header-main .menu2,
    .header-main .menu1 {
        display:none;
    }
    .header-main .menu li:nth-child(1) {
        width: 35%;
    }
    .header-main .nav-header img {
        width: 85%;
    }
    #sediment_data,
    #bio_stuff_data,
    #water_data,
    #veggies_data,
    #air_data{
        width:100% !important;
    }
}

.footer-main .social-media {
    margin: 1.5rem 0
}

.footer-main .social-media a i {
    color: #2c2c2c;
    font-size: 38px
}

.footer-main .social-media a:hover,
.footer-main .social-media a:hover i {
    color: #005aa0
}

.footer-main .social-media a+a {
    margin-left: 3rem
}

.footer-main .language-accessibility,
.footer-main .language-switch,
.footer-main .nav-footer {
    line-height: 1;
    font-size: 14px;
    font-weight: 700
}

@media print,
screen and (min-width:64em) {

    .footer-main .language-accessibility,
    .footer-main .language-switch,
    .footer-main .nav-footer {
        float: left
    }
}

.footer-main .nav-footer .menu {
    display: block;
    font-size: 1.1em
}

@media print,
screen and (min-width:64em) {
    .footer-main .nav-footer .menu {
        display: flex
    }
}

.footer-main .nav-footer .menu a {
    color: #2c2c2c;
    font-weight: 400;
    padding: 10px
}

.footer-main .nav-footer .menu a:hover {
    color: #005aa0
}

@media print,
screen and (min-width:64em) {
    .footer-main .nav-footer .menu a {
        padding: 25px
    }
}

.footer-main .language-accessibility {
    margin-left: 5px
}

@media print,
screen and (min-width:64em) {
    .footer-main .language-accessibility {
        margin-left: 20px
    }
}

.footer-main .language-accessibility a {
    color: #2c2c2c;
    font-weight: 700;
    padding: 25px;
    display: inline-block;
    text-indent: 20px;
    background: url(/res/assets/leichte-sprache.png) 0 no-repeat
}

.footer-main .language-accessibility a:hover {
    color: #005aa0
}

.footer-main .language-switch {
    margin-left: 10px
}

@media print,
screen and (min-width:64em) {
    .footer-main .language-switch {
        margin-left: 25px
    }
}

.footer-main .language-switch a {
    color: #909090
}

.footer-main .language-switch a:hover {
    color: #005aa0
}

.footer-main .language-switch .active,
.footer-main .language-switch a {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px
}

@media print,
screen and (min-width:64em) {

    .footer-main .language-switch .active,
    .footer-main .language-switch a {
        padding-top: 25px;
        padding-bottom: 25px
    }
}

.gridContent {
    background-color: #fff;
    margin: 0 0 5% 0 !important;
    min-height: 500px;
    height: auto !important;
    width: 100%;
}

/* full clearfix */
/* add to floating elements which shall clear floating after themselves */
* html .cf {
    height: 1%;
    /* IE5-6 */
}

*+html .cf {
    display: inline-block;
    /* IE7not8 */
}

.cf:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    /* FF, IE8, O, S, etc. */
}

video {
    max-width: 100%;
    height: auto;
}

.input-group ul.uib-datepicker-popup.dropdown-menu {
    left: inherit !important;
    right: 0px;
}

.moduleContent table tr th {
    background-color: #dfdeb7 !important;
    font-weight: normal !important;
}

.moduleContent table tr td {
    background-color: #f2f2e2 !important;
}

.moduleContent table tr td,
table tr th {
    text-align: left !important;
    padding: 7px 10px;
    border-width: 0 1px 1px 0 !important;
    border-style: solid !important;
    border-color: #fff !important;
}

.moduleContent span.input-group-btn .glyphicon.glyphicon-calendar {
    font-size: 20px;
}

@media screen and (max-width: 1024px) {
    div.bootbox.modal.fade.bootbox-confirm.in div.modal-dialog {
        position: relative !important;
        width: auto !important;
        margin: 10px !important;
    }

    .input-group ul.uib-datepicker-popup.dropdown-menu {
        left: 0px !important;
        right: 0px;
        width: max-content;
    }

    .moduleContent ul.uib-datepicker-popup {
        padding: 3px !important;
    }

}

标签： htmlcss

解决方案

您需要做的就是将样式标签内的 CSS 添加到 CSS 文件的底部。将样式标签内的 CSS 放到底部很重要，因为这将允许您编写的 CSS 覆盖之前编写的内容。

推荐阅读