Ismerje meg, hogyan használhatja a CSS-t, hogy létrehozzon képzeletbeli kezdő sapkákat a bekezdésekhez. Van még egy egyszerű képcsere technika, amellyel egy grafikus képet használhat a kezdő sapkához.
Kezdeti sapkák alapstílusai
A dokumentumok három alapvető stílusát tartalmazzák:
- Emelt - a leggyakoribb, ahol az első betű nagyobb és ugyanazon a soron, mint a jelenlegi szöveg.
- Csökkent - szintén meglehetősen gyakori, ahol az első betű nagyobb, és az első sor alá esik. Ezután a következő szöveg lebeg.
- Szomszédos - ahol az első betű egy oszlopban van a szöveg többi részében. Ez gyakoribb a nyomtatásnál, mint a webes megjelenésnél.
Az első sapkák vagy a kupakok nagyon ismerősek. Nagyszerű módja annak, hogy egyébként hosszú és unalmas szövegeket öltözzön. És a CSS tulajdonsággal: első betűvel könnyedén meghatározhatja, hogy hogyan készítse el az első leveleket.
Hozzon létre egy egyszerű kezdő sapkát
Mindössze annyit kell tennie, hogy egy egyszerű felemelt kezdő sapkát hozzon létre, hogy a bekezdés első betűjét nagyobb méretűvé tegye az első betűs pszeudomponenssel:
p: első betű {font-size: 3em; }
De sok böngésző azt látja, hogy az első betű nagyobb, mint a többi szöveg a vonalon, így a vezető egyenlő azzal, ami értelme lenne az első levélnek, nem pedig a többieknek. Szerencsére ez könnyen megoldható az első vonalbeli pszeudo-elem és a vonalmagasság tulajdonsággal:
p: első betű {font-size: 3em; }
p: első sor {line-height: 1em; }
Játssza le a dokumentumban lévő vonalmagassággal, amíg meg nem találja a megfelelő méretű szöveget.
Lejátszás kezdeti sapkával
Miután megértette, hogyan lehet létrehozni egy kezdő sapkát, felöltözheti a díszes ruhákba, hogy kitűnjön. Játssz a színekkel, a háttérszínekkel, a határokkal, vagy bármilyen más sztrájkolással. Egy viszonylag egyszerű stílus az, hogy megfordítsa a betűszín és a háttérszín színeit az első betűhöz:
p: első betű {
betűméret: 300%;
háttérszín: # 000;
szín: #fff;
}
p: első sor {line-height: 100%; }
Egy másik trükk az első sor középpontba állítása. Ez a CSS-vel bonyolult lehet, mivel a szövegsor középső része eltérő lehet, ha az elrendezés rugalmas. De néhányan játszanak az értékekkel, akkor az első sort elegendő ahhoz, hogy az első betű középen jelenjen meg. Csak játssz a százalékos arányban a bekezdés szöveget tartalmazó szövegében, amíg helyesnek tűnik:
p: első betű {
betűméret: 300%;
háttérszín: # 000;
szín: #fff;
}
p: első sor {line-height: 100%; }
A szomszédos kezdeti sapkák nehézkesek a CSS-nél
A szomszédos kezdőkapcsok nehézségekbe ütköznek a CSS-sel, mivel a különböző böngészők másképp mutatják be a betűtípusokat. A szomszédos CSS létrehozásának mögött álló ötlet az, hogy a szöveges mondat tulajdonságát az első sorban használja, hogy kizárja (balra) egy negatív értéket. Szintén meg kell változtatnia a bekezdés bal oldali margóját bizonyos összeggel. Játssz ezzel a számmal, amíg a bekezdés jól néz ki.
p {
szövegbemenet: -2.5em;
margin-left: 3em;
}
p: első betű {font-size: 3em; }
p: első sor {line-height: 100%; }
A valóban fantasztikus kezdeti sapkák megszerzése
A díszes kezdő sapka létrehozásának legjobb módja a betűkészletnek egy dekoratívabb betűtípus család megváltoztatása. Ha egy sor betűtípust használ, majd egy generikus betűtípust használ, akkor segít garantálni, hogy a kezdő kupakja jól látható, így az ügyfelek láthatják azt, anélkül, hogy beleszalálnának az elérhetőséghez és a használhatósági problémákba.
p: első betű {
betűméret: 3em;
betűtípus-család: "Edwardian Script ITC", "Brush Script MT", kurzív;
}
p: első sor {line-height: 100%; }
És ahogyan szokásosan, mindezeket a javaslatokat összeadhatod, hogy létrehozz egy kezdő sapkát, amely a hirdetések stílusát a bekezdésedhez igazítja.
Grafikus kezdeti sapka használata
Ha mindezek után még mindig nem tetszik, hogy a kezdeti sapka megnézi az oldalt, akkor a grafika segítségével keresheti a pontos hatást. De mielőtt úgy döntesz, hogy egyenesen a grafika felé halad, tudnia kell a módszer hátrányairól:
- A képek nélküli ügyfelek nem láthatják a kezdő sapkát, és nem láthatják a rejtett szöveget a kép helyett. Ez a bekezdést elérhetetlenné teheti, vagy legfeljebb nehéz olvasni.
- A képek mindig hozzá vannak adva az oldal letöltési idejéhez. Ha sok kezdeti sapka van, jelentősen megnövelheti a letöltési időt olyasvalakire, amit sokan úgy érzik, hogy elhanyagolható.
- Néhány böngésző megjeleníti mind a rejtett első betűt, mind pedig a képet, amely megmutatja a bekezdés szövegét.
- Nagyon nehéz ezt az opciót automatizálni, mivel pontosan tudnia kell, hogy az első betű hogyan használja a helyes grafikát. Szóval, minden alkalommal, amikor a bekezdés szerkesztésre került, előfordulhat, hogy új grafikát kell létrehoznia.
Először létre kell hoznia az első betű ábráját. A Photoshopot használva létrehoztuk az L betűt az "Edwardian Script ITC" betűtípussal. Hatalmasak - 300pt méretűek. Ezután levágtuk a képet a levél körüli minimálisra, és észrevettük a kép szélességét és magasságát.
Ezután hoztunk létre egy "capL" osztályt a bekezdésünkre. Itt határozzuk meg, hogy milyen képet használni, a vezető (vonalmagasság) és így tovább.
A kép szélességét és magasságát a bekezdés szövegének és behúzásának beállításához kell használni. L képünkhöz 95px-es és 72px-es párnázattal kellett rendelkeznünk.
p.capL {
vonalmagasság: 1em;
háttér-kép: url (capL.gif);
háttér-ismétlés: nem-ismétlés;
szöveg-behúzás: 95px;
padding-top: 72px;
}
De ez nem minden. Ha ott hagyja ott, akkor az első betű megismétlődik a bekezdésben, először a grafikával, majd a szövegben. Ezért hozzáadtunk egy körzetet az első elemhez az "initial" osztályhoz, és azt mondtuk a böngészőnek, hogy ne jelenítse meg ezt a levelet:
span.initial {display: none; }
És a grafika helyesen jelenik meg. A bekezdés szövegrészével játszhatsz, hogy megkapod a szöveget a betűig, de azt szeretnéd, hogy megjelenjen.
