将内联 CSS 移至外部样式表

Question

我正在修改一个 tumblr 布局，其中包含内联 css 代码。我计划用 tumblr 做的是使用一些 javascript 代码创建一个时间敏感的 css 开关，该代码将在白天和晚上之间切换主题。这需要我有一个外部样式表，以便脚本可以在两个样式表之间切换。

我将内联代码复制到外部 css 文件并上传。然后我对文件做了一个 css 链接引用，但它似乎不起作用。

我在前面放的

<LINK REL=StyleSheet HREF="http://itsnotch.com/tumblr/files/gurucss.css" TYPE="text/css">

还有字体、标题、日期等的元数据。这可能是链接引用不起作用的原因吗？如果是这样，我可以在CSS中以某种方式使用元数据吗？

这是布局的所有代码

{块：说明}{/块：说明}

    <!-- DEFAULT COLORS -->
    <meta name="color:Background" content="#d7a769"/>
    <meta name="color:Title" content="#444"/>
    <meta name="color:Description" content="#666"/>
    <meta name="color:Post Title" content="#c00"/>    
    <meta name="color:Text" content="#444"/>
    <meta name="color:Inline Link" content="#c00"/>
    <meta name="color:Quote" content="#666"/>
    <meta name="color:Quote Source" content="#444"/>
    <meta name="color:Link Post" content="#c00"/>
    <meta name="color:Conversation Background" content="#f8f8f8"/>
    <meta name="color:Conversation Border" content="#ddd"/>
    <meta name="color:Conversation Text" content="#444"/>
    <meta name="color:Conversation Label" content="#111"/>
    <meta name="color:Photo Border" content="#eee"/>
    <meta name="color:Date" content="#fff"/>
    <meta name="color:Date Background" content="#ccc"/>
    <!-- END DEFAULT COLORS -->


    <!-- DEFAULT SETTINGS -->
    <meta name="image:Background" content="http://assets.tumblr.com/images/x.gif" />
    <meta name="font:Title" content="Arial" />
    <meta name="font:Body" content="Lucida Sans" />
    <meta name="text:Disqus Shortname" content="" />

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>{block:SearchPage}Search results for "{SearchQuery}" - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
    <link rel="icon" href="{Favicon}"/>
    <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
    <meta name="viewport" content="width=775"/> <!-- iPhone -->

    <style type="text/css">
        body {
            margin:           0px;
            background-image: url('http://itsnotch.com/tumblr/images/nighttime_bg.jpg');
            background-repeat: repeat-x;
            background-attachment: fixed;
            background-position: top center;
            background-color:#b68e59;

            font-family:      {font:Body};
        }

        #content {
            width:            850px;
            margin:           auto;
            margin-top:       -44px;
            padding:          15px;
            background-color: {color:Content Background};
            position:         relative;
        }

        a {
            color:            {color:Inline Link};
        }

        h1 {
            padding:          30px 0px 50px 0px;
            margin:           0px;
            text-align:       center;
            font:             Bold 55px {font:Title};
            letter-spacing:   -2px;
            line-height:      50px;
        }

        h1 a {
            color:            {color:Title};
            text-decoration:  none;
        }

        #description {
            position:         absolute;
    left:        -189px;
            top:             150px;
        }

        #description div {
            font:             normal 18px {font:Body};
            line-height:      20px;
            width:            150px;
            color:            {color:Description};
        }

                    #description div#search {
                            text-align: left;
                    }

        #description div a {
            color:            {color:Description};
        }

        #description #nav_container {
            font-size: 13px;
            font-weight: bold;
        }

        #description #nav_container .dim {
            filter: alpha(opacity=50); 
            -moz-opacity: 0.5; 
            opacity: 0.5;
        }

                    #searchresultcount {
                        margin: 0 0 30px;
                        text-align: center;
                    }

        .post {
            position:         relative;
            margin-bottom:    40px;
        }

        .post div.labels {
            position:         absolute;
            right:            435px;
            text-align:       right;
            width:            150px;
        }

        .post div.date {
            background-color: {color:Date Background};
            white-space:      nowrap;
            font:             Normal 20px {font:Body};
            letter-spacing:   -1px;
            color:            {color:Date};
            display:          inline;
            padding:          3px 5px 0px 5px;
            line-height:      20px;
        }

        .post div.date a {
            color:            {color:Date};
            text-decoration:  none;
        }

        .post img {
          max-width: 100%;
        }

        .post h2 {
            font-size:        18px;
            font-weight:      Bold;
            color:            {color:Post Title};
            letter-spacing:   -1px;
            margin:           0px 0px 10px 0px;
        }

        .post h2 a {
            color:            {color:Post Title};
            text-decoration:  none;
        }

        /* Regular Post */
        .post .regular {
            font-size:        12px;
            color:            {color:Text};
            line-height:      17px;
        }

        .post .regular blockquote {
            font-style: italic;
        }

        /* Photo Post */
        .post .photo img {
            border:           solid 10px {color:Photo Border};
        }

        .post .photo div.caption {
            font-size:        11px;
            color:            {color:Text};
            margin-top:       5px;
        }

        .post .photo div.caption a {
            color:            {color:Text};
        }

        /* Quote Post */
        .post .quote span.quote {
            font:             Bold 28px {font:Body};
            letter-spacing:   -1px;
            color:            {color:Quote};
        }

        .post .quote span.quote a {
            color:            {color:Quote};
        }

        .post .quote span.quote big.quote {
            font:             Bold 60px Georgia, serif;
            line-height:      8px;
            vertical-align:   -20px;
        }

        .post .quote span.source {
            font-size:        16px;
            font-weight:      Bold;
            color:            {color:Quote Source};
            letter-spacing:   -1px;
        }

        .post .quote span.source a {
            color:            {color:Quote Source};
        }

        /* Link Post */
        .post .link a.link {
            font:             Bold 20px {font:Body};
            letter-spacing:   -1px;
            color:            {color:Link Post};
        }

        .post .link span.description {
            font-size: 13px;
            font-weight: normal;
            letter-spacing: -1px;
        }

        /* Conversation Post */
        .post .conversation ul {
            background-color: {color:Conversation Background};
            list-style-type:  none;
            margin:           0px;
            padding:          0px;
            border-left:      solid 5px {color:Conversation Border};
        }

        .post .conversation ul li {
            border-bottom:    solid 1px {color:Conversation Border};
            font-size:        12px;
            padding:          4px 0px 4px 8px;
            color:            {color:Conversation Text};
        }

        .post .conversation ul li span.label {
            font-weight:      bold;
            color:            {color:Conversation Label};
        }

        /* Audio Post */      
        .post .audio div.caption {
            font-size:        11px;
            color:            {color:Text};
            margin-top:       5px;
        }

        .post .audio div.caption a {
            color:            {color:Text};
        }

        /* Video Post */
        .post .video {
            width:            400px;
            margin:           auto;
        }

        .post .video div.caption {
            font-size:        11px;
            color:            {color:Text};
            margin-top:       5px;
        }

        .post div.video div.caption a {
            color:            {color:Text};
        }

        /* Footer */
        #footer {
            margin:           40px 0px 30px 0px;
            text-align:       center;
            font-size:        12px;
        }

        #footer a {
            text-decoration:  none;
            color:            {color:Text};
        }

        #footer a:hover {
            text-decoration:  underline;
        }

                    .query { font-weight: bold; }

        {CustomCSS}
    </style>

    <!--[if lt IE 7]>
        <style type="text/css">
            .post div.labels {
                right: 450px;
            }
        </style>
    <![endif]-->
