Tanulja meg, hogyan kell használni CSS készítenidíszes kezdeti felső korlát a bekezdésekhez. Van még egy egyszerű képpótló technika is, amely grafikus képet használ a kezdeti sapkához.
A kezdeti sapkák alapstílusai
A kezdeti korlátok három alapvető stílusa van a dokumentumokban:
- Emelt - a leggyakoribb, ahol az első betű nagyobb és ugyanazon a soron van, mint az aktuális szöveg.
- Csökkent - szintén meglehetősen gyakori, ahol az első betű nagyobb, és a szöveg első sora alá esik. Ezután a következő szöveg lebeg körülötte.
- Szomszédos - ahol az első betű egy oszlopban található a szöveg többi része mellett. Ez gyakoribb a nyomtatásban, mint a webdesignban.
A kezdeti vagy a csepegtetős sapkák nagyon ismertek. Nagyszerű módja az egyébként hosszú és unalmas szövegrészeknek. A CSS: first-letter tulajdonsággal pedig egyszerűen meghatározhatja, hogyan tegye az első betűket rajongóbbá.
Hozzon létre egy egyszerű kezdeti sapkát
Az egyszerű megemelt kezdő sapka létrehozásához mindössze annyit kell tennie, hogy a bekezdés első betűjét nagyobb méretűvé tegye az első betűs pszeudoelemmel:
p: első betű {font-size: 3em; }
De sok böngészők nézze meg, hogy az első betű nagyobb, mint a sor többi szövege, így a vezetőt megegyezik azzal, ami ennek az első betűnek lenne értelme, nem pedig a sor többi részének. Szerencsére ezt könnyű megoldani az első sor pszeudo-elem és a line-height tulajdonság segítségével:
p: első betű {font-size: 3em; }
p: első sor {line-height: 1em; }
Játsszon a dokumentum magasságával, amíg meg nem találja a megfelelő méretet a szövegéhez.
Játssz az eredeti sapkáddal
Miután megértette, hogyan kell létrehozni egy kezdeti sapkát, díszes ruhákba öltözheti, hogy feltűnjön. Játssz színekkel, háttérszínekkel, szegélyekkel vagy bármi mással, ami a kedvedre való. Egy meglehetősen egyszerű stílus a betű és a háttér színének megfordítása csak az első betű esetében:
p: első betű {
betűméret: 300%;
háttérszín: # 000;
szín: #fff;
}
p: első sor {vonal-magasság: 100%; }
Egy másik trükk az első vonal középre helyezése. Ez bonyolult lehet CSS-sel, mivel a szövegsor közepe eltérő lehet, ha az elrendezés rugalmas. De ha néhányan eljátszják az értékeket, akkor behúzhatja az első sort annyira, hogy az első betű középnek tűnjön. Csak játsszon a bekezdés szöveges francia bekezdésének százalékával, amíg jól nem néz ki:
p: első betű {
betűméret: 300%;
háttérszín: # 000;
szín: #fff;
}
p: első sor {vonal-magasság: 100%; }
p {szöveg-francia: 45%; }
A szomszédos kezdeti sapkák nehézkesek a CSS-sel
A szomszédos kezdőbetűk nehézségekbe ütközhetnek a CSS használatával, mert a különböző böngészők különböző módon jelenítik meg a betűtípusokat. A CSS-ben egy szomszédos sapka létrehozásának az az ötlete, hogy az első sorban található text-behúzási tulajdonságot használva negatív értéket toljon ki (balra). Valamennyivel meg kell változtatnia a bekezdés bal margóját is. Játssz ezekkel a számokkal, amíg a bekezdés jól nem néz ki.
p {
szöveg-francia: -2,5em;
bal szél: 3em;
}
p: első betű {font-size: 3em; }
p: első sor {vonal-magasság: 100%; }
Valóban divatos kezdeti sapkák megszerzése
A divatos kezdő sapka létrehozásának legjobb módja a betűtípus dekoratívabb betűcsaládra cseréje. Ha a betűtípusok sorozata amelyet egy általános betűtípus, ez segít garantálni, hogy a kezdeti sapka jól látszik, így az ügyfelek láthatják azt, anélkül, hogy hozzáférhetőségi és használhatósági problémákba ütköznének.
p: első betű {
betűméret: 3em;
font-family: "Edwardian Script ITC", "Brush Script MT", kurzív;
}
p: első sor {vonal-magasság: 100%; }
És, mint általában, ezeket a javaslatokat összefoghatja, hogy létrehozzon egy kezdeti felső határt, amely a bekezdéstől stílusos.
Grafikus kezdőkupak használata
Ha ezek után még mindig nem tetszik, hogy a kezdő sapkák hogyan néznek ki az oldalon, grafikákhoz fordulhat, hogy megkapja a kívánt hatást. Mielőtt azonban közvetlenül a grafika mellett döntene, tisztában kell lennie ennek a módszernek a hátrányaival:
- A képek nélküli ügyfelek nem látják a kezdeti sapkát, és előfordulhat, hogy nem látják a rejtett szöveget, amelyet a kép pótol. Ez elérhetetlenné vagy a legjobb esetben nehezen olvashatóvá teheti a bekezdést.
- A képek mindig növelik az oldal letöltési idejét. Ha sok kezdeti sapkája van, jelentősen megnövelheti a letöltési időt, amit sokan jelentéktelennek éreznének.
- Egyes böngészők mind az elrejtett első betűt, mind a képet megjelenítik, ami furcsává varázsolhatja a bekezdés szövegét.
- Nagyon nehéz ezt az opciót automatizálni, mivel pontosan meg kell tudni, mi az első betű, hogy a megfelelő grafikát használja. Tehát minden egyes bekezdés szerkesztésekor szükség lehet egy új grafika létrehozására.
Először létre kell hoznia az első betű grafikáját. A Photoshop segítségével létrehoztuk az L betűt "Edwardian Script ITC" betűtípussal. Hatalmasra tettük - 300pt méretű. Ezután levágtuk a képet a minimumra a betű körül, és megjegyeztük a kép szélességét és magasságát.
Ezután létrehoztunk egy "capL" osztályt a bekezdésünkhöz. Itt határozzuk meg, hogy melyik képet használjuk, a vezetőt (vonal-magasság) stb.
A kép szélességét és magasságát kell használnia a bekezdés szöveges behúzásának és a padding-top beállításához. L képünkhöz 95 képpontos behúzásra és 72 képpontos kitöltésre volt szükség.
p.capL {
vonal-magasság: 1em;
háttérkép: url (capL.gif);
háttérismétlés: nem ismétlés;
szöveg-francia: 95px;
top-top: 72 képpont;
}
De ez még nem minden. Ha ott hagyja, akkor az első betű megismétlődik a bekezdésben, először a grafikával, majd a szövegben. Tehát hozzáadtunk egy tartományt az első elem körül az "kezdő" osztályhoz, és azt mondtuk a böngészőnek, hogy ne jelenítse meg ezt a betűt:
span.initial {display: none; }
Ezután a grafika helyesen jelenik meg. Játszhat a bekezdés szöveges behúzásával, hogy a szöveget közvetlenül a betűhöz illessze, bárhogy is szeretné megjeleníteni.