css - 样式表改变了我的整个网站

Question

在构建我的网站基础(页眉、页脚和基本主体)时，我收集了各个页面上的 css(页眉文件中的页眉 css、页脚中的页脚等)，现在我已经复制并粘贴那里的一切它改变了网站。例如，正文现在是页面宽度的 100%，但它应该是 70%，页脚应该与左侧的正文对齐，但它比它应该在的位置左边大约 20px等等。你可以在我的测试网站上看到我在说什么 http://sunnahmatch.com或者通过过滤这个大量的 css(如果你需要 html 和 php 代码让我知道):

<style type="text/css">
#body_container{
    margin: 200px auto 0 auto;
    width:70%;
    }
.footer_inline a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:14px;}   
#header{
    margin:0;
    padding:0;
    width:100%;
    background-color:#333;
    }
#logo{
    margin:0;
    padding:0;
    float:left;
    }
#header_menu{
    margin:0;
    padding:0;
    background-image:url(../img/header_bg_logo.jpg);
    float:right;
    width:380px;
    height:100px;;
    }
#menu_bar{
    background:url(../img/menu_bar.png);
    background-repeat:repeat-x;
    width:100%;
    float:left;
    height:42px;
    margin:0;
    padding:0;
    }
#menu_text_container{
    padding-top:8px;
    padding-bottom:6px;
    vertical-align:middle;
    }

.menu_text{
    float:left;
    }
.menu_text_span{
    margin-left:30px;
    font-family: GeosansLight;
    }
.menu_text a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:18px;}
.menu_text_span_top{
    margin-right:20px;
    margin-top:10px;
    float:right;
    font-family: GeosansLight, sans-serif;
    }
.menu_text_span_top a {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_top a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_right{
    float:right;
    }
.menu_text_span_right{
    margin-right:20px;
    float:right;
    font-family: GeosansLight;
    }
.menu_text_span_right a {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.menu_text_span_right a:active {color:#09C; text-decoration:none; font-family:GeosansLight, sans-serif; font-size:14px;}
#left_container{
    float: left;
    width: 63%;
    padding:5px;
    margin-right:15px;
    background-color:#069;
    -moz-border-radius-topleft: 15px 15px;
    -moz-border-radius-bottomright: 15px 15px;
    border-top-left-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;
    }
#right_container{
    float:left;
    width: 31%;
    padding:5px;
    background-color:#069;
    -moz-border-radius-topleft: 15px 15px;
    -moz-border-radius-bottomright: 15px 15px;
    border-top-left-radius: 15px 15px;
    border-bottom-right-radius: 15px 15px;
    }
.column_left_tmpl{
    background-color:#FFF;
    padding:10px;
    -moz-border-radius-topleft: 10px 10px;
    -moz-border-radius-bottomright: 10px 10px;
    border-top-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    font-family: GeosansLight, sans-serif;
    font-size: 16px;
    }
.column_right_tmpl{
    background-color:#FFF;
    padding:8px;
    -moz-border-radius-topleft: 10px 10px;
    -moz-border-radius-bottomright: 10px 10px;
    border-top-left-radius: 10px 10px;
    border-bottom-right-radius: 10px 10px;
    font-family: GeosansLight, sans-serif;
    font-size: 16px;#59C169
    }
.title {
    width:100% auto;
    padding-top:5px;
    margin-bottom:5px;
    -moz-border-radius-topleft: 5px 5px;
    -moz-border-radius-bottomright: 5px 5px;
    border-top-left-radius: 5px 5px;
    border-bottom-right-radius: 5px 5px;
    font-family: Arial, Gadget, sans-serif;
    font-size:22px;
    color:#333;
    font-weight: bold;
    }
.spacer{
    height:5px;
    }
#header_container{
    background-color:#333;
    margin:0;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    -khtml-opacity:.9; 
    -moz-opacity:.9; 
    -ms-filter:"alpha(opacity=90)";
    filter:alpha(opacity=90);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.9);
    opacity:.9;
    }   
#footer{
    width:70%;
    height:80px;
    float:none;
    clear:both;
    margin:0 auto;
    }   
.footer_inline{
    width:100%;
    margin-top:20px;
    margin-right:20px;
    float:left;
    font-family: GeosansLight, sans-serif;
    }
.footer_inline a {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.footer_inline a:link {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.footer_inline a:visited {color:#FFF; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
.footer_inline a:hover {color:#09C; text-decoration:none;font-family:GeosansLight, sans-serif; font-size:14px;}
</style>

那么我在哪一点上出错了，我该如何解决呢？在此先感谢您的所有帮助!

Answer 1

这是一个单独的文件？您正在从 HTML 中使用类似以下内容链接到此样式表:

<link rel="stylesheet" type="text/css" href="path/to/my/css/file/style.css">

如果是，去掉第一行:

<style type="text/css">

最后一行:

</style> 

您不需要在单独的样式表中使用它们。