A html-ben a betűméret fontos szerepet játszik. Lehetővé teszi, hogy felhívja a felhasználó figyelmét a weboldalon közzétett fontos információkra. Bár nem csak a betűk mérete a fontos, hanem a színük, vastagságuk, sőt a családjuk is.
Címkék és attribútumok html betűtípusokkal végzett feltérképezéskor
A hipertext nyelv számos eszközzel rendelkezik a betűtípusokkal való munkához. Hiszen a szöveg formázása a html fő feladata.
A HTML nyelv létrehozásának oka a szövegformázási szabályok böngészőben való megjelenítésének problémája volt.
Fontolja meg azokat a címkéket, amelyek a html betűtípusokkal és azok attribútumaival működnek együtt. A fő a címke ... Attribútumainak értékeivel beállíthatja a betűtípus számos jellemzőjét:
- szín - beállítja a szöveg színét;
- méret - betűméret a hagyományos mértékegységekben.
1 és 7 közötti pozitív attribútumértékek támogatottak.
- arc – a címkén belüli szöveg betűtípuscsaládjának beállítására szolgál ... Egyszerre több érték is támogatott, vesszővel elválasztva.
Csak a párosított betűtípus-címke részei közötti szöveg formázásra kerül. A szöveg többi része az alapértelmezett szabványos betűtípussal jelenik meg.
A html-ben is számos olyan párosított címke található, amelyek csak egy formázási szabályt határoznak meg. Ezek tartalmazzák:
- - félkövér betűtípust állít be a html-ben. Címke a művelet hasonló az előzőhöz;
- - a méret nagyobb, mint az alapértelmezett;
- - kisebb betűméret;
- - dőlt betűs szöveg. Hasonló címke ;
- - aláhúzott szöveg;
- kihúzott;- - csak kisbetűvel jelenítse meg a szöveget;
- - nagybetűvel.
Egyszerű szöveg
Miniatűr
Miniatűr
Több, mint máskor
A szokásosnál kevesebb
Dőlt betűs
Dőlt betűs
Aláhúzva
Kihúzott
Stílustulajdonságok képességei
A leírt címkéken kívül a html-ben a betűtípus megváltoztatásának több módja is van. Az egyik az általános stílus attribútum használata. Tulajdonságai értékeinek felhasználásával beállíthatja a betűtípus megjelenítési stílusát:
1) font-family – a tulajdonság beállítja a betűtípuscsaládot. Több érték felsorolása is lehetséges.
A html betűtípusának a következő értékre történő módosítása akkor történik meg, ha az előző család nincs telepítve a felhasználó operációs rendszerére.
Írás szintaxisa:
font-family: betűtípus neve [, betűtípus neve [, ...]]
2) font-size - a méret 1-től 7-ig van beállítva. Ez az egyik fő módja a betűtípus növelésének a html-ben.
Írás szintaxisa:
font-size: abszolút méret | relatív méret | érték | kamat | örököl
A betűméret is beállítható:
- pixelben;
- abszolút értékben ( xx-kicsi, x-kicsi, kicsi, közepes, nagy);
- százalékban;
- Pontokban (pt).
Betűméret: 7
Betűméret: 24 képpont
Betűméret: x-nagy
Betűméret: 200%
Betűméret: 24 pt
3) font-style - beállítja a betűtípus írási stílusát. Szintaxis:
betűstílus: normál | dőlt | ferde | örököl
Értékek:
- normál - normál helyesírás;
- dőlt - dőlt
- ferde - jobbra döntött betűtípus;
- inherit - örökli a szülőelem helyesírását.
Példa a betűtípus megváltoztatására a html-ben ezzel a tulajdonsággal:
font-style: örököl
betűstílus: dőlt
betűstílus: normál
betűstílus: ferde
4) font-variant - minden nagybetűt nagybetűvé alakít. Szintaxis:
font-variáns: normál | kisbetűs | örököl
Példa arra, hogyan lehet megváltoztatni a betűtípust a html-ben ezzel a tulajdonsággal:
font-variáns: inherit
font-variáns: normál
betűtípus-változat: kisbetűs
5) font-weight - lehetővé teszi a szöveg vastagságának (telítettség) beállítását. Szintaxis:
betűsúly: félkövér | vastagabb | világosabb | normál | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Értékek:
- félkövér – a html félkövér betűtípusát állítja be;
- merészebb - kövérebb a normálhoz képest;
- könnyebb - kevésbé telített a normálhoz képest;
- normál - normál helyesírás;
- 100-900 - beállítja a betűvastagságot numerikus egyenértékben.
betűsúly: félkövér
betűsúly: vastagabb
betűsúly: könnyebb
betűsúly: normál
betűsúly: 900
betűsúly: 100
A betűtípus tulajdonsága és a html betűtípus színe
A Font egy másik konténertulajdonság. Belsőleg egyesítette több, a betűtípusok megváltoztatására tervezett tulajdonság értékét. A betűtípus szintaxisa a következő:
font: font-size font-family | örököl
Ezenkívül az érték beállítható a rendszer által a különféle vezérlők felirataiban használt betűtípusokra:
- felirat - a gombokhoz;
- ikon - ikonokhoz;
- menü - menü;
- üzenetdoboz - párbeszédpanelekhez;
- kis felirat - kis vezérlőkhöz
- állapotsor - állapotsor betűtípusa.
betűtípus: ikon
betűtípus: felirat
betűtípus: menü
betűtípus: üzenetdoboz
kis-felirat
betűtípus: állapotsor
betűtípus: dőlt 50px félkövér "Times New Roman", Times, serif
A betűtípus színének html-ben történő beállításához használhatja a color tulajdonságot. Lehetővé teszi a szín beállítását kulcsszó használatával vagy rgb formátumban. És hexadecimális kód formájában is.
A zárósapka a bekezdés első betűje, amely 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 szövegbe ágyazott automatikus létrehozást (és eltolást) nagybetűvel... Csodálatos! 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?
A jó hír az, hogy nem kell plugint használnod a nagybetűk létrehozásához, csak egy kis css-re és egy span címkére van szükséged. 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: betűméret, margók és sormagasság a terv és a szöveg alapján kell kiválasztani.
Span tag
Annak érdekében, hogy a stílus a szöveg nagybetűjére vonatkozzon, a nagybetűt "csomagolni" kell a span címkébe, és meg kell írni a megfelelő osztályt.
A
Pszeudo-elem: első betű
A szöveg első karakterét az első betű pszeudoelem használatával is stílusozhatja. Korlátozott számú tulajdonság azonban alkalmazható a: első betűs pszeudoelemre: ezek a betűtípushoz, színhez, háttérhez, szegélyekhez, margókhoz és kitöltéshez kapcsolódó tulajdonságok. Azt is meg kell jegyezni, hogy a: első betűs pszeudoelem nem fog működni régebbi böngészőkben.
P: első betű (betűcsalád: Georgia, serif; szín: #ccc; betűméret: 46 képpont; lebegés: balra; betűsúly: 400; sormagasság: 1 em; margó-alsó: -0,4 em; margó -jobbra: 0,09 em; pozíció: relatív;)
Íme néhány szerkesztési módszer. nagybetűvel CSS használatával.
CSS nagybetűk segít megtörni az egységes design monotóniáját, amelynek szövegei az elejétől a végéig ugyanúgy néznek ki.
Korábban és most csepp sapkák
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-15. századtól folytatták, amikor is a nyomda ipari szintre emelte a nyomtatást. A szöveg elejére mind a kézzel írt, mind a nyomtatott cseppsapkákat elhelyezték. Gyakran díszítették dekoratív mintával, amelyet a levél köré helyeztek.
A megemelt és süllyesztett betűket ma is használják. Megtalálhatók újságokban, folyóiratokban és könyvekben, valamint a digitális tipográfiában. A megemelt betűket néha kiterjesztettnek nevezik. Az őket követő szöveg aljával egy szintben helyezkednek el. A kihagyott betűk egy szintben vannak a szöveg tetejével, néha a szövegtartalom fő része mögött egy rétegben, vagy a szöveg többi része körülöttük folyik.
A megemelt betűket sokkal könnyebb meghatározni, mert egy síkban vannak a szöveg többi részével, és ehhez általában nem kell módosítani a külső margók körüli áramlást. A kihagyott betűk további finomhangolást igényelnek. Könnyebb lesz ezt megoldani, ha először megérti, hogyan kell kezelni a nevelt 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étrehozni az első nagybetűhöz.
A bekezdéselem CSS-je és a levelet létrehozó osztály így néz ki:
p (betűméret: 20px; betűcsalád: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (betűméret: 48px; betűcsalád: Didot;)
És a HTML kód így fog kinézni:
Ami ad nekünk:
Túl könnyűnek tűnik? Valójában az egyes kiemelt betűk alapján 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 osztály.myinitialcapsi a jobb oldali négyzet negatív, hogy csökkentse az I és n közötti távolságot.
Myinitialcapsi (betűméret: 48 képpont; betűcsalád: Didot; jobb margó: -1 képpont;)
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 képernyő felbontásától függően a fenti példában az I és n úgy tűnhet, mintha egyesültek volna. Ez a betűk végén lévő serifeknek köszönhető. Ezért, mielőtt döntene a végső CSS-stílusokról, tesztelje a webhelyet különböző eszközökön, hogy megtudja, hogyan néz ki rajtuk a nagybetűs CSS-szöveg.
Idézetek és egyéb speciális esetek
Nem csak a szöveg elején lévő betűket lehet nagyítani. Megvalósíthat egy másik osztályt a betű mellett megjelenő idézetek túlméretezett változatának létrehozásához. Esetünkben sem a 48 pixeles, sem a 20 képpontos szövegosztály nem alkalmas idézőjelbe. Inkább valami - 30 pixel közötti - lesz. Az idézőjeleket 4 képponttal lejjebb mozgatjuk, hogy optikailag igazítsuk őket az I-hez:
Myinitialcapsq (betűméret: 30 képpont; font-család: Didot; lebegés: balra; margó felső: 4 képpont;)
beleértve "egy negatív árrésű új osztály közelebb húzza azt.
Nagyon óvatosnak kell lennie az egyes CSS-sapkák és az idézőjelek megadásakor, hogy azok bevágása és igazítása megfeleljen a környező jelölésnek. Például a T betűt balra kell tolni, kissé túl a bekezdés szélén, hogy a keresztirányú vonal vizuálisan illeszkedjen az elrendezésbe. Ugyanezt kell tennie a kerek betűkkel, például C, G, O és Q. Ebben a példában a használt betűméretek 20, 30 és 48. A méreteket azonban a kiválasztott betűtípusok sajátosságai alapján kell kiválasztania. 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 pszeudoelemmel könnyen létrehozhatunk emelt betűt, ha a bekezdéselemhez :: első betűt adunk. Használata: első betű ( egy kettősponttal) elavult böngészők esetén:
p (betűméret: 1,2 em; betűcsalád: Georgia, "Times New Roman", Times, serif; sormagasság: 2 em; kitöltés alsó: 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 ;)
A HTML-kód, amely tartalmazza az N és B betűk levágását jelentő CSS-osztályokat, í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. Talán azt ké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 Vegye figyelembe, hogy a HTML-forrásban az első betű nem nagybetűs, hanem 3,6 em-es karakterré alakul át.
O Azonban még a kényszerített sortörés után is, és minden új bekezdés elején mindig létrejön egy betű. Lehet, hogy azt kérdezed magadtól: 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 behúzási problémák kezelésére. Ez a módszer azonban minden új bekezdés első betűjét nagybetűvé alakítja CSS-vé. Egyeseknél előfordulhat, hogy nem működik, mert nem kell minden bekezdés első betűjét átalakítani.
Pszeudoosztályok és pszeudoelemek kombinálása intelligens elrendezés létrehozásához
Az első gyermek 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; betűtípuscsalád: Georgia, "Times New Roman", Times, serif; sormagasság: 2 em; kitöltés alsó: 0,5 em;) p: első gyermek :: első betű ( betűméret: 3,6 em; szövegátalakítás: nagybetűs; betűcsalád: "Monotype Bernard Condensed", serif; jobb margó: 0,03 em;)
A kód kombinálása HTML-lel:
Az első betű, amely első gyermekként van definiálva, az egyetlen betű, amely ebben a módszerben emelt zárósapkává alakul.
Mivel csak az első gyermekként meghatározott betű konvertálódik, vegye figyelembe, hogy ez a példa eltér az előzőtől, első gyermek nélkül. Ráadásul a bekezdés eleje és a kényszerű sortörés utáni első betűket sem konvertáljuk. Ez elegánsabbnak tűnik, mint amilyennek az elrendezés nézett ki, amikor a bekezdések első betűit konvertáltuk.
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ő álosztály létezik, és olyan sokféleképpen kombinálhatók, hogy megpördüljön a feje. Például a pszeudoosztályok: first-child és: first-of-type ugyanazt az eredményt adhatják. A pszeudoosztályt nemcsak a bekezdésre, hanem az elemekre is alkalmazhatja szakasz (betűméret: 1,2 em; font-család: Georgia, "Times New Roman", Times, serif; sormagasság: 3 em;) szakasz> p: első gyermek: első betű (betűméret: 4 em; szövegátalakítás: nagybetűk; betűcsalád: Didot, serif; jobb margó: 5 képpont;) És a HTML-lel együtt: Egy szakasz elején az első betű a megemelt zárókupakra van állítva. És egy új bekezdés... Ha kedvet kapsz a kísérletezéshez, a következő módszereken kívül többféle módszert is felfedezhetsz: elsőgyermekes és: típuselső. Például, mint például: nth-of-type vagy: nth-of-child, hogy megtudja, hogyan használhatók bizonyos típusú pszeudoosztályok a nagybetűs CSS-ben írt szöveghez. Függetlenül attól, hogy követi-e az ebben a cikkben felvázolt elveket, vagy elkezd mélyebbre ásni, miután megtanulta a CSS pszeudoosztályok első gyermeke, első típusa és első betűje használata, megfelelően alkalmazni tudja őket HTML elemek. vagy részletesen a betűkről és a HTML CSS formázásáról fejezet példákat tartalmaz betűk formázása a Hypertext Markup területről. A bal oldali menüben modern és rendkívül részletes HTML oktatóanyagokat talál. Lehetővé teszik a webhely létrehozását a semmiből., de egyelőre nézzen egy kicsit alább. Ez érdekes lehet. Az információs társadalom korszaka 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 kolosszális 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 ugyanaz, 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, kínál kommunikációt és különféle önkifejezési módokat, mint pl. személyes internetes oldalak és webhelyek. Példa a betűk formázására: A formázás eredménye: Példa nagy betűkkel írt szabad szövegre Példa nagybetűvel írt szabad szövegre Címkék - meghatározni nagy betűk(ezeket a címkéket a HTML 5 nem támogatja). CSS style = "text-transform: nagybetűs" kód - meghatározza nagybetűvel.
Más szavakkal, a nagybetűket CSS segítségével határozzuk meg attribútumok. Példa a betűk formázására: A formázás eredménye: Tetszőleges HTML szöveg és CSS 2px betűköz Az attribútumok és értékek leírása: CSS code style = "betűköz: 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. Lehetővé teszi a betűk kis- és nagybetűinek megváltoztatását a szövegben. Alapértelmezés szerint az érték none-ra van állítva, ami nincs hatással a szövegre. A szöveg kis- és nagybetűje változatlan marad. A nagy- és kisbetűs értékek a karaktereket nagy- és kisbetűvé alakítják. Ha nagybetűs értéket ad meg, akkor az egyes szavaknak csak az első karakterei lesznek nagybetűsek. Az Inherit az értéket a szülőtől örökli. A szövegátalakítási tulajdonságot kisbetűvel alkalmaztuk erre a bekezdésre, ami azt jelenti, hogy minden betű kisbetűs lesz. És ennek az utolsó bekezdésnek van egy szövegtranszformációs tulajdonsága CAPITALIZE tulajdonsággal. Minden szó első betűi nagybetűk lesznek, és csak az.HTML betűk: nagy- és nagybetűk
HTML betűk és a köztük lévő CSS távolság
Példa
h3 (szöveg-átalakítás: nagybetűs;) .kisbetűs (szöveg-átalakítás: kisbetűs;) .capitalize (text-transform: nagybetűs;)
Ez a cím. Szövegátalakítási tulajdonsága nagybetűre van állítva. Minden karakter nagybetűs lesz.