Home-theater-designers
CSS gehört neben HTML und JavaScript zu einem Triplett der wichtigsten Webtechnologien. CSS trägt mit sorgfältiger Planung zu einer Trennung der Anliegen bei. Unabhängige Ressourcen steuern die Struktur eines Inhalts, seine Präsentation und sein Verhalten.
Stylesheets spielen eine wichtige Rolle in Bezug auf Barrierefreiheit, Skalierbarkeit und sogar Webleistung. Als Inhaltsautor oder Webdesigner haben Sie die Kontrolle darüber, wie Geräte Inhalte rendern. Vom Layout bis hin zur Schriftgröße und -farbe verwandelt CSS Inhalte in schön aussehende Seiten.
Wie sieht CSS aus?
CSS ist eine große Sprache – es gibt viele verschiedene Dinge zu gestalten! Aber seine Syntax ist einfach, es müssen nur ein paar Regeln gelernt werden.
HTML-Elemente haben verschiedene Eigenschaften, die CSS formatieren kann. Die Farbe -Eigenschaft legt die Vordergrundfarbe (z. B. Text) fest. Schriftgröße ist abhängig von der Schriftgröße Eigentum.
Jede Eigenschaft kann auf einen unterstützten Wert gesetzt werden. Die Zuweisung eines Wertes zu einer Eigenschaft ist eine 'Deklaration'. Im Allgemeinen sehen sie so aus:
property: valueZum Beispiel:
wie man Linux auf dem Mac dual bootet
color: redWerte für verschiedene Eigenschaften können sehr unterschiedlich aussehen, sogar Werte für dieselbe Eigenschaft. Hier sind beispielsweise zwei weitere Möglichkeiten, die vorherige Erklärung zu schreiben:
color: #ff0000
color: rgb(255, 0, 0)
Wie HTML und Stylesheets zusammenkommen
Sie können HTML und CSS auf verschiedene Weise kombinieren, jede mit ihren Vorteilen.
Inline-Schreibstile
Die einfachste Methode besteht darin, Style-Deklarationen direkt an ein Element in der HTML-Datei anzuhängen. Sie können dies mit der Stil Attribut wie folgt:
Most of this text is red …
… but this isn’t!
Während das Inline-Styling von Elementen wie dieses bequem sein kann, hat es mehrere Nachteile. Zunächst einmal verkompliziert es den HTML-Code und macht es schwieriger, ihn auf einen Blick zu lesen. Es ist auch umständlich zu pflegen: Stellen Sie sich ein langes Dokument vor, in dem wir die Farbe jedes Absatzes festlegen möchten. Dies ist CSS, aber keine 'Stylesheets'.
Einbetten von Stilen in den Kopf
Sie können beginnen zu sehen, wie ein Stylesheet mit dem zweiten Mechanismus aussieht, Einbettung . Mit diesem Ansatz sammeln wir alle Style-Deklarationen in einem Stil Element in der Kopf unseres Dokuments. Es wird ungefähr so aussehen:
/* style instructions go here */
...Unsere Style-Anleitungen brauchen jedoch etwas mehr Details als zuvor. Da wir sie in den Kopf verschoben haben, ist jede Regel nicht mehr mit einem Element verknüpft. Wir könnten erklärt haben Farbe Rot , aber was sollte diese Farbe haben?
Hier kommen CSS-Selektoren ins Spiel. Sie ermöglichen es uns, bestimmte Teile der Seite anzusprechen und ihren Stil mit dieser Syntax an einer Stelle zu definieren:
wie man immer als Administrator läuft
selector {
declaration1;
declaration2;
/* etc. */
}
Um beispielsweise den Text von Absätzen blau zu gestalten, können wir Folgendes angeben:
p {
color: blue;
}In diesem Beispiel ist der Selektor einfach P , die allen Absatzelementen in unserem Dokument entspricht. Es wird den gesamten Text blau färben, solange es drin ist Die letzte zu behandelnde Methode ist das Verknüpfen. Dies ist bei weitem der nützlichste Ansatz und einer, für den Sie sich die meiste Zeit entscheiden sollten. Anstatt CSS-Regeln in die Stil -Element direkt in Ihrem Dokument, können Sie sie in eine separate Datei verschieben. Fügen Sie diesen Code in das ein Tags Ihrer HTML-Datei, um Ihr externes Stylesheet zu verlinken. Mit der verlinkten Methode machen wir uns eine Kernkraft von CSS zunutze: die Trennung von Anliegen. Alle semantischen Informationen – was der Inhalt bedeutet – sind im HTML-Dokument enthalten. Das Styling – wie es aussieht – befindet sich in einer separaten Datei, dem Stylesheet. Hier sind nur einige Vorteile dieser Trennung: Sie haben viel über Stile und Stylesheets gelernt, aber was ist mit dem kaskadierenden Teil von CSS? Die Kaskade entscheidet, welche Stile verwendet werden, wenn mehrere Stilvorlagen vorhanden sind. Sie haben gesehen, wie ein Autor Stile für seinen Inhalt angeben kann. Aber ein weiteres Merkmal von CSS ist, dass es auch Lesern und Browserherstellern ein Mitspracherecht gibt. Sie haben sich vielleicht schon über Standardstile gewundert. Wie funktioniert zum Beispiel ein H1 Element groß und fett erscheinen, auch ohne Autoren-Stylesheets? Dies ist auf eine Reihe spezieller Regeln zurückzuführen, aus denen das User-Agent-Stylesheet besteht. Diese Regeln werden zunächst von Ihrem Webbrowser auf jede von Ihnen besuchte Seite angewendet. Die Kaskade gibt an, dass ein Autoren-Stylesheet nach den User-Agent-Styles angewendet wird. Wenn unser Browser sagt, dass Überschriften fett sind, aber der Autor der Seite erklärt, dass Überschriften auf dieser Seite hell sind, werden sie am Ende hell. Es gibt eine andere Stylesheet-Quelle, die dem Leser eine gewisse Kontrolle übergibt. Theoretisch kann jeder Webbenutzer ein Benutzer-Stylesheet mit benutzerdefinierten Regeln verwalten. Diese sitzen in der Mitte: Benutzerregeln überschreiben die Standardbrowsereinstellungen, werden jedoch selbst von den Autorenstilen überschrieben. Leider war die Unterstützung für Benutzer-Stylesheets nie weit verbreitet. Sie können Stylesheets in verschiedenen Kontexten verwenden, über den Bildschirm hinaus. Die halb Attribut des Verknüpfung -Element definiert, für welche Medientypen das Stylesheet gilt. Sie können beispielsweise a . definieren Stylesheet zum Ausdrucken Verwenden von Markup wie folgt: Sie können allgemeine Stile in einem globalen Stylesheet und medienspezifische Stile in separaten Dateien zusammenfassen. Es gibt sogar Medientypen, die eine Audio- oder Braille-Präsentation Ihrer Inhalte ermöglichen. CSS ist ein wichtiges Werkzeug zur Verbesserung der Zugänglichkeit. Verwandt: So surfen Sie im Internet, wenn Sie blind oder sehbehindert sind Websites wie Wikipedia verwenden CSS, um ihren Druckstil zu steuern, unerwünschte Elemente auszublenden und das Layout zu vereinfachen. Cascading Style Sheets decken vieles ab: Kaskade, Vererbung, Selektoren, Quellen, Medien usw. Aber ihre Leistungsfähigkeit ermöglicht das moderne Web. Dies ist ein Medium, das integrierte Funktionen für Wiederverwendbarkeit, Flexibilität und Barrierefreiheit bietet. Um die volle Leistung von CSS zu sehen und zu sehen, wie viel es zu bieten hat, sehen Sie sich unseren Spickzettel an, der alle wesentlichen CSS3-Eigenschaften abdeckt. Beherrschen Sie die grundlegende CSS-Syntax mit unserem CSS3-Eigenschaften-Spickzettel. Bobby ist ein Technologie-Enthusiast, der fast zwei Jahrzehnte lang als Software-Entwickler gearbeitet hat. Er hat eine Leidenschaft für Spiele, arbeitet als Rezensionsredakteur beim Switch Player Magazine und vertieft sich in alle Aspekte des Online-Publishing und der Webentwicklung. Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!Verknüpfen eines externen Stylesheets
Die Macht von CSS
Die Kaskade erklären
Ausrichtung auf verschiedene Medien
Wie bootet man Windows von USB?
CSS lässt HTML gut aussehen
Über den Autor Bobby Jack(58 veröffentlichte Artikel) Abonniere unseren Newsletter