HTML nagybetűk és CSS betűköz. Nagybetűk készítése css-ben Egy css tulajdonság, amely lehetővé teszi a betűk nagybetűvé tételét

Azt szabályozza, hogy az elem szövege nagybetűs vagy nagybetűs karakterré legyen-e konvertálva. Ha az érték más, mint a none , regisztráljon forrásszöveg meg lesz változtatva.

Rövid információJegyzetek Leírás Példa

	Az érték típusát jelzi.
A && B	Az értékeket a megadott sorrendben kell kiadni.	&&
A \| B	Azt jelzi, hogy csak egy értéket kell kiválasztania a javasolt értékek közül (A vagy B).	normál \| kis sapkák
A \|\| B	Minden érték önállóan vagy másokkal együtt, bármilyen sorrendben használható.	szélesség \|\| számol
	Csoportok értékeit.	[ termés \|\| kereszt ]
*	Ismételje meg nulla vagy többször.	[,]*
+	Ismételje meg egyszer vagy többször.	+
?	A megadott típus, szó vagy csoport nem kötelező.	betét?
(A, B)	Ismételje meg legalább az A-t, de legfeljebb B-szer.	{1,4}
#	Ismételje meg egy vagy több alkalommal, vesszővel elválasztva.	#

× Értékek

nagybetűs A mondat minden szavának első karaktere nagybetűs lesz. A fennmaradó szimbólumok nem változtatják meg megjelenésüket. kisbetűs Minden szövegkarakter kisbetűvé (kisbetűvé) válik. nagybetűs Minden szövegkarakter nagybetűvé (nagybetűvé) válik. none Nem változtatja meg a karakterek kis- és nagybetűjét.

Sandbox

Micimackó mindig nem idegenkedett egy kis felfrissüléstől, főleg délelőtt tizenegykor, mert akkor már rég vége volt a reggelinek, és még nem kezdődött el az ebéd. És persze rettenetesen boldog volt, amikor látta, hogy a Nyúl csészéket és tányérokat szed ki.

div (szövegátalakítás: nagybetűvel; )

Példa

text-transform h1 ( szöveg-transzformáció: nagybetűs; /* Nagybetűk */ ) p ( szöveg-átalakítás: nagybetűvel; /* Minden szó nagybetűvel kezdődik */ ) Középkori kulturális emlék

Az amazóniai síkság mértéktelen a macskák és kutyák kis szállításában, a Hajos Bahia pedig vörösborairól híres.

Ennek a példának az eredménye az ábrán látható. 1.

Rizs. 1. A text-transform tulajdonság alkalmazása

Objektummodell

Egy tárgy.style.textTransform

Leírás

Minden specifikáció több jóváhagyási szakaszon megy keresztül.

Ajánlás – A specifikációt a W3C hagyta jóvá, és szabványként ajánlott.
Jelölt ajánlás - A szabványért felelős csoport meg van győződve arról, hogy az megfelel a céljainak, de a szabvány bevezetéséhez szüksége van a fejlesztő közösség segítségére.
Javasolt ajánlás – Ebben a szakaszban a dokumentumot benyújtják a W3C Tanácsadó Testületéhez végső jóváhagyás céljából.
Munkatervezet – A tervezet kiforrottabb változata, amelyet megvitattak és módosítottak közösségi felülvizsgálat céljából.
Szerkesztői tervezet (Szerkesztői tervezet) - a szabvány vázlatos változata, miután a projektszerkesztők módosításokat végeztek.
Draft (Draft specification) - a szabvány első vázlatos változata.

Gyakran siet, amikor anyagokat ad hozzá egy webhelyhez, vagy például létrehoz új téma a fórumon a felhasználó elkezdheti írni a mondatot (címet) egy kis (kisbetűs) betűvel. Ez bizonyos mértékig hiba.

A probléma megoldására több lehetőséget is bemutatok: a PHP és a CSS jobban megfelel a már publikált anyagoknak, amikor a jQuery már publikálás előtt korrigálni tudja a helyzetet.

A karakterlánc első betűje nagybetűs PHP-ben

A PHP-ben van egy „ucfirst” nevű függvény, amely csak a sor első karakterét alakítja át nagybetűssé, de hátránya, hogy cirill betűvel nem működik teljesen megfelelően.

Ehhez megírjuk a saját kis függvényünket. A megvalósítás így nézne ki:

Ebben a verzióban egy nagybetűvel kezdődő mondatot kapunk, amelyre valójában szükségünk van.

Egy karakterlánc első nagybetűje a CSS-ben

Ez a módszer vizuális (azaz in forráskód webhelyjavaslatok jelennek meg) az első karaktert is nagybetűvé alakítja.

A felhasználás a következő:

első mondat

második mondat

harmadik mondat

negyedik mondat

#content p:first-letter ( szövegátalakítás: nagybetűs; )