</head>
<body>
    <div id="content">
        <h1><a href="/"><img src="http://itsnotch.com/tumblr/images/NotchTheGuru_Banner.jpg" border "0" /></a></h1>

        <div id="description">
            <div>
                                    <div id="search">
                                        <form action="/search" method="get">
                                            <input type="text" name="q" value="{SearchQuery}"/>
                                            <input type="submit" value="Search"/>
                                        </form>
                                    </div>

                {Description}

                <p id="nav_container">
                    <a href="/archive" id="archive_link">Archive</a>
                    <span class="dim">/</span>
                    <a href="{RSS}">RSS</a>
                </p>
            </div>
        </div>

                    {block:SearchPage}
                    <div id="searchresultcount">
                        <p>Your search for <span class="query">{SearchQuery}</span> returned {SearchResultCount} result(s).</p>
                    </div>
                    {/block:SearchPage}

        {block:Posts}
            <div class="post">
                <div class="labels">
                    {block:NewDayDate}
                        <div class="date"><a href="{Permalink}">{Month} {DayOfMonth}</a></div>
                    {/block:NewDayDate}

                    {block:SameDayDate}
                        <div class="date"><a href="{Permalink}">+</a></div>
                    {/block:SameDayDate}
                </div>

                {block:Regular}
                    <div class="regular">
                        {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                        {Body}
                    </div>
                {/block:Regular}

                {block:Photo}
                    <div class="photo">
                        {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Photo}

                {block:Quote}
                    <div class="quote">
                        <span class="quote">
                            <big class="quote">&#147;</big> {Quote}
                        </span>
                        {block:Source}<span class="source">{Source}</span>{/block:Source}
                    </div>
                {/block:Quote}

                {block:Link}
                    <div class="link">
                        <a href="{URL}" class="link" {Target}>{Name}</a>
                        {block:Description}
                            <span class="description">{Description}</span>
                        {/block:Description}
                    </div>
                {/block:Link}

                {block:Conversation}
                    <div class="conversation">
                        {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                        <ul>
                            {block:Lines}
                                <li>
                                    {block:Label}<span class="label">{Label}</span>{/block:Label}
                                    {Line}
                                </li>
                            {/block:Lines}
                        </ul>
                    </div>
                {/block:Conversation}

                {block:Audio}
                    <div class="audio">
                        {AudioPlayerGrey}
                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Audio}

                {block:Video}
                    <div class="video">
                        {Video-400}
                        {block:Caption}
                            <div class="caption">{Caption}</div>
                        {/block:Caption}
                    </div>
                {/block:Video}
            </div>

            {block:IfDisqusShortname}
                {block:Permalink}
                    <div id="disqus_thread"></div>
                    <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
                    <noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>

                    <div style="text-align: right; margin-top: 5px">
                        <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
                    </div>
                {/block:Permalink}
            {/block:IfDisqusShortname}
        {/block:Posts}

        <div id="footer">
            {block:PreviousPage}
                <a href="{PreviousPage}">&#171; Previous</a> &nbsp;&nbsp;
            {/block:PreviousPage}

            {block:NextPage}
                <a href="{NextPage}">Next &#187;</a>
            {/block:NextPage}
        </div>
    </div>

    {block:IfDisqusShortname}
        <script type="text/javascript">
            //<![CDATA[
            (function() {
                var links = document.getElementsByTagName('a');
                var query = '?';
                for(var i = 0; i < links.length; i++) {
                    if(links[i].href.indexOf('#disqus_thread') >= 0) {
                        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
                    }
                }
                document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
            })();
            //]]>
        </script>
    {/block:IfDisqusShortname}
</body>

我将结束符下方标签之间的部分移至服务器上的单独文件中。然后使用上面的链接参考代码链接它，但它不起作用。所以，我想我做错了什么。

Answer 1

@Josh你的样式表似乎不起作用的原因是，正如你所说，HTML具有内联CSS代码，它总是比样式表具有更大的权重。

因此，我能想到的一个简单的解决方案是在外部样式表属性的值之后添加“！important”。现在，这将为您的样式表赋予更多权重。

例如：

如果您的 HTML 具有：

<p style="color:red;">hello world</p>

并且您的样式表具有：

p { color:blue; }

您的段落将为红色。但如果您添加“！重要”，即：

p { color:blue!important; }

现在段落将显示为蓝色:)

