【问题标题】:Css Parse errorsCss 解析错误
【发布时间】:2013-11-24 07:33:00
【问题描述】:

我刚刚验证过,出现了这些错误:

对不起!我们发现如下错误(2)URI:simple.css 320 Parse 错误 .tftable { font-size:100%; 颜色:#e0ece8;宽度:100%;边框宽度:.1em;边框颜色:#ffffff; 边框折叠:折叠; } 356 解析错误 #wrapper { 背景:#fff;颜色:#b6c5be; }

我尝试简单地删除其中的内容,但这会弄乱我页面上的所有颜色。这是代码,第 320-356 行:

<style type="text/css">
.tftable {
font-size:100%;
color:#e0ece8;
width:100%;
border-width:.1em;
border-color: #ffffff;
border-collapse: collapse;
}

.tftable th {
font-size:105%;
background-color:#354640;
border-width: .1em;
padding: 1em;
border-style: solid;
border-color: #354640;
text-align:center;
border-bottom: solid .4em #6b806f;
}

.tftable tr {
background-color:#9db2a6;
}

.tftable td {
font-size:105%;
border-width: .1em;
padding: 0.8em;
border-style: solid;
border-color: #6b806f;
}

.tftable tr:hover {
background-color:#b6c5be;
}

</style>

这就是全部内容:

/*
|--------------------------------------------------------------------------
| General Text Formatting
|--------------------------------------------------------------------------
*/

html, body {

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;

    background: #b6c5be;
    color: #151816;
}

h1 { 
    font-family: Georgia, palatino, serif;
    font-size: 300%;
    font-weight: normal;
    color: #151816;
    margin: 0 0 .5em 0;
    text-align:center;

}

h2 {
    font-size:120%;
    font-weight: bold;
    padding: 1em 0 0.7em 0;
}
    h3 {
    font-size:120%;
font-family: Georgia, palatino, serif;
    text-align:center;
    padding: 1em 0 0.8em 0;
    font-weight: bold;
}


    h4 {
    font-size:110%;
    color: #e3f2ed;

}
        h5 {
    font-size:140%;
    color: #e3f2ed;
    text-align:center;
    font-weight: bold;
}




p { 
    line-height: 150%; 
    padding: 0 0 1em 0;
    text-align:justify;
}

ul {
    padding: 0 0 0 2em;
    list-style: disc;
}

ol {
    padding: 0 0 0 2em;
    list-style: decimal;
}

li {
    padding: 0 0 1em 0;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

blockquote {
    color: #000000;
    background: #9db2a6;
    padding: 1em 1em 0 1em;
    margin-bottom: 1em;
    font-size: 130%;
    border-bottom: solid .4em #6b806f;
    border-top: solid .4em #6b806f;
}




#footer { 

    /* 
    colours for text within the 
    footer division, ie <p id="footer"> 
    */
        padding: 1em 1em 1em 1em;
    color: #e3f2ed;
    background-color: #354640;

            text-align:right;
}

.screen-reader-only {

    /*
    This is a special class used to prevent text from 
    being displayed on screen, while still making it visible to
    screen readers. Use this class if you want to add extra
    descritive text for visually impaired users, but don't want
    that description to be visible for other users. 

    For example:
    <p class="screen-reader-only">Special text for screen readers</p>
    */

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}





/*
|--------------------------------------------------------------------------
| Page Links
|--------------------------------------------------------------------------
*/

a:link { 
    color: #000000; 
    font-weight: bold; 
    text-decoration: none;

}

a:visited { 
    color: #000000;  
        font-style:italic;
    text-decoration: none;
}

a:hover { 
    font-style:italic;
}

a:active { 
    color: #000000; 
}





/*
|--------------------------------------------------------------------------
| Top Navigatin Links
|--------------------------------------------------------------------------

TOP NAVIGATION LINKS
The following styles control the appearence 
of the top navigation links, eg. 
<a class="top-link" href="default.htm">Home</a>

*/

a.top-link {
    /* 
    these styles will apply to ALL links (:link, :visited, :hover and :active) unless    
    */
    display: block;
    padding: .7em 0 .7em 0;
    margin: 0 1em 0 2em;
    background: #9db2a6;
    color: #000000;

    padding: 0;
    line-height: 2.5em;
}

.top-link:link {
    /* styles for normal, unvisited links can be set here */
    /* these styles will override the defaults set for .top-link above */
    text-decoration: none;
        border-bottom: solid .3em #9db2a6; 
}

.top-link:visited {  
    /* styles for links once visited can be changed here */
    /* these styles will override the defaults set for .top-link above */
    text-decoration: none;
    border-bottom: solid .3em #9db2a6; 
}

    .top-link:hover { 
    /* styles for top links when a user hovers over it can be changed here */
    text-decoration: none; 
    border-bottom: solid .3em #6b806f; 
}

.top-link:active {  
    /* Styles for when the link is being clicked can be changed here */
}

.top-link.selected:link, .top-link.selected:visited {

    /* Sets the style of a link that has been selected (ie. has a class of selected)
       for example (note the additional class "selected"):
        <a class="top-link selected" href="content.htm">Content Page</a>
    */

    border-bottom: solid .3em #354640;
    cursor: default;
}





/*
|--------------------------------------------------------------------------
| Footer Links
|--------------------------------------------------------------------------

Change these if you want your footer links to have a 
different style to other links

*/

#footer a:link {

    color: #e3f2ed;
    font-weight: bold;
}