A „first-letter” pszeudoelem és a „text-transform” tulajdonság segítségével beállítjuk a tervezést a bekezdés minden első betűjéhez.

Egy karakterlánc első betűje nagybetűvel a jQuery-ben

Ahogy korábban mondtam, ez az átalakítási módszer a még publikálásra váró anyagokhoz a legalkalmasabb.

Például veszünk egy szövegmezőt (címbeviteli mezőként működik), és írunk hozzá egy kis szkriptet, amely kisbetűs mondat beírásakor nagybetűssé teszi:

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

A szkript szöveg írásakor és egyszerű beszúrásakor is működik. Ne felejtse el, hogy ahhoz, hogy a szkriptek működjenek a webhelyen, engedélyeznie kell a jQuery könyvtárat.

Drop cap (a szövegbe ágyazott leejtősapka) a bekezdés első betűje, nagyobb, mint a többi, és úgy van elhelyezve, hogy a teteje a bekezdés első sorának szintjén legyen. A képen láthat egy példát a szövegbe ágyazott kupakra.

A WordPress egyébként rendelkezik egy speciális bővítménnyel (wordpress.org/extend/plugins/drop-caps), amely lehetővé teszi a beágyazott (és lefelé tolható) szöveg automatikus létrehozását. nagybetűvel . Elképesztő! De mi van akkor, ha nem akarsz bővítményt használni (biztos vagyok benne, hogy nem), és csak egy drop cap-ot kell létrehoznod több bejegyzéshez, esetleg egy adott helyen?

Jó hírek: A nagybetűk létrehozásához nem kell plugin, csak egy kis css és egy span tag. Nyissa meg a css fájlt, és adja hozzá a következő kódot:

