Temel - Temel Tipografi
Açıklama
Temelde Tipografi, öğeler için çekici ve basit varsayılan stiller oluşturan başlıkları, paragrafları, listeleri ve diğer satır içi öğeleri tanımlar.
Aşağıdaki tablo, Foundation'da kullanılan farklı tipografi türlerini listelemektedir -
| Sr.No. | Tipografi ve Açıklama |
|---|---|
| 1 | Paragraflar Paragraf, farklı yazı tipi boyutu, vurgulanan sözcükler, satır yüksekliği vb. İle tanımlanan bir grup cümledir. |
| 2 | Üstbilgi H1'den h6'ya kadar HTML başlıklarını tanımlar. |
| 3 | Bağlantılar Metne veya bir görüntüye tıkladığınızda başka bir belgeyi açan bir köprü oluşturur. |
| 4 | Bölücüler <hr> etiketi kullanılarak bölümler arasında ara vermek için kullanılır. |
| 5 | Sıralı ve Sırasız Listeler Vakıf, bir şeyleri listelemek için sıralı listeleri, sırasız listeleri destekler. |
| 6 | Tanım Listeleri Tanım Listeleri, ad değer çiftlerini görüntülemek için kullanılır. |
| 7 | Blok alıntılar Normalden çok daha büyük tanımlayan metin bloğunu temsil eder. |
| 8 | Kısaltmalar ve Kod Kısaltma, kısaltılmış bir kelime veya kelime öbeği terimini tanımlar ve kod, bir kod parçasını temsil eder. |
| 9 | Tuş vuruşları Belirli bir işlevi gerçekleştirmek için kullanılır. |
| 10 | Ulaşılabilirlik Foundation, sayfanın içeriğine erişmek için bazı yönergeler sağlar. |
Sass Referansı
Tabloda listelendiği gibi aşağıdaki SASS değişkenlerini kullanarak bileşenlerin stillerini değiştirebilirsiniz.
| Sr.No. | İsim & Açıklama | Tür | Varsayılan değer |
|---|---|---|---|
| 1 | $header-font-family Başlık öğeleri için yazı tipi ailesini belirtir. |
Dize veya Liste | $ body-font-family |
| 2 | $header-font-weight Başlıkların yazı tipi ağırlığını belirtir. |
Dize | $ global-ağırlık-normal |
| 3 | $header-font-style Başlıkların yazı tipi stilini sağlar. |
Dize | normal |
| 4 | $font-family-monospace Kod örnekleri gibi tek aralıklı tür kullanan öğeler için kullanılan yazı tipi yığını. |
Dize veya Liste | Consolas, 'Liberation Mono', Courier, monospace |
| 5 | $header-sizes Başlıkların ekran boyutlarını tanımlar ve her anahtar bir kesme noktasıdır ve her değer, başlık boyutlarının bir haritasıdır. |
Harita | |
| 6 | $header-color Başlıkların rengini sağlar. |
Renk | miras almak |
| 7 | $header-lineheight Başlıkların satır yüksekliğini tanımlar. |
Numara | 1.4 |
| 8 | $header-margin-bottom Başlıkların alt kenar boşluğunu sağlar. |
Numara | 0.5rem |
| 9 | $header-text-rendering Metin oluşturma yöntemini tanımlar. |
Dize | optimizeLegibility |
| 10 | $small-font-size <small> öğeler için yazı tipi boyutunu belirtir. |
Numara | % 80 |
| 11 | $paragraph-margin-bottom Paragrafların alt kenar boşluğunu belirtir. |
Numara | 1rem |
| 12 | $paragraph-text-rendering Metin oluşturma paragrafı yöntemleri. |
Dize | optimizeLegibility |
| 13 | $code-color Kod örneklerine metin rengi sağlar. |
Renk | $ siyah |
| 14 | $code-font-family Kod örneklerine yazı tipi ailesi sağlar. |
Dize veya Liste | $ font-family-monospace |
| 15 | $code-border Kodun etrafındaki sınırı belirtir. |
Liste | 1 piksel düz $ orta gri |
| 16 | $code-padding Metnin etrafındaki dolguyu belirtir. |
Numara veya Liste | rem-calc (2 5 1) |
| 17 | $anchor-color Bağlantılar için varsayılan renk. |
Renk | $ birincil renk |
| 18 | $anchor-color-hover Fareyle üzerine gelindiğinde bağlantılar için varsayılan rengi belirtir. |
Renk | ölçek rengi ($ çapa rengi, $ açıklık: -% 14) |
| 19 | $anchor-text-decoration Bağlantılar için varsayılan metin dekorasyonu. |
Dize | Yok |
| 20 | $anchor-text-decoration-hover Fareyle üzerine gelindiğinde bağlantılar için varsayılan metin dekorasyonu. |
Dize | Yok |
| 21 | $hr-width Bir bölücünün maksimum genişliğini tanımlar. |
Numara | $ global-genişlik |
| 22 | $hr-border Bir bölücü için varsayılan kenarlığı belirtir. |
Liste | 1 piksel düz $ orta gri |
| 23 | $hr-margin Bir bölücü için varsayılan kenar boşluğu. |
Numara veya Liste | rem-calc (20) otomatik |
| 24 | $list-lineheight Bir listedeki öğeler için satır yüksekliğini tanımlar. |
Numara | $ paragraf-satır yüksekliği |
| 25 | $list-style-type Sırasız listeler için madde işareti türü sağlar. |
Dize | disk |
| 26 | $list-style-position Sırasız listelerdeki madde işaretlerinin konumlandırılmasını tanımlar. |
Dize | dışarıda |
| 27 | $list-side-margin Sol taraf (veya sağ) kenar boşluğunu tanımlar. |
Numara | 1.25rem |
| 28 | $defnlist-term-weight <dt> öğeleri için yazı tipi ağırlığı sağlar. |
Dize | $ global-weight-bold |
| 29 | $defnlist-term-margin-bottom <dt> ve <dd> öğeleri arasında boşluk sağlar. |
Numara | 0.3rem |
| 30 | $blockquote-color <blockquote> öğelerinin metin rengini uygular. |
Renk | $ koyu gri |
| 31 | $blockquote-padding Bir <blockquote> öğesinin içinde dolgu sağlar. |
Numara veya Liste | rem-calc (9 20 0 19) |
| 32 | $blockquote-border <blockquote> öğeleri için yan kenarlık verir. |
Liste | 1 piksel düz $ orta gri |
| 33 | $cite-font-size <cite> öğeleri için yazı tipi boyutunu tanımlar. |
Numara | rem-calc (13) |
| 34 | $cite-color
|
Renk | $ koyu gri |
| 35 | $keystroke-font <kbd> öğeleri için yazı tipi ailesini tanımlar. |
Dize veya Liste | $ font-family-monospace |
| 36 | $keystroke-color <kbd> öğeleri için metin rengini tanımlar. |
Renk | $ siyah |
| 37 | $keystroke-background <kbd> öğeleri için arka plan rengi sağlar. |
Renk | $ açık gri |
| 38 | $keystroke-padding <kbd> öğeleri için dolguyu belirtir. |
Numara veya Liste | rem-calc (2 4 0) |
| 39 | $keystroke-radius <kbd> öğeleri için kenarlık yarıçapını görüntüler. |
Numara veya Liste | $ global-radius |
| 40 | $abbr-underline <abbr> öğeleri için alt kenarlık stilini sağlar. |
Liste | 1 piksel noktalı $ siyah |