CSS3 Eigenschaften - Dummies

Teil von CSS3 Für Dummies Cheat Sheet

Einige CSS3-Eigenschaften sind kaum benutzt; viele andere werden häufig genug verwendet, damit Entwickler sie kennen. Eigenschaften und ihre zugehörigen Werte bilden die Grundlage für die Formatierung, die Sie mit CSS3 durchführen. Hier finden Sie eine Liste der Eigenschaften, die Sie bei der Arbeit mit CSS3 am häufigsten verwenden:

• background: Definiert den Inhalt für den Hintergrund eines Elements. Der Wert für diese Eigenschaft ist häufig eine Funktion wie linear-gradient ().

• background-attachment : Gibt an, wie ein Bild mit dem Rest eines Elements interagiert. Sie verwenden die folgenden Schlüsselwörter, um diese Eigenschaft zu konfigurieren: scroll, fixed und local.

• background-color : Gibt die Hintergrundfarbe einer Entität an, z. B. die zugrunde liegende Seitenfarbe. Sie können eine dieser Techniken zum Definieren der Hintergrundfarbe verwenden: Hexadezimalwert, Farbname, rgb () - Funktion, rgba () - Funktion, hsl () - Funktion oder hsla () - Funktion.

• background-image : Liefert den Speicherort einer Ressource, die als Grafik für den Hintergrund eines Elements verwendet werden soll. Sie verwenden die URL () -Funktion, um den Speicherort anzugeben.

• background-repeat : Erlaubt die Wiederholung des Hintergrundbildes oder die Wiederholung des Hintergrundbildes (mit dem Schlüsselwort no-repeat) nach Bedarf. Sie können das Bild auch nur in der horizontalen (Wiederholung-x) oder vertikalen (Wiederholung-y) Richtung wiederholen.

• Hintergrundgröße : Bestimmt die Größe des Hintergrundbildes als absoluten Wert oder als Prozentsatz.

• border : Definiert die Art des zu erstellenden Rahmens durch Angabe eines der folgenden Schlüsselwörter: none, hidden, gepunktet, gestrichelt, solid, double, groove, ridge, inset, outset oder inherit. Es ist auch möglich, den Stil jeder Seite eines Rahmens mithilfe der Eigenschaften border-bottom-style, border-left-style, border-right-style und border-top-style individuell zu ändern.

• border-color : Gibt die Farbe der Umrandung einer Entity an. Sie können eine dieser Techniken zum Definieren der Hintergrundfarbe verwenden: Hexadezimalwert, Farbname, rgb () - Funktion, rgba () - Funktion, hsl () - Funktion oder hsla () - Funktion.

• border-image : Definiert ein Bild, das anstelle eines Linientyps für den Rahmeninhalt verwendet werden soll. Normalerweise verwenden Sie die Funktion url (), um den Wert dieser Eigenschaft anzugeben.

• border-radius : Legt fest, ob die Ecken eines Rahmens gerundet werden und der Rundungsbetrag. Beim Erstellen einer abgerundeten Ecke legen Sie die Rundung fest. Verwenden Sie das Schlüsselwort none, um eine abgerundete Ecke zu entfernen.

• border-width : Bestimmen Sie die Dicke der Umrandung eines Elements. Sie können die Rahmenbreite mit einem Schlüsselwort (mittel, dick oder dünn) oder einer tatsächlichen Messung definieren.

• column-count : Gibt die Anzahl der zu erstellenden Spalten an. Die Breite der Spalten schwankt automatisch, wenn der Benutzer die Größe des Browserfensters ändert (oder der Browser zeigt eine horizontale Bildlaufleiste an, um das Durchblättern von Spalten zu ermöglichen, wenn eine bestimmte Breite ebenfalls festgelegt ist).

• column-fill : Legt fest, wie der Browser die Spalten füllt (entweder eine Spalte nach der anderen füllen oder alle Spalten gleichzeitig mit einer gleichmäßigen Menge an Inhalt füllen).

• column-gap : Erstellt eine Lücke zwischen den Spalten, damit leichter festgestellt werden kann, wo eine Spalte endet und eine andere beginnt.

• column-rule : Erstellt eine Regel zwischen den Spalten, damit der Benutzer ein physisches Trennzeichen sehen kann. Diese Eigenschaft besteht aus Farbe, Stil und Breite.

• column-rule-color : Bestimmt die Farbe der zwischen den Spalten verwendeten Regel.

• column-rule-style : Bestimmt den Stil der zwischen den Spalten verwendeten Regel.

• column-rule-width : Bestimmt die Breite der zwischen Spalten verwendeten Regel.

• column-span : Gibt die Anzahl der Spalten an, die ein Objekt überspannen kann.

• Spaltenbreite : Gibt eine Spaltenbreite an.

• columns : Stellt eine Abkürzungsmethode zum Definieren der Spaltenanzahl- und Spaltenbreite-Eigenschaften bereit.

• color : Gibt die Vordergrundfarbe einer Entität an, z. B. Text. Sie können eine dieser Techniken zur Definition der Farbe verwenden: hexadezimaler Wert, Farbname, rgb () - Funktion, rgba () - Funktion, hsl () - Funktion oder hsla () - Funktion.

• content : Gibt den Text oder eine andere Ressource aus, die als Teil der Elementpräsentation angegeben wurde. Diese Eigenschaft wird häufig verwendet, um Aufgaben wie das Hinzufügen von Pfeilen zu visuellen Elementen auszuführen. Sie geben den Wert mit der Funktion url (), einer Unicode-Zeichenzahl mit vorangestelltem Schrägstrich (z. B. 27A8) oder einem Schlüsselwort an.

