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

Mimochodem, WordPress má speciální plugin (wordpress.org/extend/plugins/drop-caps), který vám umožňuje automaticky vytvářet text vložený (a posunutý dolů) velká písmena. Úžasný! Co když však plugin nechcete používat (jsem si jist, že ne) a potřebujete pouze vytvořit drop cap na více příspěvcích a možná na konkrétním místě?

Dobrou zprávou je, že k vytváření velkých písmen nepotřebujete plugin, stačí vám malý css a tag span. 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é vybrat na základě vašeho návrhu a textu.

Rozpětí značky

Aby bylo možné styl použít na velké písmeno textu, musíte velké písmeno „zabalit“ do značky span a určit 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, okraji, okraji a odsazením. Další věc, kterou je třeba poznamenat, je, že pseudoprvek:první-písmeno 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 pro úpravu velkých písmen pomocí CSS.

Často, ve spěchu při přidávání materiálů na stránky nebo například při vytváření nového tématu na fóru, může uživatel začít psát větu (titul) s malým (malým) písmenem. To je do jisté míry chyba.

Ukážu několik možností, jak tento problém vyřešit: PHP a CSS jsou vhodnější pro již publikované materiály, kdy jQuery může situaci před publikací napravit.

První písmeno řetězce velké v PHP

V PHP existuje funkce nazvaná „ucfirst“, která pouze převede první znak řádku na velká písmena, ale její nevýhodou je, že nepracuje zcela korektně s azbukou.

K tomu si napíšeme vlastní malou funkci. Implementace by vypadala takto:

V této verzi obdržíme větu, která začíná velkým písmenem, což je ve skutečnosti to, co potřebujeme.

První velké písmeno řetězce v CSS

Tato metoda vizuálně (tj. návrhy se zobrazí tak, jak jsou ve zdrojovém kódu webu) také převede první znak na velká písmena.

Použití je následující:

první věta

druhá věta

třetí věta

čtvrtá věta

#content p:první-písmeno ( text-transform: velká písmena; )

Pomocí pseudoprvku „first-letter“ a vlastnosti „text-transform“ nastavíme design pro každé první písmeno odstavce.

První písmeno řetězce velké v jQuery

Jak jsem řekl dříve, tato metoda převodu je nejvhodnější pro materiály, které mají být teprve publikovány.

Vezmeme například textové pole (bude fungovat jako pole pro zadání názvu) a napíšeme pro něj malý skript, který při zadávání věty s malým písmenem z ní udělá velké:

$(document).ready(function() ( $(".content").on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(nový_text); )); ));

Skript funguje jak při psaní textu, tak při jeho pouhém vkládání. Nezapomeňte, že aby skripty na vašem webu fungovaly, musíte mít povolenou knihovnu jQuery.

CSS caps pomáhají rozbít monotónnost obecného designu, kde text vypadá stejně od začátku do konce.

Počáteční písmena tehdy a dnes

Kronikáři používali v ručně psaných rukopisech velká písmena, některé z nich 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ň. Na začátek textu byla umístěna ručně psaná i tištěná počáteční písmena. Často byly zdobeny ozdobným vzorem, který se nacházel kolem písmene.

Zvednutá a staž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ý typ se někdy nazývá protáhlý typ. 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 tělem obsahu 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í větší doladění. Bude pro vás snazší to pochopit, pokud nejprve pochopíte, jak se zachází s vyvýšenými postavami.

Použití tříd

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

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 zvýš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. Ve třídě CSS pod.myinitialcapsi je okraj vpravo nastaven na zápornou hodnotu, aby se zmenšila vzdálenost mezi I a n.

Myinitialcapsi (velikost písma:48px; rodina písem: Didot; margin-right:-1px;)

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

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 byly rozmazané. To je způsobeno patkami na koncích písmen. Než se tedy rozhodnete pro své konečné styly CSS, otestujte svůj web na různých zařízeních, abyste viděli, jak na nich vypadá text velkých písmen CSS.

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

Zvětšit můžete 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;)

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

