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条)

报告相同问题？

悬赏问题

  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog
  • ¥15 Excel发现不可读取的内容
  • ¥15 关于#stm32#的问题：CANOpen的PDO同步传输问题