CSS ist die wichtigste Veränderung, die Webseiten im letzten Jahrzehnt gesehen haben, und sie hat den Weg für die Trennung von Stil und Inhalt geebnet. In moderner Weise definiert XHTML die semantische Bedeutung von semantischem Markup und wie es das Internet für immer verändern wird [Technologie erklärt] Was semantischer Markup ist und wie es das Internet für immer verändern wird [Technologie erklärt] Lesen Sie mehr Struktur - die Bedeutung und den Inhalt von die Webseite, während sich CSS mit der Präsentation befasst. Während die meisten von uns ein wenig HTML schreiben, scheinen wir zu glauben, dass CSS eine Art schwarzer Magie ist. Ich hoffe, dass ich das mit diesen fünf Schritten ändern kann, um ein CSS-Zauberer zu werden.

Dieser Artikel richtet sich an Benutzer, die noch wenig Erfahrung mit CSS haben, obwohl hier hoffentlich für jeden etwas dabei ist.

(1) Grammatik

Wie jede Sprache hat auch CSS eine bestimmte Grammatik, und es mag ein wenig sein “Computerprogramme” am Anfang, aber es ist wirklich nur eine Liste von Dingen. Alle CSS sind wie folgt geschrieben:

SELECTOR PROPERTY: VALUE; EIGENTUMSWERT; EIGENTUMSWERT;

Wie Sie vielleicht bereits wissen, wird bei CSS ein Stil auf ein ausgewähltes Element auf der Webseite angewendet. Um beispielsweise die Art und Weise, in der all Ihre Links angezeigt werden, zu stylen, würden Sie verwenden “ein” als Wahlschalter. Die verschiedenen Eigenschaften und Werte, die Sie mit Erfahrung lernen werden, aber einige sind einfach - Dinge wie COLOR, BORDER, FONT-SIZE und HEIGHT sind alle möglichen Eigenschaften, deren Werte Rot sein könnten, 14pt, 150%, 1000px - das ist wirklich der Fall einfach. Mal sehen, wie wir alle Links rot gestalten:

a color: red;

Sie können denselben CSS-Block auch verwenden, um mehrere Elemente gleichzeitig mit Kommas auszuführen:

a, h2, h3 color: red;

Dadurch werden nicht nur alle Links, sondern auch alle Überschriften h2 und h3 in derselben roten Farbe dargestellt. Beachten Sie, dass sie alle unterschiedliche Größen haben können, da dieser bestimmte Codeblock NUR die Farbe ändert.

(2) Klassen- und ID-Selektoren

Manchmal möchten Sie jedoch nicht alle a-Elemente auf dieselbe Art und Weise gestalten - und in solchen Fällen könnten Sie sie verwenden KLASSE oder ICH WÜRDE. ID wird in der Regel für einmalige Elemente verwendet und meistens zum Definieren großer Inhaltsblöcke oder einzelner Sondertasten und dergleichen.

Beispielsweise haben Sie möglicherweise einen großen DIV für die HEADER-, CONTENT- und FOOTER-Blöcke Ihrer Seite. Wenn Sie also diese IDs als IDs definieren, wäre dies eine kluge Entscheidung. Klassen hingegen werden verwendet, wenn sich Stilelemente wahrscheinlich auf der gesamten Seite wiederholen. Vielleicht möchten Sie, dass ein paar Elemente abgerundete Ecken mit einem 2px-durchgehenden roten Rand haben. Anstatt den gleichen Inline-Stil nicht millionenfach ausschreiben zu müssen, müssen Sie eine Klasse definieren und stattdessen die Klasse diesen Elementen zuordnen. Wie definieren Sie diese IDs und Klassen??

 
SIDEBAR
 

Um diese Elemente in CSS anzuvisieren, würden Sie Folgendes verwenden:

 .rot gerundet // dies ist ein Klassenrandradius: 5px; Rand: 2px durchgehend rot;  #sidebar … // Dies ist eine ID 

(3) Nachkommen

Sie müssen jedoch nicht alles und nichts in Ihrem Dokument mit Klassen und IDs verknüpfen. Sie können auch die so genannten DESCENDANTS verwenden, um Elemente auszuwählen. Schauen Sie sich diese CSS-Anweisung an und prüfen Sie, ob Sie herausfinden können, was sie bewirkt:

