2014-09-16 2 views
0

Я использую внутренний css и всякий раз, когда тестирую его с любым браузером, стиль никогда не применялся к тегам. Я проверил свой код, и он прошел. Не знаю, где я пойдите неправильно. Если кто-нибудь может мне помочь, просмотрев эту страницу в своем браузере? Спасибо.HTML5 и CSS, внутренний стиль CSS не применяется

<!DOCTYPE HTML> 

<html> 
<head> 
<meta charset="utf-8" /> 
<title>Extend Your Knowledge - 3-1</title> 

<style type="text/css"> 
<!-- 

body {font-family:"Garamond,Arial,Verdana; font-size:12pt;} 

h1,h2 {color:red ; 
     font-variant:small-caps;} 

.align-right {float:right; 
       margin-left:15px; 
       margin-right:15px;} 

.align-left {float:left; 
      margin-left:15px; 
      margin-right:15px; } 
a   {text-decoration:underline; 
      color:red;} 
a:hover  {background:red; 
       color:white;} 
       --> 
       </style> 

</head> 
<body> 

<section> 
<article> 
    <a id="top"></a> 
    <h1>Isabel's Desserts</h1> 
<p>We offer a variety of wonderful desserts at our cafe such as <a href="#eggnog">eggnog mousse</a> as well as <a href="#custard">decorative custards</a>.</p> 

<a id="eggnog"></a> 
<h2>Eggnog Mousse</h2> 
<img class="align-left" src="mousse.jpg" width="560" height="420" alt="First dessert" /> 

<p>This first dessert is delicious. The mousse is light and fluffy and is always a customer favorite.</p> 
<br style="clear-left" /> 
<br /> <br /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<a href="#top">To top</a> 

<a id="custard"></a> 
<h2>Decorative Custards</h2> 
<img class="align-right" src="custard.jpg" width="280" height="420" alt="Second dessert" /> 
<p>This second dessert comes in several flavors, including chocolate, vanilla, and butterscotch. The custard is often selected as the dessert for special occasions.</p> 
<br style="clear:right" /> 
<br/><br/> 
<a href="#top">To top</a> 
</article> 
</section> 
</body> 
</html> 
+1

вы комментируете ваш CSS –

+0

'' Это HTML комментарии, ничего в промежутке между открытие и закрытие комментарий будет оказано. – APAD1

+0

Еще одно предложение, которое я хотел бы назначить классу для вашей ссылки «To Top», а затем применить к нему «margin-top» вместо использования десятков перерывов. – APAD1

ответ

5

Опечатки:

body {font-family:"Garamond,Arial,Verdana; font-size:12pt;} 
             ^-- missing " 

Вы действительно должны проверить отладки консоль браузера (например, сдвиг-Ctrl-J в Firefox), которые говорят бы вам об этом. ЛЮБЫЕ ошибки в файле css убьют все правила после ошибки. Так как у вас есть синтаксические ошибки с комментариями html, и этот ", в основном вы, ENTIRE css ruleset, игнорируются.

+0

О! U были правы! Я удалил («) для семейства шрифтов и бам сработал! Какая глупая ошибка Идид! Я пробовал три часа! Haha Большое вам спасибо :))) – sunflower

+0

Цитата, если она будет добавлена, должен быть добавлен после 'Garamond', а не после' Verdana', потому что иначе браузер будет искать один шрифт, называемый Garamond, Arial, Verdana', а не три шрифта с их индивидуальными именами. – Alohci

2

Ошибка заключается в следующей строке
тело {семейство шрифтов: "Garamond, Arial, Verdana, размер шрифта: 12pt;}

вы пропустили" в строке выше

Попробуйте это
body {font-family: "Garamond, Arial, Verdana"; размер шрифта: 12pt;}
Удалить Комментарии также

Смежные вопросы