CSS-Code wirkt sich nicht auf HTML-Dokument aus

Ich verspreche, ich habe hier nach einer Antwort gesucht, bevor Sie gefragt haben.CSS-Code wirkt sich nicht auf HTML-Dokument aus

Ich bin in einem HTML-Kurs in der Schule, und unser endgültiges Projekt für die Einheit ist es, eine multi-gerahmte Webseite zu erstellen. In der Datei main.htm möchte ich, dass die Beschreibung "Über" sagt, während Sie in einem 90-Grad-Winkel links vom Text stehen. Ich habe online gesucht, und es muss CSS verwenden, kein Problem, also gehe ich zu W3-Schulen, um herauszufinden, wie man CSS richtig einsetzt. Das Problem ist, dass das Notepad doc, das ich benutze, das CSS komplett ignoriert.

Hier ist der Code:

<!DOCTYPE html> 
 
<HTML> 
 

 
<HEAD> 
 
    <STYLE> 
 
    body { 
 
     Background-color: #ffffff Font-Family: "Tw Cen MT"; 
 
    } 
 
    h1 { 
 
     -ms-transform: rotate(-90deg); 
 
     filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); 
 
      
 
    } 
 
    </STYLE> 
 
</HEAD> 
 

 
<BODY> 
 

 
    <h1>The Pawnshop</h1> 
 
    <h3>is a buy and sell eccomerse site. Send us information if you want to sell, or check out our store 
 
page if you're looking to buy.<h3> 
 

 
</BODY> 
 
</HTML>

Das Seltsame ist, wenn ich es online testen, und auch wenn ich es im Code snippit versuchen, es funktioniert perfekt (abgesehen von den seitwärts Text ist in der Mitte, die für jetzt kein Thema ist).

Ich bin der Bearbeitung in einem Notizblock Dokument und Prüfung in Internet Explorer 10.

Quelle

2016-06-10 Caleb

https://jigsaw.w3.org/css-validator/ könnte einen guten Ausgangspunkt machen – Quentin

Tun Sie sich selbst einen Gefallen und verwenden Sie nicht die m $ -spezifischen css-Erweiterungen. Der Marktanteil von IE sinkt schnell in "Rundungsfehler" -Bereiche. Verwenden Sie die richtige STANDARD CSS, und machen Sie sich nicht daran gewöhnt, w3fools zu konsultieren. Sie sind eine schreckliche Ressource –

@MarcB upvote Sie haben, für Ihre Vorschläge! –

Sie müssen -webkit-transform, enthalten -o-transform, -moz-transform, transform für andere Browser Transformation unterstützen

 
 
    body { 
 
     background-color: #ffffff; 
 
    font-family: "Tw Cen MT"; 
 
    } 
 
    h1 { 
 
     position:absolute; 
 
     left:0px; 
 
     Top:20px; 
 
     width:300px; 
 
     -webkit-transform: rotate(-90deg); 
 
     -moz-transform: rotate(-90deg); 
 
     -o-transform: rotate(-90deg); 
 
     -ms-transform: rotate(-90deg); 
 
     transform: rotate(-90deg); 
 
     filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); 
 
      
 
    }

<h1>The Pawnshop</h1> 
 
    <h3>is a buy and sell eccomerse site. Send us information if you want to sell, or check out our store 
 
page if you're looking to buy.<h3>

Quelle

2016-06-10 15:25:44 Pushpendra

'-ms-' ist ein Microsoft-Präfix. Nicht Firefox. Das wäre "-moz-' ". – Turnip

Ich habe meine Antwort bearbeitet. Trotzdem danke! – Pushpendra

Haben Sie? Lies die erste Zeile deiner Antwort nochmal :) – Turnip

Dont dies vergessen:

h1{ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
}

Quelle

2016-06-10 15:17:53 HudsonPH

Alle aktuellen Browser unterstützen diese Eigenschaft ohne Präfixe: http://caniuse.com/#search=transform und Präfixe sind für zukünftige Versionen aufgegeben. Verwenden Sie einfach eine Regel ohne Präfix. – Derek

@Derek alte Versionen brauchen das, wie ie9 oder Safari 3.1 ... – HudsonPH

LOL @ Safari 3.1 –

Ich kann viele Fehler sehen und Richtlinien in Ihrem Code nicht folgen.

body { 
    Background-color: #ffffff Font-Family: "Tw Cen MT"; 
}

Es gibt tatsächlich zwei Regeln:

body { 
    background-color: #ffffff; 
    font-family: "Tw Cen MT"; 
}

-ms-transform: rotate(-90deg); dies nur auf IE funktionieren wird, weil der -ms- Präfix. Werfen Sie einen Blick auf die korrigierte Version: https://jsfiddle.net/oeqr3m6m/ (Ich habe Hintergrundfarbe geändert, um sichtbar zu sein).

Und wie @ slawrence10 sagt, fügen Sie type="text/css" zu Ihrem style Tag hinzu.

Auch wenn es funktioniert, verwenden Sie bitte kleine Buchstaben für CSS und HTML-Code.

Quelle

2016-06-10 15:31:20

CSS-Code wirkt sich nicht auf HTML-Dokument aus

Antwort

Verwandte Themen