인라인 CSS를 외부 스타일 시트로 이동

Question

인라인 CSS 코드가있는 tumblr 레이아웃을 수정하고 있습니다. 내가 tumblr과 함께 할 계획은 낮과 밤 사이에 테마를 전환 할 작은 자바 스크립트 코드를 사용하여 시간에 민감한 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

문제가 무엇인지 알아 냈습니다. 이것을 프로그래밍 한 바보는 색상에 대한 메타 단축 코드를 사용한 다음 스타일을 지정했습니다. 이것은 tumblr 초보자 글꼴 및 기타의 색상을 변경할 수 있도록 사용되었습니다 ....

나는 다른 스타일 시트에 배경을두고 html 코드 안에 모든 것을 남겨두기로 결정했습니다. 나는 코드를 다시 작성할 수있다. 하지만 나는 그런 기분이 들지 않습니다. (나중에).

희망

, 지금은

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

지금까지 페이지에 작업이 자바 코드를 얻을 수 있습니다 ..... 더 좋은 : -/

Answer 3

여기에서 일어나고있는 것은 당신의 HTML을 사용하고 있다는 것입니다 어떤 종류의 유식 태그는 텀블러 CMS ​​(내가 텀블러를 사용한 적이 용서)의 데이터에 그릴 수 있지만 그 다음은 무엇 :

{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를 삭제하고 나머지는 모두 그대로 둡니다.