第一个CSS声明代码在内部样式表中起作用,但在外部样式表中不起作用

时间:2019-04-03 18:48:00

标签: css

我有一个大型网站,多年来一直完全使用html4进行维护。我开始将其转换为CSS。我有一个内部样式表,可以正常工作,但是当我将其移到外部样式表时,body元素规则无效。样式表中的所有其他内容都与内部时一样。

我尝试将body元素移回内部标头,并且在那里工作。

body {
    background-color: #E3D7B7; 
    text-color: black;
    font-family: Franklin Gothic Medium, sans-serif;
    font-size: medium;
    line-height: 125%;
}

这在内部时生效,但是在外部时则被忽略-例如,字体显示为默认字体。样式表中与此相关的所有内容都会生效。

2 个答案:

答案 0 :(得分:0)

首先,您是否添加了其他样式表,例如引导程序?如果您这样做了,则根据顺序可能会相互覆盖。

由于我看不到您的html文件,因此我将在此处进行假设,您是否正确添加了头部样式?所有目录都正确吗?

如果内联主体样式采用较高的级联选择(应该这样做),则在您的外部文件上有一些覆盖它的内容,请浏​​览器进行检查。作为实验,将正文放入外部文件中的!important中。

body {
background-color: #E3D7B7 !important;  
text-color: black;
font-family: Franklin Gothic Medium, sans-serif;
font-size: medium;
line-height: 125%;

}

您的CSS是否在新文件夹中,例如:(css / main.css)?如果是,则有必要更改某些内容的src / href,如果使用的是下载的字体,则必须对css文件说一下,如果font-imgs在css之外,则可以在哪里找到它文件夹,然后是“ ../ place / file.typeOfFile”

另一件事,您是否在多个浏览器上尝试过?一个浏览器的缓存有时可能会阻塞。

我成功地将css放入了一个外部文件,所有字体都可以工作,在您的代码上出现了一些问题,这里唯一缺少的是img,因为我没有下载它们。

