Bekezdés Dropcap a CSS első sorával és első betűjével

Van néhány CSS szelektor vagy tulajdonság, amit úgy gondolok, ritkán használnak a vadonban, de valójában már a CSS1 napja óta léteznek; némelyikük magában foglalja a :első sor és :első levél pesudo-elemek.

Hogyan kell használni?

Ezek a pszeudo-elemek alapvetően hasonlóak a testvéreikhez: - előtte és utána - és azt hiszem, ezek is elég egyszerűek. A :első levél a kiválasztott elem első betűjét vagy karakterét fogja célozni pszeudoelem általában egy tipográfiai hatás létrehozására használják, mint egy csepp sapka. Itt van, hogyan történik.

 p: első betű font-size: 50px;  

Ez a kód a következő bemutatóban jelenik meg.

Néhány dolgot meg kell jegyezni, azonban ez a hatás csak akkor érvényes, ha az első karaktert nem egy másik elem, például egy kép írja elő. Továbbá, ha ugyanazok a célelemek is vannak egymás után, akkor mindegyikük is érintett lesz.

Továbbá a :első sor, ez pszeudoelem a célelem első sorát célozza meg, az alábbi példa megmutatja, hogyan merészeljük a bekezdés első sorát.

 p: első sor font-weight: bold;  

Mint a. \ T :első levél, ez az oldal összes elemének első sorát is érinti.

Tehát a valós esetekben, amikor általában csepp sapkát akarunk hozzáadni vagy az első sort módosítani szeretnénk csak az első bekezdésben konkrétabbnak kell lennünk - vagy egy extra osztály attribútum hozzáadásával, vagy a pszeudo-elemekkel együtt :első gyerek vagy : Az első-of-típusú választó, mint így.

 p: első gyermek: első betű font-size: 50px;  p: első gyermek: első sor font-weight: bold;  

Ott megyünk, az érintett bekezdés már csak az első.

Pszeudoelemek a munkahelyen

Rendben, próbáljunk meg egy pszeudo-elemeket felhasználva egy bekezdés jobb megjelenését. De mielőtt elkezdenénk, szükségünk van egy speciális betűtípusra a csepp sapkánkhoz, és itt van a választásom: Paul Lloyd által készített Hominis. Ezután új stíluscsaládot definiálunk a stíluslapon az alábbiak szerint.

 @ font-face font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') formátum ('beágyazott opentype'), url ('font / HOMINIS-webfont.woff') formátum ('woff'), url ('betűtípusok / HOMINIS-webfont.ttf ') formátum (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') formátum (' svg '); font-súly: normál; betűtípus: normál;  

Ezután beállítjuk az alapértelmezett betűtípuscsaládot a bekezdésekhez.

 p szín: # 555; font-family: „Georgia”, Times, szerif; vonalmagasság: 24px;  

Ebben a példában a :első gyerek a választógomb az első bekezdés célzásához és dekoratív stílusok alkalmazásához

 p: első gyermek padding: 30px; bal oldali: 5px szilárd # 7f7664; háttérszín: # f5f4f2; vonalmagasság: 32px; doboz-árnyék: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); pozíció: relatív;  

Ezután csepp sapkát használunk :első levél, növelje a betűméretet, és hozzon létre egy új betűcsaládot;

 p: első gyermek: első betű font-size: 72px; balra lebeg; párnázás: 10px; magasság: 64px; font-family: 'HominisNormal'; háttérszín: # 7F7664; margin-right: 10px; fehér szín; határ-sugár: 5px; vonalmagasság: 70px;  

Azt is kiemeljük az első sort :első sor, úgy tetszik.

 p: első gyermek: első sor font-weight: bold; betűméret: 24px; szín: # 7f7664;  

Végül, szeretnénk hozzáadni egy dekoratív attribútumot az első bekezdéshez egy gemkapocs használatával :után pszeudoelem.

 p: első gyermek: háttér: url ("… /images/paper-clip.png") után 0 0 átlátszó; tartalom: " "; kijelző: inline-block; magasság: 100px; pozíció: abszolút; jobbra: -5px; top: -35px; szélesség: 100px;  

Ez az a kód, amire szükségünk van, most a bekezdésnek sokkal jobbnak kell lennie;

Az élő demót az alábbi linkekről is megtekintheti:

• Demó megtekintése
• Letöltés forrása

Végső gondolat

Ahogy korábban említettük ezt a hozzászólást, ezek a pszeudoelemek, különösen a :első levél és :első sor a CSS1 óta szerepel, ezért még az Internet Explorer 8-ban is támogatottak.

Mégis, amennyire tudom, a vadonban nem olyan nagy mértékben hajtják végre őket. Ezért reméljük, hogy ez a bemutató valamilyen módon ösztönözheti Önt arra, hogy ezeket a CSS-szolgáltatásokat a webhelyén kipróbálhassa.