Grundlagen der CSS3 Styles
Der beste Weg, mit Stilen in CSS3 zu beginnen, ist sie einfach als Mittel der Bildschirmformatierungsinformationen anzuzeigen. Da die meisten Informationen werden arbeiten Sie mit dem Text ist, dann ist es am einfachsten, mit Text als Grundlage zu beginnen Stile für das Verständnis. Lassen Sie uns mit dieser grundlegenden HTML5 formatiert Seite starten:
Eine einfache Seite Eine einfache Überschrift
Einfacher Text mit der Überschrift zu gehen.
Im Moment sind die Überschrift und der Absatz eher schlicht. Der Text erscheint in welcher Standardschriftart Sie für Ihren Browser ausgewählt haben. Typischerweise ist der Text auf weißem Hintergrund schwarz, wenn Sie eine andere Farbkombination gewählt haben.
An dieser Stelle können Sie beginnen mit der Seite spielen ein wenig zu sehen, wie es anders zu formatieren. Das folgende Verfahren hilft Ihnen, die grundlegende Seite ändern, so dass es ein wenig interessanter aussieht. Sie können einen beliebigen Texteditor Sie so lange mögen, verwenden, da es keine Formatierungen hinzufügt. Jedoch mit einem Produkt wie beispielsweise Komodo Edit wird die Aufgabe erheblich erleichtern.
Erstellen Sie eine neue HTML5-Datei mit einem Texteditor.
Der Editor kann nicht HTML5-Dateien unterstützen. Jede Textdatei tun wird. Mit der Benutzung einer bestimmten Dateityp in der Regel, dass der Editor für Sie einige der Code einfügt, automatisch die Ihnen Zeit Eingabe sparen.
Geben Sie den Code für die HTML-Seite.
Stellen Sie sicher, dass Sie den Code genau so eingeben, wie es zuvor in diesem Abschnitt erscheint.
Fügen Sie den folgenden Code unmittelbar nach dem
-Tag. Das
Das type-Attribut teilt dem Browser die
Innerhalb der Einträge, geben Sie den folgenden Code ein.
p {font-family: Kursiv-font-size: large-color: # 0000ff-background-color: # ffff00-}Das sieht kompliziert aus, aber es ist wirklich nicht. Das p steht für die
(Absatz) Tag. Alles, was in diesem Eintrag wirkt sich die
Tags in Ihrem Dokument.
Die geschweiften Klammern ({}) geben dem Browser, die alle Formatierungsanweisungen zwischen ihnen die Anwendung
Tags im Dokument. Sie sind stets bemüht, die geschweiften Klammern als Teil der Stildefinition.
Innerhalb der geschweiften Klammern finden Sie Namen und Wert-Paare zuschreiben. Zum Beispiel font-family ist der Name einer CSS-Attribut, das zu verwenden, welche Schriftart definiert. In diesem Fall gibt das Attribut an die Standard-Kursivguß für die Plattform und Browser. die CSS-Gattungsnamen wird sichergestellt, dass Ihre Anwendung allgemein kompatibel Ergebnisse auf allen Plattformen zu produzieren, mit jedem beliebigen Browser.
Die font-size-Attribut definiert eine relative Größe. In diesem Fall groß angegeben, die der Schrift groß im Vergleich zu seiner Standardgröße machen wollen. Sie sind nicht eine bestimmte Schriftgröße angibt, was bedeutet, dass jede Plattform und Browser die Schrift größer als normal für die individuelle Umgebung machen können.
Die Farbe Attribut gibt einen roten, grünen, blauen Wert für die Schriftart die Farbe zu verwenden. Der Wert wird mit einer Raute (#), gefolgt von hexadezimalen Farbwerte von 0 bis ff voraus. In diesem Fall wird die Schriftart der hellste Blau von der Plattform unterstützt werden. Ebenso gibt die Hintergrundfarbe Attribut den Hintergrund für den Text, der in diesem Fall gelb sein.
Speichern Sie die Seite und laden Sie diese in Ihrem Browser.
Sie sehen die Auswirkungen der Stiländerung in Abbildung 1-2, wie dargestellt. Ihre Seite kann sich von dem auf dieser Seite anders aussehen, weil Ihre Plattform oder Browser unterschiedliche Werte für die Schriftfamilie oder Schriftgröße verwenden.
Geben Sie den folgenden Code nach dem p style innerhalb der
h1 {font-family: "Times New Roman", Georgia, serif-font-size: 40px; text-align: center-text-decoration: underline-color: # ff0000-background-color: # 00ffff-}Dieser Stil wirkt sich auf die
Tag-Einträge und viele der Einträge für die verwendet
Tag-Stil. Beachten Sie jedoch, dass dieses Mal die font-family-Attribut enthält drei Einträge: The Times New Roman Wert der meisten spezifisch ist, gefolgt von Georgien, gefolgt von den wenigsten spezifisch - serif. Wenn es mit einem Wert arbeiten, der Leerzeichen enthält, müssen Sie den Wert in Anführungszeichen, wie gezeigt einschließen.
Mit dem Drei-Eintrag Ansatz gibt Ihnen mehr Kontrolle über das Aussehen der Ausgabe, aber immer noch macht es möglich, für Browser, die den Inhalt zu machen nicht korrekt angeben, eine bestimmte Schriftart unterstützen. Wenn eine bestimmte Schriftart liefern, stellen Sie sicher, dass Sie auch weniger bestimmte Schriften für Browser liefern, die keinen Zugriff auf Ihre angegebene Schriftart haben.
Die font-size-Attribut ist auch anders. Diesmal ist der Stil verwendet eine bestimmte Größe von 40 Pixeln. Auch wenn ein bestimmter Wert kann es möglich machen, Spezialeffekte Bildschirm zu erstellen, auch einen bestimmten Wert unter Verwendung schafft Probleme. Ein 40px Eintrag wird gut funktionieren auf dem Desktop oder Laptop, aber möglicherweise Probleme mit einer Tablette verursachen, und wird auf jeden Fall der Inhalt unmöglich machen, auf einem Smartphone angezeigt werden soll.
Dieser Stil enthält auch einige Einträge, die das Aussehen des Textes zu ändern. Die text-align Attribut legt fest, wo der Text auf dem Bildschirm platziert wird, während der Text-Dekoration Attribut spezielle Schriftmerkmale bestimmt. In diesem Fall wird die Schriftart zentriert Bildschirm mit einem Unterstrich angezeigt.
Speichern Sie die Seite und laden Sie diese in Ihrem Browser.
Sie sehen die Auswirkungen der Stiländerung in Abbildung 1-3, wie dargestellt. Die Überschrift erscheint in roter Schrift auf einem hellblauen Hintergrund, und der Absatz wird als blauer Text auf einem gelben Hintergrund angezeigt.