• display : Gibt an, wie bestimmte Elementtypen auf der Seite dargestellt werden sollen. Sie können jeden der folgenden Schlüsselwörter verwenden, um den Anzeigetyp zu definieren: none, box (oder flex-box), block, flex, inline, inline-block, inline-flex, inline-table, list-item, table, table- Beschriftung, Tabellenzelle, Tabellenspalte, Tabellenspaltengruppe, Tabellenfußgruppe, Tabellenkopfgruppe, Tabellenzeile oder Tabellenzeilengruppe.

• float : Ermöglicht einem Bild, in der angegebenen Richtung zu schweben. Sie definieren diese Eigenschaft mit den folgenden Schlüsselwörtern: left, right oder none.

• font-family : Definiert den Namen der Schriftart. Drei sind drei Font-Klassifizierungen, die normalerweise als Teil von CSS verwendet werden (und die meisten CSS-Seiten verwenden alle drei, es sei denn, Sie geben auch die Eigenschaft src an): specific, Web safe und generic.

• Schriftgröße : Bestimmt die Schriftgröße im Vergleich zu anderen Schriftarten auf der Seite oder bietet eine bestimmte Schriftgröße. Sie können eine dieser Techniken zum Definieren der Schriftgröße verwenden: spezifische Größe, Schlüsselwort (wie groß oder größer) und Prozentsatz.

• font-style : Legt den Schriftstil fest, den der Browser erstellt. Der Browser muss den Stil unterstützen und die Schriftart muss den Stil liefern, damit diese Eigenschaft wirksam wird. Die Schlüsselwörter im Schriftschnitt sind: normal, kursiv, schräg (normalerweise stärker kursiv) und erben.

• font-variant : Gibt an, ob die Schrift in einer Variantenform dargestellt werden soll. Nicht alle Browser und Schriftarten unterstützen diese Funktion. Die Schlüsselwörter für diese Eigenschaft sind normal, Kapitälchen und erben.

• font-weight : Bestimmt die relative Dunkelheit der Schrift und die Breite ihrer Striche. Es gibt zwei Methoden zum Definieren der Schriftgewichtung: numerisch und Schlüsselwort (z. B. fett).

• height : Gibt die vertikale Größe eines Elements an.

• left : Gibt die äußerste linke Position eines Elements auf einer Seite an.

• list-style : Definiert das Aussehen eines Listenelements. Sie können die Art der zu verwendenden Markierungen, die Position der Markierungen und die tatsächliche Erstellung der Markierungen mithilfe von Bildern anstelle von Standardzeichen festlegen.

• margin : Gibt den Abstand zwischen dem Rand eines Elements und dem Rand eines anderen Elements an.

• margin-bottom : Gibt die unterste Position eines Elementrandes auf einer Seite an.

• margin-left : Gibt den äußersten linken Rand eines Elementrandes auf einer Seite an.

• margin-top : Gibt die oberste Position eines Elementrandes auf einer Seite an.

• padding : Gibt den Abstand zwischen dem Rand eines Elements und dem Inhalt innerhalb des Elements an.

• position : Gibt die Platzierung von Elementen auf einer Seite an. Sie legen die Platzierung mit den folgenden Schlüsselwörtern fest: static (die Elemente fließen), absolute (die Elemente erscheinen an einem bestimmten Ort, auch wenn eine solche Platzierung ein anderes Element überschreiben würde), fixed (die Elemente werden relativ zum Browserfenster platziert) oder relativ (die Elemente werden relativ zu übergeordneten Elementen platziert).

• text-align : Gibt die Positionierung des Textes in einer Zeile an. Sie geben die Ausrichtung mit den Schlüsselwörtern justify, right, center und left an.

• Textdekoration : Definiert das Hinzufügen eines Merkmals wie Unterstreichung, Überstreichung oder Zeilenumbruch zur Schriftart. Diese Eigenschaft funktioniert überall, so dass Sie sich keine Sorgen machen müssen, ob jemand, der Ihre Seite auf einem Fernseher ansieht oder ein Smartphone benutzt, Ihre Nachricht erhalten wird.

• Textüberlauf : Definiert die Aktion, die ausgeführt wird, wenn der Text über das Feld hinausläuft, in dem der Text enthalten ist. Zulässige Werte sind: Clip, Ellipsen oder ein von Ihnen eingegebener Stringwert.

• text-shadow : Zeigt einen Schatten der Zielzeichen mit derselben Breite wie das Zielzeichen an. Die Positionierung, Stärke und Farbe des Schattens werden durch die folgenden Eigenschaften bestimmt: h-Schatten (bestimmt die horizontale Positionierung des Schattens), v-Schatten (bestimmt die vertikale Positionierung des Schattens), Unschärfe (bestimmt die Klarheit des Schattens) Schattentext) und Farbe (definiert die Farbe der Kontur).

• visibility : Gibt die Sichtbarkeitsebene für ein Element an. Sie verwenden die folgenden Schlüsselwörter, um diese Eigenschaft zu konfigurieren: sichtbar, ausgeblendet oder ausgeblendet.

• width : Gibt die horizontale Größe eines Elements an.

• word-break : Legt fest, wie Text in ein umschließendes Feld eingeschlossen wird, wenn mit einer nicht-CJK-Sprache (Chinesisch, Japanisch, Koreanisch) gearbeitet wird. Zulässige Werte sind: normal, break-all und Silbentrennung.

• word-wrap : Legt fest, wie Text bei der Arbeit mit einer Nicht-CJK-Sprache gebrochen und dann in die nächste Zeile in einem umschließenden Feld umgebrochen wird. Akzeptable Werte sind: normal und break-word.