Musíte být velmi opatrní při nastavení každého z velkých písmen CSS spolu s uvozovkami tak, aby jejich vyrovnání párů a zarovnání odpovídalo okolnímu znač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 jsou C, G, O a Q. Tento příklad používá velikosti písma 20, 30 a 48. Velikosti však budete muset vybrat na základě konkrétních písem, která si vyberete. Stejně jako velikosti a rozlišení obrazovek, na kterých se bude web zobrazovat.

Pseudoprvky a pseudotřídy

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

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; okraj-pravý:0,03em;).initialb (margin-right:-0,1em;).initialn (margin-right:-0,15 em ;)

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

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

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?

Ale s tvrdým návratem a zahájením nového odstavce se vždy vytvoří další počáteční strop. Možná se sami sebe ptáte: Jak to mám vysvětlit? 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 převedeno na velké.

oVš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. Možná se ptáte sami sebe: Jak to mám vzít v úvahu? Musím pro všechny tyto případy přidat písmena? No, můžeš. Ale je to nutné?

I přes výhody, které pseudoprvky poskytují, jsme museli přidat spoustu kódu, abychom mohli definovat 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ísmeno CSS. Pro někoho to nemusí být vhodné, protože nepotřebuje transformovat 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; odsazení-dolní část: 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 touto metodou 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 nebo . Například, jak je znázorněno na příkladu vyvýšeného písma níže ve fontu Didot. Všimněte si, jak byl atribut margin přidán napravo od A. Jinak by se „slepil“ s písmenem s na začátku sekce:

sekce ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) section>p:first-child:first-letter ( font-size: 4em; text-transform: velká písmena; font-family:Didot, serif; margin-right:5px;)

A spolu s HTML:

Na začátku sekce je pro první písmeno specifikována zvýšená spouštěcí čepička.

A nový odstavec...

Pokud máte chuť experimentovat, můžete kromě :first-child a :first-of-type prozkoumat různé metody. Například :nth-of-type nebo :nth-of-child, abyste viděli, jak lze tyto nebo jiné typy pseudotříd použít pro text s velkými písmeny CSS. Ať už se budete řídit principy nastíněnými v tomto článku nebo začnete hlouběji, jakmile se naučíte pracovat s CSS pseudotřídami first-child , :first-of-type a :first-letter , budete moci použít je správně na prvky HTML.

V html hraje velikost písma důležitou roli. Umožňuje upozornit uživatele na důležité informace zveřejněné na stránce webu. I když není důležitá jen velikost písmen, ale také jejich barva, tloušťka a dokonce i rodina.

Tagy a atributy při práci s html fonty

Hypertextový jazyk má širokou škálu nástrojů pro práci s fonty. Koneckonců, formátování textu je hlavním úkolem html.

Důvodem vzniku jazyka HTML byl problém se zobrazováním pravidel formátování textu v prohlížečích.

Podívejme se na značky, které se používají pro práci s fonty v HTML a jejich atributy. Tím hlavním je tag. Pomocí hodnot jeho atributů můžete nastavit několik charakteristik písma:

• barva – nastavuje barvu textu;
• size – velikost písma v konvenčních jednotkách.

Jsou podporovány kladné hodnoty atributů od 1 do 7.

• face – používá se k nastavení rodiny textových písem, které budou použity uvnitř . Je podporováno několik hodnot oddělených čárkami.

Formátuje se pouze text, který se nachází mezi částmi značky spárovaného písma. Zbytek textu je zobrazen standardním výchozím písmem.

Také v html existuje řada párových značek, které určují pouze jedno pravidlo formátování. Tyto zahrnují:

• — nastaví tučné písmo v html. Značka akce je podobná předchozí;
• — velikost je větší než výchozí;
• — menší velikost písma;
• — kurzíva (kurzíva). Podobná značka ;
• — text s podtržením;
• - přeškrtnuté;
• — zobrazit text pouze malými písmeny;
• - velkými písmeny.

Prostý text

Náhled

Náhled

Více než obvykle

Méně než obvykle

Kurzíva

Kurzíva

