Inhalt

• Schritte
• Methode 1 von 2: So richten Sie ein externes Stylesheet ein
• Methode 2 von 2: So fügen Sie ein internes Stylesheet ein
• Tipps
• Warnungen

Die Hypertext Markup Language (HTML) bestimmt, welche Elemente auf einer Webseite vorhanden sind. Die Programmiersprache Cascading Style Sheets (CSS) beschreibt, wie diese Elemente aussehen sollen.Die CSS-Datei kann als externes (CSS wird als separate Datei hinzugefügt) oder internes Stylesheet (CSS ist in der HTML-Datei enthalten) zu HTML hinzugefügt werden. Erfahren Sie, wie Sie CSS in eine HTML-Datei einbetten, um Ihre Website neu zu gestalten.

Schritte

Methode 1 von 2: So richten Sie ein externes Stylesheet ein

1. 1 Erstellen Sie eine CSS-Datei. Bereiten Sie eine CSS-Datei mit der Erweiterung ".css" vor und speichern Sie sie.
2. 2 Laden Sie die CSS-Datei auf Ihre Website hoch.
3. 3 Kopieren Sie die Adresse (URL) der CSS-Datei. Die Site-Adresse sieht in etwa so aus: www.yoursite.com/stylesheet.css.
   • Es empfiehlt sich, den primären Domänennamen aus der URL zu entfernen. Darauf aufbauend wird die Adresse http://myisite.com/css/default.css auf "/css/default.css" gekürzt. Denken Sie daran, den führenden Schrägstrich ("/") einzuschließen. Er wird als relativer Pfad bezeichnet.
4. 4 Fügen Sie den Link in die Datei ein. Suchen Sie das /head>-Tag in Ihrer HTML-Datei und erstellen Sie eine leere Zeile direkt darüber. Fügen Sie diese Zeile ein LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css"> und ersetzen Sie "www.your ..." durch einen Link in der CSS-Datei.
5. 5 Speichern Sie die HTML-Datei und laden Sie sie auf die Site hoch.
6. 6 Stellen Sie sicher, dass alles auf der Website so aussieht, wie es sollte. Öffnen Sie andernfalls die HTML-Datei erneut, suchen Sie nach Fehlern und nehmen Sie Änderungen vor.

Methode 2 von 2: So fügen Sie ein internes Stylesheet ein

1. 1 Erstellen Sie einen Etikettenstil>. Öffnen Sie die HTML-Datei und suchen Sie das /head>-Tag. Fügen Sie darüber einige Leerzeilen hinzu und geben Sie Folgendes ein:

STYLE-Typ = "text / css"> / STYLE>

1. 1 Fügen Sie Ihr gesamtes CSS zwischen diesen beiden Labels ein.
2. 2 Speichern Sie die HTML-Datei (mit der Erweiterung .html).
3. 3 Stellen Sie sicher, dass alles auf der Website so aussieht, wie es sollte. Nehmen Sie andernfalls die gewünschten Änderungen vor.

Tipps

• Überprüfen Sie immer das Erscheinungsbild der Site in verschiedenen Browsern und auf verschiedenen Betriebssystemen. Einige Browser verbinden sich auf leicht unterschiedliche Weise mit CSS. Es kann sogar im selben Browser passieren, aber auf verschiedenen Versionen von Mac und Windows. Wenn Ihre Site in einem anderen Browser anders aussieht (z. B. der Abstand zwischen einigen Objekten, z. B. Listen, eine andere Größe hat), liegt das Problem in den Einstellungen dieses Browsers. Suchen Sie das Master-Stylesheet und fügen Sie es oben in die CSS-Datei ein, um die Standardbrowsereinstellungen zu ändern. Dies geschieht, damit Ihre Einstellungen im Browser selbst nichts ändern.
• Fügen Sie nach Möglichkeit ein externes Stylesheet ein. Auf diese Weise können Sie das Aussehen der Site ändern, indem Sie den Code in der Quelldatei ändern. Auf diese Weise müssen Sie das CSS nicht auf jeder Seite Ihrer Website ändern.
• Wenn Ihre Website nicht wie erwartet auf CSS reagiert, überprüfen Sie die gesamte Codierung, um sicherzustellen, dass sie richtig geschrieben ist. Achten Sie insbesondere auf Semikolons (";") und schließende Klammern ("}"). Es ist ziemlich einfach, eines dieser Zeichen in einer CSS-Datei wegzulassen.
• Speichern Sie die HTML-Datei auf Ihrem Computer, damit Sie sie später in verschiedenen Webbrowsern öffnen und ihr Aussehen überprüfen können, bevor Sie sie weiter herunterladen. Um es zu laden, muss die CSS-Datei jedoch als externes Stylesheet in den HTML-Code eingefügt werden.
• Wenn sich das Stylesheet widerspricht – zum Beispiel sagt es zuerst, dass der Text blau und dann rot wird – ist die letzte Bedingung immer erfüllt. Wenn ein Befehl ein externes Stylesheet und der andere ein internes Stylesheet ist, ist das interne Stylesheet aktiv.

Warnungen

• Verwenden Sie kein "offenes" Staging-CSS, d. h. das CSS, das im HTML-Tag enthalten ist. (Beispiel: "align = 'center'" ist eine offene CSS-Einstellung). Dies ist eine veraltete Option mit schlechter Syntax. Wenn Sie die Site nach einer Weile aktualisieren müssen, ist es schwierig, diese Einstellung zu ändern.