Punktas Dropcap su CSS pirmosios eilutės ir pirmosios raidės elementais

Yra keletas CSS selektorių ar savybių, kurios, manau, retai naudojamos laukinėje gamtoje, tačiau jos iš tikrųjų egzistuoja nuo CSS1 dienų; kai kurie jų yra :Pirma eilė ir :pirmoji raidė pesudo elementai.

Kaip naudoti?

Šie pseudo elementai iš esmės veikia panašiai kaip jų broliai ir seserys: - prieš ir: po - ir manau, kad jie taip pat yra gana paprasti. The :pirmoji raidė bus nukreiptas į pasirinktos elemento pirmą raidę arba simbolį pseudo elementas paprastai naudojamas tipografiniam efektui sukurti, pvz., lašų dangteliui. Štai kaip tai daroma.

 p: pirmosios raidės šrifto dydis: 50px;  

Šis kodas pateikiamas sekančiame pristatyme.

Reikia atkreipti dėmesį į keletą dalykų, tačiau šis efektas bus taikomas tik tada, kai pirmojo simbolio nėra prieš kitą elementą, pavyzdžiui, vaizdą. Be to, kai iš eilės turime tuos pačius tikslinius elementus, jie taip pat bus paveikti.

Be to, kalbant apie :Pirma eilė, tai pseudo elementas bus nukreiptas į pirmąją tikslinės elemento eilutę, toliau pateiktame pavyzdyje parodyta, kaip mes drąsome pirmą pastraipos eilutę.

 p: pirmos eilutės font-weight: bold;  

Kaip ir ankstesni :pirmoji raidė, tai taip pat paveiks visas pirmas eilutės elementų eilutes, kurios yra puslapyje.

Taigi, realiais atvejais, kai mes paprastai norime pridėti lašų dangtelį arba pakeisti pirmąją eilutę tik pirmoje pastraipoje turime būti konkretesni - pridedant papildomą klasės atributą arba taikant šiuos pseudo elementus : pirmas vaikas arba : pirmos rūšies selektorius, kaip ir.

 p: pirmasis vaikas: pirmoji raidė šrifto dydis: 50px;  p: pirmas vaikas: pirmos eilutės šrifto svoris: paryškintas;  

Ten mes einame, paveikta dalis dabar yra tik pirmoji.

Pseudo elementai darbe

Gerai, dabar pabandykime sukurti geresnę pastraipos išvaizdą, naudojant pseudo elementus. Bet prieš pradėdami, mes turime specialų šriftą mūsų kritimo dangteliui ir čia yra mano pasirinkimas: Paulas Lloydas. Tada stilių lentelėje apibrėžiame naują šriftų šeimą.

 @ šrifto-veido font-family: „HominisNormal“; src: url („fonts / HOMINIS-webfont.eot“); src: url („fonts / HOMINIS-webfont.eot? #iefix“) formatas („įterptas-opentype“), URL („šriftai / HOMINIS-webfont.woff“) formatas („Woff“), URL („šriftai“ / „HOMINIS-webfont.ttf“) formatas („truetype“), URL („šriftai / HOMINIS-webfont.svg # HominisNormal“) formatas („svg“); šrifto svoris: normalus; šrifto stilius: normalus;  

Toliau nustatome numatytąją šriftų grupę dalims.

 p spalva: # 555; font-family: „Gruzija“, „Times“, serifas; linijos aukštis: 24px;  

Šiame pavyzdyje mes naudosime : pirmas vaikas pasirinktuvą, kad nukreiptumėte pirmąją pastraipą ir taikytumėte dekoratyvinius stilius, kad jis atrodytų ryškesnis:

 p: pirmasis vaikas įdėklas: 30px; kairėje: 5px kietas # 7f7664; fono spalva: # f5f4f2; linijos aukštis: 32px; dėžutės šešėlis: 5px 5px 0px 0px rgba (127, 118, 100, 0,2); pozicija: santykinis;  

Tada pridedame lašų dangtelį :pirmoji raidė, padidinti šrifto dydį ir priskirti jai naują šriftų šeimą;

 p: pirmas vaikas: pirmoji raidė šrifto dydis: 72px; plūdė: kairė; paminkštinimas: 10px; aukštis: 64px; font-family: „HominisNormal“; fono spalva: # 7F7664; paraštė dešinėje: 10px; spalva: balta; pasienio spindulys: 5px; linijos aukštis: 70px;  

Mes taip pat pabrėžsime pirmąją eilutę su :Pirma eilė, taip.

 p: pirmas vaikas: pirmos eilutės šrifto svoris: paryškintas; šrifto dydis: 24px; spalva: # 7f7664;  

Galiausiai norime, kad pirmosios pastraipos dekoratyvinis atributas būtų pridėtas naudojant sąvaržėlę : po pseudo elementas.

 p: pirmas vaikas: po fonas: url ("… /images/paper-clip.png") ne kartoti paspaudimą 0 0 skaidrus; turinys: " "; ekranas: inline-block; aukštis: 100px; pozicija: absoliutus; dešinėje: -5px; viršuje: -35px; plotis: 100px;  

Tai yra visas reikalingas kodas, dabar mūsų dalis turėtų atrodyti daug geriau;

Taip pat galite pamatyti tiesioginę demonstraciją iš toliau pateiktų nuorodų:

• Peržiūrėti demonstraciją
• Atsisiųsti šaltinį

Galutinė mintis

Kaip jau minėjome šiame pranešime, šie pseudo elementai, būtent :pirmoji raidė ir :Pirma eilė buvo įtrauktas nuo CSS1, todėl jie taip pat yra palaikomi net anksčiau „Internet Explorer 8“.

Tačiau, kiek aš žinau, jie nėra taip plačiai įgyvendinami laukinėje gamtoje. Taigi, tikimės, kad ši pamoka gali paskatinti jus išbandyti šias CSS funkcijas jūsų svetainėje.