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 kialakítása "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-lel 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 html-ben zárójel nélkül beírva a következő kód lehetővé teszi, hogy a "p" címkével formázott szövegből a nagybetű - első betű - nagyobb legyen - a szabvány méret 220%-a, sárga szín - a színérték sárga, és írja le a szöveg többi részétől eltérő betűtípussal – Georgia versus 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 tartozik, például régi 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űket 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. A Ebben a pillanatban A kereső mintegy 40 típust biztosít ingyenesen.

A nagybetű vagy kisbetűs megfelelője stílusozható css tulajdonságait szöveg átalakítása. 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é. Ugyanez a beállítás az ingatlannál szöveges értékek transzformáció: nagybetűvel minden szó nagybetűvel kezdődik.

vagy többet a betűkről és a HTML CSS formázásáról

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 tiszta lap miközben kicsit lejjebb néz.

Érdekes lehet.

Korszak információs társadalom

Az emberiség fejlődésének új korszakába lépett, amelyben az információs és hálózati technológiák rendkívül fontos szerepet töltenek be. 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 a Globális Hálózat sokkal funkcionálisabb, mint a televízió, mert lehetőséget ad vásárlásra, eladásra, ajánlatok kommunikációra és különböző módokonönkifejezés, mint például az alkotás személyes weboldalak és webhelyek.

HTML betűk: kis- és nagybetűk

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 a CSS határozza meg attribútumokat.

HTML betűk és a köztük lévő CSS térköz

Betűformázási példa:

Formátum eredménye:

Tetszőleges HTML szövegés CSS térköz betűk között 2 pixelben

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.

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.

Levelek egykor és most

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. Ugyanazon a szinten helyezkednek el, mint alsó az őket követő szöveget. Az elejtett betűket a szöveg tetejével egy szintben helyezik el, néha a törzs mögött egy rétegben szöveges tartalom, vagy a szöveg többi része köréjük fonódik.

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.

Az osztályok használata

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;)

én Ebben az esetben az „I” és az „n” között van némi extra szóköz.

én 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 a végső CSS-stílusok kiválasztása előtt tesztelje a webhelyet különféle eszközök hogy nézze meg, hogyan néz ki rajtuk a CSS-szöveg.

Idézetek és egyéb speciális esetek

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;)

“én 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.

Álelemek és pszeudoosztályok

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ű.

ról ről 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.

O 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.

Pszeudoosztályok és álelemek kombinálása intelligens elrendezés létrehozásához

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. Ráadásul a bekezdés eleje és a kényszerített sortörés utáni első betűket sem konvertáljuk. 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