Náhled

Náhled

Více než obvykle

Méně než obvykle

Kurzíva

Kurzíva

S podtržením

Přeškrtnutí

Možnosti atributů stylu

Kromě popsaných značek existuje několik dalších způsobů, jak změnit písmo v html. Jedním z nich je použití atributu generic style. Pomocí hodnot jeho vlastností můžete nastavit styl zobrazení písma:

1) font-family - vlastnost nastavuje rodinu písem. Je možné vyčíslit více hodnot.
Ke změně písma v html na další hodnotu dojde, pokud předchozí rodina není nastavena v operačním systému uživatele.

Syntaxe zápisu:

font-family: font-name [, font-name[, ...]]

2) font-size - velikost se nastavuje od 1 do 7. Toto je jeden z hlavních způsobů, jak můžete zvětšit písmo v html.
Syntaxe zápisu:

velikost písma: absolutní velikost | relativní velikost | hodnota | zájem | zdědit

Můžete také nastavit velikost písma:

• v pixelech;
• V absolutním vyjádření ( xx-small, x-small, small, medium, large);
• V procentech;
• V bodech (pt).

velikost písma: 7

velikost písma: 24px

Velikost písma: x-velké

velikost písma: 200 %

velikost písma: 24pt

3) font-style - nastavuje styl písma. Syntax:

styl písma: normální | kurzíva | šikmý | zdědit

hodnoty:

• normální - normální pravopis;
• kurzíva - kurzíva
• šikmé - písmo se sklonem doprava;
• dědit - převezme pravopis nadřazeného prvku.

Příklad, jak změnit písmo v html pomocí této vlastnosti:

font-style:zdědit

styl písma: kurzíva

styl písma:normální

styl písma:oblique

4) font-variant - převede všechna velká písmena na velká. Syntax:

varianta písma: normální | kapitálky | zdědit

Příklad, jak změnit písmo v html pomocí této vlastnosti:

font-variant:zdědit

font-varianta:normal

font-varianta:malé kapitálky

5) font-weight - umožňuje nastavit tloušťku psaní textu (saturaci). Syntax:

váha písma: bold|bolder|lehčí|normální|100|200|300|400|500|600|700|800|900

hodnoty:

• tučné - nastaví písmo html na tučné;
• tučnější - tučnější vzhledem k normálu;
• světlejší - méně nasycený ve srovnání s normálním;
• normální - normální pravopis;
• 100-900 – nastavuje tloušťku písma v číselných hodnotách.

váha písma: tučné

váha písma: tučně

váha písma:lehčí

váha písma: normální

váha písma: 900

váha písma: 100

vlastnost písma a barva písma html

Písmo je další vlastností kontejneru. Interně kombinuje hodnoty několika vlastností určených ke změně písem. Syntaxe písma:

font: font-size font-family | zdědit

Také písma používaná systémem ve štítcích na různých ovládacích prvcích lze nastavit jako hodnotu:

• titulek - pro tlačítka;
• ikona - pro ikony;
• menu - menu;
• message-box - pro dialogová okna;
• small-caption - pro malé ovládací prvky;
• status-bar - písmo stavového řádku.

font:ikona

font: titulek

font:menu

font:box-zprávy

malý titulek

font:stavový řádek

font:italic 50px tučně "Times New Roman", Times, patka

Chcete-li nastavit barvu písma v html, můžete použít vlastnost color. Umožňuje nastavit barvu, a to jak pomocí klíčového slova, tak ve formátu rgb. A také ve formě hexadecimálního kódu.

Iniciála je první písmeno odstavce, větší než ostatní a umístěné tak, že jeho horní část je na úrovni prvního řádku odstavce. Na obrázku vidíte příklad počátečního písmene vloženého do textu.

Mimochodem, WordPress má speciální plugin (wordpress.org/extend/plugins/drop-caps), který umožňuje automaticky vytvářet vložené do textu (a posunuté dolů) velká písmena. Báječné! Co když však plugin nechcete používat (jsem si jist, že ne) a potřebujete omezit jen pár příspěvků a možná i konkrétní umístění?

Dobrou zprávou je, že k vytváření velkých písmen nepotřebujete plugin, stačí vám nějaké css a span tag. Otevřete soubor css a přidejte následující kód:

Span.dropcaps ( font-family:Georgia, serif; barva: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0,09 em; poloha: relativní; )