希望能解决您的问题！

Answer 2

这里发生的情况是，您的 HTML 使用某种 smarty 标签从 Tumblr CMS 中提取数据（请原谅我从未使用过 Tumblr），但这就是这些：

{block:SearchPage}{/block:SearchPage}

所以不要删除它们！否则数据将不会被提取，您的网站将无法运行！

接下来，如果可以的话，删除所有内联 CSS 并将此代码放入外部样式表中：

body {
margin: 0px;
background-image: url('http://itsnotch.com/tumblr/images/nighttime_bg.jpg');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top center;
background-color:#b68e59;
font-family: Lucida Sans;
}

#content {
width:850px;
margin:   auto;
margin-top:   -44px;
padding:  15px;
background-color: #d7a769;
position: relative;
}

a {
color:#c00;
}

h1 {
padding:  30px 0px 50px 0px;
margin:   0px;
text-align:   center;
font: Bold 55px Arial;
letter-spacing:   -2px;
line-height:  50px;
}

h1 a {
color: #444;
text-decoration:  none;
}

#description {
position: absolute;
        left:-189px;
top: 150px;
}

#description div {
font: normal 18px Lucida Sans;
line-height:  20px;
width:150px;
color:#666;
}

#description div#search {
text-align: left;
}

#description div a {
color: #666;
}

#description #nav_container {
font-size: 13px;
font-weight: bold;
}

#description #nav_container .dim {
filter: alpha(opacity=50); 
-moz-opacity: 0.5; 
opacity: 0.5;
}

#searchresultcount {
margin: 0 0 30px;
text-align: center;
}

