1.DIV definieren
Analysieren Sie ein typisches Definitions-Div-Beispiel:
#sample{ RAND: 10px 10px 10px 10px;
POLSTERUNG:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px fest;
BORDER-RECHTS: #CCC 2px fest;
BORDER-BOTTOM: #CCC 2px fest;
BORDER-LINKS: #CCC 2px fest;
HINTERGRUND: url(images/bg_poem.jpg) #FEFEFE no-repeat rechts unten;
FARBE: #666;
TEXT-ALIGN: Mitte;
Zeilenhöhe: 150 %; Breite: 60 %;
Die Anweisungen lauten wie folgt:
Der Name der Ebene lautet „sample“. Sie können diesen Stil aufrufen, indem Sie auf der Seite <div id="sample"> verwenden.
MARGIN bezieht sich auf den Leerraum, der außerhalb des Ebenenrandes verbleibt und für Seitenränder oder zum Erstellen einer Lücke zu anderen Ebenen verwendet wird. „10px 10px 10px 10px“ stellt jeweils die vier Ränder „oben, rechts, unten und links“ dar (im Uhrzeigersinn). Wenn sie alle gleich sind, können sie als „MARGIN: 10px;“ abgekürzt werden. Wenn der Rand Null ist, schreiben Sie „MARGIN: 0px;“. Hinweis: Wenn der Wert Null ist, muss mit Ausnahme des RGB-Farbwerts 0 %, dem ein Prozentzeichen folgen muss, in anderen Fällen die Einheit „px“ nicht gefolgt werden. MARGIN ist ein transparentes Element und kann keine Farbe definieren.
PADDING bezieht sich auf den Abstand zwischen dem Rand der Ebene und dem Inhalt der Ebene. Geben Sie wie beim Rand den Abstand vom oberen, rechten, unteren und linken Rand zum Inhalt an. Wenn sie alle gleich sind, können Sie es auf „PADDING:0px“ kürzen. Um die linke Seite individuell festzulegen, können Sie „PADDING-LEFT: 0px;“ schreiben. PADDING ist ein transparentes Element und kann keine Farbe definieren.
BORDER bezieht sich auf den Rand der Ebene. „BORDER-RIGHT: #CCC 2px solid;“ definiert die rechte Randfarbe der Ebene als „#CCC“, die Breite als „2px“ und den Stil als „solide“ gerade Linie .
Wenn Sie einen gepunkteten Linienstil wünschen, können Sie „gepunktet“ verwenden.
BACKGROUND definiert den Hintergrund der Ebene. Es ist in zwei Ebenen definiert. Definieren Sie zunächst den Bildhintergrund und definieren Sie mit „url(../images/bg_logo.gif)“ den Hintergrundbildpfad. „no-repeat“ bedeutet, dass das Hintergrundbild nicht wiederholt werden muss, wenn Sie es horizontal wiederholen müssen, verwenden Sie „repeat-x“, um es vertikal zu wiederholen, verwenden Sie „repeat-y“ und um es abzudecken Um den gesamten Hintergrund anzuzeigen, verwenden Sie „Wiederholen“. Das folgende „rechts unten;“ bedeutet, dass das Hintergrundbild in der unteren rechten Ecke beginnt. Wenn kein Hintergrundbild vorhanden ist, können Sie nur die Hintergrundfarbe HINTERGRUND definieren: #FEFEFE
Mit COLOR wird die Schriftfarbe definiert, die im vorherigen Abschnitt eingeführt wurde.
TEXT-ALIGN wird verwendet, um die Anordnung des Inhalts in der Ebene zu definieren: Die Mitte befindet sich in der Mitte, die linke Seite befindet sich links und die rechte Seite befindet sich rechts.
LINE-HEIGHT definiert die Zeilenhöhe. Dies bedeutet, dass die Höhe 150 % der Standardhöhe beträgt. Sie kann auch geschrieben werden als: LINE-HEIGHT:1.5 oder LINE-HEIGHT:1.5em, was die gleiche Bedeutung hat.
WIDTH ist die Breite der definierten Ebene. Dies kann ein fester Wert sein, z. B. 500 Pixel, oder ein Prozentsatz, z. B. hier „60 %“. Bitte beachten Sie, dass sich diese Breite nur auf die Breite Ihres Inhalts bezieht und keinen Rand, Rand und Abstand enthält. In einigen Browsern ist dies jedoch nicht so definiert, sodass Sie mehr ausprobieren müssen.
2.CSS2-Boxmodell
Seit der Einführung von CSS1 im Jahr 1996 empfiehlt die W3C-Organisation, alle Objekte auf der Webseite in einer Box zu platzieren. Zu diesen Objekten gehören Absätze, Listen und Bilder und Ebene <div>. Das Box-Modell definiert hauptsächlich vier Bereiche: Inhalt, Polsterung, Rahmen und Rand. Die Beispielebene, über die wir oben gesprochen haben, ist eine typische Box. Anfänger sind oft verwirrt über die Ebenen, Beziehungen und gegenseitigen Einflüsse zwischen Rand, Hintergrundfarbe, Hintergrundbild, Innenabstand, Inhalt und Rahmen. Hier ist ein schematisches 3D-Diagramm des Boxmodells. Ich hoffe, dass es für Sie leichter zu verstehen und zu merken ist.
Bei der Verwendung des XHTML+CSS-Layouts gibt es eine Technologie, die Sie vielleicht zunächst nicht gewohnt sind. Es sollte gesagt werden, dass es sich um eine Denkweise handelt, die sich vom herkömmlichen Tabellenlayout unterscheidet, das heißt: Alle Hilfsbilder werden mit implementiert Hintergründe. Etwas in der Art:
HINTERGRUND: url(images/bg_poem.jpg) #FEFEFE no-repeat rechts unten;
Obwohl es möglich ist, <img> direkt in den Inhalt einzufügen, wird dies nicht empfohlen. Die „Hilfsbilder“ beziehen sich hier auf Bilder, die nicht Teil des auf der Seite auszudrückenden Inhalts sind, sondern nur der Dekoration, der Pause und der Erinnerung dienen. Zum Beispiel: Bilder in Fotoalben, Bilder in Bildnachrichten und die Bilder des 3D-Boxmodells oben sind alle Teil des Inhalts. Sie können mit dem <img>-Element direkt in die Seite eingefügt werden, während andere wie Logos und Titel aussehen Bilder und Listenpräfixbilder müssen alle im Hintergrundmodus oder anderen CSS-Methoden angezeigt werden.
Dafür gibt es 2 Gründe:
Trennen Sie die Leistung vollständig von der Struktur (siehe einen anderen Artikel: „Die Trennung von Leistung und Struktur verstehen“) und verwenden Sie CSS, um das gesamte Erscheinungsbild und die Leistung zu steuern und so eine einfache Überarbeitung zu ermöglichen.
Machen Sie die Seite benutzerfreundlicher und benutzerfreundlicher. Benutzt eine blinde Person beispielsweise einen Screenreader, werden Bilder, die mit Hintergrundtechnologie umgesetzt wurden, nicht vorgelesen.