S podtržítkem

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ísem:

1) font-family – vlastnost nastavuje rodinu písem. Je možné uvést více hodnot.
Ke změně písma v html na další hodnotu dojde, pokud předchozí rodina není nainstalována 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 | význam | zájem | zdědit

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

• v pixelech;
• V absolutní hodnotě (xx-small, x-small, small, medium, large);
• V procentech;
• V bodech (pt).

Velikost písma: 7

Velikost písma: 24px

Velikost písma: x-large

Velikost písma: 200 %

Velikost písma: 24pt

3) font-style – nastavuje styl psaní 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 šikmo vpravo;
• 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í | malí kapři | 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 textu (sytost). 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ě syté oproti normálnímu;
• normální – normální pravopis;
• 100-900 – nastavuje tloušťku písma v číselném ekvivalentu.

váha písma: tučné

váha písma: tučnější

váha písma:lehčí

váha písma: normální

váha písma: 900

váha písma: 100

Vlastnost písma HTML a barva písma

Písmo je další vlastnost kontejneru. Uvnitř sebe kombinovalo hodnoty několika vlastností určených pro změnu písem. syntaxe písma:

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

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

• titulek – pro tlačítka;
• ikona – pro ikony;
• menu - menu;
• message-box – pro dialogová okna;
• malé titulky – pro malé ovládací prvky;
• stavový řádek – 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, buď pomocí klíčového slova, nebo ve formátu rgb. A také v hexadecimálním kódu.

Zdravím čtenáře tohoto blogu. Dnes budu mluvit o tom, jak můžete udělat všechna velká písmena pomocí CSS. Samozřejmě k tomu můžete zapnout Caps Lock a napsat požadovaný text, ale jedná se o poměrně primitivní metodu. Co když ale potřebujete zvýraznit samostatný odstavec v hotovém článku?

Všechna písmena velká v css

K tomu existuje vlastnost text-transform, která, jak už asi tušíte, transformuje text. Má následující hodnoty:

• malá písmena – veškerý text se zobrazuje malými písmeny
• velká písmena – všechna slova jsou zobrazena velkými písmeny (co potřebujeme)
• velká písmena – první písmeno každého slova je velké

To je v podstatě vše, co potřebujete vědět. Zbývá jen vymyslet, jak se k požadovanému prvku dostat. Představme si tento příklad: musíte udělat pátý odstavec v článku pouze velkými písmeny. A jak to lze implementovat?

Jak dosáhnout požadovaného prvku?

Jak víte, odstavec se vytváří pomocí párového html tagu, jehož celý obsah se stává odstavcem. Zbývá pouze definovat pro něj novou třídu stylu:

Nyní máme možnost přistupovat k tomuto konkrétnímu odstavci prostřednictvím jazyka CSS, aniž bychom ovlivnili zbytek. Můžete to udělat takto:

Velké písmeno(
Text-transform: velká písmena;
}

Tato metoda je vhodná, když potřebujete zvýraznit fragment v konkrétním článku. Co kdyby všechny stránky musely mít určitý text velkými písmeny. V tomto případě je lepší umístit blok do souboru šablony, abyste jej nezapisovali pokaždé.

Nebo možná potřebujete zvýraznit druhý odstavec v každém článku pomocí CSS velkými písmeny. Pak se vám bude hodit jiná možnost. Najděte blok, kde se článek zobrazuje, a otevřete druhý odstavec pomocí pseudotřídy n-tého potomka. V tomto příkladu má náš blok s článkem třídu article.

Článek p:n-té dítě(2)(
Transformace textu: velká písmena
}

Jak vidíte, pro každý konkrétní případ existuje jiné řešení. Nejdůležitější je zapamatovat si vlastnost text-transform, která mění velikost písmen.

Obecně se nedoporučuje zobrazovat text tímto způsobem, protože to velmi zhoršuje jeho vnímání, ale některé zvláště důležité fragmenty mohou být zvýrazněny.

Dnes jsme se podívali na vlastnost text-transform. Chcete-li dostávat nové články, přihlaste se k odběru blogu.