Ismerje meg a CSS és képek használatának megismerését
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:
- felemelt - a leggyakoribb, ahol az első betű nagyobb és ugyanazon a soron, mint a jelenlegi szöveg.
- leesett - szintén meglehetősen gyakori, ahol az első betű nagyobb és az első sor alá esett. Ezután a következő szöveg lebeg.
- szomszédos - ahol az első betű egy oszlopban van a szöveg többi része mellett. 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.
Játssz a kezdő sapkáddal
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ű {font 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ű {font méret: 300%; háttérszín: # 000; szín: #fff; } p: első sor {line-height: 100%; } p {szöveg-indent: 45% ; }A szomszédos kezdeti sapkák nehéz CSS-vel
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öveg-mondat: -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ű {font-size: 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 a rejtett első betűt és a képet is - ezáltal a bekezdés szövege furcsának tűnhet.
- 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 az "Edwardian Script ITC" betűtípussal hoztam létre. Hatalmasra tettem - 300pt méretű. Aztán levágtam a képet a levél körüli minimálisra, és észrevettem a kép szélességét és magasságát.
Aztán létrehoztam egy "capL" osztályt az én bekezdésemre. Itt adom meg, hogy milyen képet kell 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. Az én L képemhez 95px behúzásra és 72px párnázásra volt szükségem.
p.capL {line-height: 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 elhagyod ott, akkor az első betű megismétlődik a bekezdésben - először a grafikával, majd a szövegben. Ezért hozzáadtam egy körzetet az első elemhez az "initial" osztályhoz - és azt mondtam 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.