Kohta Dropcap CSS n ensimmäisellä rivillä ja ensimmäisen kirjaimen elementteillä

On olemassa muutamia CSS-valitsimia tai ominaisuuksia, joita mielestäni käytetään harvoin luonnossa, mutta ne ovat olleet olemassa jo CSS1: n päivistä lähtien; jotkut heistä ovat myös :ensimmäinen linja ja :ensimmäinen kirjain pesudo-elementit.

Kuinka käyttää?

Nämä pseudoelementit toimivat pohjimmiltaan samanlaisia ​​kuin sisarukset -: ennen ja: sen jälkeen - ja mielestäni ne ovat myös melko yksinkertaisia. :ensimmäinen kirjain kohdistuu valitun elementin ensimmäiseen kirjaimeen tai merkkiin pseudo-elementti käytetään yleisesti typografisen vaikutuksen luomiseen, kuten pudotuskorkeuteen. Tässä on, miten se tehdään.

 p: ensimmäinen kirjain font-size: 50px;  

Tämä koodi johtaa seuraavaan esitykseen.

On syytä huomata muutamia asioita, mutta tätä vaikutusta sovelletaan vain, kun ensimmäistä merkkiä ei edeltää toinen elementti, esimerkiksi kuva. Lisäksi, kun meillä on samoja kohdennettuja elementtejä peräkkäin, kaikki ne vaikuttavat myös.

Lisäksi, mitä tulee :ensimmäinen linja, Tämä pseudo-elementti kohdistuu kohdennetun elementin ensimmäiseen riviin, alla oleva esimerkki osoittaa, kuinka rohkeasti on kohdan ensimmäinen rivi.

 p: ensimmäinen rivi font-weight: lihavoitu;  

Kuten aikaisempi :ensimmäinen kirjain, tämä vaikuttaa myös kaikkiin sivun elementtien ensimmäisiin riveihin.

Joten todellisissa tapauksissa, kun yleensä halutaan lisätä pudotussuojaa tai muuttaa ensimmäistä riviä vain Ensimmäisessä kohdassa meidän on oltava tarkempia - joko lisäämällä ylimääräinen luokka-attribuutti tai soveltamalla näitä pseudoelementtejä :ensimmäinen lapsi tai : Ensimmäinen-of-tyyppinen valitsin, kuten näin.

 p: ensimmäinen lapsi: ensimmäinen kirjain font-size: 50px;  p: ensimmäinen lapsi: ensilinja font-weight: lihavoitu;  

Siellä me menemme, kyseinen kohta on nyt vain ensimmäinen.

Pseudoelementit työssä

No niin, yritetään nyt suunnitella parempaa ulkoasua kohdasta käyttämällä pseudoelementtejä. Mutta ennen kuin aloitamme, tarvitsemme erikoisfontin pudotuskannalle ja tässä on minun valinta: Paul Lloydin Hominis. Sitten määrittelemme tyylilehdessä uuden fonttiperheen seuraavasti.

 @ font-face font-family: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); src: url ('fonts / HOMINIS-webfont.eot? #iefix') -muodossa ('upotettu-opentype'), URL-osoite ('fontit / HOMINIS-webfont.woff') ('woff'), url ('fontit / HOMINIS-webfont.ttf ') -muodossa (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') -muodossa (' svg '); font-weight: normaali; font-style: normaali;  

Seuraavaksi asetamme kappaleiden oletusfonttiperheen.

 p väri: # 555; font-family: 'Georgia', Times, serif; linjan korkeus: 24px;  

Tässä esimerkissä käytämme :ensimmäinen lapsi valintapainikkeella kohdistaa ensimmäinen kappale ja soveltaa koristeellisia tyylejä, jotta se näyttää näkyvämmältä:

 p: ensimmäinen lapsi pehmuste: 30px; reunan vasen: 5px kiinteä # 7f7664; taustaväri: # f5f4f2; linjan korkeus: 32px; laatikko-varjo: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); asema: suhteellinen;  

Sitten lisätään pudotuskorkki :ensimmäinen kirjain, suurenna kirjasinkokoa ja määritä sille uusi kirjasinperhe;

 p: ensimmäinen lapsi: ensimmäinen kirjain font-size: 72px; float: vasen; pehmuste: 10px; korkeus: 64px; font-family: 'HominisNormal'; taustaväri: # 7F7664; marginaali-oikea: 10px; väri valkoinen; raja-säde: 5px; linjan korkeus: 70px;  

Korostamme myös ensimmäistä linjaa :ensimmäinen linja, niin kuin.

 p: ensimmäinen lapsi: ensilinja font-weight: lihavoitu; kirjasinkoko: 24px; väri: # 7f7664;  

Lopuksi haluamme lisätä ensimmäiseen kohtaan koristeellisen attribuutin, jossa on paperiliitin :jälkeen pseudo-elementti.

 p: ensimmäinen lapsi: jälkeen tausta: url ("… /images/paper-clip.png") ei-toista vierityspainiketta 0 0 läpinäkyvä; sisältö: ""; näyttö: inline-block; korkeus: 100px; asema: absoluuttinen; oikea: -5px; alkuun: -35px; leveys: 100px;  

Se on kaikki koodi, jota tarvitsemme, nyt meidän kohdan pitäisi näyttää paljon paremmalta.

Voit myös nähdä live-esittelyn alla olevista linkeistä:

• Näytä demo
• Lataa lähde

Lopullinen ajatus

Kuten edellä mainitsimme, nämä pseudoelementit, erityisesti :ensimmäinen kirjain ja :ensimmäinen linja on sisällytetty CSS1: stä, joten niitä tuetaan myös Internet Explorer 8: ssa aikaisemmin.

Kuitenkin, kun tiedän, ne eivät ole niin suurelta osin toteutettu luonnonvaraisina. Toivomme siis, että tämä opetusohjelma voisi innostaa sinua kokeilemaan näitä CSS-ominaisuuksia sivustossasi.