Fondazione - Tipografia di base

Descrizione

La tipografia in Foundation definisce titoli, paragrafi, elenchi e altri elementi in linea che creano stili predefiniti attraenti e semplici per gli elementi.

La tabella seguente elenca i diversi tipi di tipografia utilizzati in Foundation:

Sr.No. Tipografia e descrizione
1 Paragrafi

Il paragrafo è un gruppo di frasi definite con diverse dimensioni del carattere, parole evidenziate, altezza della riga ecc.

2 Intestazione

Definisce le intestazioni HTML da h1 a h6.

3 Collegamenti

Crea un collegamento ipertestuale che apre un altro documento quando fai clic sul testo o su un'immagine.

4 Divisori

È usato per dare una pausa tra le sezioni usando il tag <hr>.

5 Elenchi ordinati e non ordinati

Foundation supporta elenchi ordinati, elenchi non ordinati per elencare le cose.

6 Elenchi di definizioni

Gli elenchi di definizioni vengono utilizzati per visualizzare le coppie di valori dei nomi.

7 Blockquotes

Rappresenta un blocco di testo, che definisce molto più grande del normale.

8 Abbreviazioni e codice

L'abbreviazione definisce un termine abbreviato di parola o frase e il codice rappresenta un pezzo di codice.

9 Sequenze di tasti

Viene utilizzato per eseguire una funzione specifica.

10 Accessibilità

Foundation fornisce alcune linee guida per accedere al contenuto della pagina.

Riferimento Sass

È possibile modificare gli stili dei componenti utilizzando le seguenti variabili SASS elencate nella tabella.

Sr.No. Nome e descrizione genere Valore predefinito
1

$header-font-family

Specifica la famiglia di caratteri per gli elementi dell'intestazione.

Stringa o elenco $ body-font-family
2

$header-font-weight

Specifica lo spessore del carattere delle intestazioni.

Corda $ peso-globale-normale
3

$header-font-style

Fornisce lo stile del carattere delle intestazioni.

Corda normale
4

$font-family-monospace

Stack di caratteri utilizzato per elementi che utilizzano caratteri a spaziatura fissa, come esempi di codice.

Stringa o elenco Consolas, 'Liberation Mono', Courier, monospace
5

$header-sizes

Definisce le dimensioni dello schermo delle intestazioni e ogni chiave è un punto di interruzione e ogni valore è una mappa delle dimensioni delle intestazioni.

Carta geografica
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

Fornisce il colore delle intestazioni.

Colore ereditare
7

$header-lineheight

Definisce l'altezza della riga delle intestazioni.

Numero 1.4
8

$header-margin-bottom

Fornisce il margine inferiore delle intestazioni.

Numero 0.5rem
9

$header-text-rendering

Definisce il metodo per il rendering del testo.

Corda optimLegibility
10

$small-font-size

Specifica la dimensione del carattere per gli elementi <small>.

Numero 80%
11

$paragraph-margin-bottom

Specifica il margine inferiore dei paragrafi.

Numero 1rem
12

$paragraph-text-rendering

Metodi per il paragrafo rendering del testo.

Corda optimLegibility
13

$code-color

Fornisce il colore del testo agli esempi di codice.

Colore $ nero
14

$code-font-family

Fornisce la famiglia di caratteri agli esempi di codice.

Stringa o elenco $ font-family-monospace
15

$code-border

Specifica il bordo attorno al codice.

Elenco 1px solido $ medio-grigio
16

$code-padding

Specifica il riempimento intorno al testo.

Numero o elenco rem-calc (2 5 1)
17

$anchor-color

Colore predefinito per i collegamenti.

Colore $ colore-primario
18

$anchor-color-hover

Specifica il colore predefinito per i collegamenti al passaggio del mouse.

Colore scale-color ($ anchor-color, $ lightness: -14%)
19

$anchor-text-decoration

Decorazione di testo predefinita per i collegamenti.

Corda nessuna
20

$anchor-text-decoration-hover

Decorazione del testo predefinita per i collegamenti al passaggio del mouse.

Corda nessuna
21

$hr-width

Definisce la larghezza massima di un divisore.

Numero $ larghezza globale
22

$hr-border

Specifica il bordo predefinito per un divisore.

Elenco 1px solido $ medio-grigio
23

$hr-margin

Margine predefinito per un divisore.

Numero o elenco rem-calc (20) auto
24

$list-lineheight

Definisce l'altezza della riga per gli elementi in un elenco.

Numero $ altezza linea paragrafo
25

$list-style-type

Fornisce il tipo di punto elenco per elenchi non ordinati.

Corda disco
26

$list-style-position

Definisce il posizionamento dei punti elenco su elenchi non ordinati.

Corda al di fuori
27

$list-side-margin

Definisce il margine del lato sinistro (o destro).

Numero 1.25rem
28

$defnlist-term-weight

Fornisce lo spessore del carattere per gli elementi <dt>.

Corda $ global-weight-bold
29

$defnlist-term-margin-bottom

Fornisce la spaziatura tra gli elementi <dt> e <dd>.

Numero 0.3rem
30

$blockquote-color

Applica il colore del testo degli elementi <blockquote>.

Colore $ grigio scuro
31

$blockquote-padding

Fornisce imbottitura all'interno di elementi <blockquote>.

Numero o elenco rem-calc (9 20 0 19)
32

$blockquote-border

Fornisce il bordo laterale per gli elementi <blockquote>.

Elenco 1px solido $ medio-grigio
33

$cite-font-size

Definisce la dimensione del carattere per gli elementi <cite>.

Numero rem-calc (13)
34

$cite-color

Fornisce il colore del testo per gli <cite>elementi.

Colore $ grigio scuro
35

$keystroke-font

Definisce la famiglia di caratteri per gli elementi <kbd>.

Stringa o elenco $ font-family-monospace
36

$keystroke-color

Definisce il colore del testo per gli elementi <kbd>.

Colore $ nero
37

$keystroke-background

Fornisce il colore di sfondo per gli elementi <kbd>.

Colore $ grigio chiaro
38

$keystroke-padding

Specifica il riempimento per gli elementi <kbd>.

Numero o elenco rem-calc (2 4 0)
39

$keystroke-radius

Visualizza il raggio del bordo per gli elementi <kbd>.

Numero o elenco $ raggio-globale
40

$abbr-underline

Fornisce lo stile del bordo inferiore per gli elementi <abbr>.

Elenco 1px puntato $ nero