Úvod do vlastností písma CSS
Vlastnosti písma CSS poskytují přehled vlastností písma CSS. Kaskádové styly, více populárně známé jako CSS, je jednoduchý designový jazyk navržený tak, aby zjednodušil produkující webové stránky skvěle. CSS pojednává o vzhledu a zkušenosti s částí webové stránky. Při použití CSS můžete ovládat barvu pomocí textu, styl písma, mezery mezi odstavci, jak budou sloupce dimenzovány a prezentovány, použité obrázky pozadí nebo barvy pozadí, styly rozvržení, varianty na displeji několik zařízení, stejně jako velikosti obrazovky, kromě řady různých dalších efektů. CSS je snadno srozumitelné a také pochopitelné, ale poskytuje efektivní kontrolu předvádění HTML dokumentu. CSS se nejčastěji kombinuje se značkovacími jazyky HTML nebo jednoduše XHTML.
- CSS označuje kaskádové styly.
- CSS identifikuje, jak by se prvky HTML měly zobrazovat na obrazovce, papíru a také by se měly skládat z médií.
- CSS ušetří spoustu práce. Mohlo by to řídit rozložení více webových stránek najednou.
- Externí šablony stylů budou uchovány v souborech CSS.
Vysvětlete různé vlastnosti písma CSS
Níže jsou uvedeny různé vlastnosti písma CSS:
Sbírka písem: V CSS můžete vybrat písmo, které chcete použít pro text uvnitř konkrétního prvku, nastavením vlastnosti rodina písma v pravidle stylu, ale než se dostaneme k detailům rodiny fontů, musíme porozumět jak používat názvy písem, protože když vytváříme webovou stránku, vždy nevíme, co náš uživatel použije k zobrazení webové stránky.
Definujte pět kategorií písem v CSS standardů
- První z těchto kategorií jsou kategorie patkových písem. Příkladem konkrétního písma, které by se hodilo do této kategorie, jsou Times nebo Times New Roman a také Baskerville, Century a Schoolbook.
- Jedná se o konkrétní názvy písem, jako je Baskerville, Century a Schoolbook; jedná se o názvy písem, které se mohou zobrazit v rozevíracím seznamu, když vyberete písmo uvnitř textového procesoru, protože textový procesor přesně ví, co je na vašem počítači nainstalováno. Ale pro CSS by všechna tato písma spadala do kategorie patkových písem.
- K dispozici je také sada bezpatkových písem a oblíbené písmo, které spadá do této kategorie, je Arial. Pokud jste to nevěděli, serif, takže na konci dopisu jsou malé řádky, dělají dopisy, aby vypadaly trochu efektně a ozdobily se. Můžete vidět rozdíl v písmenech R, která jsou níže.
- R vlevo je Arial, který je bezpatkový, doslova bez ozdob, zatímco R vpravo je Times New Roman a obsahuje několik drobných tahů sem a tam. Obecně řečeno, lidé shledávají fonty bezpatkových na LCD a LED displeji snáze čitelné.
- Existují také kategorie pro kurzívní písma, která vypadají trochu jako ručně psaná písmena a fantazijní písma, která mohou vypadat jako cokoli, ale většina návrhů tato písma těžce nepoužívá, protože mohou být obtížně čitelná a také trochu nepředvídatelné.
- Nakonec existuje kategorie pro monospaced fonty. Toto jsou písma, která dávají každému písmenu stejné mezery, a to je pravděpodobně písmo, které chcete použít v textovém editoru, který používáte k vytvoření CSS, a také písmo, které byste chtěli použít na webové stránce k zobrazení kódu v webová stránka.
Výsledky ve webovém prohlížeči:
Výstup:
Výsledky ve webovém prohlížeči:
Výstup:
Výsledky ve webovém prohlížeči:
Výstup:
Výsledky ve webovém prohlížeči:
Výstup:
Výsledky ve webovém prohlížeči:
Výstup:
Rodiny písem
Pod vysvětlením jsou uvedeny rodiny písem:
- Mnoho návrhů CSS nastaví vlastnost rodiny fontů na jméno konkrétního písma, jako je Arial. Vždy však existuje šance, že konkrétní písmo, které chcete, jako Arial, nebude dostupné v systému daného uživatele. A to je jeden z důvodů, proč můžete v seznamu odděleném čárkami zadat tolik písem, kolikrát chcete, a prohlížeč použije první, které odpovídá.
Podle výše uvedeného snímku obrazovky máme 1. výběr, 2. výběr a pokud není k dispozici ani jedno z těchto písem, přecházíme zpět ke generickému sans-serifu, protože i když prohlížeč nemá žádné z dalších písem, musí poskytnout výchozí písmo pro tuto kategorii. To samozřejmě vyvolává otázku, jaká písma jsou pro web design bezpečná. Obecně řečeno, s Arial, Verdana, Times a Courier nemůžete pokazit, ale zde jsme také uvedli seznam dalších písem, která jsou běžně dostupná na více platformách.
- Helvetica je běžné písmo, které vidíte na seznamu mnoha stylů, ale Helvetica není k dispozici ve Windows. Windows místo toho poskytuje Arial.
- Rodina písem je jednou z těch vlastností, které jsou zděděny. Takže pokud to nastavíme na úrovni těla, pak odstavce, divs a kotvy, které jsou uvnitř tohoto těla, vyberou tuto rodinu fontů ve výchozím nastavení, pokud ji nepřevrhneme. Tak například tato záhlaví, tato značka h1, zdědí rodinu fontů z těla, ale nemusí to tak být.
Výstup:
Můžeme říci, že pro h1 by rodina fontů měla být Times New Roman, Serif a pokud obnovíte webové stránky, změna se projevila.
Velikost písma a styly
Pod podrobnými informacemi o velikosti a stylu písma:
- Další charakteristikou fontů, které budete chtít ovládat, je velikost a při nastavování velikosti musíte nejprve vybrat mezi absolutními nebo relativními jednotkami.
- Absolutní velikosti jsou běžně zadávány v pixelech a pixely vám poskytují velmi přesnou kontrolu nad velikostí písma.
- Relativní jednotky, jako jsou procenta nebo klíčová slova větší nebo menší nebo ems, vám umožňují nastavit velikost písma na základě určité základní linie, takže 2em by bylo dvojnásobkem velikosti základní linie a 0, 8em by bylo 80% výchozí hodnoty. Mnoho lidí dnes používá ems pro relativní velikost písma. Jedním z důvodů je, že relativní velikosti umožňují uživateli zvětšit text pomocí svého prohlížeče, a to je něco, co by mohli chtít udělat, protože text je pro ně těžké vidět. Relativní velikosti to umožňují.
Výsledky ve webovém prohlížeči:
Výstup:
- Některé z dalších vlastností písma, které můžete nastavit, jsou styl písma, který vynutí kurzívou písmo nebo hmotnost písma, aby bylo písmo tučně. A vlastnost variant písma přinese písmo, které používá pouze velká písmena.
Výsledky ve webovém prohlížeči:
Výstup:
- První věc, kterou chceme udělat, je trochu odlehčit prvek h1. Musí to být prvek h1, protože je primárním záhlavím této stránky, ale je z našeho pohledu trochu příliš velký. Dovolte mi tedy nastavit velikost písma na 1, 2 litru. To to trochu sníží, protože obvykle bude značka h1 daleko za hranicí 1, 2. Dalším problémem, který chceme řešit, je výpis kódu zde. Chceme, aby to bylo monospace font a existuje několik různých chce dosáhnout tohoto. Pro kód podle níže.
Výsledky ve webovém prohlížeči:
Výstup:
Výsledky ve webovém prohlížeči:
Výstup:
Zde chceme použít předběžnou značku, což znamená, že se jedná o předformátovaný text a nesnažte se s ním manipulovat.
Výsledky ve webovém prohlížeči:
Výstup:
Je to zkratka vlastností stylu písma. Jako kurzíva ve stylu písma, velikost písma 0.9em a serif rodiny fontů;
Výsledky ve webovém prohlížeči:
Výstup:
Závěr
Jak určit písma pomocí CSS a rozdíl mezi určitým typem písma, jako je Arial, a obecnými kategoriemi webových písem, jako je serif a sans-serif. Rovněž spravujeme velikost písma a klady a zápory relativních velikostí versus absolutní velikosti, nakonec používáme vlastnosti písma a učíme se načíst písma s rodinou fontů.
Doporučené články
Toto byl průvodce vlastnostmi písma CSS. Zde jsme diskutovali různé vlastnosti písma CSS a pět kategorií fontů ve standardech CSS s výsledky a výstupy prohlížeče. můžete se také podívat na náš další doporučený článek a dozvědět se více-
- Co je CSS?
- Úvod do CSS
- Kariéra v CSS
- Výhody CSS