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.

Di seguito sono riportati gli stili dei componenti utilizzando le seguenti variabili SASS.

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