#footer a:visited {

    color: #e3f2ed;
    font-weight: bold;
}

#footer a:hover {

    font-style:italic;
}

#footer a:active {

    color: #e3f2ed;
}





/*
|--------------------------------------------------------------------------
| Header Colours
|--------------------------------------------------------------------------
*/

#header {   

        /*  
        Colours for <div id="header">
        See layout.css for layout and size properties
        */

    background: #00016c url(../images/headbit.gif) repeat-x top left;
    color: #354640;
}


#nav {

        /*  
        Colours for <ul id="nav"> 
        See layout.css for layout and size properties
        */

    background: #9db2a6;
    color: #000000;
}



<style type="text/css">
.tftable {
font-size:100%;
color:#e0ece8;
width:100%;
border-width:.1em;
border-color: #ffffff;
border-collapse: collapse;
}

.tftable th {
font-size:105%;
background-color:#354640;
border-width: .1em;
padding: 1em;
border-style: solid;
border-color: #354640;
text-align:center;
border-bottom: solid .4em #6b806f;
}

.tftable tr {
background-color:#9db2a6;
}

.tftable td {
font-size:105%;
border-width: .1em;
padding: 0.8em;
border-style: solid;
border-color: #6b806f;
}

.tftable tr:hover {
background-color:#b6c5be;
}

</style>



#wrapper {
    background: #fff;
     color: #b6c5be;
}





   /*
  |--------------------------------------------------------------------------
| Widget Box Colours
 |--------------------------------------------------------------------------

Colour styles for widget boxes, ie <li class="widget">
See layout.css for layout and size properties

*/

.widget {
    background: #9DB2A6;
    color: #000000;
    border-bottom: solid .4em #6b806f;

}

.widget-heading {
    color: #E3F2ED;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #354640;
    border-bottom: solid .4em #6b806f;
}

任何帮助将不胜感激!

【问题讨论】:

  • 您在哪里验证了您的 CSS?我检查了您在 W3C CSS 验证器提供的示例,它验证良好,只有 1 个警告:.tftable th - 背景颜色和边框颜色相同

标签: css


【解决方案1】:

我在那里看到一个样式标签:摆脱它。

.tftable tr:hover {
background-color:#b6c5be;
}

</style>

#wrapper {
    background: #fff;
     color: #b6c5be;
}

除此之外,您的 CSS 看起来还不错。

【讨论】:

  • 只是删除它会弄乱颜色。当我还删除了#wrapper 时,一切都得到了修复。奇怪的。谢谢大家!
【解决方案2】:

我不知道你正在使用什么 CSS 解析器。它似乎有效,我已经使用W3C CSS validator 进行了测试。

没有错误,但有一个警告说,

.tftable th background-color 和border-color 的颜色相同

【讨论】:

  • 这只是其中的一部分。我也使用了 w3c 验证器。这就是全部
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-09-28
  • 2023-03-26
  • 1970-01-01
  • 1970-01-01
  • 2018-04-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多