2016-12-26 13 views
-1

Ich habe folgendes Problem, wenn CSS in Windows Editor:CSS Klasse Styling Ausgabe

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>RYZJMScience</title> 
      <style> 
       #title { 
        display: block; 
        margin: 0px auto; 
       } 
       .page { 
        text-decoration: none; 
        display: inline; 
        font: "Georgia, serif; 
        font-size: 40px; 
        font-color: rgb(0,0,205); 
        border: 2px 1px 1px 1px solid rgb(255,140,0); 
       } 
      </style> 
     </head> 
     <body> 
      <img src="title.png" id="title"> 
      <a href="index.html" class="page">Home</a> 
      <a href="weekly.html" class="page">Weekly</a> 
      <a href="monthly.html" class="page">Monthly</a> 
      <a href="physics.html" class="page">Physics</a> 
      <a href="chemistry.html" class="page">Chemistry</a> 
      <a href="biology.html" class="page">Biology</a> 
      <a href="technology.html" class="page">Technology</a> 
     </body> 
    </html> 

Wenn dies ausgeführt wird, ist die einzige Sache, die unter dem .page Klasse Selektor funktioniert, ist die Text-Dekoration Erklärung verwendet Unterstreichen Sie die Links. Bitte helfen Sie!

Antwort

2

Diese Zeile:

font: "Georgia, serif; 

Sollte sein:

font-family: "Georgia", serif; 

Auch die Eigenschaft, um die Schriftfarbe gesetzt ist color statt font-color, und die Grenzeigenschaften müssen aufgeteilt werden.

So Ihre page Klasse sollte wie folgt aussehen:

.page { 
    text-decoration: none; 
    display: inline; 
    font-family: "Georgia", serif; 
    font-size: 40px; 
    color: rgb(0,0,205); 
    border-width: 2px 1px 1px 1px; 
    border-style: solid; 
    border-color: rgb(255,140,0); 
} 
1

prüfen this Geige.

CSS

Änderungen i gemacht:

von

font: "Georgia, serif; 

zu

font-family: Georgia, serif; 

von

font-color: rgb(0,0,205); 

zu

color: #0000cd; 

von

border: 2px 1px 1px 1px solid rgb(255,140,0); 

zu

border-top-width: 2px; 
border-right-width: 1px; 
border-bottom-width: 1px; 
border-left-width: 1px; 
border-color:rgb(255,140,0); 
border-style: solid; 

Weitere Infos:

Fonts

Font colors

Borders

Hoffnung, die Ihnen helfen können.

3

Da Sie wirklich nicht jedes Mal, wenn Sie einen Syntaxfehler in Ihrem CSS haben, den Sie nicht finden können, in SO veröffentlichen können, benötigen Sie einen besseren Ansatz.

Sie können einen kompetenten Editor oder eine IDE verwenden, die CSS kennt und Fehler direkt auf dem Bildschirm für Sie hervorheben kann. Hier ist ein Screenshot von VSCode.Sie können von der Färbung sagen, dass etwas falsch ist:

enter image description here

Oder Sie können Ihre CSS durch eine CSS-Linter, oder Prüfer, wie die W3C CSS Validator laufen. Es hätte Ihnen gesagt:

enter image description here

meisten Web-Browser auch Ihre Fehler berichten würde, entweder in Form von Parsing-Fehler, oder in Form von unbekannten Eigenschaftsnamen oder ungültige Eigenschaftswerte im Stil Inspektor angezeigt. Erfahren Sie, wie Sie es verwenden. Hier ist, was es aussehen wird:

enter image description here

über die kleine gelbe Dreiecke Schweben würde mehr Details des Problems zeigen, wie „Unknown Eigenschaftsname“ oder „Ungültiger Eigenschaftswert“.