Span.dropcaps ( betűcsalád: Georgia, serif; szín: #ccc; betűméret: 46 képpont; lebegés: bal; betűsúly: 400; vonalmagasság: 1 em; margó-alsó: -0,4 em; margó-jobb : 0,09 em; pozíció: relatív; )

Valami ilyesmi. Természetesen olyan stílusra lesz szüksége, amely illeszkedik a tervezéshez és a szöveghez. Például a tulajdonságértékeket: font-size , margók és sormagasság a tervezés és a szöveg alapján kell kiválasztani.

Tag Span

Ahhoz, hogy a stílus a szöveg nagybetűjére vonatkozzon, a nagybetűt egy span címkébe kell „csomagolni”, és meg kell adni a megfelelő osztályt.

Pszeudo-elem:első betű

A szöveg első karakterét a pszeudoelem használatával is stílusozhatja: first-letter . A:first-letter pszeudoelemre azonban korlátozott számú tulajdonság alkalmazható: ezek a betűtípushoz, színhez, háttérhez, szegélyekhez, margókhoz és kitöltéshez kapcsolódó tulajdonságok. Egy másik dolog, amit meg kell jegyezni, hogy a pszeudo-element:first-letter nem fog működni a régebbi böngészőkben.

P:first-letter (betűcsalád:Georgia, serif; szín: #cc; betűméret: 46px; float: balra; betűsúly: 400; sormagasság: 1em; margó-alsó: -0,4em; margó -jobbra: 0,09 em; pozíció: relatív; )

Íme néhány módszer a nagybetűk CSS használatával történő szerkesztésére.

A nagybetű a definíció szerint a szöveg olyan eleme, amelynek mérete viszonylag megnövelt, szinte minden nyelvben a mondat nagybetűvel kezdődik. A bekezdés elejének jól látható nagybetűvel való megtervezése pedig lehetővé teszi a szöveg strukturálását, és megkönnyíti az észlelést. Amikor egy internetes oldalt terveznek, a szöveg a szerző preferenciáinak és az orosz nyelv szabályainak megfelelően írható. Úgy is „automatizálhatja” a tervezését, hogy bizonyos „parancsokat” ír be egy css kiterjesztésű fájlba - stíluslapba -, vagy kiegészítheti a html fájl stílus szakasz. A CSS-t általában a html mellett tanulmányozzák annak érdekében, hogy gyorsan és egyszerre módosítsanak egyes tervezési elemeket a szövegben.

Ez különösen igaz, ha az oldal több száz oldalt tartalmaz, és mindegyik módosítása nagyon munkaigényes folyamat.

Ha css-t alkalmaz, az egyes bekezdések elején lévő nagybetűk különlegesnek tűnhetnek. Például az alábbi, html-ben zárójelek nélkül beírt kód lehetővé teszi a „p” címkével formázott szöveget, hogy a nagybetű - első betű - nagyobb legyen - a normál méret 220%-a, sárga - a színérték sárga, ill. írja le a szöveg többi részétől eltérő betűtípussal – Georgia vs. Batangche.

()

p: első betű (betűcsalád: Georgia; betűméret: 220%; szín: sárga;)

()

Gyönyörű nagybetűket kaphat, ha saját betűtípust hoz létre képek formájában - minden betűhöz külön kép tartozik, például régi orosz vagy gótikus stílusban. Berajzolhatók Ezután a szükséges helyekre a nagybetű helyére zárójel () nélkül beírhatjuk a kódot. További attribútumok lesznek a magasság és a szélesség – a kép szélessége és magassága, amely pixelekben állítható be a szöveg többi részével való harmonikus kombináció érdekében. Példa: (). Zárójelek körül< и >eltávolítjuk.

Ha nincs lehetősége saját maga megrajzolni az ábécét, akkor a nagybetűket megtervezheti a Google-n (Betűtípusok szakasz) vagy más keresőkben és forrásokban szabadon elérhető betűtípusokkal. Ehhez a fenti kódot a következőképpen kell formázni:

()

p (betűcsalád: batangche; betűméret: 93%;)

p: első betű (betűcsalád: Kelly+Slab; betűméret: 220%; szín: kék;)

()

().

A Google szolgáltatás lehetővé teszi az egyik vagy a másik kiválasztását, és kész hivatkozásokat biztosít a html-be vagy css-be történő beszúráshoz. Felhívjuk a figyelmet, hogy szükséges betűcsoportot választani - latin vagy cirill, mert... Szinte minden latin betűtípus nem működik az orosz nyelvű szöveg formázásakor. Tovább Ebben a pillanatban A kereső mintegy 40 típust biztosít ingyenesen.

A nagybetűk vagy a nagy antipódjai stílusozhatók a CSS szövegtranszformációs tulajdonsággal. Ha a stíluslapban beállítja a text transform: none értéket, akkor a szöveg úgy fog kinézni, ahogyan írod. Az összes betű kisbetűssé alakításához be kell állítania a szövegtranszformáció értéket: kisbetű, kettősponttal elválasztva, nagybetű esetén pedig nagybetű. Ha a tulajdonságot szövegátalakításra állítja: nagybetűs írás, akkor minden szónak nagybetűje lesz az elején.

Sziasztok a blog olvasói. Ma arról fogok beszélni, hogyan lehet csupa nagybetűt írni CSS használatával. Természetesen ehhez bekapcsolhatja a Caps Lock-ot és beírhatja a kívánt szöveget, de ez egy meglehetősen primitív módszer. De mi van akkor, ha egy kész cikkben külön bekezdést kell kiemelni?

Minden betű nagybetűvé tétele css-ben

Erre van egy text-transform tulajdonság, ami, ahogy sejthető volt, átalakítja a szöveget. A következő értékekkel rendelkezik:

kisbetűk – minden szöveg kisbetűvel jelenik meg
nagybetűs – minden szó nagybetűvel jelenik meg (amire szükségünk van)
nagybetűvel – minden szó első betűje nagybetűs

Lényegében csak ennyit kell tudnod. Nincs más hátra, mint kitalálni, hogyan lehet elérni a kívánt elemet. Képzeljük el ezt a példát: egy cikkben az ötödik bekezdést csupa nagybetűvel kell írni. És hogyan lehet ezt megvalósítani?

Hogyan lehet elérni a kívánt elemet?

Mint tudod, egy bekezdés a használatával jön létre párosított html tag, amelynek teljes tartalma bekezdéssé válik. Már csak egy új stílusosztályt kell meghatározni hozzá:

Most lehetőségünk van hozzáférni ehhez a konkrét bekezdéshez a CSS nyelven keresztül anélkül, hogy a többit befolyásolnánk. Ezt így teheti meg:

Nagybetű(
Szövegátalakítás: nagybetűk;
}

Ez a módszer akkor megfelelő, ha egy adott cikkben egy töredéket kell kiemelni. Mi van akkor, ha minden oldalon nagybetűvel kell szerepelnie bizonyos szövegnek. Ebben az esetben jobb, ha a blokkot egy sablonfájlba helyezi, hogy ne írja ki minden alkalommal.

Vagy talán ki kell emelnie minden cikk második bekezdését css használatával nagybetűvel. Akkor egy másik lehetőség megfelelő lesz. Keresse meg azt a blokkot, ahol a cikk megjelenik, és nyissa meg a második bekezdést az n-edik gyermek pszeudoosztály használatával. BAN BEN ebben a példában Cikkblokkunk tartalmazza a cikkosztályt.

cikk p:n-edik gyermek(2)(
Szövegátalakítás: nagybetűk
}

Amint látja, minden konkrét esetre más megoldás létezik. A legfontosabb dolog az, hogy emlékezzünk a text-transform tulajdonságra, amely megváltoztatja a betűk kis- és nagybetűit.

Szöveget általában nem javasolt így megjeleníteni, mert az erősen rontja annak érzékelését, de néhány különösen fontos töredék kiemelhető.

Ma megnéztük a text-transform tulajdonságot. Iratkozzon fel a blogra, hogy új cikkeket kapjon.