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
small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)
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 <cite>Elemente.

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