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.

Hezký den, milovníci budování stránek. Dnešní publikace se bude zabývat tématem navrhování textového obsahu. Naučíte se proto nastavovat velká písmena pomocí CSS nástrojů, seznámíte se s několika možnostmi tvorby drop capu a samozřejmě si vše budete moci vyzkoušet v praxi. No a teď přejděme k zábavnější části!

Pojďme transformovat text

Díky kaskádovým stylům můžete změnit jak první znak bloku, tak celý text. Řeknu vám, jak můžete udělat obojí. Všechny nástroje zmíněné v tomto článku jsou navíc podporovány ve třech jazykových úrovních: css1, css2, css2.1 a css3.

Začnu zajímavou vlastností, která upravuje veškerý textový obsah ve vybraném souboru . Tento textová transformace.

Pojmenovaný prvek může převádět znaky na velká, malá písmena a také nastavit každý první znak slova na velké písmeno. Více jsem psal o hodnotách v tabulce.

Nyní, abyste posílili teoretický materiál, podívejte se na příklad.

Pozornost!

!Zítra je sleva na všechny kosmetické produkty!

Akce platí ve všech pobočkách ve vašem městě.

Vytvoření víčka

Pokud nevíte, co znamená pojem „drop cap“, pak je čas to zjistit, protože přímo souvisí s aktuálním tématem.

Velké písmeno (nebo někdy také iniciála) je první písmeno kapitoly, která se od ostatních liší velkou velikostí, barvou a v některých případech i provedením písma. V reálném životě lze příklad takového dopisu nalézt ve starých rukopisech a knihách.

Existuje několik způsobů, jak vytvořit iniciály. Symbol je často zvýrazněn značkou značkovacího jazyka a pak jsou určité vlastnosti předepsány ve stylech, které jej upravují. To je 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 vyřešení tohoto problému můžete použít nástroj jako např.

Takže v tomto případě použijeme:first-letter. Stejně jako všechny pseudoprvky je přiřazen k selektoru pomocí dvojtečky. Po všech pravidlech stylů jsou uvedeny vlastnosti. Můžete však použít pouze vlastnosti, které se týkají úprav písem, odsazení, barvy, pozadí, okrajů a ohraničení.

Navrhuji zvážit konkrétní příklad. Při realizaci prezentovaného malého programu jsem se rozhodl udělat nejen barevné počáteční písmeno, ale vyplnit jej květinami. K tomu je potřeba použít pár záludných triků nastavením barvy písma na průhlednou a vyplněním písmene vybraným obrázkem.

Tento odstavec obsahuje větu s velmi zajímavým obsahem.

Pokračujme v zajímavém příběhu v dalším odstavci.

Výsledný výsledek vypadá velmi atraktivně a neobvykle, což je ideální řešení pro.

Jak vidíte, toto téma je velmi jednoduché. Programový kód, který jsem vám poskytl, můžete snadno použít pro vaše webové zdroje a upravit jej a přizpůsobit tak, aby vyhovoval vašemu stylu.

Pokud pro vás byl předložený materiál užitečný, přihlaste se k odběru aktualizací mého blogu a nezapomeňte se o získané znalosti (a samozřejmě odkaz na můj blog) podělit se svými přáteli. Hodně štěstí!

Ahoj!

S pozdravem Roman Chueshov

Umožňuje změnit velikost písmen v textu.

Výchozí hodnota je nastavena na 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 velká písmena , budou velká pouze první znaky každého slova. Dědit zdědí hodnotu rodiče.

Příklad

Toto je název. Je na něj použita vlastnost text-transform s hodnotou velká. Všechny znaky budou velká.

Na tento odstavec se použije vlastnost transformace textu s hodnotou malými písmeny, což znamená, že všechna písmena budou malá.

A na tento poslední odstavec je aplikována vlastnost text-transform s vlastností CAPITALIZE. První písmena každého slova budou velká a pouze ta.

Výsledek

Nicméně, ne všechno tak jednoduché. Existují určité nuance. Když se podíváte na druhý odstavec výše uvedeného příkladu, všimnete si, že slovo capitalize , přestože má vlastnost text-transform nastavenou na velká písmena aplikovanou na odstavec, je celé zobrazeno velkými písmeny, což odpovídá původnímu textu. To je vysvětleno skutečností, že se zadanou hodnotou velkých písmen se kontrolují pouze první písmena slov a ostatní zůstávají nezměněny bez ohledu na jejich počáteční stav.
Přes svou zdánlivou jednoduchost může být vlastnost text-transform velmi užitečná. Chcete-li například převést text všech nadpisů H1 na vašem webu na velká písmena, stačí do šablony stylů přidat jednu vlastnost

H1 (transformace textu: velká písmena;)

a problém bude vyřešen. A nebudete muset ručně měnit všechna záhlaví, kterých může být velmi, velmi mnoho.

Řídí, zda se text prvku převede na velká nebo velká písmena. Pokud je hodnota jiná než none , velikost písmen ve zdrojovém textu se změní.

stručné informace

Označení

Hodnoty

velká písmena První znak každého slova ve větě bude velký. Zbývající symboly nemění svůj vzhled. malá písmena Všechny textové znaky budou malá (malá). velká písmena Všechny textové znaky budou velká (velká). none Nemění velikost písmen.

Pískoviště

Medvídek Pú se vždy nebránil malému občerstvení, zvláště v jedenáct dopoledne, protože v té době snídaně dávno končila a oběd ještě nezačal. A samozřejmě měl strašnou radost, když viděl, že Králík vyndává hrnky a talíře.

div (text-transform: velká písmena; )

Příklad

Kulturní památka středověku

Amazonská nížina je nemírná v malé přepravě koček a psů a Hajos Bahia je proslulá svými červenými víny.

Výsledek tohoto příkladu je znázorněn na Obr. 1.

Rýže. 1. Použití vlastnosti text-transform

Objektový model

Objekt.style.textTransform

Specifikace

Každá specifikace prochází několika fázemi schvalování.

• Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
• Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
• Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
• Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
• Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
• Koncept ( Návrh specifikace) - první verze návrhu normy.

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.