Beispiel für Cascade CSS-Stil-Tische
Der genaue Ort der Objekte auf der Seite relativ zueinander ist vielleicht eine der schwierigsten Aufgaben für den Webmaster. Schreiben Sie einen HTML-Seitencode, damit alle grafischen Bilder und Textblöcke nicht nur auf einem Web-Master-Computer, sondern auch auf allen Site-Besuchern - real arbeitet. Der größte Kell, der vom Benutzer in seinem Browser ausgestellt ist, kann eine herrliche Kreation in eine unordentliche Reise des Teigs und der Bilder machen.
Kaskadierstilblätter (Kaskadierstilblätter), die als Mittel zur vollständigen Kontrolle über HTML-Markup deklariert werden, werden im Hinblick auf das unter Berücksichtigung des Problems als in Betracht gezogen gutes Werkzeug So organisieren Sie den genauen Speicherort von Objekten auf der Seite. Mit CSS können Sie alle Eigenschaften eines Standard-Tags überschreiben. Es wird möglich, den Textblock relativ zur Seite und anderen Textblöcken auszurichten.
Die Verwendung von CSS eröffnet neue spezifische Funktionen, die mit Standard HTML nicht verfügbar sind. Beispielsweise ist es möglich, Interbust- und Ladungsabstände für Text herzustellen, die die Position des Musters im Hintergrund ohne seine Mosaik-Ausgabe im gesamten Dokument genau angeben.
Im Allgemeinen ermöglichen die Kaskadier-Stil-Blätter, über das Design der Webseite über die ästhetische Seite der Informationswahrnehmung des Benutzers nachzudenken, und nicht nur um den utiliti.
Mit der Verwendung von CSS wächst die Kreationsgeschwindigkeit neue Seite. Die definierten Stile, die einmal definiert sind, können in jedem Ort des Dokuments unbegrenzt verwendet werden. Ein wichtiges Detail ist die Möglichkeit, Stile in einer separaten Datei in Form, um verschiedene Eigenschaften zuzuordnen, um Tags zuzuweisen und benutzerdefinierte Stile zu erstellen. Override-Styles in einer solchen Datei verursacht eine automatische Änderung des Anzeigestils aller Objekte, für die der modifizierte Stil angewendet wurde.
Lassen Sie uns über die Verwendung von CSS wohnen. Es gibt vier Möglichkeiten, Stile anzuwenden:
- Style in Markup-Element überschreiben
- Platzieren Sie Stilbeschreibungen in den Dokumentenheader mit Stil-Tag
- Platzieren eines Verweiss auf eine externe Beschreibung über das Link-Tag
- Importieren Sie den Stil im Dokument
erhältlich in CSS-Stil zu diesem Markup-Element. Mit dieser Methode beeinflusst die Änderung der Änderung nur das Element, für das dieses Tag verantwortlich ist und nicht auf anderen Elementen reflektiert wird, die auch von diesem Tag an anderer Stelle zurückgezogen wird. Ermöglicht das Anwenden des gewünschten Stils in einen bestimmten Abschnitt des Dokuments.
Sie können das Standard-Markup-Element überschreiben oder Ihre eigenen Anzeigeeigenschaften mithilfe eines Pair-Tag-Stils im Dokumentenkopf vor dem Body-Tag erstellen. Auch die Verwendung von Style-Tag erstellt beliebige Klassen. Ihre Verwendung ermöglicht es, dass Sie die gleichen Anzeigeeigenschaften für verschiedene Tags angeben. Bequem, zum Beispiel dieselbe Schriftart für den Text und die Hyperlinks darin ein. Wenn die Farbe und der Unterstil der Unterstreichung nicht angegeben sind, bleiben diese Parameter für Hyperlinks für dasselbe und sie bleiben zwischen gewöhnlichem Text.
Wenn auf mehreren oder allen Seiten der Site die gleichen Stile verwendet werden, ist es nicht erforderlich, sie in jedem HTML-Dokument zu ermitteln. Es reicht aus, sie in einer separaten Datei zu speichern, und beziehen Sie sich in jedem Dokument mit dem Link-Tag im Kopfelement (vor dem Body-Tag). Das REL-Attribut muss den Wert von "Stylesheet" haben.
Es ist auch möglich, Stilstile importieren zu können. Der Unterschied zum Verweis auf die externe Beschreibung ist, dass der Import des Stils innerhalb des Stilelements oder in der externen Datei mit der im Link-Tag angegebenen Stilbeschreibung erfolgen kann. Auf diese Weise können Sie eine externe Datei für eine externe Datei erstellen. Stilimport-Anweisungen werden vor allen anderen Stildeskriptoren gestellt, wodurch der importierte Stil problemlos überschreiben kann.
Jede Technologie hat jedoch ihre Nachteile. Es gibt beide CSS-Technologie. Genauer gesagt, sind die meisten Nachteile bei der Verwendung von CSS zu sehen. Dies ist auf die unvollständige Kompatibilität von CSS mit verschiedenen Browsern zurückzuführen aktuelle Versionen und ergeben sich aufgrund dieses fehlenden Mangels in der CSS-Genauigkeit der Seitenanzeige in verschiedene Browser. Importstil zum Beispiel wird weit von allen Browsern unterstützt. Aus diesem Grund haben viele Webmaster immer noch Angst, alle CSS-Funktionen mit nur wenigen anzuwenden.
Sperren einer Font FEG Bei der Anzeige von Text im Browser ermöglicht das Vertrauen in den genauen Speicherort aller Seitenelemente auf dem Computer des Benutzers, aber beraubt die Fähigkeit des Benutzers, sich selbst eine bequeme Schriftgröße zu wählen. Dieser Ansatz ist im Wesentlichen Respektlosigkeit für den Besucherbesucher.
Oft über CSS sagen, dass mit ihrer Hilfe leicht das Design der gesamten Site umgehend umzuwandeln ist. Dazu reicht es aus, die Stile in der Stildatei zu überschreiben. Aber der eigentliche Designer, führte dazu, das Design der Website zu ändern, wird niemals nur auf der Änderung der Anzeige der Schriftarten aufhören.
Kaskadierstilblätter - vielversprechende Technologie. Viele Webmaster sind jedoch immer noch auf die Verwendung von CSS beschränkt, um die Farbe des Hyperlinks zu ändern, wenn der Mauszeiger daran angeschlossen ist.
Gut schlecht
CSS-Stil-Tabelle, wenn Sie die Definition selbst nehmen, ist dies eine Beschreibungsprache sicht eines Aussentstehenden Dokument. Das heißt, HTML ist für die Seitenstruktur und für das gesamte Design von CSS-Stilen verantwortlich. Ich sammelte hier Informationen, mit denen Sie das Stilblatt frei nutzen können. Ich werde nicht schreiben, wie es notwendig ist, es zu wissen, weil es verständlich ist - ohne dass Sie den Standort nicht in eine weniger normale Sicht bringen können. Wenn jemand gerade erst beginnt, CSS-Stile zu studieren, reichen diese Materialien aus, um mit dem Lernen von CSS zu beginnen.
1. Grundlegende Dinge
Ich fange mit dem sehr einfachsten an. Als ich anfing, diese Seite durchzuführen, schrieb ich kleine Lektionen, um CSS-Stile zu studieren. Die Lektionen eignen sich gut für diejenigen, die gerade erst beginnen, und für diejenigen, die bereits etwas wissen, um ihr Wissen zu erfrischen. Alles ist in Bildern und in echten Beispielen dekoriert.
Kleiner Rückzug: Als ich selbst anfing, das Thema des Standortgebäudes zu lernen, lernte ich fast alle HTML-Tags und sie waren nicht sehr inspiriert. Aber nachdem ich angefangen habe, die CSS-Stile-Tabelle zu studieren, und versuchen Sie, jede der Eigenschaften anzuwenden - ich mochte es so sehr (ich würde nicht erstellen, ob ich es nicht gefallen habe). Ich sah, dass Sie nur erstaunliche Dinge nur mit CSS machen können. Dies ist keine Programmiersprache, die seit Monaten laut ist. Stiltisch kann in einem (maximal in zwei) Wochen beherrscht werden.
Natürlich lernen Sie nicht absolut alle Eigenschaften und ihre Bedeutungen, aber es ist nicht notwendig! Sie müssen nur die Grundlagen kennen, damit Sie in Ihren Projekten anwenden und verwenden. Eine wichtige Nuance ist, dass Sie sofort die Eigenschaft anwenden müssen, die Sie gerade auf dem richtigen Beispiel gelernt haben. Lass es deine eigene Website sein oder einfache HTML. Website - kein Unterschied. Es ist wichtig, dass Sie versuchen, das Ergebnis zu schreiben und zu sehen.
Ich habe viele Beispiele, auf denen CSS verwendet wird. Enthält nur mehr als 100 Lektionen! Wenn Sie zumindest die Stiftung kennen, können Sie alle Beispiele von Lektionen sicher ändern und anwenden.
Meine Lektionen über CSS Cascading-Stile
2. Krippe CSS und CSS3
Nun, du hast die Grundlagen studiert und nach ein paar Tagen alles mit dem "Erfolg" vergessen und wahrscheinlich glauben Sie, dass dies nicht Ihre ist und alles schwierig ist. Ich möchte dich sofort abholen - ich selbst kenne nicht alle cSS-Eigenschaften.. Aber was ist es unter anderem, sie im Internet zu sehen?
True, während Sie zu Yandex oder Google gehen, erhalten Sie die Anfrage, die Sie benötigen. Und wenn es auch nicht in der Suche erteilt wird, was benötigt wird. So können Sie viel Zeit verbringen, aber es ist nicht zu finden, was wirklich sucht.
Glücklicherweise beliefen sich gute Menschen sehr nützliche Krippen, die mich mehr als einmal umgekehrt haben. Man reicht aus, um sich mit wohin auch immer umzugehen, und dann ist die Suche nach den gewünschten Eigenschaften nicht schwierig.
CSS und CSS3 Krippe
Dies sind einfach unverzichtbare Materialien, wenn sie das Site-Design verlegen und entwickeln. Die Zeit, abgelenkt zu werden und auf der Internetbeschreibung zu suchen, sinkt viele Male.
True, wie Sie es verstehen, desto mehr, je mehr Sie Websites verfeinern, oder Sie machen das Design, desto weniger müssen Sie in diese Eingabeaufforderung eingehen, da alle erforderlichen Eigenschaften in Erinnerung bleiben. Trotzdem haben diese Reihe von Cheat-Blättern an der Hand nicht überflüssig.
Es ist wie eine Schule: Auch wenn Sie die Krippe nicht benutzen, aber es ist immer noch irgendwie in der Dusche ruhiger.
In unserem Kurs betrachten wir CSS-Lektionen - d. H. Technologieunterricht, eine der wichtigsten Webseiten beim Verlegen.
In dieser Lektion platzieren wir unsere Webseite, damit er mehrfarbiger wird (Abbildung 1).
Bild 1
Bevor wir mit den Designseiten fortfahren, werden wir studieren, wie die Farbe im Web eingestellt ist.
1. Farben definieren. CSS-Lektionen
Bei der Definition von Farben für das HTML-Dokument können Sie entweder die Namen der Farben oder ihre Hexadezimalcodes verwenden. Das System der Hexadezimalcodierung basiert auf drei Komponenten - rot (rot), grün (grün) und blau (blau), von hier und seinem Namen RGB gemäß den ersten Buchstaben dieser Farben. Jede der Komponenten entspricht einer Hexadezimalzahl von 00 bis ff (0 und 255 V dezimalsystem Nummer). Diese drei Werte werden dann zu einem Wert kombiniert, an dem das Zeichen vorangestellt ist, beispielsweise # 800080, was einer violetten Farbe entspricht.
Die Tabelle zeigt die Namen einiger Farben und ihre Codes. Mehr volle Tabellen Farben und ihre Codes können im Ordner angezeigt werden farben.Das Hotel liegt im Ordner CD.
|
Farbe |
Farbe |
||
|
Schwarz Schwarz) |
Silber (Silber) |
||
|
Kastanienbraun (dunkel burgund) |
Rot rot) |
||
|
Grün Grün) |
Kalk (Kalk) |
||
|
Olive (oliv) |
Gelb (gelb) |
||
|
Navy (Marineblau) |
Blau Blau) |
||
|
Lila (lila) |
Fuchia (Fuchsia) |
||
|
Teal (dunkelgrün) |
|||
|
Grau (grau) |
Weiss weiss) |
Safe Colors Table für Site Design-Entwicklung
Die SAFE-Farbpalette bietet die genaueste Anpassung des Displays auf verschiedenen Monitoren.
Eine sichere Palette besteht aus 216 Farben. Sichere Farben sind immer unverändert, wenn Sie sich von einem Browser an einen anderen oder von einer Plattform zu einem anderen bewegen, von einem Monitor zu einem anderen mit ihrer unterschiedlichen Farbverfügbarkeit und -berechtigungen.
Wenn einer der drei hexadezimalwerte. Es unterscheidet sich von 00, 33, 66, 99, SS oder FF, die Farbe ist nicht sicher.
Sicherheitstabelle kann im Ordner angezeigt werden. CD/ farben..
2. Definition von CSS.
Unsere Webseite wurde noch nicht gestaltet, was auf zwei Arten ausgeführt werden kann:
- zuerst - bedeutet stiltische CSS. (progressive und korrekte Methode)
- zweitens - bedeutet attribute für Tagov. Html. .
Beginnen wir sofort von einer progressiveren Methode.
CSS - Kaskadierstilblätter (Hierarchische Spezifikationen oder Kaskadierstilblätter) Ersetzen Sie die Markup-Sprache nicht, sind unabhängige Technologie, die auf das HTML-Tag gilt.
Zweck: Ermöglicht das automatische Ändern des HTML-Stils des Artikels auf allen Seiten der Site. Zum Beispiel verwenden wir den H1-Header auf zehn Webseiten, der grün sein sollte. Bei der Verwendung von Stiltabellen haben wir nur einmal, um die grüne Farbe anzugeben, und es gelten sofort auf zehn Seiten.
Reverse Situation: Die Verwendung von HTML-Attributen für zehn Webseiten an alle H1-Headergrün, d. H. es zehnmal vorgeschrieben. Dann entschieden sie sich, die Farbe des Headers auf dem Rot zu ändern, dann müssen wir die grüne Farbe rot reparieren.
Wenn Sie das gleiche Stilblatt verwenden, haben wir dies nur einmal dazu, dies zu tun, indem wir den grünen Farbheader auf dem Roten im Stil des Stils ändern, und es ändert sich automatisch auf allen zehn Webseiten.
Die Stiltabelle umfasst einen Satz von CSS-Elementen, dessen Struktur sich von der Struktur des HTML-Elements unterscheidet.
SyntaxCSS.- Element
selektor (Eigenschaft 1: Wert; Eigenschaft 2: Wert; ... Eigentum n: Wert)
Zunächst wird der Name des Selektors geschrieben, z. B. H1, so dass alle Stileigenschaften auf das Tag gelten
, Dann die gelockten Klammern, in denen die Stileigenschaft geschrieben wird, und sein Wert ist nach dem Dickdarm angegeben. Stileigenschaften mit Werten werden zwischen sich mit einem Semikolon getrennt, am Ende kann dieses Symbol weggelassen werden.
Stileigenschaften mit Werten können viel zahlreich sein, ihre Sequenz hat nicht.
CSS ist nicht empfindlich gegenüber dem Register, Übertragen von Strings, Lücken und Tabs, Daher hängt die Form der Aufnahme von dem Wunsch des Entwicklers ab.
beispielsweise:
h1 (Font-Familie: Arial; Schriftgröße: 14pt)
oder dasselbe kann so aufgezeichnet werden:
Schriftfamilie: Arial;
Schriftgröße: 14pt
In diesem Beispiel:
- h1-Selektor, in diesem Fall HTML-Element,
- schriftfamilie und Schriftgröße - Stileigenschaften,
- Arial - der Wert des Eigentums von Font-Family,
- 14PT - Der Wert der Eigenschaften von Schriftgröße.
Möglichkeiten, Stylesheets in HTML-Dokument zu aktivieren
- Externes Stilblatt (verwandter Stil).
- Implementiertes Stilblatt (globaler Stil).
- Interne Stile.
3. Externe CSS-Stil Tabelle (verwandter Stil)
Bestimmt den Stil der gesamten Site.
Es ist eine Textdatei mit der Erweiterung CSS.
In diesem Beispiel wird das Stilblatt in der Textdatei geschrieben. Style.css.
Praktische Aufgabe 1.
1. Öffnen Sie das Net-Dokument in Notepad ++ und speichern Sie ihn im Ordner. public_html. unter dem Namen stil.. cSS.. Beachten Sie das auf dem Feld Dateityp wurde gefunden Alle Arten. (Figur 2).
Figur 2.
2. Da CSS eine andere Technologie ist, werden die HTML-Tags in der Datei.css überhaupt nicht geschrieben. Wir werden unser Titel "Verzeichnis von Architekturprojekten" in der Datei ausstellen main.. hTML. Mit Ausrichtung in der Mitte, Blau, Verdana-Schriftart, 20 Pt-Schrift Dazu erstellen wir in der CSS-Datei den folgenden Eintrag (Abbildung 3):
Figur 3.
In unseren CSS-Lektionen wundern wir uns, was hier gemäß der CSS-Elementsyntax geschrieben wird, die wir in dieser Lektion darüber gesprochen haben.
- h1 - Wahlschalter, d. H. HTML-Element, an dem sich der Stil gilt;
- text-ALIGN: CENTER; - Die Stileigenschaft des Text-Richtigen (Richten Sie Text) mit dem mittleren Wert (zentriert);
- farbe: # 0000ff; - Stilfarbeigenschaft (Textfarbe) mit der blauen Farbe # 0000ff-Wert (der Wert wird aus der Farb-Tabelle entnommen);
- schriftfamilie: Verdana; - Eigenschaftseigenschaft font-familiäres Schrift-Headset mit Verdana-Wert;
- stileigenschaften mit Werten sind mit einem Komma zwischen sich unterteilt.
- und so weiter, alles gemäß der Syntax.
Damit unsere Webseite "sah" das Stilblatt und die angewandten Eigenschaften auf HTML-Elemente, müssen Sie ein Bündel zwischen der Datei installieren main.. hTML. und stil.. cSS.. Öffnen Sie dazu die main.html-Datei und zwischen den Tags < kopf.> und kopf.> Legen Sie das Design ein , wie Figur 4.
Figur 4.
3. Überprüfen Sie das Ergebnis im Browser. Er muss mit 5 übereinstimmen.
Abbildung 5.
In dieser Klasse werden wir ansehen, wo wir ansehen, wo Sie die Namen der Stileigenschaften und deren Werte ergreifen können? Dazu gibt es auch spezielle Referenzbücher und die Spezifikationen (Ordner CSS-Handbuch). Verwenden Sie zu Beginn ein kleines Referenzbuch als Referenz Sprav_css.doc..
4. Geben Sie den Stilheader H2 "Projekte für Ihr zukünftiges Zuhause" mit Ausrichtung an der rechten Rande, Burgund-Farbe, Verdana-Schriftart, 16 Pt-Schriftart an. Um dies in der Datei zu tun stil.. cSS. h.2 (Abbildung 6).
Abbildung 6.
5. Überprüfen Sie das Ergebnis im Browser, es muss mit Fig. 7 übereinstimmen.
Abbildung 7.
6. Wir platzieren Absätze mit der Ausrichtung in der Breite, dunkelblau, in der Arialschrift, 12 Pt Schriftart. Um dies in der Datei zu tun stil.. cSS. Wir machen die folgende Aufnahme für den Selektor p. (Abbildung 8).
Abbildung 8.
7. Wir erstellen auch einen hellblauen Farbhintergrund der gesamten Webseite. Dazu für den Selektor körper. Einen Eintrag hinzufügen (Abbildung 9)
Abbildung 9.
8. Überprüfen Sie das Ergebnis im Browser. Er muss mit Abbildung 10 übereinstimmen.
Abbildung 10.
Ich denke aus dieser Lektion CSS, das Prinzip der Verwendung eines externen Stilblatts ist verständlich. Um leicht und färben sie netz.-Rextricters, es ist notwendig, die Stileigenschaften und ihre Bedeutungen zu studieren, um im Verzeichnis zu studieren und in der Praxis zu versuchen. Je mehr Sie sich an solche Eigenschaften und Werte erinnern, ohne sich an das Verzeichnis wenden, desto höher ist Ihre Professionalität.
Forschungsaufgaben
- Referenzbuch verwenden. Sprav_css.doc, Abonnieren Sie den Titel-Stil < h.3> In der main.html-Datei. Eigenschaften von Styles zur Auswahl.
- Ändern Sie für eine Liste von "Hausprojekten" mit Styles die arabischen Zahlen nach Roman. Die verbleibenden Parameter sind optional.
- Für eine Liste von "Häuser" als Marker wenden Sie ein Bild an spisok_1.gif. Aus dem Ordner html_css_2.. Die verbleibenden Parameter sind optional.
- Wenden Sie als Hintergrund der Webseite das Bild über die Stile an. fon9.jpg. Aus dem Ordner html_css_2..
- Machen Sie mithilfe von Styles die Schriftart von Absätzen fett.
Das ungefähre Ergebnis in Abbildung 11.
Abbildung 11.
4. Klassen in stilistischen Spezifikationen
In unserer CSS-Lektion berücksichtigen wir den Unterricht in Stilspezifikationen, wenn es notwendig ist, mehrere Arten des Stils eines Elements zu bestimmen. Bei der Bestimmung der Klasse in das gewünschte Tag wird ein beliebiger eindeutiger Name der mit dem Punkt getrennten Klasse hinzugefügt.
Zum Beispiel haben wir mehrere Schlagzeilen im Text h.1 Und wir brauchen sie, um verschiedene Farben zu sein. Dann teilen Sie die Stile wie folgt auf
h1.Golb (Farbe: blau)
h1.KraNn (Farbe: rot)
h1.Zelen (Farbe: Grün)
Nach dem Punkt gibt es einen Klassennamen, der eindeutig sein sollte und nicht nur von Zahlen bestehen kann.
Nun, wenn Sie das Tag verwenden < h.1> Im Dokument müssen Sie ein Attribut installieren klasseUm anzugeben, welcher Stil Sie anwenden müssen:
< h.1 Klasse=" golub."> Dies ist ein blauer Titel h.1>
< h.1 Klasse=" krasn."> Dies ist eine rote Schlagzeile h.1>
< h.1 Klasse=" zelen."> Dies ist eine grüne Schlagzeile h.1>
Praktische Aufgabe 2.
1. Öffnen Sie die Datei shablon. hTML.. Speichern Sie es unter dem neuen Namen plohady.. hTML.im Ordner public_html..
2. Schreiben Sie zwischen Tags
3. Im Inhalt
Text aus der Datei kopieren Square Houses.txt.aus dem Ordner hTML._ cCS._2 .4. Wir schreiben in derselben Datei Stile. stil.. cSS.was wir in der vorherigen Lektion erstellt haben. Daher in der Datei plohady.. hTML.stellen Sie das Bündel mit diesem Stilblatt ein, indem Sie zwischen den Tags einfügen
und (Abbildung 12)
Abbildung 12.
5. Formatieren Sie das Titel-Tag
Und weisen Sie jedem Header Ihre Klasse zu (Abbildung 13).
Abbildung 13.
Deine Datei plohady.. hTML.jetzt sollte es so aussehen (Abbildung 14).
Abbildung 14.
6. Im Stilblatt stil.. cSS. Erstellen Sie den folgenden Eintrag (Abbildung 15)
Abbildung 15.
7. Überprüfen Sie die Webseite im Browser. Das Ergebnis ist in Abbildung 16.
Abbildung 16.
8. Sie haben wahrscheinlich das in unserem bemerkt neue Aufnahme Stile der Header sind wiederholte Designs schriftfamilie: Verdana; Text-ALIGN: links; Schriftgröße: 14pt.Solche Strukturen können einmal durch Gruppieren der Selektoren aufgenommen werden, denen sie angewendet werden. Dazu müssen Sie Selektoren durch das Kommas auflisten, und dann in lockigen Klammern, um die allgemeinen Eigenschaften zu registrieren. Dann sieht unsere Stile-Tabelle für Header so aus (Abbildung 17):
Abbildung 17.
Praktische Aufgabe 3.
Unter jeder Überschrift in der Datei plohady.. hTML.es gibt Text. Absätze mit unterschiedlichen Klassen formatieren. Verwenden Sie verschiedene Farben, Ausrichtung und Headset-Schriftarten. Klassennamen müssen eindeutig sein. Es ist unerwünscht, dieselben Namen für verschiedene Selektoren zu verwenden. Ein von möglichkeiten Abbildung 18:
Abbildung 18.
5. ID-Stil für ein bestimmtes Element
CSS-Lektionen umfassen das Lernen sogenannte ID-Styles.
Jedes Element kann eine Kennung zugewiesen werden. ich würdeund dann in Übereinstimmung mit diesem Artikel einwandfreiem Stil ich würde.
Beispielsweise:
Der Eintrag in der Stiltabellendatei ist der folgende
# prüfung { farbe:#00 ffff}
Jetzt können Sie diesen Stil mit jedem Element im HTML-Dokument in Einklang bringen:
...
...
In diesem Beispiel ist das Testwort der Stil Name. Der Name kann von lateinischen Buchstaben willkürlich sein, aber es sollte einzigartig sein, d. H. Kein Element im Stilblatt sollte kein solch einen Namen mehr haben.
Praktische Aufgabe 4.
Machen Sie ein Werkstück für das zukünftige Menü unserer Website.
1. Öffnen Sie die Datei shablon. hTML. und speichern Sie es unter dem neuen Namen speisekarte.. hTML.im Ordner public_html.
2. Im Inhalt der Dateiseite speisekarte.. hTML.text aus Datei erstellen speisekarte.. tXT.aus dem Ordner hTML._ cSS._2 .
3. Formatieren Sie die Datei in die HTML-Tags wie folgt:
- für die Titel der "Projektkategorie", "Katalog von architektonischen Projekten" und "House Square" verwenden Sie ein Tag
;
- für eine Liste von "Projektkategorien" verwenden Sie eine nummerierte Liste
- ;
- verwenden Sie für Listen "Katalog von Architekturprojekten" und "House Square" eine markierte Liste
4. Legen Sie oben auf der Webseite das Logo ein (Datei) logo_myhouse.gif.). Das Ergebnis sollte mit 19 übereinstimmen.
Abbildung 19.
5. Erstellen Sie für dieses Menü ein separates Stylesheet unter dem Namen stil._ speisekarte.. cSS.. Stellen Sie das Bündel zwischen der Datei ein speisekarte.. hTML.und Stiltisch stil._ speisekarte.. cSS.Durch das Einfügen der Aufnahme. Zwischen Tags und im Ordner speisekarte.. hTML..
6. Erstellen Sie ein sauberes Dokument und speichern Sie ihn unter dem Namen stil._ speisekarte..css.in deinem Ordner.
7. Für die Projektkategorie Gruppe, mit der ein Header und eine nummerierte Liste und für die Architekturprojektkataloggruppe enthält, mit der die Überschrift selbst und die bezeichnete Liste enthält, verwenden Sie den Namen-ID-Stil blau. Jene. Der Code sieht so aus (Abbildung 20):
Abbildung 20.
8. In der Datei stil._ speisekarte.. cSS.stil für diese Elemente machen wir dunkelblau, Tahoma-Schrift (Abbildung 21):
Abbildung 21.
9. Für die Gruppe "House Square", mit der ein Titel und eine markierte Liste enthält, verwenden wir den Namen des ID-Stils braun.. Jene. Der Code sieht so aus (Abbildung 22):
Abbildung 22.
10. In der Datei stil._ speisekarte.. cSS.stil für diese Elemente machen Brown, Times Font (Abbildung 23):
Abbildung 23.
11. Und fügen Sie noch Farbe des Hintergrunds mit der Datei menu.html hinzu (Abbildung 24)
Abbildung 24.
12. Infolgedessen erhalten wir die folgende Webseite (Abbildung 25)
Abbildung 25.
Infolge der Ausführung dieser CSS-Lektion müssen Sie die folgenden Dateien haben:
- stil..
cSS.
- stil._ speisekarte.. cSS.
- plohady..
hTML.
- speisekarte..
hTML.
Der russische Teil des Internets wächst Tag für Tag. Im vergangenen Jahr-zwei ist das Gesamtvolumen der russischsprachigen Seiten mehr als zweimal erhöht. Heute wird in Russland niemand den Satz überraschen<домашняя страничка> oder englisches Wort
. Wenn früher die Erstellung der Webseiten viele Favoriten war und auf den Flächen des Runet nur anerkannt wurde<киты> Web-Design, jetzt, jetzt mein zehnjähriger Sohn in seiner Freizeit wird die eigene Seite von Masstherite Sather entfernt, um es auf einigen zu platzieren kostenloser Server (wie narod.ru oder boom.ru), was im vergangenen Jahr auch viel in Runet geschieden hat. Web-Design ist heute nicht engagiert, wahrscheinlich nicht nur nicht mit dem Netzwerk oder faul verbunden. Viele Menschen fragen sich, dass sich die Räume des Internets, früher oder später darüber nachdenken, ihre eigenen Seiten zu erstellen. Für sie ist dieser Artikel geschrieben. Rede hier geht herum<правильном> HTML für Anfänger, nämlich über einige zusätzliche Funktionen, die offiziell vom Internetkonsortium (http://www.w3.org/) genehmigt wurden. Insbesondere in einigen Möglichkeiten, die vom dynamischen HTML (DHTML) bereitgestellt werden. Genauer gesagt - darüber, wie man eine Seite erstellt, die besser aussehen wird als Seiten, die von CSS (Cascade-Stilblättern oder Kaskadierungsstiltabellen) erstellt werden.<классического> HTML, während weniger Platz aufnehmen und dementsprechend schneller laden.
Nur wenige Leute, die sich zuerst für die Schaffung ihrer eigenen Web-Vertretung entscheiden, bewaffnete Notizblock "Ohm oder ein anderer Texteditor wie Homesit. Normalerweise denn der Newcomer denkt wie folgt:<Все свои привычные документы я создаю посредством программ WYSIWYG (<что вижу, то и получаю>. zweimal.
Das erste Mal - im Sinne der rationalen Nutzung des Web-Space. Tatsache ist, dass alle visuellen Redakteure der Webseiten, auf die die MS-FrontPage bezieht, in die erstellten Seiten eingefügt werden.<отсебятину> - viele extra unnötige Tags. Die Ausnahme ist vielleicht macromedia Dreamweaver (für den er sich bei Anfängern und von Fachleuten verdient hat). Aber auch in dieser Hinsicht ist es nicht ideal, den Quelltext mit Zitaten (in den meisten Fällen völlig unnötig) zu verstopfen, sowie die Symbole des untrennbaren Raums an den unangemessensten Orten einsetzen. Gerechtigkeit Es ist erwähnenswert, dass alle visuellen Redakteure dem Benutzer die Möglichkeit bieten, mit dem Quellcode zu arbeiten. erstellte SeiteAber so viel geliebt von vielen Frontpage wird alles wieder auf ihre Weise wiederholen, Sie sollten nur wieder in den visuellen Modus wechseln.
Daraus folgt damit, dass der zweite Mal, dass sich der Neuankömmling genau in Bezug auf Flexibilität und Vollständigkeit der Verwaltung der Komponenten der Seite spielt - visuelle Redakteure bieten keine solche Kreativitätsfreiheit, die Ihnen direkt mit dem Quellcode zur Verfügung stellen wird der erstellten Seite.
Nun, jetzt gehen wir direkt in den Fall - um schöne und kleine Webseiten mit kaskadierenden Stilblättern zu erstellen (in der Zukunft werde ich ihren abgekürzten Namen - CSS verwenden). Es wird davon ausgegangen, dass Sie, liebe Leser, nachdem Sie den Eintrag gelesen hatten, mit mir gelesen, abgebaute visuelle Redakteure, ein Buch auf HTML abgebaut, mindestens eine kleine Anzahl von Haupttags und Attributen untersuchten und den Wunsch brennen, zu wissen, was CSS ist und was ist es isst.
Logische und physische Formatierung
Klassische HTML-Version 3.2, das am häufigsten im Moment im Moment, bietet uns physische Formatierungswerkzeuge, für die es spezielle Tags gibt (zum Beispiel Tags) , , ) und viele verschiedene Attribute (Größe, Farbe, Größe, Breite usw.). Die Merkmale der Web-Formatierung werden uns immer wieder gezwungen, um diese Tags und Attribute für jeden neuen Absatz vorzuschreiben, der natürlich die Größe des Seitencodes stark erhöht. Zusätzlich bleibt er mit dieser Formatierungsmethode bei einer Analyse der Struktur des Dokuments unverständlich, warum dieses Wort von fetthaltigem Design hervorgehoben wird - nur für Schönheit oder um besondere Aufmerksamkeit auf den Endbenutzer zu achten? Wenn sich noch ein lebender Mensch in einem Staat befindet, versteht das logische Gebäude der Seiten auf dem klassischen HTML, und dann können die Suchmaschinen oder beispielsweise die Sprachbrowser nicht gesagt werden. Sie nehmen es ja heraus. Setzen Sie die saubere Logik in die Seitenstruktur. Genau wegen solcher<неподвластности> Logische Analyse diese Methode Die Formatierung wurde als physische Formatierung bezeichnet. Im Gegensatz zu ihm Bei der Erstellung einer neuen Spezifikation von HTML 4.0 wurde die logische Formatierung unter dem Kopf der Ecke erstellt, dh solche Formatierung, in der die Struktur und das Design des Dokuments eindeutig getrennt werden würden. Diese Formatierungsmethode wird empfohlen, ein Internet-Konsortium anzuwenden, da er erweiterte Informationen aus den Netzwerkinformationen im Netzwerk bereitstellt, können Sie Informationen über Suchmaschinen genauer strukturieren und analysieren und auch die Größe der Seiten und die Zeit erheblich reduzieren ihre volle Belastung. Die Trennung der Struktur und das Design des Dokuments wird nur mit CSS implementiert.
Es ist erwähnenswert, dass die Inkarnationen der logischen Formatierung in klassischen HTML-Tags vorhanden waren
,
,
Natürlich trug zur Trennung von Dokumenten für einige logische Blöcke bei. Viele der Autoren der Seiten wurden jedoch verwendet, und bis heute nutzen sie diese Tags weiterhin nicht nach Bestimmungsort: Im Zusammenhang mit der Mangel an Geldbetrag für die Registrierung der Titel-Tags, zum Beispiel, um solche Elemente aufzuheben Die Seite, die nicht eigentlich Schlagzeilen waren. CSS bietet eine ausreichende Menge an Design-Tools, mit denen Sie den Regeln der logischen Formatierung genauer folgen und die Seitenstruktur wirklich von ihrer visuellen Darstellung trennen können.
Zweck des Stils separate Seitenelemente
Mit CSS können Sie Ihren eigenen Stil zuweisen. visuelle Präsentation Jedes HTML-Tag, einschließlich Tag
. Wenn der Stil für das Tag angegeben ist Es wird von allen Elementen (Absätze, Schlagzeilen usw.) vererbt, die in diesem Container in diesem Container angeordnet sind, ohne eigene Stile für diese Elemente. Wir müssen also nicht mehr Tags verschreiben und die Attribute von Farbe, Größe usw. für jeden Absatz auf der Seite - genug, um einen Stil für Tag zu fragen Und alle Absätze auf der Seite werden gemäß diesem Stil angezeigt. Wie es geht?Angenommen, wir möchten, dass alle Absätze von der Zeit der neuen römischen Schriftart von 12 dunkelgrüner Punkte angezeigt werden. Dazu sollten Sie das Style-Tag-Attribut registrieren
Indem Sie ihm den entsprechenden Wert zuweisen. Die Syntax ist:Somit werden alle Absätze auf der Seite wie wir gewünscht angezeigt, und der Code ist nicht mit Tags verstopft Und ihre Attribute. Stellen Sie sich vor, welche Art von Dateigröße spart, wenn Ihre Seite aus besteht große Zahl Text!
HINWEIS - Wenn wir die Schriftart-Inschrift festlegen, nach den Namen der Times New Roman, wies wir auf die Serif-Inschrift hin, dh jede Schriftart mit Serifen. Wenn die Zeiten neuer römischer Schrift nicht auf dem End-Benutzer-Computer installiert ist, ersetzt der Browser stattdessen einen der verfügbaren Schriftarten mit Serifen, und die Seite-Mapping ist so nahe wie möglich an das, was Sie gedacht haben. Darüber hinaus wird das Beispiel verstanden und für IE (4.0 und höher) und für NN (4.0 und höher). Es ist zwar erforderlich, um sofort eine Reservierung vorzunehmen, die Netscape Navigator nicht alle Möglichkeiten von CSS und DHTML unterstützt, und dies erhöht sicherlich die Anzahl seiner Fans nicht.
Das Beispiel des Stils wird direkt an das Dokument-Tag verwendet - der sogenannte Inline-Stil. Diese CSS-Bindungsmethode mit einer HTML-Datei wird in isolierten Fällen empfohlen - wenn dieser Stil geplant ist, nur auf ein Element nur auf einer Site-Seite angewendet zu werden. Wenn der Stil auf mehrere Elemente auf einer Seite oder mehreren Seiten sofort angewendet werden soll, werden andere CSS- und HTML-Bindungsmethoden empfohlen, über die wir sprechen werden.
Zweck der Stile auf mehrere Elemente einer Seite - Erstellen eines eingebetteten Stilblatts
Während wir von der Aufgabe von nur einem Stil für ein Element gesprochen haben. Und jetzt lernen wir, wie man Stile-Tabellen erstellt.
Möchten Sie, dass alle Absätze auf der Seite aussehen, wie im vorherigen Beispiel, alle ersten Level-Header in der Schriftart der grünen Farbe einer mut in Größe von 16 Punkten und allen Header der zweiten Ebene - Helvetica-Schriftgröße angezeigt wurden 14 der semi-grünen Körper von Gelb-Grün. Dazu müssen wir uns erstellen<голове> Seiten (überall zwischen den Tags
und) Die eingeführte Tabelle von Styles, in der wir sofort mehrere Regeln präsentieren. Erstellen Sie dazu einen Styling-Tabellen-Container-Tag, beginnend mit dem Discovery-Tag.. In diesem Container-Tag können wir eine beliebige Anzahl von CSS-Regeln bestehen, die aus einem Selektor bestehen (die Namen des HTML-Tags, auf das die Regel angewendet wird) und seine Definition (direkt als Satz von Formatierungsmitteln), die in lockigen Zahnspangen eingeschlossen sind . Die Syntax für das obige Beispiel ist:
... ...Diese Methode der Bindung von CSS und HTML wird als Implementierung bezeichnet. Es wird empfohlen, sich in Fällen zu bewerben, in denen Sie sich entscheiden, die Formatierungsregeln nur für eine Seite der Site festzulegen, und alle anderen Seiten entsprechend Ihrem Plan sollten anders aussehen.
Zweck der Stile gleichzeitig für mehrere Seiten der Site
Zusätzlich zum Einbetten und Implementieren verwendet die CSS- und HTML-Kommunikation Methoden zum Importieren und Binden von Stiltabellen. Das ist definitiv. beste Wege Ein einzelnes Design-Design, mehrere (oder sogar alle) Seiten eines Standorts geben. Gleichzeitig wird das gesamte Stilblatt in einer Datei gespeichert (die Dateierweiterung muss Standard - .css).
Hier ist ein Beispiel für den Inhalt einer solchen Datei (z. B. my.css):
Körper (Schriftfamilie: "Zeiten neuer Roman", Serif; Schriftgröße: 12pt; Farbe: darkgrelig;) H1 (Schriftgesicht: Arial, Sans-Serif; Schriftgröße: 16pt; Farbe: grün; fontgewicht : Fett;) H2 (Font-Gesicht: Arial, Sans-Serif; Schriftgröße: 14pt; Farbe: Greenywallow; font-weight: fett; fett; font-style: italic;)
HINWEIS: Tags. In der Datei Tabellendatei, die Erweiterung. CSS gibt den Browser explizit an, dass die Datei eine Stiltabelle ist. Eine solche Datei kann sofort mit mehreren Seiten (oder sofort auf mehreren Seiten importiert werden) verbunden werden. In der HTML-Datei zur Bindung benötigen Sie überall zwischen den Tags an
und Nächste Zeichenfolge:
... ...Diese Zeile zeigt an, dass der Dateilink eine Stiltabelle ist (REL \u003d "Stylesheet"), das Format dieser Datei ist .css (type \u003d "text / css") und befindet sich in demselben Verzeichnis wie die HTML-Datei oder hat Eine andere URL (href \u003d "my.css"). Natürlich können wir diese Zeile in jedem (entweder in allen) von unseren HTML-Dateien registrieren. Somit wird der einheitliche Stil sofort für mehrere Seiten geschrieben.
Bitte beachten Sie, dass Inline-Styles (Stile, die für einzelne Seitenelemente mithilfe des Stilattributs definiert sind) und eingebettete Stile (in eingebaute Stile<голове> Seiten im Container-Tag ...
Neben der Adresse des importierten Stilblatts können Sie sich im Tag-Container registrieren ...
...Frage des Journalisten
Interviewbare Antwort
...In dem angegebenen Beispiel werden die Fragen des Journalisten durch die Arials grauer, mutiger, Körperinspektion, 10 Punkte mit einem Gedankenstrich von 15 Pixeln vom linken Rand der Seite angezeigt. Die Antworten werden durch die Zeit der neuen römischen Schriftgröße von 12 schwarzen Punkten angezeigt. Es ist wichtig, nicht zu vergessen, den Klassenparameter in verschiedenen Absätzen direkt in zu schreiben hTML Quelltext. Sie können eine beliebige Anzahl von Klassen für alle Seitenelemente erstellen.
Selektor-ID.
Nehmen Sie einen anderen Fall ein. Angenommen, Sie möchten, dass Sie einzigartige Elemente auf der Seite erstellen möchten, in der Sie in der Zukunft in der Zukunft möchten, um JavaScript-Programme zu kontaktieren. Vielleicht werden diese Elemente auf anderen Seiten wiederholt, und Sie möchten sie ein einzelnes Design von CSS stellen. In diesem Fall gibt es in Cascading-Stilen die Möglichkeit, eindeutige Kennelemente (ID) zuzuweisen. Die am häufigsten verwendeten Kennungen werden für Elemente von Formularen verwendet, die in der HTML 4.0-Spezifikation einen vollständigen oder begrenzten CSS-Träger (je nach Element) aufweisen. Hier ist ein Beispiel für die Zuordnung der Bezeichner und der CSS-Regeln für solche Elemente:
... ... ... ...In ähnlicher Weise können eindeutige Kennungen einer beliebigen Anzahl von Elementen der Seite zugewiesen werden. Dies kann nützlich sein, um auf den Element des JavaScript-Programms zuzugreifen, und ändert sich in dem Stil seiner Anzeige als Antwort auf die Benutzeraktionen, mit denen Sie verschiedene dynamische Effekte erstellen können.
Kontextwählers.
Angenommen, wir haben ein Stilblatt erstellt, nach dem alle Schlagzeilen der ersten Ebene auf der Seite in rot auf einem grauen Hintergrund angezeigt werden, alle Absätze - grün auf einem gelben Hintergrund und alle mit dem Tag zugewiesen 1 Wörter innerhalb der Absätze - schwarz auf silbernem Hintergrund. Stiltischcode, wie Sie bereits erraten haben, obwohl dies so aussieht:
H1 (Farbe: rot; Hintergrundfarbe: grau;) p (Farbe: grün; Hintergrundfarbe: gelb;) em (Farbe: schwarz; Hintergrundfarbe: Silber;)
Angenommen, wir möchten auch einige Wörter im Titel durch das gleiche Tag hervorheben Wir sind jedoch nicht zufrieden mit dem Erscheinungsbild des schwarzen Textes auf einem silbernen Hintergrund im Titel. Wir möchten die Wörter im Titel der Burgunderfarbe auf einem grauen Hintergrund hervorheben. Dazu gibt es kontextuelle Selektoren. Aufzeichnung der Regel, dass wir zur Stiltabelle hinzufügen, so sieht dies aus:
H1 EM (Farbe: # CC0000; Hintergrundfarbe: grau;)
Und hier ist ein Beispiel eines Seitencodes mit diesem kontextuellen Selektor:
... ... ...Dies ist der erste Level-Header mit gewidmet Zusamenfassend
Und dies ist der übliche Absatz mit engagierte Wörter
...Heute ist alles. Nächstes Mal sprechen wir über die Regeln zum Formatieren von Blockelementen der Seite, über die Positionierung von Elementen und anderen interessanten und nützlichen Funktionen, die mit CSS implementiert sind.
Anwendungstischstil zum Dokument
Einbetten von Stilblättern in Dokument
Task-Stil für ein separates Dokumentfragment
Stiltische importieren.
Angabe mehrerer Eigenschaften gleichzeitig
Selektoren gruppieren.
Kommentar auf Stil Tabelle
Eigenschaften von Styles.
Eigenschaften Hintergrund
Rahmen von Elementen
Eigenschaften von Listen
Eigenschaften von Text.
Gruppierungseigenschaften, um die Stildefinition zu vereinfachen
Vererbungseigenschaften.
Anwendung kontextueller Selektoren
Warum sind Stiltabellen als Kaskade genannt?Die Tabellen des Stils werden von den W3C-Empfehlungen bereitgestellt und sind ein Standard-Tool zum Formatieren von Webseiten mithilfe von Ansätzen, die für Desktop-Publishing-Systeme charakteristisch sind. Das Microsoft Internet Explorer 3.0-Programm ist zum ersten Browser, der Stylesheets unterstützt. Der Netscape Navigator-Browser unterstützt Stilblätter, beginnend mit Version 4.0v2 (Beta 2) ist seit Februar 1997 verfügbar.
Details zu den W3C-Empfehlungen erhalten Sie bei: H tTP: //www.w3.org/pub/www/tr/wd-cssl.html. . Der W3C-Standard verwendet den Begriff "Cascade Level 1" -Stile 1 "(" Kaskadierungsstilblätter Level 1, CSSI ").
Um damit zu beginnen, ist es notwendig, zu erklären, was durch den Namen "Stiltabellen" gemeint ist. Mit den meisten modernen Texteditoren können der Benutzer den Stil ermitteln, der zum Formatieren des Dokuments verwendet wird. Insbesondere können Sie einen Absatzstil mit einem einzigen interstitiellen Intervall, Kurierart und einem linken ein Zoll-linken Zoll auswählen. Dieser Formatierungsstil kann weiter auf eine beliebige Anzahl von Absätzen dieser und anderer Dokumente angewendet werden. Nt-Stil-Tabellen
M. Ich handle auf dieselbe Weise. Nachfolgend finden Sie eine kurze Liste der Grundfunktionen:Ändern Sie Entfernungen zwischen Zeilen, Wörtern und separaten Zeichen.
Stellen Sie die linke, rechte, obere und untere Felder des Elements (HTML-Container-Textblock) ein.
Installieren eines Elemente-Ruhestandes.
Ändern der Größen-, Stil- und anderen Elementattributen.
Den Rahmen um das Element einstellen.
Einschalten des Hintergrundbildes und der Hintergrundfarbe in den Artikel.
Der hohe Vorteil von HTML-Stilen ist die Möglichkeit, den Formatierungsvorgang aus dem Dokumentinhalt zu trennen. Zunächst wird bestimmt, wie der Text an einem bestimmten Ort der Seite aussehen soll, und dann den Text selbst eingeben. Wenn Sie später entscheiden, ersetzen Sie beispielsweise die Farbe der Schriftart der Header auf dem Blau, denn dies ist genug, um den Stil dieser Schlagzeilen zu ändern. Änderungen des Textes nennen keine Notwendigkeit .
Es gibt vier Methoden zum Anwenden eines Stilblatts in das Dokument:
-
rand - verwendet, um den Rahmen auf der linken Seite, rechts, oben und unten vom Element zu bestimmen. Sie können die Breite, den Farb- und Rahmenstil einstellen.
-
margin - werden verwendet, um die Felder auf der linken Seite, rechts oben und unten vom Element zu ermitteln. Sie können auch die Breite der Felder einstellen.
-
padding - verwendet, um den freien Speicherplatz zwischen dem Rahmen und dem Inhalt des Artikels anzugeben.
-
Behälter ul.
Eigenschaften geben Ihnen die vollständige Kontrolle darüber, wie der Viewer Text anzeigt. Mit ihrer Hilfe können Sie die Farbe, Größe, Schriftart, ein Intervallintervall usw. steuern. Die folgenden Angaben werden ausführlich alle Eigenschaften des Textes ausführlich beschrieben.
Viele der oben beschriebenen Eigenschaften können miteinander gruppiert werden. Also anstelle der Regel
H1 (Font-Weight: Fettdruck; Schriftstil: Normal; Schriftgröße: 12pt; Font-Face: Serif)
sie können ein mehr kurzeres Wortlaut schreiben:
H1 (Schriftart: Mutige Normal 12PT Serif)
Mit HTML-Stil-Blättern können Sie Immobiliengrenze, Hintergrund, Schrift, Liste, Rand und Polsterung gruppieren. Betrachten Sie jede der Gruppen separat.
Grenzeigenschaftsgruppe.
Gruppeneigenschaften können auf fünf verschiedene Arten kategorisiert werden. Sie können Eigenschaften für eine separate Seite des Rahmens verwenden
b. bestell-Top, Border-Right, Border-Bottom und Border links, oder definieren Sie den gesamten Rahmen sofort mit der Grenze.Mit jedem dieser Eigenschaften können Sie beispielsweise die Breite, den Stil und die Farbe des Rahmens angeben, zum Beispiel:
b Bestell-Top: dünnes gepunktetes Schwarzes
Gruppe von Eigenschaften Hintergrund
In der Gruppe Hintergrundeigenschaften können Sie die Werte für Farbe, Bild, Wiederholen, Anhang und Position angeben, zum Beispiel:
hintergrund: Weiße URL (http://www.myserver.com/image/bg.gif) Repeat-X fixiert oben links
Schrifteigenschaften-Gruppe
Die Schriftgruppe kann zum Beispiel Gewicht, Stil, Größe und Familie geben:
schriftart: Mutige normale 12pt-mal, Serif
Liste der Gruppeneigenschaften
Eigenschaften werden mithilfe der Eigenschaft des Listenstils gruppiert. Es ist möglich, das Bild für die Markierung, Art und Position des Markers anzugeben, zum Beispiel:
list-Style: Square-URL (http://www.myserver.com/images/marker.gif) innen
Margin Properties Group.
Die Margin-Gruppe kann für jedes der oberen, rechten, unteren und linken Felder der Breite bestimmt werden, zum Beispiel:
marge: .5in 1in .5in 1in
Wenn nur ein Wert angegeben ist, macht das Anzeigeprogramm die Breite anderer Felder gleich. Wenn Sie keine oder zwei Werte angeben, sind die Felder mit nicht angegebenen Werten die gleiche Breite wie entgegengesetzte Felder. Wenn Sie beispielsweise den letzten Wert (links) senken, ist die Breite der linken Felder gleich der Breite der rechten Felder, d. H. 1 Zoll.
Polsterimmobiliengruppe
In der Polstergruppe können Sie beispielsweise die Werte für Top, Right, Bottom and Links angeben:
polsterung: 0,25in .25in .25in .25in .25in
Wenn nur ein Wert angegeben ist, weist der Betrachter der Anwesenheit denselben Wert ab. Wenn Sie keine oder zwei Werte angeben, sind freie Räume mit nicht näher bezeichneten Werten die gleiche Breite, wie sie gegenüberliegen. Wenn Sie beispielsweise den letzten Wert (links) senken, ist der freie Speicherplatz zwischen der linken Seite des Rahmens und dem Inhalt des Elements derselbe wie der Speicherplatz auf der rechten Seite.
In HTML-untergeordneten Tags erben Sie einige Eigenschaften von übergeordneten Tags. Zum Beispiel alle Container-Tags
(< P > und- ) wird einige Tag-Eigenschaften haben . Auch Tag
- Inherits Tag-Eigenschaften
- . Betrachten Sie den folgenden Code:
- : eine für den Fall, wenn er dem Tag untergeordnet ist
- Nur wenn dieses Tag ein untergeordnetes Tag ist
-
:
- Sie können einen anderen Stil definieren, gültig nur im Falle der Unterordnung zum Tag
-
:
Ul li (List-Stil-Typ: Quadrat)
Es sei darauf hingewiesen, dass die Liste der Selektoren nicht durch Kommas aufgeteilt ist. Andernfalls werden alle Tags der Liste denselben Stil zugewiesen.
In den Empfehlungen der W3C-Stylesblätter werden "Cascade-Stiltabellen" bezeichnet " Denn für die Auflage der Web-Seite können Sie nicht eins anwenden, jedoch auf einmal mehrere Tabellen. Gleichzeitig bestimmt das Betrachtungsprogramm selbst die Reihenfolge der Verwendung der Tische und ermöglicht Konflikte zwischen ihnen auf dem Kaskadenprinzip. Beispielsweise kann ein Stylesheet für eine Seite nicht nur von seinem Autor, sondern auch vom Leser festgelegt werden, und dann entscheiden die Kaskadierregeln, welche Stile leistungsstark sein werden.
Funktioniert es? Jeder Regelbrowser zeichnet den Gewichtskoeffizienten zu. Bei der Interpretation jeder Tag-Interpretation scannt das Programm alle Regeln für dieses Tag ab und sortiert sie durch die Größe des Gewichtskoeffizienten. Gewinnt die am meisten "gewichtige" Regel.
Es gibt folgende allgemeine Prinzipien zur Lösung von Konflikten zwischen Stilblättern:
Stiltypen Stiltypen in Dokument (absteigend): Aktuelles Stil Setup (Inline), Einbetten (Einbetten), Verknüpfen (Verknüpfen).
Sie können auch das Gewichtsverhältnis der Regel mit dem Dienstwort wesentlich ändern. Im folgenden Beispiel der Wert der roten Eigenschaften
Ol li (list-style-type: dezimal)
Für das gleiche Tag
- Sie können einen anderen Stil definieren, gültig nur im Falle der Unterordnung zum Tag
Hallo. Dies ist ein Absatz von Text. Dies wird betont.
Tabelle der Stile dieses Dokuments setzt Farbe im Tag
< P > Blau, jedoch Farbe für das Tag Es ist eindeutig nicht definiert (standardmäßig ist es schwarze Farbe). Es gibt nichts, worüber man sich Sorgen machen kann, da sich dieses Tag im Elternbehälter befindetUnd erbt somit blau.
Manchmal ist es erforderlich, zwei (oder mehr) Stile für ein Tag zu ermitteln. Sie müssen beispielsweise zwei Arten für das Tag angeben
-
und der zweite, wenn er dem Tag untergeordnet ist
- . Es ist möglich, es mit kontextuellen Selektoren herzustellen.
Der kontextuelle Selektor definiert die genaue Reihenfolge von Tags, für die ein oder ein anderer Stil angewendet wird. Mit anderen Worten, Sie können angeben, dass beispielsweise ein anderer Stil angewendet werden soll, zum Beispiel im Tag
H1 (Farbe: rot! Wichtige Schriftartengewicht: Bold-Font-Familie: Sans-Serif! Wichtig!
Die Klasse ist die Definition mehrerer Stile eines Elements, von denen jedes an der richtigen Stelle der Seite verwendet werden kann. Beispielsweise können Sie drei Variationen des H1-Titelstils definieren. Die Bestimmung der Variationen ähnelt der Anzeige des Stils, nur der Name des Tags wird ein beliebiger Name der Klasse hinzugefügt, der durch einen Punkt getrennt ist:
H1 blau (Farbe: blau) H1 .RED (Farbe: rot) H1 .Black (Farbe: Schwarz)
Jetzt, einschließlich eines TEG-Dokuments
Sie können einen bestimmten Stil mit dem Attribut des Klassen angeben:
Rote Überschrift
- Inherits Tag-Eigenschaften
Verknüpfen - Sie können HTML anschließen - ein Dokument mit der in einer separaten Datei gespeicherten Stiltabelle.
Einbetten (Einbettung) - Sie können das Stylesheet in HTML-Dokument mit dem Container integrieren
Etikett
Wie bereits erwähnt wurde, werden die Stilblätter in eingelagert textdateien, bequem zu bearbeiten. Es ist einfach, sie manuell zu erstellen, es gibt jedoch spezielle Redakteure von Stiltabellen, z. B. das beliebte Programm von Microsoft FrontPage.
Stiltabellen ermöglichen es Ihnen, den Stil für ein oder mehrere Tags zu bestimmen. Sie können beispielsweise eine Stiltabelle erstellen, um Stile für Tags zu definieren
,
,
UND . Jede Definition wird aufgerufen regel (Regel e). Die Regel enthält wähler (HTML TEG), gefolgt von erklärung (Stildefinition). Der Selektor ist eine Verbindung zwischen Definition und Tag. Nachfolgend finden Sie ein Beispiel für die Regel, die den Stil für jedes der Titel-Tags angibt.
:
H1 (Farbe: blau)
Die Erklärung liegt in lockigen Klammern. Jede Deklaration hat zwei Teile: Der Name des Eigenschaftendamens und der darauf zugewiesene Wert, der durch den Dickdarm getrennt ist. HTML enthält Dutzende von Eigenschaften (Schriftgröße, Schriftart, Farbe, Marge, Right usw.), die unten diskutiert wird. Jede Eigenschaft kann mehrere Werte annehmen, von denen einer standardmäßig auf ihn zurückzuführen ist.
Im vorherigen Beispiel wurde nur eine Farbeigenschaft angegeben. Nichts verhindert jedoch, dass eine Anzahl von Eigenschaften in einem Tag identifiziert wird, und trennen sie von einem Semikolon auseinander:
Hi (Farbe: Blau; Schriftgröße: 12pt; Textlinie: Zentrum)
In diesem Beispiel zeigt das Ansichtsprogramm jedes erste Level-Header mit einer blauen Schriftgröße von 12 Punkten an und leitet sie in der Mitte des Fensters. Für alle anderen Eigenschaften werden die Standardwerte verwendet (z. B. die Eigenschaft des Schriftart-Stils wird normal zugewiesen).
Wenn Sie denselben Stil für mehrere Tags definieren müssen, können Sie sie in einer separaten Liste auflisten:
P (Schriftgröße: 12pt)
Ul (Schriftgröße: 12pt)
Li (Schriftgröße: 12pt)Mit HTML können Sie dasselbe in einer kompakteren Form anmelden - in einer Zeile:
P, ul, li (Schriftgröße: 12pt)
Das Komma hier ist ein obligatorisches Element. Wenn es weggelassen ist, ändert sich die Bedeutung der Regel (siehe Abschnitt "" in diesem Kapitel).
Wenn das Stilblatt kompliziert ist, müssen sie höchstwahrscheinlich zusätzliche Informationen zur Ernennung einer bestimmten Regel aufnehmen. Kommentare befinden sich zwischen den Zeichen / * und * / und werden beispielsweise durch Anzeigen von Programmen ignoriert:
Körper (Margin-Links: lin) / * 1. Zoll Gedankenstrich * /
H1 (Margin-Links: -Lin) / * Verschieben Sie nach links von 1 Zoll * /
H2 (Marge-Links: -Lin) / * Verschieben von links für 1 Zoll * /HTML ermöglicht Ihnen, ein breites Spektrum an Stiltabelleneigenschaften zu definieren. Eigenschaftsnamen bestehen aus einem und öfter - von zwei oder drei von einem Bindestrich getrennten Wörtern. In schwierigen Namen repräsentiert das erste Wort normalerweise die Kategorie und ist gleichzeitig eine reduzierte Option (Abkürzung) des Eigenschaftsnamens (siehe Abschnitt "").
Die Tabelle zeigt einen Überblick über die Eigenschaften der HTML-Stile. In der Kategoriespalte wird gezeigt, ob diese oder andere Eigenschaft in eine Gruppe mit anderen Eigenschaften kombiniert werden. In der dritten Spalte werden Informationen in erbteren Informationen oder nicht die Eigenschaft von untergeordneten Tags (zur Erbschaftseigenschaften, siehe Abschnitt "") angegeben.
Erbe
Mit HTML-Arten können Sie den Hintergrund des Seitenelements mit Farbe oder Bild dekorieren. Es sei darauf hingewiesen, dass hier und dann die Verwendung von Eigenschaften nicht für die gesamte Seite, sondern für einen separaten Element diskutiert werden. Wenn zum Beispiel der Hintergrund für das Tag definiert ist
- , dann ist dies der Hintergrund nur in Tags
- Alles Seite:
U. L (Hintergrund-Image: URL (http://www.myserver.com/images/watermark.gif))
W3C-Empfehlungen ermöglichen es, Frames, Felder und freie Speicherplatz für Seitenelemente zu definieren. Sie können beispielsweise die Überschrift in den Rahmen eingeben oder die Felder im Absatz-Tag ändern<Р> So organisieren Sie einen Einrückgang für alle Textabzüge. Zu diesen Zwecken können folgende Eigenschaftengruppen verwendet werden:
Diese Eigenschaften werden angewendet, um Wege zu Ausgabelisten anzugeben. Mit ihrer Hilfe können Sie die Markierungsposition (List-Style-Position-Eigenschaft), Stil oder Bild des Markers (List-Stil-Typ und List-Stil-Image-Eigenschaften) ändern.
Die Eigenschaften der Listen werden vererbt, d. H. Wenn die Eigenschaft im Tag definiert ist
- Es wird wirklich für alle Tags
- stil..
cSS.
