Fundacja - podstawowa typografia

Opis

Typografia w Foundation definiuje nagłówki, akapity, listy i inne elementy wbudowane, które tworzą atrakcyjne i proste domyślne style elementów.

W poniższej tabeli wymieniono różne typy typografii używane w programie Foundation -

Sr.No. Typografia i opis
1 Akapity

Akapit to grupa zdań o różnym rozmiarze czcionki, wyróżnionych słowach, wysokości wiersza itp.

2 nagłówek

Definiuje nagłówki HTML od h1 do h6.

3 Spinki do mankietów

Tworzy hiperłącze, które otwiera inny dokument po kliknięciu tekstu lub obrazu.

4 Dzielniki

Służy do przerwania między sekcjami za pomocą tagu <hr>.

5 Listy uporządkowane i nieuporządkowane

Fundacja obsługuje listy uporządkowane, listy nieuporządkowane, aby wyszczególnić rzeczy.

6 Listy definicji

Listy definicji służą do wyświetlania par nazwa-wartość.

7 Cytaty blokowe

Reprezentuje blok tekstu, który definiuje znacznie większy niż normalnie.

8 Skróty i kod

Skrót oznacza skrócony termin słowa lub frazy, a kod reprezentuje fragment kodu.

9 Klawisze

Służy do wykonywania określonej funkcji.

10 Dostępność

Fundacja zapewnia pewne wytyczne dotyczące dostępu do zawartości strony.

Sass Reference

Możesz zmienić style komponentów, używając następujących zmiennych SASS wymienionych w tabeli.

Sr.No. Nazwa i opis Rodzaj Domyślna wartość
1

$header-font-family

Określa rodzinę czcionek dla elementów nagłówka.

Ciąg lub lista $ body-font-family
2

$header-font-weight

Określa grubość czcionki w nagłówkach.

Strunowy $ global-weight-normal
3

$header-font-style

Zapewnia styl czcionki nagłówków.

Strunowy normalna
4

$font-family-monospace

Stos czcionek używany dla elementów, które używają tekstu o stałej szerokości, takich jak próbki kodu.

Ciąg lub lista Consolas, „Liberation Mono”, Courier, monospace
5

$header-sizes

Definiuje rozmiary ekranów nagłówków, a każdy klawisz jest punktem przerwania, a każda wartość jest mapą rozmiarów nagłówków.

Mapa
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

Zapewnia kolor nagłówków.

Kolor dziedziczyć
7

$header-lineheight

Określa wysokość wiersza nagłówków.

Numer 1.4
8

$header-margin-bottom

Zapewnia dolny margines nagłówków.

Numer 0.5rem
9

$header-text-rendering

Definiuje metodę renderowania tekstu.

Strunowy OptimizeLegibility
10

$small-font-size

Określa rozmiar czcionki dla <small> elementów.

Numer 80%
11

$paragraph-margin-bottom

Określa dolny margines akapitów.

Numer 1rem
12

$paragraph-text-rendering

Metody renderowania tekstu w akapicie.

Strunowy OptimizeLegibility
13

$code-color

Zapewnia kolor tekstu w próbkach kodu.

Kolor $ czarny
14

$code-font-family

Dostarcza rodzinę czcionek do przykładów kodu.

Ciąg lub lista $ font-family-monospace
15

$code-border

Określa obramowanie wokół kodu.

Lista 1px solid $ średnioszary
16

$code-padding

Określa dopełnienie tekstu.

Numer lub lista rem-calc (2 5 1)
17

$anchor-color

Domyślny kolor linków.

Kolor $ kolor podstawowy
18

$anchor-color-hover

Określa domyślny kolor łączy po najechaniu myszą.

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

$anchor-text-decoration

Domyślna dekoracja tekstu dla linków.

Strunowy Żaden
20

$anchor-text-decoration-hover

Domyślna dekoracja tekstu dla linków po najechaniu myszą.

Strunowy Żaden
21

$hr-width

Określa maksymalną szerokość separatora.

Numer $ global-width
22

$hr-border

Określa domyślne obramowanie separatora.

Lista 1px solid $ średnioszary
23

$hr-margin

Margines domyślny na separator.

Numer lub lista rem-calc (20) autom
24

$list-lineheight

Definiuje wysokość wiersza dla pozycji na liście.

Numer $ paragraph-lineheight
25

$list-style-type

Zapewnia typ punktora dla nieuporządkowanych list.

Strunowy dysk
26

$list-style-position

Definiuje pozycjonowanie punktorów na nieuporządkowanych listach.

Strunowy na zewnątrz
27

$list-side-margin

Definiuje lewy (lub prawy) margines.

Numer 1.25rem
28

$defnlist-term-weight

Zapewnia grubość czcionki dla elementów <dt>.

Strunowy $ global-weight-bold
29

$defnlist-term-margin-bottom

Zapewnia odstępy między elementami <dt> i <dd>.

Numer 0.3rem
30

$blockquote-color

Stosuje kolor tekstu elementów <blockquote>.

Kolor $ ciemnoszary
31

$blockquote-padding

Zapewnia dopełnienie wewnątrz elementów <blockquote>.

Numer lub lista rem-calc (9 20 0 19)
32

$blockquote-border

Daje boczne obramowanie dla elementów <blockquote>.

Lista 1px solid $ średnioszary
33

$cite-font-size

Definiuje rozmiar czcionki dla elementów <cite>.

Numer rem-calc (13)
34

$cite-color

Zapewnia kolor tekstu dla <cite>elementów.

Kolor $ ciemnoszary
35

$keystroke-font

Definiuje rodzinę czcionek dla elementów <kbd>.

Ciąg lub lista $ font-family-monospace
36

$keystroke-color

Określa kolor tekstu dla elementów <kbd>.

Kolor $ czarny
37

$keystroke-background

Zapewnia kolor tła dla elementów <kbd>.

Kolor $ jasnoszary
38

$keystroke-padding

Określa dopełnienie dla elementów <kbd>.

Numer lub lista rem-calc (2 4 0)
39

$keystroke-radius

Wyświetla promień obramowania dla elementów <kbd>.

Numer lub lista $ global-radius
40

$abbr-underline

Zapewnia styl dolnej krawędzi dla elementów <abbr>.

Lista 1 piksel kropkowany $ czarny