Wie Cascading Style Sheets (CSS) Arbeit
CSS, oder Cascading Style Sheets, ist Code, der nicht nur das optische Erscheinungsbild Ihrer individuellen HTML-Elemente steuert, sondern auch, wo die Elemente in Beziehung zueinander erscheinen, und manchmal, wie sie interagieren und zu animieren. Zwischen HTML, CSS und javascript, codieren Sie die gesamte Präsentationsschicht einer Website. Powering die Website dynamische Funktionen auszuführen oder mit einem CMS-Verbindung (content management system) Datenbank erfordert zusätzlichen Code wie PHP.
CSS hat seine Fähigkeiten dramatisch in den letzten Jahren- entwickelte es nun möglich ist, visuell ansprechende Webseiten zu entwerfen - mit (zum Beispiel) mit abgerundeten Ecken-Boxen, einfache Verläufe und Text im Schatten - ohne überhaupt Bitmap-Grafiken verwenden. All diese coole Effekte können als Code-Schnipsel definiert werden und dann auf alles, was HTML-Objekt Sie braucht das Gefühl, einige gussying auf. Wenn Sie jemals benötigen eine Across-the-Board-Änderung auf Ihre Website, die Aktualisierung einer CSS-Code-Zeile wird den Trick tun.
Um Ihre CSS-Fähigkeiten aus dem Boden, Sie beginnen, indem sie eine Reihe von Stilen für jedes Element definieren Sie beeinflussen möchten, ob es sich um eine HTML-Komponente (wie ein Link oder eine Überschrift) oder einem CSS-Element (wie ein div-Container). Sie kann tun dies alles innerhalb des HTML-Dokuments definieren selbst, aber es ist häufiger Ihre Stile in einem Dokument getrennt von der HTML-Seite zu definieren. Beachten Sie auch, dass Sie eine Reihe von Modifikatoren definieren können, die so genannte Klassen, dass Sie in Ihren HTML-Code rufen kann weiter auf die Art und Weise Elemente beeinflussen erscheinen - es ist ähnlich, wie Adjektive helfen, das Substantiv angeben (n) sie an.
Hier ist ein Beispiel von CSS-Code, die alle Ihre HTML macht Schlagzeilen erscheinen rot und stellen in 18-Punkt Arial:
h1 {color: # e80f0f-font-family: Arial, Helvetica, sans-serif-margin: 20px 20px 32px; line-height: 22px; font-size: 18px;} Dieser Code wird in einem separaten Dokument gespeichert - in diesem Fall ein Dokument mit dem Titel sample.css. Die HTML-Seite bezieht sich auf diese externen Dokument nach oben im Kopfbereich der Seite. Dann irgendwo auf der Seite, dass das Tag verwendet wird, der Text, der mit den Einstellungen wieder in den CSS-Dokument konfiguriert werden Render folgt.
Nun, wenn Sie eine Sonderfall Schlagzeile, die aus bestimmten Schlagzeilen größer mit einem noch helleren Rot haben wollten, könnten Sie eine benutzerdefinierte CSS-Klasse einrichten, um diese Aufgabe zu bewältigen, und es mit dem Tag in Ihrem HTML anhängen. Sie können eine Klasse einen beliebigen Namen geben würde - so stellen Sie sicher, dass es eine Zeit vor dem Namen hat und keine Leerzeichen im Namen, wie folgt aus:
.big {font-size: 24px; line-height: 26px; color: # e80f0f-}Wie in dem nächsten Beispiel gezeigt, wird das erste Überschrift als die CSS-Code definiert ist. Die zweite Überschrift hat die .big Klasse mit dem Tag angehängt, so ergibt sich eine größere, hellere Schlagzeile ist.
Beachten Sie, dass in der Klasse Codebeispiel .big CSS gegeben früher, Sie müssen nicht die Schriftart und die Marge Präferenzen wiederholen. Diese Einstellungen sind bereits im ursprünglichen Stil ausmachte. Sie müssen nur die Änderungen zu skizzieren. Das Wort Kaskade in Cascading Style Sheets bedeutet, alle Stile entlang geführt (ererbtvon Style Sheets), die ihre Anweisungen von Ihrem ursprünglichen Einstellungen erhalten - in diesem Fall jene, legen Sie in der Klasse auf. Grundsätzlich, wenn Sie einen Stil eingerichtet, jedes Element, das diesen Stil zugewiesen bekommt # 147-Kaskaden durch # 148- zu den anderen Arten, wie Sie Ihre Einstellungen gerichtet, es sei denn, Sie eine Änderung beantragen.
Sie erstellen visuelle Effekte in CSS wie diese von zugelassenen Eigenschaften mit Hilfe wie font-size, Marge und Farbe, wie in den Beispielen verwendeten nur hier gegeben. wie Sie vielleicht daher vorstellen, der Schlüssel in den Griff zu bekommen, CSS (und auf das, was können Sie und mit ihr nicht tun kann) liegt alle verfügbaren CSS-Eigenschaften in das Studium und das Experimentieren mit, welche Art von Werten, die Sie für jeden eingeben . Sie können ziemlich umfassende Listen online zu finden, wenn Sie suchen CSS-Eigenschaften Liste und Werte.
