CSS Tutorial
Erste Schritte mit CSS
Suche…
Bemerkungen
Stile können auf verschiedene Arten verfasst werden, sodass die Wiederverwendung und der Gültigkeitsbereich unterschiedlich sind, wenn sie in einem HTML-Quelldokument angegeben werden. Externe Stylesheets können in HTML-Dokumenten wiederverwendet werden. Eingebettete Stylesheets gelten für das gesamte Dokument, in dem sie angegeben werden. Inline- Stile gelten nur für die einzelnen HTML-Elemente, für die sie angegeben werden.
Versionen
Externes Stylesheet
Ein externes CSS-Stylesheet kann auf eine beliebige Anzahl von HTML-Dokumenten angewendet werden, indem in jedem HTML-Dokument ein <link> -Element eingefügt wird.
Das Attribut rel des <link> -Tags muss auf "stylesheet" und das href Attribut auf den relativen oder absoluten Pfad zum Stylesheet gesetzt werden. Während die Verwendung relativer URL-Pfade im Allgemeinen als bewährte Methode gilt, können auch absolute Pfade verwendet werden. In HTML5 kann das type Attribut weggelassen werden .
Es wird empfohlen, das <link> -Tag im <head> -Tag der HTML-Datei zu platzieren, damit die Stile vor den Elementen geladen werden, die sie formatieren. Andernfalls sehen Benutzer einen Blitz mit nicht gestylten Inhalten .
Beispiel
hallo-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
</html>
style.css
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
Stellen Sie sicher, dass Sie den korrekten Pfad zu Ihrer CSS-Datei in der Datei href angeben. Befindet sich die CSS-Datei im selben Ordner wie Ihre HTML-Datei, ist kein Pfad erforderlich (wie im obigen Beispiel). Wenn sie jedoch in einem Ordner gespeichert wird, geben Sie diesen wie href="foldername/style.css" .
<link rel="stylesheet" type="text/css" href="foldername/style.css">
Externe Stylesheets gelten als die beste Methode, um mit CSS zu arbeiten. Dafür gibt es einen ganz einfachen Grund: Wenn Sie eine Site mit beispielsweise 100 Seiten verwalten, die alle von einem einzigen Stylesheet gesteuert werden und Ihre Linkfarben von Blau auf Grün ändern möchten, ist die Änderung viel einfacher in Ihrer CSS-Datei und lassen Sie die Änderungen auf allen 100 Seiten "kaskadieren", als auf 100 separate Seiten zu gehen und die gleiche Änderung 100 Mal vorzunehmen. Wenn Sie das Erscheinungsbild Ihrer Website vollständig ändern möchten, müssen Sie nur diese eine Datei aktualisieren.
Sie können beliebig viele CSS-Dateien in Ihre HTML-Seite laden.
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">
CSS-Regeln werden mit einigen Grundregeln angewendet, und die Reihenfolge spielt eine Rolle. Wenn Sie beispielsweise eine main.css-Datei mit etwas Code darin haben:
p.green { color: #00FF00; }
Alle Ihre Absätze mit der 'grünen' Klasse werden in hellem Grün geschrieben. Sie können dies jedoch mit einer anderen .css-Datei überschreiben, indem Sie sie nach main.css einfügen. Sie können override.css mit dem folgenden Code nach main.css haben, zum Beispiel:
p.green { color: #006600; }
Jetzt werden alle Ihre Absätze mit der 'grünen' Klasse dunkler als hellgrün geschrieben.
Es gelten andere Prinzipien wie die! Wichtige Regel, Spezifität und Vererbung.
Wenn jemand Ihre Website zum ersten Mal besucht, lädt der Browser den HTML-Code der aktuellen Seite und die verknüpfte CSS-Datei herunter. Wenn sie dann zu einer anderen Seite navigieren, muss ihr Browser nur den HTML-Code dieser Seite herunterladen. Die CSS-Datei wird zwischengespeichert und muss daher nicht erneut heruntergeladen werden. Da Browser das externe Stylesheet zwischenspeichern, werden Ihre Seiten schneller geladen.
Interne Stile
CSS, das in <style></style> -Tags innerhalb eines HTML-Dokuments eingeschlossen ist, funktioniert wie ein externes Stylesheet, außer dass es im HTML-Dokument lebt, das es formatiert, und nicht in einer separaten Datei. Es kann daher nur auf das Dokument angewendet werden, in dem es enthalten ist lebt. Beachten Sie, dass dieses Element im Inneren der sein muss <head> Element für HTML - Validierung (obwohl es in allen gängigen Browsern funktionieren , wenn in platziert body ).
<head>
<style>
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
Inline-Styles
Verwenden Sie Inline-Stile, um den Stil auf ein bestimmtes Element anzuwenden. Beachten Sie, dass dies nicht optimal ist. Das Platzieren von Stilregeln in einem <style> -Tag oder einer externen CSS-Datei wird empfohlen, um eine Unterscheidung zwischen Inhalt und Präsentation zu gewährleisten.
Inline-Stile überschreiben jedes CSS in einem <style> -Tag oder einem externen <style> . Während dies unter Umständen nützlich sein kann, verringert diese Tatsache in den meisten Fällen die Wartbarkeit eines Projekts.
Die Stile im folgenden Beispiel gelten direkt für die Elemente, an die sie angehängt sind.
<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>
Inline-Stile sind im Allgemeinen die sicherste Methode, um die Kompatibilität zwischen verschiedenen E-Mail-Clients, -Programmen und -geräten zu gewährleisten. Das Schreiben kann jedoch zeitaufwändig sein und ist in der Verwaltung etwas schwierig.
CSS @import-Regel (eine der CSS-Regeln)
Die @import-CSS-Regel at-rule wird zum Importieren von Stilregeln aus anderen Stylesheets verwendet. Diese Regeln müssen allen anderen Arten von Regeln vorangehen, mit Ausnahme von @charset-Regeln. Da es sich nicht um eine verschachtelte Anweisung handelt, kann @import nicht innerhalb von at-rules der bedingten Gruppe verwendet werden. @import .
Wie benutze ich @import?
Sie können die @ import-Regel auf folgende Arten verwenden:
A. Mit interner Stilmarke
<style>
@import url('/css/styles.css');
</style>
B. Mit externem Stylesheet
Die folgende Zeile importiert eine CSS-Datei mit dem Namen additional-styles.css im Stammverzeichnis in die CSS-Datei, in der sie angezeigt wird:
@import '/additional-styles.css';
Der Import von externem CSS ist ebenfalls möglich. Ein häufiger Anwendungsfall sind Schriftdateien.
@import 'https://fonts.googleapis.com/css?family=Lato';
Ein optionales zweites Argument für die @import Regel ist eine Liste von Medienabfragen:
@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);
CSS mit JavaScript ändern
Reines JavaScript
Es ist möglich , hinzuzufügen, zu entfernen oder CSS - Eigenschaft Werte mit JavaScript durch ein Element ändert style Eigenschaft.
var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
Beachten Sie, dass Stileigenschaften im unteren Kamelfallstil benannt werden. In dem Beispiel sehen Sie, dass die css-Eigenschaft font-family in Javascript fontFamily wird.
Alternativ zur direkten Bearbeitung von Elementen können Sie in JavaScript ein <style> oder <link> -Element erstellen und an den <body> oder <head> des HTML-Dokuments anhängen.
jQuery
Das Ändern von CSS-Eigenschaften mit jQuery ist noch einfacher.
$('#element').css('margin', '5px');
Wenn Sie mehr als eine Stilregel ändern müssen:
$('#element').css({
margin: "5px",
padding: "10px",
color: "black"
});
jQuery bietet zwei Möglichkeiten zum Ändern von CSS-Regeln, die Bindestriche enthalten (z. B. font-size ). Sie können sie in Anführungszeichen oder den Namen der Stilregel setzen.
$('.example-class').css({
"background-color": "blue",
fontSize: "10px"
});
Siehe auch
Stylinglisten mit CSS
Es gibt drei verschiedene Eigenschaften für die Gestaltung von Listenelementen: list-style-type , list-style-image und list-style-position , die in dieser Reihenfolge deklariert werden sollten. Die Standardwerte sind "disc", "Outside" und "None". Jede Eigenschaft kann separat deklariert werden oder mithilfe der Kurzschreibeigenschaft im list-style .
list-style-type definiert die Form oder den Typ des Aufzählungspunkts, der für jedes Listenelement verwendet wird.
Einige der zulässigen Werte für den Listentyp list-style-type :
- Scheibe
- Kreis
- Quadrat
- Dezimal
- niederrömisch
- Oberrömisch
- keiner
(Eine vollständige Liste finden Sie im Wiki für W3C-Spezifikationen. )
Um quadratische Aufzählungspunkte für jedes Listenelement zu verwenden, würden Sie beispielsweise das folgende Eigenschaftswertpaar verwenden:
li {
list-style-type: square;
}
Die Eigenschaft list-style-image bestimmt, ob das Symbol für das Listenelement mit einem Bild festgelegt ist, und akzeptiert den Wert none oder eine URL, die auf ein Bild verweist.
li {
list-style-image: url(images/bullet.png);
}
Die Eigenschaft list-style-position legt fest, wo der Listenelement-Marker positioniert werden soll. Er akzeptiert einen der beiden Werte: "inside" oder "outside".
li {
list-style-position: inside;
}