CSS ist ein Cascading Stylesheet, eine Sprache zur Beschreibung des Erscheinungsbilds von Webseiten. Einer der Hauptvorteile von CSS ist die Möglichkeit, das Tabellenlayout durch das Blocklayout zu ersetzen.
Es ist notwendig
HTML-Code-Editor
Anleitung
Schritt 1
Erstellen Sie den ersten Block. Im HTML-Formular sieht es wie ein div-Tag mit der ID 'block01' aus. Hier zeigt der Bezeichner block01 an, dass in der CSS-Beschreibung alle Eigenschaften dieses Blocks für den Selektor # block01 angegeben sind.
Schritt 2
Beschreiben Sie den Block in CSS. Geben Sie in den CSS-Stilen den Namen des Bezeichners (# block01) an und beschreiben Sie in geschweiften Klammern seine Parameter - Breite, Positionierung, Offset, Hintergrundfarbe usw. Das könnte zum Beispiel so aussehen: # block01 {width: 150px; Höhe: 150px; Position: absolut; oben: 0px; links: 0px; Hintergrundfarbe: rosa}. Diese Beschreibung geht davon aus, dass die Box 150 Pixel lang und 150 Pixel breit ist, fest in der oberen linken Ecke des Dokuments positioniert wird und ihr Hintergrund rosa gefärbt ist.
Schritt 3
Geben Sie dem Block eine relative Positionierung. Wenn Sie in der CSS-Beschreibung keine absolute, sondern eine relative Positionierung verwenden, können Sie Blöcke nicht starr an einem Koordinatenraster platzieren, sondern relativ zu anderen bereits vorhandenen Blöcken. Ändern Sie dazu die Codeposition: absolut; oben: 0px; links: 0px nach Position: relativ; oben: 200px; links: 100px.
Schritt 4
Geben Sie dem Block eine Rundung. In CSS ist dafür die border-radius-Anweisung verantwortlich. Fügen Sie Ihrem Stylesheet den folgenden Code hinzu: border-radius: 8px. Der Block hat jetzt abgerundete Ecken. Wenn Sie nur einige Ecken abrunden möchten, beschreiben Sie den Radius für jede davon separat: border-radius: 8px 8px 0px 0px.
Schritt 5
Gib dem Block einen Strich. Um den Umriss eines Blocks mit einer dünnen Linie hervorzuheben, fügen Sie der CSS-Beschreibung den folgenden Code hinzu: border-top: 1px dashed black. Diese Anweisung bedeutet, dass der Rand des Blocks schwarz ist und ein Pixel dick ist. In diesem Fall wird die Konturlinie selbst als gestrichelte Linie angezeigt (gestrichelt - eine gepunktete Linie, gepunktet - Punkte, durchgezogen - eine durchgezogene Linie).
Schritt 6
Legen Sie die restlichen Blockeigenschaften fest. Geben Sie in der CSS-Beschreibung an, welche Schriftart für den Text innerhalb des Blocks verwendet werden soll, wie groß die Schriftgröße, Ausrichtung und Einrückung von den Kanten des Blocks sein soll. Diese Eigenschaften werden in den Definitionen font-family, font-size, text-align und padding beschrieben.
Schritt 7
Sie können die float-Eigenschaft verwenden, um den Fluss eines Blocks über einen anderen anzupassen. Wenn Sie es auf "links" setzen, fließen die restlichen Elemente links um den Block und "rechts" - rechts. Wenn Sie den Float-Wert auf „none“setzen, wird die Blockausrichtung nicht eingestellt. Die clear-Eigenschaft in CSS verhindert, dass der Block nach rechts, links oder zu beiden Seiten fließt, und überschreibt die float-Anweisung.
