Hezký den, geekové stavění stránek. V dnešní publikaci se budeme zabývat tématem souvisejícím s návrhem textového obsahu. Proto se naučíte, jak nastavit velká písmena v css - prostředky, seznámíte se s několika možnostmi vytváření drop capu a vše si samozřejmě můžete vyzkoušet v praxi. Pojďme nyní k zábavné části!
Pojďme transformovat text
Pomocí kaskádových stylů můžete změnit jak první znak bloku, tak celý text. Ukážu vám, jak můžete obojí. Všechny nástroje uvedené v tomto článku jsou navíc podporovány ve třech úrovních jazyka: css1, css2, css2.1 a css3.
Začnu zajímavou vlastností, která upravuje veškerý textový obsah ve výběru. to textová transformace.
Pojmenovaný prvek dokáže převádět znaky na velká, malá a také na velká písmena každého prvního znaku slova. Více jsem napsal o hodnotách v tabulce.
Chcete -li konsolidovat teoretický materiál, vezměte si příklad.
Pozornost!
! Zítra je sleva na všechny kosmetické výrobky!
Akce platí ve všech pobočkách ve vašem městě.
Vytvoření kapacího čepice
Pokud nevíte, co znamená výraz „drop cap“, pak je na čase to zjistit, protože to přímo souvisí s aktuálním tématem.
Drop cap (nebo někdy říkají iniciála) je první písmeno kapitoly, které se od zbytku liší velkou velikostí, barvou a v některých případech i designem písma. V životě lze takový dopis najít ve starých rukopisech a knihách.
Existuje několik způsobů, jak vytvořit iniciálu. Často je znak zvýrazněn značkou značkovacího jazyka a poté jsou ve stylech, které jej upravují, předepsány určité vlastnosti. Je to dobrý způsob, ale tato publikace hovoří o mechanismech css (které jsou podle mého názoru v tomto případě mnohem logičtější a pohodlnější k použití).
K vyřešení problému můžete použít nástroj jako např.
V tomto případě tedy platí: první písmeno. Stejně jako všechny pseudoelementy je přiřazen k voliči, oddělený dvojtečkami. Poté, podle všech pravidel stylů, jsou zadány vlastnosti. Můžete však použít pouze vlastnosti související s úpravou písem, odsazení, barvy, pozadí, okrajů a okrajů.
Navrhuji zvážit konkrétní příklad. Při implementaci představeného malého programu jsem se rozhodl udělat nejen barevnou kapuci, ale naplnit ji květinami. Chcete -li to provést, musíte použít několik záludných triků s nastavením průhledné barvy písma a vyplněním písmene vybraným obrázkem.
Tento odstavec obsahuje větu s velmi zajímavým obsahem.
Pokračujme zajímavým příběhem v dalším odstavci.
Výsledek vypadá velmi atraktivně a neobvykle, což je perfektní řešení.
Jak vidíte, toto téma je velmi jednoduché. Programový kód, který jsem zadal, můžete snadno použít pro své webové zdroje, upravovat a přizpůsobovat svému stylu.
Pokud vám byl výše uvedený materiál užitečný, přihlaste se k odběru aktualizací na mém blogu a nezapomeňte sdílet získané znalosti (a samozřejmě odkaz na můj blog) se svými přáteli. Hodně štěstí!
Ahoj!
S pozdravem, Roman Chueshov
Velké písmeno je podle definice prvek textu, který má relativně větší velikost. Téměř ve všech jazycích začíná věta velkým písmenem. A design začátku odstavce s výrazným velkým písmenem vám umožňuje strukturovat text a usnadňuje jeho čtení. Při vytváření webové stránky může být text napsán v souladu s preferencemi autora a pravidly ruského jazyka. Jeho návrh lze také „zautomatizovat“ zadáním určitých „příkazů“ do souboru s příponou css - šablonou stylů - nebo doplnit váš html soubor sekcí stylů. CSS se obvykle studuje dodatečně s html, aby bylo možné rychle změnit některé prvky návrhu v celém textu najednou.
To platí zejména v případě, že web má stovky stránek a provádění změn na každé z nich je časově velmi náročný proces.
Pokud použijete css, velká písmena na začátku každého odstavce mohou vypadat zvláštně. Například níže uvedený kód zadaný do html bez závorek umožňuje textu, ozdobenému značkou „p“, aby velké písmeno - první písmeno - bylo větší - 220% standardní velikosti, žluté - hodnota barvy je žlutá a napište ji písmem odlišným od zbytku textu - Georgia versus batangche.
(<) style(>)
p: první písmeno (rodina písem: Georgia; velikost písma: 220%; barva: žlutá;)
(<)/style(>)
Krásná velká písmena můžete získat, pokud si vytvoříte vlastní písmo ve formě obrázků - pro každé písmeno samostatný obrázek, například ve staroruském nebo gotickém stylu. Lze je nakreslit do Poté můžete na požadovaná místa místo velkého písmene vložit kód bez závorek (<) img src=”ссылка на место, где лежит картинка”(>). Dalšími atributy budou výška a šířka - šířka a výška obrázku, které lze nastavit v pixelech tak, aby harmonicky splynuly se zbytkem textu. Příklad: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Závorky kolem< и >odstraníme.
Pokud nemáte možnost nakreslit abecedu sami, pak velké písmeno lze ozdobit pomocí písem volně dostupných na Googlu (sekce Písma) nebo jiných vyhledávačů a zdrojů. K tomu musí být výše uvedený kód naformátován následovně:
(<) style(>)
p (rodina písem: batangche; velikost písma: 93%;)
p: první písmeno (rodina písem: Kelly + Slab; velikost písma: 220%; barva: modrá;)
(<)/style(>)
(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).
Služba Google vám umožňuje vybrat si jedno nebo druhé a poskytuje hotové odkazy pro vložení do html nebo css. Upozorňujeme vás na skutečnost, že je nutné vybrat skupinu písem - latinku nebo azbuku, protože téměř všechna latinská písma nefungují pro text v ruském jazyce. V tuto chvíli poskytuje vyhledávač zdarma asi 40 typů.
Velké písmeno nebo jeho velký protějšek lze stylizovat pomocí vlastnosti transformace textu CSS. Pokud v šabloně stylů nastavíte hodnotu transformace textu: žádná, bude text vypadat při psaní. Chcete -li převést všechna písmena na malá písmena, nastavte textovou transformaci: hodnota malých písmen oddělená dvojtečkou a velká písmena na velká písmena. Nastavením vlastnosti na transformaci textu: velká písmena to udělá tak, že na začátku každého slova je velké písmeno.
Umožňuje změnit velká a malá písmena textu.
Ve výchozím nastavení je hodnota nastavena na hodnotu none, což nemá žádný vliv na text. Případ textu zůstává stejný. Hodnoty velkých a malých písmen převádějí znaky na velká a malá písmena. Pokud zadáte hodnotu velkých písmen, budou velká písmena pouze první znaky každého slova. Zdědit dědí hodnotu z nadřazené položky.
Příklad
h3 (transformace textu: velká písmena;). malá písmena (transformace textu: malá písmena;). kapitalizace (transformace textu: velká písmena;)Toto je název. Má vlastnost transformace textu nastavenou na velká písmena. Všechny znaky budou velká písmena.
Na tento odstavec byla použita vlastnost Transformace textu s malou hodnotou, což znamená, že všechna písmena budou malá.
A tento poslední odstavec má vlastnost transformace textu s vlastností CAPITALIZE. První písmena každého slova budou velká a pouze to.