#sidebar h1 font-size: 20px;

Dies wird ZUERST den Artikel mit einer ID von finden “Seitenleiste” DANN wird die Auswahl auf alle beschränkt

s enthalten, und wenden nur den Stil auf diese.

Wenn Sie also alle Ihre Artikel irgendwie zusammenfassen können, ist es am besten, Nachkommen-Selektoren zu verwenden, da der Code noch weniger ist als das Hinzufügen mehrerer class =”” Definitionen für alles.

(4) Wo dieses CSS abgelegt wird?

Der beste Weg, um mit CSS umzugehen, besteht darin, es vollständig von Ihrem HTML-Code zu trennen. Erstellen Sie eine Datei mit dem Namen ".css" und fügen Sie diese Zeile einfach Ihrem HTML-Header hinzu:

Sie können dem Abschnitt zwischen den Tags auch CSS-Blöcke hinzufügen. Ich empfehle diese Methode jedoch nicht, da dies zu unordentlichen und schwer lesbaren HTML-Dateien führt.

Der dritte Ort, an dem CSS hinzugefügt wird, ist Inline, aber Sie sollten sich auch dessen hüten. Alles, was inline hinzugefügt wurde, ist so:

überschreibt automatisch alles, was in Ihrem eigenen Stil definiert ist. Vielleicht sitzen Sie dort und versuchen, lange Zeit zu debuggen, warum Ihre Miniaturansichten nicht in der Größe verändert werden, und Ihr CSS ist möglicherweise perfekt. Wenn das IMG-Element jedoch bereits Inline-Stile enthält, haben diese Vorrang. Woher wissen Sie, ob etwas anderes davon betroffen ist??

(5) Holen Sie sich FireBug oder verwenden Sie Chrome

FireBug Amateur Guide zum Anpassen des Website-Designs mit FireBug Amateur Guide zum Anpassen des Website-Designs mit FireBug Read More ist ein erstaunliches Entwicklungstool, das besonders hilfreich ist, um herauszufinden, wie CSS funktioniert. Nehmen Sie sich einen Moment Zeit, um es herunterzuladen, und werfen Sie einen Blick darauf. FireBug ist für Firefox als Plugin verfügbar. Wenn Sie Chrome verwenden, sind bereits identische Funktionen integriert. Wenn Sie das Plugin in Firefox aktiviert haben oder Chrome verwenden, klicken Sie einfach mit der rechten Maustaste auf eine beliebige Stelle der Seite und wählen Sie aus “Element prüfen“.

Daraufhin wird ein neues Fenster unten im Browser geöffnet. Auf der linken Seite befindet sich die XHTML-Ansicht, die schön formatiert und zusammenklappbar ist. Wenn Sie den Mauszeiger über ein Element bewegen, wird dieses Element auf der Seite hervorgehoben und das CSS-Boxmodell wird angezeigt (wir werden in einer zukünftigen Lektion mehr über das Boxmodell sprechen). Der Schlüsselpunkt hier ist, dass Sie auch ein beliebiges Element auswählen können und genau sehen können, welches CSS auf der rechten Seite darauf wirkt, und es wird die Elemente aufteilen, in die die Selektoren das verursacht haben. Alles, was inline hinzugefügt wurde, wird unter angezeigt “element.style” Überschrift. Versuchen Sie es jetzt auf dieser Seite. Beachten Sie, dass sehr oft viele der rechts aufgeführten CSS durch eine zentrale Linie durchgestrichen werden. Dies bedeutet, dass ein anderer Selektor, der an diesem Element arbeitet, Vorrang hat und den durchgestrichenen überschreibt.

Das war es für heute, aber Sie können gerne Kommentare hinterlassen, wenn Sie der Meinung sind, dass ich einige grundlegende Punkte für Anfänger verpasst habe oder wenn Sie spezielle Fragen oder Probleme mit CSS haben. Fragen Sie im technischen Support-Bereich unserer Website nach. Nächstes Mal möchte ich Ihr Wissen über CSS über grundlegende Farb- und Größenänderungen hinaus erweitern.

Erfahren Sie mehr über: HTML, Programmierung, Webdesign, Webentwicklung.