Něco takového. Samozřejmě budete potřebovat styl, který odpovídá vašemu designu a textu. Například hodnoty vlastností: velikost písma , okraje a výška řádku bude nutné upravit na základě vašeho návrhu a textu.

span tag

Aby byl styl aplikován na velké písmeno textu, je nutné velké písmeno „zabalit“ do značky span a předepsat příslušnou třídu.

A

Pseudoprvek:první písmeno

Můžete také upravit styl prvního znaku v textu pomocí pseudoprvku :first-letter. Na pseudoelement :first-letter však lze použít omezený počet vlastností: jedná se o vlastnosti související s písmem, barvou, pozadím, okrajem, okrajem a odsazením. Další věc, kterou je třeba poznamenat, je, že pseudoelement :first-letter nebude fungovat ve starších prohlížečích.

P:first-letter ( font-family:Georgia, serif; barva: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -vpravo: 0,09 em; poloha: relativní; )

Zde je ve skutečnosti několik metod úprav velká písmena s CSS.

CSS velká písmena pomáhají rozbít jednotvárnost stejného typu designu, jehož texty vypadají stejně od začátku do konce.

Dopisy tehdy a dnes

Kronikáři používali velká písmena v rukopisech, z nichž některé pocházejí z 5. století. Velká písmena se nadále používala od 8. do 15. století, kdy tiskařské stroje umožnily dostat tisk na průmyslovou úroveň. Ruční i tištěná velká písmena byla umístěna na začátku textu. Často byly zdobeny dekorativním vzorem, který se nacházel kolem dopisu.

Zvednutá a snížená písmena se používají dodnes. Lze je nalézt v novinách, časopisech a knihách a také v digitálním tisku. Vyvýšená písmena se někdy nazývají protáhlá. Jsou umístěny v jedné rovině se spodní částí textu, který za nimi následuje. Vynechaná písmena jsou umístěna v jedné rovině s horní částí textu, někdy ve vrstvě za hlavním tělem textu, nebo se kolem nich obtéká zbytek textu.

Vyvýšená písmena se definují mnohem snadněji, protože jsou v jedné rovině se zbytkem textu a obvykle není třeba měnit obtékání vnějších okrajů. Vynechaná písmena vyžadují jemnější doladění. Bude pro vás snazší se s tím vypořádat, pokud nejprve pochopíte, jak se zachází se zvednutými postavami.

Použití tříd

Návrháři, kteří již rozumí CSS, vědí, že pro první velké písmeno mohou vytvořit samostatnou třídu CSS.

CSS kód pro prvek odstavce a třídu, která vytváří písmeno, by vypadal takto:

p ( font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size:48px; font-family: Didot;)

A HTML kód bude vypadat takto:

Co nám dává:

Zdá se vám to příliš snadné? Ve skutečnosti budete muset provést úpravy v závislosti na konkrétních vyvýšených písmenech, protože každé velké písmeno vyžaduje speciální vyrovnání párů. Po výběru písma pro vyvýšená písmena a pro hlavní text je třeba vytvořit samostatné třídy pro každé vyvýšené písmeno. Níže CSS class.myinitialcapsi okraj napravo je záporný, aby se zmenšila vzdálenost mezi I a n .

Myinitialcapsi(font-size:48px; font-family: Didot; margin-right:-1px;)

já V tomto případě je mezi „I“ a „n“ nějaká mezera navíc.

já zahrnutí nové třídy se zápornou marží ji přiblíží.

V závislosti na rozlišení obrazovky ve výše uvedeném příkladu mohou I a n vypadat, jako by se sloučily dohromady. To je způsobeno patkami na koncích písmen. Než tedy vyberete konečné styly CSS, otestujte svůj web na různých zařízeních, abyste viděli, jak na nich text v CSS s velkými písmeny vypadá.

Citáty a další speciální případy

Můžete zvětšit nejen písmena na začátku textu. Můžete implementovat jinou třídu a vytvořit tak větší verzi uvozovek, které se zobrazí vedle písmene. V našem případě se pro uvozovky nehodí ani třída písmen o velikosti 48, ani třída textu 20 pixelů. Spíše to bude něco mezi – 30 pixelů. Uvozovky posuneme o 4 pixely dolů, abychom je opticky zarovnali s I :

Myinitialcapsq (font-size:30px; font-family: Didot; float:left; margin-top:4px;)