body {
    background-color: #E3D7B7; 
    color: black;
    font-family: Franklin Gothic Medium, sans-serif;
    font-size: medium;
    line-height: 125%;
    }
    
    a:link {color: #CC3300;}
    a:visited {color: #000066}
    
    img.align-left { 
    margin-top: 0;
    margin-bottom: 2em;
    margin-left: 0;
    margin-right: 1.75em;
    width: 35%;
    border: 1px solid black;
    float: left; 
    }
    
    img.align-right { 
    margin-top: 0;
    margin-bottom: 2em;
    margin-left: 1.75em;
    margin-right: 0;
    width: 35%;
    border: 1px solid black;
    float: right; 
    }
    
    .clear { clear: both;
    }
    
    .center { text-align: center; margin-bottom: 1.3em;" /* delete the " " here */
    }
    
    @media only screen and (min-width: 768px) {
    body {background-image: url("images/universe-bg.jpg");}
    }
    
    div {
    width: 95%;
    background-image: url("images/parchment.jpg");
    background-color: #E3D7B7;
    border-color: black;        
    border-style: double;
    border-width: 2px;        
    margin-top: 2%;
    margin-bottom: 2%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 8px;        
    padding-right: 8px;
    padding-top: 1%;
    }
            
    @media only screen and (min-width: 768px) {
    div { 
    width: 60%;
    border-width: 5px;
    margin-top: 4%;
    margin-bottom: 0;              
    padding-left: 2.5%;  
    padding-right: 2.5%; } 
    }
    
    .navbar {
    width:98%;
    border: none;
    padding: 0; 
    font-size: medium;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    }
    .navbar .navtable, td {
    text-align: center;
    vertical-align: middle;
    border: 4px ridge #6EBDAF;
    border-collapse: collapse;
    }
    a.navbar:link { color:black; text-decoration:none; }
    a.navbar:visited { color:black; text-decoration:none; }
    
    @media only screen and (min-width: 768px) {
    .navbar { width: 66% } 
    }
    
    @media only screen and (max-width: 767px) {
    h1  { font-size: xlarge; }
    h2  { font-size: large; margin-top: 0; }
    }
    
    @media only screen and (min-width: 768px) {
    p.variable-size { font-size: large; }
    h1  { font-size: xxlarge: } /* this has to have some value, otherwise its only using the default, if the defaults is working for you, delete this line */
    h2  { font-size: xlarge; margin-top: 0;  }
    }
    
<html><head>
    <title>Sylvia Engdahl, Author of Science Fiction Novels – Official Site</title>
    
    <meta name="description" content="Science fiction author Sylvia Engdahl - her Flame duologies, Young Adult novels such as Enchantress from the Stars, nonfiction & views on space colonization.">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="test.css">
    
    </head>
    
    <body>
    
    <div class="navbar navtable">
    <table width=100% style="border-collapse:collapse;">
    <tr><td colspan=4 style="font-size: medium;"><b>OFFICIAL AUTHOR  SITE OF SYLVIA ENGDAHL</b>
    <tr><td width=25% bgcolor="#6EBDAF"><a class="navbar" href="index.htm"><b>Books</b></a>
    <td width=25%><a class="navbar" href="about.htm"><b>About Me</b></a>
    <td width=25%><a class="navbar" href="se-faq.htm"><b>FAQ </b></a>
    <td width=25%><a class="navbar" href="reviews.htm"><b>Reviews</b></a>
    <tr><td width=25%><a class="navbar" href="essays.htm"><b>Essays etc. </b></a>
    <td width=25%><a class="navbar"  href="space/space.htm"><b>Space</b></a>
    <td width=25%><a class="navbar" href="miscel.htm"><b>Miscellany</b></a>
    <td width=25%><a class="navbar" href="contact.htm"><b> Contact</b></a></table>
    
    </div>
    
    <div>
    
    <br>
    <h1 class="center"><i>The Books of Sylvia Engdahl</i></h1>
    
    Except where otherwise noted, all books are currently available in Kindle, epub, pdf and paperback editions. Click on the book titles for full descriptions including review quotes, FAQs, excerpts, and purchase links. <br><br>
    Click on the tabs above for essays, space advocacy, and much more, such as a page about my <a href="se-cats.htm">cats</a>, a memorial to my <a href="mbe.htm">mother</a>, and an <a href="essays/autobiography.htm">autobiography</a>.<br><br>
    
    I am currently in the process of making this site mobile-friendly. If you reach a page where the borders of the tabs at the top aren't blue, it hasn't been fixed yet--if it doesn't work with your device, please visit with a laptop or desktop computer, or come back later.<br><br>
    <hr><br>
    
    <h2 class="center">Stand-Alone Novels</h2>
    
    <img class="align-left" src="images/efts.jpg"><a href="elana.htm"><h2><i>Enchantress from the Stars</i></h2></a>
    <p class="variable-size">
    Young Adult, for readers age 12 and older. A Newbery Honor Book.<br><br>
    "Original and charming." <i>--Ursula LeGuin, New York Times Book Review</i><br><br> 
    "Not just a novel for young adults but also one of the finest sf novels ever written--a classic of the genre." 
    <i>--InfinityPlus</i><br></p>
    Also available as an audiobook. No pdf edition.
    <hr class="clear"><br>
    
    <img class="align-left" src="images/fsoe.jpg"><a href="fsoe.htm"><h2><i>The Far Side of Evil</i></h2></a>
    <p class="variable-size">
    Young Adult, for high school age readers.<br><br>
    Though this novel has the same heroine as <i>Enchantress from the Stars</i> it is not a "sequel" but an independent and much darker story unsuitable for middle-school readers. Older readers can read them in either order.<br><br>
    "Gripping psychological science fiction." <i>--Times Literary Supplement</i><br></p>
    <hr class="clear"><br>
    
    <img class="align-left" src="images/jbw.jpg"><a href="jbw.htm"><h2><i>Journey Between Worlds</i></h2></a>
    <p class="variable-size">
    Young Adult, for readers age 12 and older.<br><br>
     A romance about the colonization of Mars.<br><br>
    "Beautifully-written, heartwarming, and scientifically plausible." <i>--Orson Scott Card's Intergalactic Medicine Show</i><br></p>
    <hr class="clear"><br>
    
    <h2 class="center"><b>Children of the Star Trilogy</b></h2>
    
    <img class="align-right" src="images/tssa.jpg"><a href="cots.htm"><h2><i>This Star Shall Abide</i></h2></a>
    <p class="variable-size">
    (Book One -- UK title <i>Heritage of the Star</i>)<br><br>
    Young adult, for readers age 12 and older.<br><br>
    Winner of a Christopher Award for "affirmation of the highest values of the human spirit."<br><br>
    "Both logically and consistently suspenseful... This Star will Abide a good deal longer than most here today, gone tomorrow sci-fi." <i>--Kirkus Reviews</i><br></p>
    Also available as an audiobook.
    <hr class="clear"><br>
    
    <img class="align-right" src="images/bttm.jpg"><a href="cots.htm"><h2><i>Beyond the Tomorrow Mountains</i></h2></a>
    <p class="variable-size">
    (Book Two)<br><br>
    Young Adult, for high school age readers.<br><br>
    "Wrestles with deeply adult problems." <i>--Psychology Today</i><br></p>
    No paperback edition.
    <hr class="clear"><br>
    
    <img class="align-right" src="images/dotu.jpg"><a href="cots.htm"><h2><i>The Doors of the Universe</i></h2></a>
    <p class="variable-size">
    (Book Three)<br><br>
    Young Adult, for high school age readers.<br><br>
    "Haunts the reader long after it is finished."  <i>--Journal of Reading</i><br></p>
    No paperback edition.
    <hr class="clear"><br>
    
    <img class="align-right" src="images/cots.jpg"><a href="cots.htm"><h2><i>Children of the Star</i></h2></a>
    <p class="variable-size">
    (Omnibus Edition)<br><br>
    Issued as adult science fiction.<br><br>
    "[The novels were first] marketed as young adult books, but there is nothing juvenile about them.... Engdahl tells an important and pertinent story." <i>--San Jose Mercury News</i><br></p>
    <hr class="clear"><br>
    
    <h2 class="center"><b>Flame Duologies</b></h2>
    
    <img class="align-left" src="images/dotf.jpg"><a href="dotf.htm"><h2><i>Defender of the Flame</i></h2></a>
    <p class="variable-size">
    (<i>The Rising Flame,</i> Book One)<br><br>
    An adult novel, but may be enjoyed by mature high school age readers.<br><br>
    Though published later than the Hidden Flame duology, this one is completely independent and quite different. It is preferred by many adults who like my YA books.<br><br>
    "This book reaches back to the brio and speculation of Engdahl's classic books of the Seventies." <i>--Nicholas Birns, author of </i>J.R.R. Tolkien: Architect of Modern Fantasy<br></p>
    <hr class="clear"><br>
    
    <img class="align-left" src="images/hotf.jpg"><a href="hotf.htm"><h2><i>Herald of the Flame</i></h2></a>
    <p class="variable-size">
    (<i>The Rising Flame,</i> Book Two) <br><br>
    An adult novel, but may be enjoyed by mature high school age readers.<br><br>
     <i>Defender of the Flame</i> should be read first, as this sequel contains spoilers for it.<br><br>
    "A futuristic ride that has many parallels in today’s society. This is a ‘thinking man’s’ science fiction book – the type we need more of today!" <i>--The Feathered Quill</i><br></p>
    <hr class="clear"><br>
    
    <img class="align-left" src="images/trf.jpg" width=35% border="1" hspace="15" vspace="0"  align="left">
    <a href="https://read.amazon.com/kp/embed?asin=B00YE05LUG&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_FON1AbF5PZYN9"><h2><i>The Rising Flame</i></h2></a><br>
    <p class="variable-size">
    (Omnibus Edition)<br><br>
    "These novels are not so much genre 'Romance' or even just 'Science Fiction' as they are Literature. These are novels about life." <i>--Jacqueline Lichtenberg, Alien Romances: Reviews 14</i><br></p>
    <hr class="clear"><br>
    
    <img class="align-left" src="images/sotf.jpg"><a href="sotf.htm"><h2><i>Stewards of the Flame</i></h2></a>
    <p class="variable-size">
    (<i>The Hidden Flame,</i> Book One) <br><br>
    An adult novel, unsuitable for young adults.<br><br>
    Though published before the other Flame novels and set earlier in time, this has a more controversial theme and moves more slowly, so is not typical of them.<br><br>
    “The story is compelling ... a thought provoking novel that may make you question the authority and direction of modern Western medical practices." <i>--Blogcritics</i><br></p>
    <hr class="clear"><br>
    
    <img class="align-left" src="images/potf.jpg"><a href="potf.htm"><h2><i>Promise of the Flame</i></h2></a>
    <p class="variable-size">
    (<i>The Hidden Flame,</i> Book Two) <br><br>
    An adult novel, unsuitable for young adults. Some of the content is inappropriate for readers below high school age. 
    <br><br>
    This duology can be read independently of <i>Stewards of the Flame</i>.<br><br>
    "The ideas and futuristic possibilities are disturbingly real and will remain with the reader long after they’ve finished the book.” <i>--IndieReader Staff Review</i><br></p>
    <hr class="clear"><br>
    
    <img class="align-left" src="images/thf.jpg"><a href="https://read.amazon.com/kp/embed?asin=B016IPIEJY&preview=newtab&linkCode=kpe&ref_=cm_sw_r_kb_dp_yJN1Ab5KSCEE5">
    <h2><i>The Hidden Flame</i></h2></a>
    <p class="variable-size">
    (Omnibus Edition)<br><br>
    "Thought-provoking themes, heroic characters, action, and suspense. Once you start reading these, you won't want to put them down." <i>Robert H., Amazon Vine Voice</i><br></p>
    <hr class="clear"><br>
    
    <h2 class="center"><b>Nonfiction</b></h2>
    
    <img class="align-right" src="images/pgs.jpg"><a href="pgs.htm"><h2><i>The Planet-Girded Suns</i></h2></a>
    <p class="variable-size">
    <i>The Long History of Belief in Exoplanets</i><br><br>
    For adults and high school.<br><br>
    
    About the little-known fact that most educated people in the 18th and 19th centuries believed planets of other suns are inhabited.<br><br>
    "Engdahl has marshalled an impressive and fascinating selection of primary sources and ... reminded us that our ancestors entertained a view of the universe that was larger and more imaginative than the history books lead us to believe." <i>--Kirkus Reviews</i><br></p>
    <hr class="clear"><br>
    
    <img class="align-right" src="images/rotf.jpg"><a href="rotf.htm"><h2><i>Reflections on the Future</i></h2></a>
    <p class="variable-size">
    <i>Collected Essays</i><br><br>
    For adults and high school.<br><br>
    Essays about my books, the importance of space colonization, and many other topics, plus an autobiography.
    <br><br>"Full of great ideas some of which have stood the test of time. I would highly recommend it for anyone interested in the possibilities of the future." <i>--Reader review, Amazon UK</i><br></p>
    No paperback edition.<br>
    <hr class="clear"><br>
    
    <h2 class="center"><b>Anthology</b></h2>
    
    <img class="align-right" src="images/anywhen.jpg"><a href="anywhen.htm"><h2><i>Anywhere, Anywhen</i></h2></a>
    <p class="variable-size">
    <i>Stories of Tomorrow</i> (Expanded Edition)<br><br>Young Adult, for ages 12 and older.<br><br>
     Includes all of my short fiction as well as original stories by other authors.<br><br>
    "The stories are well-written, deeply thought out and a pleasure to read." <i>—Sunday Advocate, Baton Rouge, Louisiana</i><br></p>
    No paperback edition.<br>
    
    <br class="clear">
    
    </div>
    
    <div style="margin-top:0%; margin-bottom:3%; padding-top:0;">
    <p class="center" style="font-size: small;">
    Entire site copyright 1997-2019 by Sylvia Engdahl (except where earlier text copyright indicated).<br>
    Last updated April 2, 2019</p>
    
    </div>
    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-76418036-1', 'auto');
      ga('send', 'pageview');
    </script>
    
    </body></html>

答案 1 :(得分:0)

不存在其他样式表。

我知道它在html中已正确链接,因为其中的所有其他内容(例如导航栏的格式)都可以正常工作。

我知道样式表中的任何内容都不能覆盖它,因为相同的样式表在内部时有效-我为使它在外部做的所有工作都被剪切并粘贴了标题的整个样式部分。

我知道没有任何内联可以覆盖它,因为如果是这样,当在标题中时它不会起作用,而是可以。 (该网站在线www.sylviaengdahl.com)。

我现在尝试使用!important,这没有什么区别。在外部时,仍然无法获得指定的字体。


这真的很奇怪。我复制了您的css文件(该文件对您外部有用),并将其放入测试文件中,然后更改了我的html文件以链接到该文件。它不在其他文件夹中。但是我仍然得到指定字体的默认字体,这是一种标准的Windows字体。

要查看是否存在字体问题,我将指定的字体颜色更改为绿色。那也没有影响,所以是全身元素。

因此,我将正文移到了链接颜色下方,现在可以使用了!该笔费用有什么不同?这不仅是因为它是第一,因为链接颜色仍然有效。

css文件现在可以与其他html文件一起使用,而以前没有。我想如果将主体和链接定义以与内部工作方式相反的顺序放在外部,则可以解决我的问题,但是我当然想知道为什么。

感谢您的帮助。


更新:我弄错了–当我反转主体和链接元素的顺序时,尽管访问的链接颜色可以正常显示链接的颜色,但是正常的链接颜色不起作用(直到使用其他浏览器后我才注意到,因为我已经访问了所有与我的第一个链接。)因此,这只是样式表中的第一行被忽略。 我已经通过在第一行定义活动链接来证明这一点,这会导致下一行(正常链接颜色)生效。

出于实用目的,这将解决此问题,因为我不在乎默认颜色是否用于活动链接。但是,当它是您发布的工作样式表的粘贴副本时,并不能解释是什么导致样式表的第一行被忽略。

更新

我找到了解决我问题的答案。我犯了一个初学者的错误-尽管我有很长的HTML经验,但我还是CSS的新手,除了将CSS移出标头并将其放入新文件之外,我从未见过任何有关制作外部样式表的说明。因此,当我这样做时,我随身携带了样式标签。我处理过的所有其他文件(例如,生产电子书所需的文件)都在顶部标识了内容,因此,我假定既然包含html的文件以html开头,则包含样式的文件将以style开头。直到开始怀疑我是否需要标题中的其他信息时,我才发现CSS文件根本没有标题。

我很困惑很久,因为文件中的所有内容(第一个声明除外)都有效。但是显然发生的是,浏览器不知道如何处理多余的行,因此它忽略了所有代码,直到出现在第一个声明的末尾的第一个右花括号为止。