我有一个大型网站，我已经使用 html4 维护了很多年。我开始将其转换为 css。我有一个工作正常的内部样式表，但是当我将它移动到外部样式表时，body 元素规则无效。样式表中的其他所有内容都像在内部时一样工作。
我试过将 body 元素移回内部 header ，它在那里工作。
body {
background-color: #E3D7B7;
text-color: black;
font-family: Franklin Gothic Medium, sans-serif;
font-size: medium;
line-height: 125%;
}
这在内部时生效，但在外部时它会被忽略——例如，字体显示为默认值。样式表中紧随其后的所有内容都会生效。
最佳答案
首先，您是否添加了任何其他样式表，例如 bootstrap？如果你这样做了，根据顺序，它可能会互相覆盖。
因为我看不到你的 html 文件，所以我会假设这里的东西，你是否正确地在头部添加了你的风格？所有目录都正确吗？
如果内联主体样式采用更高的级联选择(它应该如此)，那么在你的外部文件上有东西覆盖它，去浏览器检查它。作为实验，将正文放入 !important 到您的外部文件中。
body {
background-color: #E3D7B7 !important;
text-color: black;
font-family: Franklin Gothic Medium, sans-serif;
font-size: medium;
line-height: 125%;
您的 css 是否位于新文件夹 ex:(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>关于css - 代码的第一个 CSS 声明适用于内部样式表，但不适用于外部样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55502280/