“já zahrnutí“ nové třídy se zápornou marží ji přiblíží.

Při zadávání každého z velkých písmen CSS spolu s uvozovkami musíte být velmi opatrní, aby jejich vyrovnání párů a zarovnání odpovídalo okolnímu označení. Například písmeno T bude potřeba posunout doleva, mírně za okraj odstavce, aby jeho příčná čára vizuálně zapadla do rozvržení. Totéž budete muset udělat s kulatými písmeny jako C , G , O a Q . Tento příklad používá velikosti písma 20, 30 a 48. Velikosti však budete muset upravit podle konkrétních písem, která jste vybrali. Stejně jako velikosti a rozlišení obrazovek, na kterých se bude stránka zobrazovat.

Pseudoprvky a pseudotřídy

Pomocí pseudoprvku CSS můžete snadno vytvořit vyvýšené písmeno přidáním ::first-letter k prvku odstavce. Použijte :first-letter ( s jedním dvojtečkou) pro starší prohlížeče:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:1.2em;) p::first-letter ( font-size: 3,6 em; text-transform: velká písmena; font-family: "Monotype Bernard Condensed", patka; pravý okraj: 0,03 em;) .initialb (pravý okraj:-0,1 em;) .initialn (pravý okraj:-0,15 em ;)

HTML kód, který obsahuje třídy CSS, které berou v úvahu vyrovnání písmen N a B, bude vypadat takto…

Počáteční písmeno, přičemž první písmeno je velké.
Při zalomení řádku nemá další řádek žádné počáteční omezení.

n Všimněte si ve zdrojovém kódu HTML, jak se první písmeno, nikoli velké písmeno v HTML, změní na počáteční velikost 3,6 em. Pěkné, co?

B u tvrdého návratu a začátku nového odstavce se vždy vytvoří další počáteční strop. Možná se ptáte sami sebe Jak to mám zaúčtovat? Mám mít na začátku úplně nového odstavce počáteční strop? No, mohl bys. Ale chcete, aby to tak vypadalo a musí to tak absolutně vypadat?

První velké písmeno odstavce se převede na písmeno.
První písmeno po zalomení řádku nebude velké.

Ó Všimněte si, že ve zdrojovém kódu HTML není první písmeno velké, ale je převedeno na znak 3,6em.

Ó I po vynuceném zalomení řádku se však na začátku každého nového odstavce vždy vytvoří písmeno. Můžete se sami sebe zeptat: Jak to mohu vzít v úvahu? Musím pro všechny tyto případy přidat písmena? No, můžeš. Ale je to nutné?

I s výhodami, které pseudoprvky poskytují, jsme museli přidat spoustu kódu, abychom definovali samostatné třídy, abychom zvládli problémy s vyrovnáním párů a paddingem. Tato metoda však převede první písmeno každého nového odstavce na velká písmena CSS. Pro někoho to nemusí být vhodné, protože nemusíte převádět první písmeno každého odstavce.

Kombinace pseudotříd a pseudoprvků k vytvoření chytrého rozvržení

Přidání pseudotřídy :first-child pomáhá vyřešit problém zbytečné konverze prvních písmen:

p ( velikost písma: 1,2 em; rodina písma: Georgia, "Times New Roman", Times, patka; výška řádku: 2 em; padding-bottom: 0,5 em;) p:první dítě::první-písmeno ( font-size: 3.6em; text-transform: velká písmena; font-family: "Monotype Bernard Condensed", patka; margin-right:0.03em;)

Kombinace tohoto kódu s HTML:

První písmeno, které je definováno jako první potomek, je jediné písmeno, které se v této metodě převede na zvednutou iniciálu.

Vzhledem k tomu, že se převádí pouze písmeno definované jako první potomek, všimněte si, že tento příklad se liší od předchozího bez prvního potomka. Navíc nepřevádíme první písmena po začátku odstavce a po vynuceném zalomení řádku. Vypadá to elegantněji, než jak vypadalo rozložení, když jsme převedli všechna první písmena odstavců.

Výhodou použití pseudotříd je schopnost zvládnout různé speciální případy. A co nevýhody? Existuje mnoho různých pseudotříd a dají se kombinovat tolika způsoby, až se vám z toho zatočí hlava. Například pseudotřídy :first-child a :first-of-type mohou poskytnout stejné výsledky. Pseudotřídu můžete také aplikovat nejen na odstavec, ale také na prvky