dongwalun2507 2013-12-19 06:38
浏览 60
已采纳

CSS - 覆盖CSS重置

Problem: margin: 0 auto does not work on body. background-color: #EEEEEE on the other hand, is working even though they are on the same block.

index.php:

<html>

    <head>
        <title>MForte</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/bodyStyleSheet.css">
    </head>

    <body id="container">
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </body>

</html>

reset.css:

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

bodyStyleSheet.css:

#container {
    margin: 0 auto;
    background-color: #EEEEEE;
}

What I have tried:

1) Swapping <link rel="stylesheet" type="text/css" href="css/reset.css"> and <link rel="stylesheet" type="text/css" href="css/bodyStyleSheet.css"> to each other.

2) Removed the id of the body from the index.php file and replaced the #container by body

3) To test the scenario, since border: 0 is declared on reset.css, I tried to create a table on index.php containing 2 rows. border: 1 is declared on reset.css in the table tag. Border didn't show.

  • 写回答

2条回答 默认 最新

  • dsxay48646 2013-12-19 06:41
    关注

    Your approach is wrong, you are trying to horizontally center body element which has a default width of 100% so even if you want to horizontally center the body you cannot, as it is 100% in width and actually designers never center the body tag.. so if you want, nest a container div inside the body element, assign some fixed width and than use margin: 0 auto;. So alter your DOM like

    <body>
   <div id="container">
   </div>
</body>

#container {
   width: 1000px;
   margin: 0 auto;
}

    Also, if you are looking to apply background to entire viewport than leave the background property on the body element, if you want the background only for the horizontally centered element than move the background property in #container

    Also, CSS reset has nothing to do with this, CSS Reset is used to reset the default styles applied by browser stylesheet, some prefer to use universal * selector to reset margin and padding and some do reset the outline as well like

    * {
   margin: 0;
   padding: 0;
   outline: 0;
}

    But some prefer CSS Reset Stylesheets which minimizes cross browser differences to minimal.. So you can opt for any option.

    Last but not the least, you are talking about the overriding, using Reset stylesheet, those stylesheet always uses minimal specificity selectors, using class or id will make your selectors anyways specific than the selectors used in the Reset Stylesheet, so don't use !important unless required unless you will end up in a mess, better use specific selectors.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？