Foundation - Basistypografie
Beschreibung
Typografie in Foundation definiert Überschriften, Absätze, Listen und andere Inline-Elemente, die attraktive und einfache Standardstile für Elemente erstellen.
In der folgenden Tabelle sind die verschiedenen Arten von Typografie aufgeführt, die in Foundation verwendet werden.
| Sr.Nr. | Typografie & Beschreibung |
|---|---|
| 1 | Absätze Absatz ist eine Gruppe von Sätzen, die mit unterschiedlicher Schriftgröße, hervorgehobenen Wörtern, Zeilenhöhe usw. definiert sind. |
| 2 | Header Es definiert HTML-Überschriften von h1 bis h6. |
| 3 | Links Es wird ein Hyperlink erstellt, der ein anderes Dokument öffnet, wenn Sie auf den Text oder ein Bild klicken. |
| 4 | Teiler Es wird verwendet, um mithilfe des <hr> -Tags eine Pause zwischen den Abschnitten einzulegen. |
| 5 | Geordnete und ungeordnete Listen Foundation unterstützt geordnete Listen und ungeordnete Listen, um die Dinge aufzulisten. |
| 6 | Definitionslisten Definitionslisten werden verwendet, um Name-Wert-Paare anzuzeigen. |
| 7 | Block Zitate Es stellt einen Textblock dar, der viel größer als normal definiert. |
| 8 | Abkürzungen und Code Die Abkürzung definiert einen verkürzten Begriff aus Wort oder Phrase und der Code repräsentiert einen Teil des Codes. |
| 9 | Tastenanschläge Es wird verwendet, um eine bestimmte Funktion auszuführen. |
| 10 | Barrierefreiheit Foundation bietet einige Richtlinien für den Zugriff auf den Inhalt der Seite. |
Sass Referenz
Sie können die Stile der Komponenten mithilfe der folgenden in der Tabelle aufgeführten SASS-Variablen ändern.
| Sr.Nr. | Name & Beschreibung | Art | Standardwert |
|---|---|---|---|
| 1 | $header-font-family Gibt die Schriftfamilie für Header-Elemente an. |
String oder Liste | $ body-font-family |
| 2 | $header-font-weight Gibt die Schriftgröße der Überschriften an. |
String | $ global-weight-normal |
| 3 | $header-font-style Bietet den Schriftstil von Headern. |
String | normal |
| 4 | $font-family-monospace Schriftstapel, der für Elemente verwendet wird, die einen monospaced Typ verwenden, z. B. Codebeispiele. |
String oder Liste | Consolas, "Liberation Mono", Kurier, Monospace |
| 5 | $header-sizes Definiert die Bildschirmgrößen von Überschriften und jeder Schlüssel ist ein Haltepunkt, und jeder Wert ist eine Karte der Überschriftengrößen. |
Karte | |
| 6 | $header-color Liefert die Farbe der Überschriften. |
Farbe | erben |
| 7 | $header-lineheight Definiert die Zeilenhöhe der Überschriften. |
Nummer | 1.4 |
| 8 | $header-margin-bottom Bietet den unteren Rand der Überschriften. |
Nummer | 0,5rem |
| 9 | $header-text-rendering Definiert die Methode zum Rendern von Text. |
String | optimizeLegibility |
| 10 | $small-font-size Gibt die Schriftgröße für <kleine> Elemente an. |
Nummer | 80% |
| 11 | $paragraph-margin-bottom Gibt den unteren Rand von Absätzen an. |
Nummer | 1rem |
| 12 | $paragraph-text-rendering Methoden zum Rendern von Texten. |
String | optimizeLegibility |
| 13 | $code-color Bietet Textfarbe für Codebeispiele. |
Farbe | $ schwarz |
| 14 | $code-font-family Stellt den Codebeispielen eine Schriftfamilie zur Verfügung. |
String oder Liste | $ font-family-monospace |
| 15 | $code-border Gibt den Rand um den Code an. |
Liste | 1px fest $ mittelgrau |
| 16 | $code-padding Gibt den Abstand um den Text an. |
Nummer oder Liste | rem-calc (2 5 1) |
| 17 | $anchor-color Standardfarbe für Links. |
Farbe | $ Primärfarbe |
| 18 | $anchor-color-hover Gibt die Standardfarbe für Links beim Hover an. |
Farbe | Skalenfarbe ($ Ankerfarbe, $ Helligkeit: -14%) |
| 19 | $anchor-text-decoration Standardtextdekoration für Links. |
String | keiner |
| 20 | $anchor-text-decoration-hover Standardtextdekoration für Links beim Hover. |
String | keiner |
| 21 | $hr-width Definiert die maximale Breite eines Teilers. |
Nummer | $ global-width |
| 22 | $hr-border Gibt den Standardrahmen für einen Teiler an. |
Liste | 1px fest $ mittelgrau |
| 23 | $hr-margin Standardspielraum für einen Teiler. |
Nummer oder Liste | rem-calc (20) auto |
| 24 | $list-lineheight Es definiert die Zeilenhöhe für Elemente in einer Liste. |
Nummer | $ Absatzzeile |
| 25 | $list-style-type Bietet Aufzählungszeichen für ungeordnete Listen. |
String | Rabatt |
| 26 | $list-style-position Es definiert die Positionierung von Aufzählungszeichen auf ungeordneten Listen. |
String | draußen |
| 27 | $list-side-margin Definiert den linken (oder rechten) Rand. |
Nummer | 1,25rem |
| 28 | $defnlist-term-weight Bietet Schriftgröße für <dt> -Elemente. |
String | $ global-weight-fett |
| 29 | $defnlist-term-margin-bottom Bietet Abstand zwischen <dt> - und <dd> -Elementen. |
Nummer | 0,3rem |
| 30 | $blockquote-color Es wendet die Textfarbe von <blockquote> -Elementen an. |
Farbe | $ dunkelgrau |
| 31 | $blockquote-padding Bietet Auffüllen innerhalb eines <blockquote> -Elements. |
Nummer oder Liste | rem-calc (9 20 0 19) |
| 32 | $blockquote-border Es gibt einen Seitenrand für die <blockquote> -Elemente. |
Liste | 1px fest $ mittelgrau |
| 33 | $cite-font-size Definiert die Schriftgröße für die <cite> -Elemente. |
Nummer | rem-calc (13) |
| 34 | $cite-color Bietet Textfarbe für |
Farbe | $ dunkelgrau |
| 35 | $keystroke-font Definiert die Schriftfamilie für die <kbd> -Elemente. |
String oder Liste | $ font-family-monospace |
| 36 | $keystroke-color Definiert die Textfarbe für die <kbd> -Elemente. |
Farbe | $ schwarz |
| 37 | $keystroke-background Bietet Hintergrundfarbe für die <kbd> -Elemente. |
Farbe | $ hellgrau |
| 38 | $keystroke-padding Gibt die Auffüllung für die <kbd> -Elemente an. |
Nummer oder Liste | rem-calc (2 4 0) |
| 39 | $keystroke-radius Zeigt den Rahmenradius für die <kbd> -Elemente an. |
Nummer oder Liste | $ global-radius |
| 40 | $abbr-underline Stellt den unteren Randstil für die <abbr> -Elemente bereit. |
Liste | 1px gepunktet $ schwarz |