Odstavek Dropcap s elementoma CSS v prvem in prvem slovu
Obstaja nekaj CSS selektorjev ali lastnosti, za katere mislim, da se redko uporabljajo v divjini, vendar dejansko že obstajajo od dni CSS1; nekateri med njimi so tudi :prva vrsta in : prva črka pesudo-elementi.
Kako uporabiti?
Ti psevdoelementi v bistvu delujejo podobno kot njihovi bratje in sestre -: pred in po - in mislim, da so tudi precej enostavni. The : prva črka bo ciljna prva črka ali znak izbranega elementa, to psevdoelement se običajno uporablja za ustvarjanje tipografskega učinka, kot je kapa. Tukaj je, kako se to naredi.
p: prva črka velikost pisave: 50px;
Rezultat te kode je naslednja predstavitev.
Opozoriti je treba na nekaj stvari, vendar bo ta učinek veljal le, če pred prvim znakom ni drugega elementa, na primer slike. Poleg tega bodo, ko bomo imeli enake ciljne elemente zaporedoma, prizadeti tudi vsi.
Nadalje, v smislu :prva vrsta, to psevdoelement bo ciljno usmerjen na prvo vrstico ciljnega elementa, ta primer spodaj prikazuje, kako smo označili prvo vrstico odstavka.
p: prva vrstica font-weight: bold;
Tako kot prejšnja koda : prva črka, to bo vplivalo tudi na vse prve vrstice v elementih odstavka, ki so na strani.
Torej, v realnih primerih, ko na splošno želimo dodati kapico ali spremeniti prvo vrstico samo v prvem odstavku moramo biti bolj specifični - bodisi z dodajanjem dodatnega atributa razreda bodisi z uporabo teh psevdoelementov skupaj : prvi otrok ali : prva vrsta izbirnik, tako.
p: prvi otrok: prva črka velikost pisave: 50px; p: prvi otrok: prva vrstica pisava-teža: krepko;
Greva, prizadeti odstavek je zdaj le prvi.
Psevdoelementi pri delu
V redu, poskusimo zdaj oblikovati boljši videz odstavka z uporabo psevdoelementov. Toda preden začnemo, potrebujemo posebno pisavo za našo kapico in tukaj je moja izbira: Hominis Paula Lloyda. Potem definiramo novo družino pisav v slogovni listi, kot sledi.
@ font-face družina pisav: 'HominisNormal'; src: url ('fonts / HOMINIS-webfont.eot'); format src: url ('fonts / HOMINIS-webfont.eot? #iefix') ('embedded-opentype'), format url ('fonts / HOMINIS-webfont.woff') ('woff'), url ('pisave / HOMINIS-webfont.ttf ') format (' truetype '), url (' fonts / HOMINIS-webfont.svg # HominisNormal ') format (' svg '); font-weight: normalna; slog pisave: normalno; Nato nastavimo privzeto družino pisav za odstavke.
p barva: # 555; družina pisav: 'Georgia', Times, serif; višina vrstice: 24px;
V tem primeru bomo uporabljali : prvi otrok izbirnik, da ciljate na prvi odstavek, in uporabite dekorativne sloge, da bo videti bolj vidno:
p: prvi otrok polnilo: 30px; meja levo: 5px trdna # 7f7664; barva ozadja: # f5f4f2; line-height: 32px; box-shadow: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); položaj: relativna;
Nato dodamo kapico z uporabo : prva črka, Povečajte velikost pisave in ji dodelite novo pisavo;
p: prvi otrok: prva črka font-size: 72px; plovec: levo; oblazinjenje: 10px; višina: 64px; družina pisav: 'HominisNormal'; barva ozadja: # 7F7664; margin-right: 10px; barva: bela; obrobni polmer: 5px; line-height: 70px;
Prav tako bomo poudarili prvo vrstico :prva vrsta, tako.
p: prvi otrok: prva vrstica pisava-teža: krepko; velikost pisave: 24px; barva: # 7f7664;
Nazadnje želimo dodati prvi dekorativni atribut z uporabo papirne sponke : after psevdoelement.
p: prvi otrok: po ozadje: url ("… / images/paper-clip.png") pomikanje brez ponovitve 0 0 transparentno; vsebina: ""; prikaz: inline-block; višina: 100px; položaj: absolutno; desno: -5px; vrh: -35px; širina: 100px; To je vsa koda, ki jo potrebujemo, zdaj bi moral biti naš odstavek veliko boljši;
Na spodnjih povezavah si lahko ogledate tudi predstavitev v živo:
- Prikaži predstavitev
- Prenesi vir
Končna misel
Kot smo že omenili na tem mestu, so ti psevdoelementi, natančneje : prva črka in :prva vrsta je bil vključen od CSS1, zato so podprti tudi v Internet Explorerju 8 prej.
Vendar, kolikor vem, se v veliki meri ne izvajajo v divjini. Upamo, da vas bo ta vadnica na nek način navdihnila, da boste preizkusili te CSS funkcije na vašem spletnem mestu.
