Blockeigenschaften von Cascading Style Sheets (CSS)

Blockeigenschaften steuern die Ausrichtung und den Abstand der Objekte auf einer Seite durch ihre Tags und Attribute. Die Blöcke umfassen Text, Inhalt innerhalb von Tags (sowohl mit als auch ohne Positionen angegeben), Tags mit Hilfe der Bildschirmsperre Stil und Bilder oder Absätze mit absoluten oder relativen Positionen.

Wort-Abstand: Um eine positive oder negative Zahl in den Abstand zwischen den einzelnen Worten, verwenden anpassen px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (In Prozent), wie Wortabstand: 2px;.

p {Wortabstand: 2px; }

Buchstaben-Abstand: Mit diesem Attribut können Sie gleichmäßig erhöhen oder den Abstand zwischen den Zeichen verringern, indem Sie einen positiven oder negativen Wert, der angibt in px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (In Prozent), wie Zeichenabstand: 1em-. Beachten Sie, dass die Änderungs Buchstaben-Abstand Attribut überschreibt alle vorher vorhandenen Textausrichtung.

p {letter-spacing: 1.5em-}

vertical-align: Sie können vertikal Text entlang der Textgrundlinie ausrichten, Unter (Index), Super (Oberer Index), oben, Text-top, Mitte, Boden, und text-bottom, oder durch einen Wert, positiv oder negativ, in px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (In Prozent), wie vertical-align: top-.

p {vertical-align: Ober}

text-alignDiese Option kann nur auf Text angewendet werden. Ausrichtungsoptionen umfassen links, Recht, Center, oder rechtfertigen.

p {text-align: Zentrum}

Texteinzug: Auch in diesem Stil Regel schafft eine Erstzeileneinzug nur mit Text, verwendet werden, die in einem positiven oder negativen Wert eingestellt werden kann, px (Pixel), pc (Pica), pt (Punkte), im (Zoll), Millimeter (Millimeter), cm (Zentimeter), em (Ems) Ex (Exs) oder % (In Prozent), wie text-indent: 12px;.

Um Nontext Objekte auf einer Seite einrücken, es wird nicht mehr empfohlen, den Tag zu verwenden, weil dieser Tag ist veraltet. Stattdessen fügen Attribute einen Einzug mit Rand und / oder Polsterung Stil.

p {text-indent: 10px; }

white-space: Weißer Raum innerhalb oder um Text in jedem Element auf Blockebene kann auf drei verschiedene Arten dargestellt werden: normal, Vor, und nowrap. Wählen normal alle Leerzeichen zu ignorieren, Vor den weißen Raum mit dem Text zu lassen, wie es kodiert wurde, oder nowrap einen beliebigen Text zu zwingen, nur zu wickeln, wenn der Code Zeilenumbruch hat (
) Tags.

p {white-space: Pre-}

anzeigen: Dieses Attribut steuert, wie das Objekt im Browser angezeigt wird gestylt. Wert Optionen sind Block, kompakt, in der Reihe, Listenpunkt, Marker, keiner, einlaufen, und Tabelle.

p {display: none; }

Wählen Sie aus einem der folgenden Einstellungen:

  • keiner: Mit dieser Option können von der Anzeige im Browser ein Stil-Element zu verstecken. Diese Option ist sehr nützlich, wenn mehrere Stylesheets zu schaffen, so dass einige Elemente aus der Ansicht auf einem Gerät versteckt werden kann, aber nicht eine andere, als mit einem sekundären CSS für den Druckmedientyp.

  • in der ReiheVerwenden Sie diese Option, um das Objekt anzuzeigen gestylt inline mit anderen Elementen, die oft im gleichen Block, wie mit der Herstellung Listenelemente in einer einzigen Zeile angezeigt werden.

  • Block: Dies verwandelt jedes gestylten Element in einen Block, nach dem weiteren Block-Styling Attribute angewendet werden kann. Block-Elemente, um die volle Breite des verfügbaren Raums, einschließlich Zeilenraum über und unter dem Element, ähnlich wie Absätze Raum oberhalb und unterhalb von ihnen.

  • Listenpunkt: Diese Option wandelt styled Text in eine unbulleted Liste ähnlich

    • und Tags.

  • einlaufen: Diese Funktion wird entweder nicht unterstützt, unvollständig unterstützt oder vollständig unterstützt, je nach Browser. Derzeit werden die Browser, die volle Unterstützung zählen Safari, Chrome, IE 8+ und Opera 5+. Ergänzen Sie die einlaufen nach einer Run-in-Box-Attribut, um eine Block-Box zwingen, eine Inline-Box des Block-Box zu werden.

    Eine interessante Anwendung ist ein Header der Basislinie die gleiche Grundlinie als die erste Zeile von einem nachfolgenden Satz des Absatzes Text zu machen, teilen.

  • inline-blockVerwenden Sie diese Option, um einen Block zu verhalten als Inline-Block mit einer bestimmten Breite zu machen.

  • kompakt: Diese Option ist ein noch ziemlich buggy und nur gerade planlos unterstützt. In der Tat kann es schon veraltet sein, aber das kann zu diesem Zeitpunkt nicht bestätigt werden. Wenn angegeben, erzwingt dieses Attribut andere Blöcke in dem Code, nachdem es entlang seiner Seite angezeigt werden soll.

  • Marker: Dieser wandelt Inhalt in einem Anzeigeblock in eine Markierungs-Box, die mit :Vor oder :nach Pseudoelement, innerhalb dessen Sie weiter den Inhalt Stil kann.

  • TabelleVerwenden Sie dieses Attribut Elemente in einer Tabelle anzuzeigen, ohne HTML-Tabellen zu verwenden. In der Theorie würde zeigen alle verschachtelten Elemente, als ob sie Tischreihe und table-cell Elemente. Zusätzliche Anzeige Tabellenwerte für diese Eigenschaft sind inline-table, table-row-Gruppe, table-header-Gruppe, table-footer-Gruppe, Tischreihe, table-column-Gruppe, Tisch-Säule, table-cell, und Tabellenüberschrift.

    Diese Immobilie ist bereits in allen wichtigen Browsern wie IE 9+ und IE 8, sondern nur im Internet Explorer 8 unterstützt, wenn ist nicht vorhanden.

  • erben: Wenn Sie diese Option angeben, erbt das gestylt Objekt von seinem übergeordneten Element der Anzeigewert.

Die Blöcke sind eine der Objektkategorien, die eine Menge von Fähigkeiten, die über die grundlegenden, die hier beschrieben haben. Nicht alle Eigenschaften sind konsequent von allen Browsern unterstützt, aber abhängig von der Zielgruppe, die einige von ihnen perfekt für einen bestimmten Web-Projekt geeignet sein. Um mehr über die Anzeigeeigenschaften zu erfahren, lesen Sie die Blockinformationsseiten auf der W3C-Website.

Ähnliche

Menü