StyleSheet改变了我的整个网站

时间：2011-08-29 15:28:45

标签： css stylesheet

在构建我的网站（页眉，页脚和基本体）的基础知识时，我在各个页面上收集了css（头文件中的标题css，页脚中的页脚等），现在我已经复制了粘贴在那里的一切它改变了网站。例如，主体现在处于页面宽度的100％，但它应该是70％，并且页脚应该与左侧的主体对齐，但是它应该是左侧的大约20px您可以在我的测试网站http://sunnahmatch.com上看到我正在谈论的内容，或者通过过滤这个庞大的css集合（如果您需要html＆amp; 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>

所以我哪时出错了，我该如何解决？在此先感谢您的帮助！

3 个答案:

答案 0 :(得分：2)

这是一个单独的文件？您可以在HTML中使用以下内容链接到此样式表：

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

若是，请取出第一行：

<style type="text/css">

和最后一行：

</style>

你不需要单独的样式表。

答案 1 :(得分：2)

如果我理解正确，您说您汇总了网站每个页面的所有CSS代码并将其全部粘贴到一个文件中？

您是如何处理合并冲突规范的？

例如，如果两个页面对body有两个不同的定义，那么您得到的定义是什么？你是否在单独的街区中使用它们？您是否在一个区块中使用了两者中的所有值？你是如何合并不同的个别价值的？

您现在正在做的是将大量样式规范应用于之前没有它们的页面，因此您的网站布局发生变化就不足为奇了。

我不知道有任何自动修复方法，特别是因为很难获得用于验证视觉事物（如结果布局）的自动化工具。通过聚合所有样式，您基本上可以重新设计网站样式。无论你怎么看，都会采取一些手工工作。

修改：我刚刚访问过您的网站，发现您的CSS文件已被破坏。删除HTML <script>标记。这是一个CSS文件，而不是HTML文件。

在处理此类问题时，验证标记也是标准做法。你的标记是pretty close to valid，实际上，这很好。但是your CSS needs some work。

答案 2 :(得分：2)

  

我在各个页面上收集了css（标题css在   页眉文件，页脚中的页脚等）现在我已经复制了   粘贴在那里的一切都改变了网站。

查看您的CSS文件，它包含<style>开始和结束标记。尝试删除该文件中的第一行和最后一行：

<style type="text/css">

...

</style>

如果您的CSS规则在HTML中，您只需要在<style>标记内包含CSS。

我希望能解决这个问题。

如果这不能解决问题，如果你正确地复制了各种css文件内容它们之前加载了，那么单个CSS文件现在位于第一个别人找到了，那么你应该有相同的结果。

可能你只是改变了之前出现的各种CSS规则的顺序，或者你忘了复制一些东西。

此外，我想您正在将所有CSS加载到网站<head>部分的同一位置。否则，其他一些内联样式（如果有的话）现在可能会覆盖一些规则。

你应该回到单个CSS文件（你仍然拥有它们，对......？）并将它们小心地复制到一个文件中。

尝试“修复”您的CSS代码，就像您要求的那样，没有您之前使用的完整HTML代码，这简直是不可能的。

相关问题
最新问题