A nagybetű definíció szerint egy viszonylag nagyított szövegelem. Szinte minden nyelv nagybetűvel kezdi a mondatot. A bekezdés elejének jól látható nagybetűs kialakítása pedig lehetővé teszi a szöveg strukturálását és megkönnyíti annak érzékelését. A weboldal megtervezésekor a szöveg a szerző preferenciáinak és az orosz nyelv szabályainak megfelelően írható. Ezenkívül a tervezése "automatizálható" bizonyos "parancsok" beírásával 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-el kiegészítve tanulmányozzák annak érdekében, hogy a teljes szövegben egyszerre gyorsan megváltoztasson néhány tervezési elemet.
Ez különösen igaz, ha a webhely több száz oldalt tartalmaz, és mindegyik módosítása nagyon időigényes folyamat.
Ha css-t használ, az egyes bekezdések elején lévő nagybetűk különlegesnek tűnhetnek. Például az alábbi kód, zárójelek nélkül beírva a html-be, lehetővé teszi, hogy a „p” címkével formázott szöveg a nagybetűt - első betűt - a szabvány méretének 220%-ával nagyobb legyen, sárga szín- a szín értéke sárga, és a szöveg többi részétől eltérő betűtípussal írja - Georgia vs. batangche.
(<) style(>)
p: első betű (betűcsalád: Georgia; betűméret: 220%; szín: sárga;)
(<)/style(>)
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 például óorosz vagy gótikus stílusban. Berajzolhatók Ezután a szükséges helyekre nagybetű helyett zárójel nélküli kódot írhatunk be (<) img src=”ссылка на место, где лежит картинка”(>). 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, hogy harmonizáljon a szöveg többi részével. Példa: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Zárójelek körül< и >távolítsa el.
Ha nincs lehetősége saját maga megrajzolni az ábécét, akkor a nagybetűt megtervezheti a Google-n (Betűtípusok szakasz) vagy más keresőmotorokban és forrásokban szabadon elérhető betűtípusokkal. Ehhez a fenti kódot a következőképpen kell formázni:
(<) style(>)
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;)
(<)/style(>)
(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).
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ő beillesztéshez. Felhívjuk a figyelmet arra, hogy ki kell választani egy betűtípuscsoportot - 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.
Egy nagybetű vagy kisbetűs megfelelője stílusozható a CSS szövegtranszformációs tulajdonságával. Ha a stíluslapban beállítod a text transform: none értékét, akkor a szöveg úgy fog kinézni, ahogy írod. Az összes betű kisbetűssé alakításához be kell állítania a szövegtranszformáció értéket: kisbetűket kettősponton keresztül, nagybetűket nagybetűkké. Ha a tulajdonságot szövegátalakításra állítja: a nagybetűvel minden szó nagybetűvel kezdődik.
Azt szabályozza, hogy az elem szövege nagy- vagy kisbetűssé legyen-e konvertálva. Ha az érték más, mint a none , az eredeti szöveg kis- és nagybetűje módosul.
| Leírás | Példa | |
|---|---|---|
| <тип> | Meghatározza az érték típusát. | <размер> |
| A&&B | Az értékeket a megadott sorrendben kell kiadni. | <размер> && <цвет> |
| A | B | Azt jelzi, hogy a javasolt értékek közül (A vagy B) csak egyet kell kiválasztani. | normál | kis sapkák |
| A || B | Mindegyik érték önmagában vagy másokkal kombinálva, 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. | <время># |
nagybetűs A mondat minden szavának első karaktere nagybetűs lesz. A többi karakter nem változtat a megjelenésén. kisbetűs Minden szövegkarakter kisbetűvé (kisbetűvé) válik. nagybetűs Minden szöveg karakter nagybetűre változik ( nagybetűs). none Nem változtatja meg a karakterek kis- és nagybetűjét.
Micimackó mindig nem idegenkedett egy kis felfrissüléstől, főleg délelőtt tizenegy órakor, mert akkor már régen véget ért a reggeli, és a vacsora eszébe sem jutott, hogy elkezdődjön. És persze rettenetesen örült, amikor látta, hogy a Nyúl kivette a csészéket és a tányérokat.
div (szöveg-átalakítás: nagybetűs ; )
Az amazóniai síkság mérhetetlenül sok macskát és kutyát fogad, Hajos Baia pedig vörösborairól híres.
Eredmény ezt a példátábrán látható. 1.
Rizs. 1. A text-transform tulajdonság alkalmazása
Egy tárgy.style.textTransform
Minden specifikáció több jóváhagyási szakaszon megy keresztül.
Jó napot, telephelyépítő stréberek. Mai kiadványunk a szövegtartalom tervezésének témáját járja körül. Ezért megtudhatja, hogyan kell beállítani a css nagybetűket - eszközökkel megismerkedhet a nagybetűk létrehozásának több lehetőségével, és természetesen mindent kipróbálhat a gyakorlatban. Nos, most térjünk át a legérdekesebbre!
A lépcsőzetes stíluslapoknak köszönhetően a blokk első karakterét és a teljes szöveget is megváltoztathatja. Elmondom, hogyan teheti meg mindkét lehetőséget. Ezenkívül a cikkben említett összes eszköz három nyelvi szinten támogatott: css1, css2, css2.1 és css3.
Egy érdekes tulajdonsággal kezdem, amely módosítja a kiválasztott szöveg tartalmát. Ez szöveg-átalakítás.
A megnevezett elem képes a karaktereket nagybetűssé, kisbetűssé alakítani, és a szó minden első karakterét nagybetűvé állíthatja. Az értékekről bővebben a táblázatban írtam.
Most, hogy megszilárdítsa az elméleti anyagot, vegyünk egy példát.
Az akció a városodban található összes fiókban érvényes.
Ha nem tudja, mit jelent a „levéllevél” kifejezés, akkor itt az ideje, hogy tájékozódjon, mivel ez közvetlenül kapcsolódik az aktuális témához.
A kezdőbetű (vagy néha azt mondják, hogy kezdőbetű) a fejezet első betűje, amely nagy méretében, színében, sőt esetenként betűkiképzésében is eltér a többitől. Az életben egy ilyen levél példája megtalálható a régi kéziratokban és könyvekben.
Számos módja van a kezdőbetű létrehozásának. Egy karaktert gyakran jelölőnyelvi címkével emelnek ki majd bizonyos tulajdonságokat írnak elő az azt módosító stílusokban. Ez egy jó módszer, de ez a kiadvány a css mechanizmusokról beszél (amelyek véleményem szerint a ez az eset sokkal logikusabb és kényelmesebb a használata).
A probléma megoldásához olyan eszközt használhat, mint pl.
Tehát ebben az esetben: első betűt használunk. Mint minden pszeudoelem, ez is kettősponttal van hozzáfűzve a választóhoz. A stíluslapok összes szabálya után a tulajdonságok megadva vannak. Azonban csak a betűtípusok, kitöltés, szín, háttér, margók és szegélyek szerkesztéséhez kapcsolódó tulajdonságok alkalmazhatók.
Azt javaslom, hogy vegyünk egy konkrét példát. A bemutatott kis programot megvalósítva úgy döntöttem, hogy nem csak színes sapkát készítek, hanem színekkel töltöm meg. Ehhez néhány trükkös trükköt kell bevetni a betűszín átlátszóra állításával és a betű kitöltésével a kiválasztott képpel.
Ez a bekezdés egy nagyon érdekes mondatot tartalmaz.
Folytassuk az érdekes történetet a következő bekezdésben.
A kapott eredmény nagyon vonzónak és szokatlannak tűnik, ami ideális megoldás.
Amint látja, ez a téma nagyon egyszerű. Könnyedén használhatja az általam biztosított kódot a webes erőforrásaihoz, módosíthatja és beállíthatja az Ön stílusának megfelelően.
Ha a bemutatott anyag hasznos volt az Ön számára, akkor iratkozzon fel a blogfrissítésekre, és ne felejtse el megosztani tudását (és természetesen egy linket a blogomra) barátaival. Sok szerencsét!
Viszlát!
Üdvözlettel: Roman Chueshov
CSS nagybetűk segít megtörni az azonos típusú design monotóniáját, amelyek szövegei az elejétől a végéig ugyanúgy néznek ki.
A krónikások nagybetűt használtak a kézírásos kéziratokban, amelyek egy része az 5. századból származik. A nagybetűket a 8. és a 15. század között is használták, amikor a nyomdák lehetővé tették a nyomtatás ipari szintre emelését. A kézírásos és nyomtatott nagybetűket is a szöveg elejére helyezték. Gyakran dekoratív mintával díszítették, amely a levél körül helyezkedett el.
A felemelt és süllyesztett betűket ma is használják. Megtalálhatók újságokban, folyóiratokban és könyvekben, valamint a digitális nyomtatásban. A megemelt betűket néha hosszúkásnak nevezik. Az őket követő szöveg aljával egy szintben helyezkednek el. A kihagyott betűk a következővel azonos szintre kerülnek tetejére szöveget, néha a szövegtartalom fő része mögötti rétegben, vagy a szöveg többi része köréjük kerül.
A kiemelt betűket sokkal könnyebb meghatározni, mivel egy szintben vannak a szöveg többi részével, és általában nem kell módosítani a külső margók tördelését. A kihagyott betűk többet igényelnek finomhangolás. Könnyebben kezelheti ezt, ha először megérti, hogyan kell kezelni az emelt karaktereket.
Azok a tervezők, akik már ismerik a CSS-t, tudják, hogy külön CSS-osztályt kell létrehozniuk az első nagybetűhöz.
A bekezdéselem CSS-kódja és a levelet létrehozó osztály így néz ki:
p ( font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (betűméret:48px; font-family: Didot;)
És a HTML kód így fog kinézni:
Mit ad nekünk:
Túl könnyűnek tűnik? Valójában az egyes emelt betűk függvényében kell módosítania, mivel minden nagybetű speciális levágást igényel. Miután kiválasztotta a betűtípust a kiemelt betűkhöz és a törzsszöveghez, minden kiemelt betűhöz külön osztályt kell létrehoznia. Az alábbiakban CSS class.myinitialcapsi a jobb oldali margó negatív, hogy csökkentse az I és n közötti távolságot.
Myinitialcapsi(betűméret:48px; font-család: Didot; margin-right:-1px;)
Ebben az esetben az „I” és az „n” között van némi extra szóköz.
Egy új, negatív árrésű osztály is közelebb húzza azt.
A fenti példában szereplő képernyőfelbontástól függően az I és n úgy tűnhet, mintha egyesültek volna. Ez a betűk végén található serifeknek köszönhető. Ezért mielőtt kiválasztaná a végső lehetőséget css stílusok, tesztelje az oldalt a különféle eszközök hogy nézze meg, hogyan néz ki rajtuk a CSS-szöveg.
Nemcsak a szöveg elején lévő betűket növelheti. Megvalósíthat egy másik osztályt a betű mellett megjelenő idézőjelek nagyobb változatának létrehozásához. Esetünkben sem a 48-as betűosztály, sem a 20 pixeles szövegosztály nem alkalmas idézőjelre. Inkább valami - 30 pixel közötti - lesz. Az idézőjeleket 4 képponttal lefelé mozgatjuk, hogy optikailag igazítsuk őket az I-hez:
Myinitialcapsq (betűméret: 30 képpont; betűcsalád: Didot; lebegés: bal; margó felső: 4 képpont;)
beleértve” egy negatív árrésű új osztály közelebb húzza.
Nagyon óvatosnak kell lennie a CSS nagybetűk és az idézőjelek megadásakor, hogy azok bevágása és igazítása illeszkedjen a környező jelöléshez. Például a T betűt balra kell mozgatni, kissé túl a bekezdés szélén, hogy annak keresztirányú vonala vizuálisan illeszkedjen az elrendezésbe. Ugyanezt kell tennie a kerek betűkkel, például C , G , O és Q . Ez a példa 20-as, 30-as és 48-as betűméretet használ. De módosítania kell a méreteket a kiválasztott betűtípusok alapján. Valamint azoknak a képernyőknek a méretét és felbontását, amelyeken az oldal megtekinthető lesz.
A CSS pszeudoelem használatával könnyen létrehozhatunk emelt betűt a ::first-letter hozzáadásával a bekezdéselemhez. Használja :first-letter ( egy kettősponttal) régebbi böngészők esetén:
p ( betűméret: 1,2 em; font-család: Georgia, "Times New Roman", Times, serif; sormagasság: 2 em; padding-bottom: 1,2 em;) p:: első betű ( betűméret: 3,6 em; szövegátalakítás: nagybetűs; betűtípus-család: "Monotype Bernard Condensed", serif; jobb margó: 0,03 em;) .initialb (jobb margó: -0,1 em;) .initialn (jobb margó: -0,15 em ;)
Az N és B betűk levágását figyelembe vevő CSS-osztályokat tartalmazó HTML-kód így fog kinézni…
Kezdő betű, az első betű nagybetű.
Sortörés esetén a következő sornak nincs kezdeti sapkája.
n Figyelje meg a HTML-forrásban, hogy a HTML-ben az első betű, nem pedig a nagybetű, hogyan lesz méretezve a kezdeti 3,6 em-es sapkaméretre. Ügyes, mi?
B ut kemény visszatéréssel és egy új bekezdéssel mindig egy újabb kezdeti sapka jön létre. Lehet, hogy megkérdezed magadtól Hogyan fogom ezt elszámolni? Kell-e egy kezdeti felső határ egy nagyon új bekezdés elején? Nos, megtehetnéd. De szeretnéd, hogy így nézzen ki, és feltétlenül így kell kinéznie?
A bekezdés első nagybetűje betűvé alakul.
A sortörés utáni első betű nem lesz nagybetű.
O Felhívjuk figyelmét, hogy a forráskód A HTML-ben az első betű nem nagybetűs, hanem 3,6 em-es karakterré konvertálódik.
RÓL RŐL Azonban a kényszerített sortörés után is mindig egy betű jön létre minden új bekezdés elején. Felteheted magadnak a kérdést: Hogyan tudom ezt figyelembe venni? Kell-e betűket hozzáadnom ezekhez az esetekhez? Nos, lehet. De vajon szükséges?
Még a pszeudoelemek nyújtotta előnyök ellenére is sok kódot kellett hozzáadnunk ahhoz, hogy külön osztályokat definiálhassunk a levágási és kitöltési problémák kezelésére. Ez a módszer azonban minden új bekezdés első betűjét CSS-nagybetűvé alakítja. Egyesek számára nem biztos, hogy megfelelő, mert nem kell minden bekezdés első betűjét konvertálni.
A :first-child pszeudoosztály hozzáadása segít megoldani az első betűk szükségtelen konvertálásának problémáját:
p ( betűméret: 1,2 em; font-család: Georgia, "Times New Roman", Times, serif; sormagasság: 2 em; kitöltés alsó: 0,5 em;) p:first-child::first-letter ( betűméret: 3,6 em; szövegátalakítás: nagybetűs; betűtípuscsalád: "Monotype Bernard Condensed", serif; jobb margó: 0,03 em;)
A kód kombinálása HTML-lel:
Az első gyermekként definiált első betű az egyetlen betű, amely ebben a módszerben emelt zárósapkává alakul.
Mivel csak az első gyermekként definiált betűt konvertálja a rendszer, vegye figyelembe, hogy ez a példa eltér az első gyermek nélküli előzőtől. Ezenkívül nem konvertáljuk a bekezdés eleje után és a kényszerített sortörés utáni első betűket. Ez elegánsabbnak tűnik, mint ahogy az elrendezés nézett ki, amikor a bekezdések első betűit átalakítottuk.
A pszeudoosztályok használatának előnye a különféle speciális esetek kezelésének képessége. Mi a helyzet a hátrányokkal? Sok különböző pszeudoosztály létezik, és olyan sokféleképpen kombinálhatók, hogy felpörgeti a fejét. Például a :first-child és :first-of-type pszeudoosztályok ugyanazokat az eredményeket hozhatják. Az pszeudoosztályt nemcsak egy bekezdésre, hanem elemekre is alkalmazhatja szakasz ( 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: nagybetűk; font-family:Didot, serif; margin-right:5px;) És a HTML-lel együtt: A szakasz elején az első betűt emelt nagybetűre állítjuk. És egy új bekezdés... Ha van kedved kísérletezni, a :first-child és :first-of-type mellett különböző módszereket is felfedezhetsz. Például, például :nth-of-type vagy :nth-of-child , hogy megtudja, hogyan használhatók bizonyos pszeudoosztály-típusok a CSS nagybetűs szövegére. Függetlenül attól, hogy követi az ebben a cikkben felvázolt elveket, vagy elkezd mélyebbre ásni, ha megtanulja, hogyan kell dolgozni az első gyermek , :first-of-type , és :first-letter CSS pszeudoosztályokkal, képes lesz megfelelően alkalmazni. HTML elemekre. vagy részletesen a betűkről és a HTML-ről CSS formázás
fejezet példákat tartalmaz levélformázás a Hypertext Markup területről. A bal oldali menüben modern és nagyon részletes HTML oktatóanyagokat talál. Lehetővé teszik a webhely létrehozását a semmiből miközben kicsit lejjebb néz. Érdekes lehet. Korszak információs társadalom Az emberiség fejlődésének új időszakába lépett, amelyben az információs és hálózati technológiák rendkívül fontos szerepet játszanak. Az információs társadalom korszakát éljük, amelyet az információs és távközlési technológiák rohamos fejlődése jellemez. A számítógép és az internet megjelenésével óriási változások kezdődtek. A számítógép és az internet új viselkedési normák, szabályok és ideálok megfogalmazására készteti a társadalmat. Az internet az új generáció számára olyan, mint a televízió az előző generáció számára. De Globális hálózat sokkal funkcionálisabb, mint a televízió, mert lehetőséget ad vásárlásra, eladásra, kínál kommunikációt és különféle önkifejezési módokat, mint pl. személyes weboldalak és webhelyek. Betűformázási példa: Formátum eredménye: Példa nagybetűvel írt szabad szövegre Példa nagybetűvel írt szabad szövegre címkéket - meghatározni nagybetűvel(Ezek a címkék a HTML 5-ben nem támogatottak.) css code style="text-transform:uppercase" - meghatározza nagybetűvel.
Más szavakkal, a nagybetűket -val határozzuk meg CSS használatával
attribútumokat. Betűformázási példa: Formátum eredménye: Tetszőleges HTML szövegés a CSS betűköz 2 képpont Az attribútumok és értékek leírása: css code style="letter-spacing:2px" - meghatározza CSS betűköz.
Keressen hasonló formázási példákat a bal oldali menüben. Köszönöm a figyelmet.. Például, ahogy az alábbi példában látható, emelt betűkkel Didot betűtípussal. Figyelje meg, hogyan került a margó attribútum az A jobb oldalára. Ellenkező esetben „összeragadna” a szakasz elején lévő s betűvel:
HTML betűk: kis- és nagybetűk
HTML betűk és a köztük lévő CSS térköz
Tematikus anyagok:
Frissítve: 2021.04.20
103583
Ha hibát észlel, jelöljön ki egy szövegrészt, és nyomja meg a Ctrl + Enter billentyűket
