Dobrý deň, geekovia pri stavaní stránok. V dnešnej publikácii sa budeme zaoberať témou súvisiacou s návrhom textového obsahu. Preto sa naučíte, ako nastaviť veľké písmená v css - pomocou, zoznámite sa s niekoľkými možnosťami vytvorenia kvapky a samozrejme si môžete všetko vyskúšať v praxi. Prejdime teraz k zábavnej časti!
Transformujme text
Kaskádovými štýlmi môžete zmeniť prvý znak bloku aj celý text. Ukážem vám, ako môžete oboje zvládnuť. Všetky nástroje uvedené v tomto článku sú navyše podporované v troch úrovniach jazyka: css1, css2, css2.1 a css3.
Začnem zaujímavou vlastnosťou, ktorá upravuje celý textový obsah vo výbere. to transformácia textu.
Pomenovaný prvok môže prevádzať znaky na veľké, malé písmená a taktiež používať veľké písmená na každom prvom znake slova. O hodnotách v tabuľke som napísal viac.
Teraz, aby ste konsolidovali teoretický materiál, vezmite si príklad.
Pozor!
! Zajtra je zľava na všetky kozmetické výrobky!
Akcia platí vo všetkých pobočkách nachádzajúcich sa vo vašom meste.
Vytvorenie kapucne
Ak neviete, čo znamená výraz „cap cap“, potom je načase to zistiť, pretože to priamo súvisí s aktuálnou témou.
Drop cap (alebo niekedy hovoria iniciála) je prvé písmeno kapitoly, ktoré sa od ostatných líši veľkou veľkosťou, farbou a v niektorých prípadoch dokonca aj dizajnom písma. V živote možno takýto list nájsť v starých rukopisoch a knihách.
Existuje niekoľko spôsobov, ako vytvoriť iniciálu. Znak je často zvýraznený značkou značkovacieho jazyka a potom sú v štýloch, ktoré ho upravujú, predpísané určité vlastnosti. Je to dobrý spôsob, ale táto publikácia hovorí o mechanizmoch css (ktoré sú podľa mňa v tomto prípade oveľa logickejšie a pohodlnejšie na použitie).
Na vyriešenie problému môžete použiť nástroj ako napr.
V tomto prípade sa teda používa prvé písmeno. Rovnako ako všetky pseudoelementy je priradený k selektoru oddelenému dvojbodkami. Potom, podľa všetkých pravidiel štýlov, sú špecifikované vlastnosti. Môžete však použiť iba vlastnosti súvisiace s úpravou písem, výplne, farby, pozadia, okrajov a okrajov.
Navrhujem zvážiť konkrétny príklad. Pri implementácii prezentovaného malého programu som sa rozhodol urobiť nielen farebnú čiapočku, ale naplniť ju kvetmi. Na to musíte použiť niekoľko záludných trikov s nastavením priehľadnej farby písma a vyplnením písmena vybraným obrázkom.
Tento odsek obsahuje vetu s veľmi zaujímavým obsahom.
Pokračujme v zaujímavom príbehu v nasledujúcom odseku.
Výsledok vyzerá veľmi atraktívne a neobvykle, čo je perfektné riešenie pre.
Ako vidíte, táto téma je veľmi jednoduchá. Programový kód, ktorý som zadal, môžete ľahko použiť pre svoje webové zdroje, ktoré môžete upravovať a prispôsobovať svojmu štýlu.
Ak bol pre vás vyššie uvedený materiál užitočný, prihláste sa k odberu aktualizácií na mojom blogu a nezabudnite zdieľať získané znalosti (a samozrejme odkaz na môj blog) so svojimi priateľmi. Veľa štastia!
Zbohom!
S pozdravom Roman Chueshov
Veľké písmeno je podľa definície prvkom textu, ktorý má relatívne väčšiu veľkosť. Takmer vo všetkých jazykoch sa veta začína veľkým písmenom. A dizajn začiatku odseku s výrazným veľkým písmenom vám umožňuje štruktúrovať text a uľahčuje jeho čítanie. Pri vytváraní webovej stránky môže byť text napísaný v súlade s preferenciami autora a pravidlami ruského jazyka. Jeho návrh môže byť tiež „automatizovaný“ zadaním určitých „príkazov“ do súboru s príponou css - šablónou štýlov - alebo doplňte svoj súbor html sekciou štýlu. CSS sa zvyčajne študuje dodatočne s html, aby sa rýchlo zmenili niektoré dizajnové prvky v celom texte naraz.
To platí najmä vtedy, ak má stránka stovky stránok a zmeny na každej z nich sú časovo veľmi náročné.
Ak použijete css, veľké písmená na začiatku každého odseku môžu vyzerať špeciálne. Napríklad nasledujúci kód zadaný do html bez zátvoriek umožňuje textu, ozdobenému značkou „p“, urobiť veľké písmeno - prvé písmeno - väčšie - 220% štandardnej veľkosti, žlté - hodnota farby je žltou farbou a napíšte ju písmom odlišným od zvyšku textu - Gruzínsko verzus batangche.
(<) style(>)
p: prvé písmeno (rodina písma: Georgia; veľkosť písma: 220%; farba: žltá;)
(<)/style(>)
Krásne veľké písmená môžete získať, ak si vytvoríte vlastné písmo vo forme obrázkov - pre každé písmeno samostatný obrázok, napríklad v staroruskom alebo gotickom štýle. Môžu byť nakreslené v Potom môžete na požadované miesta namiesto veľkého písmena vložiť kód bez zátvoriek (<) img src=”ссылка на место, где лежит картинка”(>). Ďalšími atribútmi budú výška a šírka - šírka a výška obrázku, ktorú je možné nastaviť v pixeloch tak, aby harmonicky ladila so zvyškom textu. Príklad: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Zátvorky okolo< и >odstraňujeme.
Ak nemáte možnosť nakresliť abecedu sami, veľké písmeno je možné ozdobiť pomocou voľne dostupných písem na stránkach Google (časť Písma) alebo iných vyhľadávacích nástrojov a zdrojov. Na tento účel musí byť vyššie uvedený kód naformátovaný takto:
(<) style(>)
p (rodina písma: batangche; veľkosť písma: 93%;)
p: prvé písmeno (rodina písem: Kelly + Slab; veľkosť písma: 220%; farba: 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 vybrať si jedno alebo druhé a poskytuje pripravené odkazy na vloženie do formátu HTML alebo CSS. Upozorňujeme vás na skutočnosť, že je potrebné vybrať skupinu písem - latinskú alebo azbuku, pretože takmer všetky latinské písma nefungujú pre text v ruskom jazyku. V súčasnej dobe poskytuje vyhľadávací nástroj zadarmo asi 40 typov.
Veľké písmeno alebo jeho veľký náprotivok je možné štylizovať pomocou vlastnosti transformácie textu CSS. Ak v hárku štýlov nastavíte hodnotu transformácie textu: žiadna, text bude vyzerať tak, ako ho píšete. Ak chcete previesť všetky písmená na malé písmená, nastavte textovú transformáciu: hodnota malých písmen oddelená dvojbodkou a veľké písmená na veľké písmená. Ak nastavíte vlastnosť na transformáciu textu: veľké písmená, spôsobí to, že na začiatku každého slova bude veľké písmeno.
Umožňuje zmeniť veľkosť písmen v texte.
Štandardne je hodnota nastavená na hodnotu none, čo nemá žiadny vplyv na text. Prípad textu zostáva rovnaký. Hodnoty veľkých a malých písmen prevádzajú znaky na veľké a malé písmená. Ak zadáte hodnotu veľkých písmen, budú veľké písmená iba prvé znaky každého slova. Dedičnosť dedí hodnotu po rodičovi.
Príklad
h3 (transformácia textu: veľké písmená;). malé písmeno (transformácia textu: malé písmená;). kapitalizácia (transformácia textu: veľké písmená;)Toto je názov. Má vlastnosť transformácie textu nastavenú na veľké písmená. Všetky znaky budú napísané veľkými písmenami.
Vlastnosť transformácie textu bola na tento odsek použitá s malou hodnotou, čo znamená, že všetky písmená budú malé.
A tento posledný odsek má vlastnosť transformácie textu s použitou vlastnosťou CAPITALIZE. Prvé písmená každého slova budú veľké a iba to.