.post {
position: relative;
margin-bottom:40px;
}

.post div.labels {
position: absolute;
right:435px;
text-align:   right;
width:150px;
}

.post div.date {
background-color: #ccc;
white-space:  nowrap;
font: Normal 20px Lucida Sans;
letter-spacing:   -1px;
color:#fff;
display:  inline;
padding:  3px 5px 0px 5px;
line-height:  20px;
}

.post div.date a {
color:#fff;
text-decoration:  none;
}

.post img {
  max-width: 100%;
}

.post h2 {
font-size:18px;
font-weight:  Bold;
color:#c00;
letter-spacing:   -1px;
margin:   0px 0px 10px 0px;
}

.post h2 a {
color:#c00;
text-decoration:  none;
}

/* Regular Post */
.post .regular {
font-size:12px;
color:#444;
line-height:  17px;
}

.post .regular blockquote {
font-style: italic;
}

/* Photo Post */
.post .photo img {
border:   solid 10px #eee;
}

.post .photo div.caption {
font-size:11px;
color:#444;
margin-top:   5px;
}

.post .photo div.caption a {
color:#444;
}

/* Quote Post */
.post .quote span.quote {
font: Bold 28px Lucida Sans;
letter-spacing:   -1px;
color:#666;
}

.post .quote span.quote a {
color:#666;
}

.post .quote span.quote big.quote {
font: Bold 60px Georgia, serif;
line-height:  8px;
vertical-align:   -20px;
}

.post .quote span.source {
font-size:16px;
font-weight:  Bold;
color:#444;
letter-spacing:   -1px;
}

.post .quote span.source a {
color:#444;
}

/* Link Post */
.post .link a.link {
font: Bold 20px Lucida Sans;
letter-spacing:   -1px;
color:#c00;
}

.post .link span.description {
font-size: 13px;
font-weight: normal;
letter-spacing: -1px;
}

/* Conversation Post */
.post .conversation ul {
background-color: #f8f8f8;
list-style-type:  none;
margin:   0px;
padding:  0px;
border-left:  solid 5px #ddd;
}

.post .conversation ul li {
border-bottom:solid 1px #ddd;
font-size:12px;
padding:  4px 0px 4px 8px;
color:#444;
}

.post .conversation ul li span.label {
font-weight:  bold;
color:#111;
}

/* Audio Post */  
.post .audio div.caption {
font-size:11px;
color:#444;
margin-top:   5px;
}

.post .audio div.caption a {
color:#444;
}

/* Video Post */
.post .video {
width:400px;
margin:   auto;
}

.post .video div.caption {
font-size:11px;
color:#444;
margin-top:   5px;
}

.post div.video div.caption a {
color:#444;
}

/* Footer */
#footer {
margin:   40px 0px 30px 0px;
text-align:   center;
font-size:12px;
}

#footer a {
text-decoration:  none;
color:#444;
}

#footer a:hover {
text-decoration:  underline;
}

.query { font-weight: bold; }

我在这里所做的是获取元标记中显示的变量，然后对每个相应的标记进行查找/替换。

外部CSS不支持其他大括号内的大括号{}，因此它不会验证（@Lekensteyn）。但令人困惑的是，Smarty 还使用这些花括号，这意味着它可以在内联时工作，但不能在 ALL CSS 外部 .css 文件中工作！

我希望这是有道理的。

将我修改后的 CSS 粘贴到您的外部文件中，如果可以的话删除内联 CSS，并保留其他所有内容！

Answer 3

我明白问题出在哪里了。编写此程序的白痴使用颜色的元简码，然后用它们设计样式。这用于让 tumblr 新手能够更改字体的颜色等......

我决定将背景放在不同的样式表上，并将所有内容保留在 html 代码中。我可以（可能应该）重写代码。但我不喜欢这样。 （也许稍后）。

希望现在我可以让这个 java 代码在页面上工作

<SCRIPT LANGUAGE="JavaScript"> 
Begin function getCSS()
{
  datetoday = new Date();
  timenow=datetoday.getTime();
  datetoday.setTime(timenow);
  thehour = datetoday.getHours();

  if (thehour > 20)
    display = "http://itsnotch.com/tumblr/files/nighttime.css";
  else if (thehour > 7)
    display = "http://itsnotch.com/tumblr/files/daytime.css";
  else 
    display = "http://itsnotch.com/tumblr/files/nighttime.css";

  var css = '';

  document.write(css);// 
}
</script>
<script language="javascript">getCSS();</script>

到目前为止......还不好：-/