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