Një titull kompetent, i dukshëm i artikullit është në gjendje të tërheqë vëmendjen dhe vizitorët në sit. Ky është një nga komponentët më të rëndësishëm në SEO-optimizimin e projektit të internetit. Në këtë postim, unë do t'ju tregoj se cilat janë titujt h1, h2, h3, h4, h5, h6 dhe si t'i shkruani ato. Përveç kësaj, do të mësoni për titullin kryesor të faqes - titullin.

Por le të flasim për gjithçka në rregull.

Çfarë është titulli

Kështu që, titullin- kjo etiketë speciale, i vendosur në fillim të kodit html, duke përshkruar shkurtimisht përmbajtjen faqe specifike faqe. Rreth titullin më voluminoz dhe në detaje është shkruar në këtë artikull.

NË Kodi i burimit kreu kryesor duket si ky:

Ky lloj titulli, për shembull, në CMS Joomla është krijuar në modaliteti automatik. Domethënë titulli që i caktohet çdo materiali dhe është titulli i titullit. Rëndësia e tij për optimizimin e brendshëm të SEO-së së faqes nuk është e ekzagjeruar, pasi është ajo që përdoruesi i internetit sheh në linjë kërkimi me një kërkesë specifike.

Çfarë është një titull h1

Kreu h1- këto janë disa fraza të strukturuara mirë që përmbajnë pothuajse të gjithë kuptimin e materialit të paraqitur. Me fjalë të tjera, është titulli më i rëndësishëm në krye të faqes.

I njëjti grup fjalësh i përcaktuar si për titullin krijohet në titullin h1 Joomla. Ja se si duket në kodin burimor:

Çfarë është një freelancer dhe si të bëheni i tillë

Shumë informacione gjithëpërfshirëse janë shkruar nëse kjo është e mirë apo e keqe, por ende nuk ka një përkufizim specifik. Ja çfarë thotë për këtë blogerja famëkeqe Devaka.

Bëhet e qartë se motori Joomla, megjithatë, si CMS-të e tjera, thjeshton shumë punën me sitin, pasi kur krijoni tituj nuk ka nevojë të redaktoni kodin html.

Pjesa tjetër e titujve krijohen drejtpërdrejt në redaktori i tekstit. Në varësi të panelit dhe grupit elementet aktive, është zgjedhur funksioni i përcaktuar, i cili në redaktuesin e tekstit JCE quhet "Paragraf". Duke lëvizur rrëshqitësin, mund të shihni se të gjithë titujt ekzistues janë paraqitur këtu, duke filluar nga h1 dhe duke përfunduar me h6.

Si të shkruani titullin dhe titullin h1

Në fushën e optimizimit të SEO, ekzistojnë rregulla të qarta për shkrimin e etiketave bazë, përkatësisht:

1. Fjalë kyçe. Në sytë e motorëve të kërkimit, një i shkruar mirë duket shumë më premtues dhe tërheqës nëse, në fillim të titullit të tij dhe h1, fjalët që korrespondojnë me pyetje kyçe. Si t'i njohim ato? Për këtë, ekziston një shërbim i veçantë në internet wordstat.yandex.ua.

2. Lexueshmëria. Nuk mund të marrësh dhe të futësh fjalë kyçe në titull. Teksti duhet të jetë i natyrshëm dhe në të njëjtën kohë i lehtë për t'u lexuar, përndryshe motorët e kërkimit do ta konsiderojnë këtë truk si spam. Kur shkruani titullin dhe titullin h1, përpiquni të vendosni fjalë kyçe sa më afër fillimit të tyre. Titujt h1, h2, h3 janë një çështje tjetër… Ata mund të priren dhe të hollohen me fjalë të caktuara tematike.

3. Asnjë dublikatë. Në mënyrë që faqet e faqes të renditen më lart rezultatet e kërkimit, në kodi html nuk duhet të ketë tituj të dyfishtë. Për të kontrolluar faqet, thjesht hapni faqen në një shfletues dhe shtypni butonat e nxehtë Ctrl + U, dhe më pas Ctrl + F. Shkruani h1 në kutinë e kërkimit dhe të gjithë karakteret e pranishme do të theksohen me një sfond të verdhë.

4. Gjatësia. Etiketa e titullit është e kufizuar në 70 karaktere sepse sasi e madhe thjesht nuk do të futet në fragment.

5. Unike. Çdo titull duhet të jetë unik brenda një projekti të caktuar në internet, kështu që do të jetë më e lehtë për përdoruesit të lundrojnë dhe të gjejnë saktësisht atë që u nevojitet.

7. Shenjat ndarëse mundësisht të mos përdoret.

Përdorimi i duhur i etiketave h2 - h6

Titujt h2 - h6 ndihmojnë për të lundruar në tekst, duke e bërë materialin më tërheqës në sytë e lexuesve dhe robotëve të kërkimit. Prandaj, ekzistojnë disa rregulla strikte gjatë krijimit të tyre, përkatësisht:

Struktura e titullit duhet të vendoset në mënyrë të tillë që të formohet një hierarki konsistente. Le të shohim një shembull ilustrues. Le të themi se autori shkruan një artikull me temën "Mundja e lirë". Në këtë rast, nëntitujt do të duken kështu.

Nga autori: Specifikimi i nivelit 4 të Modulit Pseudo-elemente CSS hedh dritë mbi sjelljen e pseudo-elementëve ekzistues dhe ofron të rinj. Megjithatë, vetëm disa nga pseudo-elementët e rinj kanë ndonjë mbështetje në shfletuesit e fundit.

Sot do të flasim për pseudo-elementët e mëposhtëm:

::para - fut përmbajtjen e gjeneruar përpara përmbajtjes së elementit

::after - fut përmbajtjen e gjeneruar pas përmbajtjes së elementit

:: shkronja e parë - zgjedh shkronjën e parë të një elementi

::first-line - zgjedh rreshtin e parë të një elementi

::selection - stilon tekstin e zgjedhur nga kursori

Prej tyre, elementet e përzgjedhjes::shkronja e parë, :: rreshti i parë dhe::përfshijnë përmbajtjen që përfshihet në burime. Pseudo-elementet::para dhe::pas, përkundrazi, futni përmbajtjen në dokument që nuk është në burim. Le të hedhim një vështrim më të afërt në të gjithë pseudo-elementët.

Shënim: sintaksa me dy pika

Ju mund të keni parë versione të:: first-letter, :: first-line, ::fore dhe ::after me një dy pika të vetme në CSS të vjetër. Në CSS2, këto pseudo-elemente u specifikuan me një dy pika një herë:. IE8 kërkon sintaksën e vetme me dy pika, megjithëse shumica e shfletuesve të tjerë i mbështesin të dyja. Është më mirë të përdoret sintaksa me dy pika.

Pseudo-elementet::para dhe::pas

Shumica e pseudo-elementeve ju lejojnë të zgjidhni përmbajtje që është tashmë e pranishme në burimin e dokumentit, por që nuk përcaktohet nga gjuha (me fjalë të tjera, HTML-ja juaj). Megjithatë, ::para dhe ::pas punës ndryshe. Këta pseudo-elemente shtojnë përmbajtjen e krijuar në pemën e dokumentit. Përmbajtja e krijuar nuk ekziston në burimin HTML, por ajo jepet.

Pse të përdorni përmbajtjen e krijuar? Për shembull, mund të shënoni Fushat e kërkuara formon duke shtuar përmbajtje pas etiketave:

/* Zbatohet për etiketën e lidhur me fushën e kërkuar */ .required::after (përmbajtja: " (Kërkohet) "; ngjyra: #c00; madhësia e shkronjave: .8em; )

Në fushën e formularit të kërkuar, duhet të përdorni Vetia HTML kërkohet. Sepse ky informacion tashmë në dispozicion në DOM, pastaj ::para dhe ::after veproni si ndihmës. Kjo nuk është përmbajtje kritike, kështu që mund të mos përfshihet në kodin burimor.

Shënim: Përmbajtja dhe aksesueshmëria e krijuar

Disa lexues të ekranit dhe shfletues njohin dhe lexojnë përmbajtjen e krijuar, por shumica jo. Mos përdorni pseudo-elemente::para dhe::after për të ofruar përmbajtje të gjeneruar për përdoruesit me me aftësi të kufizuara. Mund të lexoni më shumë rreth kësaj çështje në artikullin e Leonie Watson Mbështetja e aksesueshmërisë për përmbajtjen e krijuar nga CSS.

Një mënyrë tjetër për të përdorur::para dhe::pas është të shtoni një parashtesë ose prapashtesë në përmbajtje. Formulari i mësipërm mund të përdorë tekst ndihmës si më poshtë:

Le ta mbyllim tekstin tonë ndihmës në kllapa të çiftëzuara me::para dhe::after.

Teksti i ndihmës::para (përmbajtja: "("; ) .teksti i ndihmës::pas (përmbajtja: ")"; )

Rezultati.

Ndoshta më mënyrë e dobishme përdor::para dhe::pas - elementë të qartë të lundruar. Nicolas Gallagher e prezantoi këtë teknikë (e cila bazohet në punën e Thierry Koblenz) në postimin e tij "hack i ri mikro clearfix":

/* Për mbështetjen e IE<= 9 используйте:before и:after */ .clearfix::before, .clearfix::after { content: " "; /* Обратите внимание на пробел между кавычек. */ display: table; } .clearfix::after { clear: both; }

Shtoni klasën clearfix në çdo element që duhet të pastrohet pas elementit të lëvizur.

Pseudo-klasat::para dhe::after sillen tërësisht si fëmijët e etiketës me të cilën janë ngjitur. Ato trashëgojnë të gjitha pronat e mundshme të prindit dhe ndodhen brenda bllokut të prindit. Ata gjithashtu ndërveprojnë me elementë të tjerë të bllokut sikur të ishin etiketa reale. Shfaqja: blloku ose shfaqja: vetitë e tabelës në::para dhe::pas punës, njëlloj si në elementët e tjerë.

Paralajmërim: një pseudo-element për përzgjedhës

Në ky moment Për përzgjedhës lejohet vetëm një pseudoelement. Kjo do të thotë, një hyrje si p::first-line::fore është e pasaktë.

Krijimi i efekteve tipografike me shkronjën e parë

Pseudo-elementet::para dhe::after fut përmbajtjen, ndërsa::shkronja e parë vepron në përmbajtjen e shkruar tashmë në burime. Me të, ju mund të krijoni efektin e shkronjës së parë ose të shkronjës së madhe, të cilën mund ta shihni në revista dhe libra.

Shënim: shkronja e parë dhe shkronja e madhe

Efekti i shkronjës së parë është një shkronjë e madhe në fillim të tekstit që është vendosur në një madhësi fonti më të madh se pjesa tjetër e tekstit. Kapaku i rënies është i ngjashëm me shkronjën e parë, por kapaku i rënies futet në paragrafin e parë me të paktën dy rreshta.

Stilet e mëposhtme shtojnë shkronjën e parë të madhe në të gjithë paragrafët p në dokument:

p:: germa e parë ( font-familja: serif; pesha e shkronjave: bold; madhësia e shkronjave: 3em; stili i shkronjave: italic; ngjyra: #3f51b5; )

Ju mund të shihni nga pamja e ekranit se:: germa e parë ndryshon lartësinë e vijës së rreshtit të parë nëse elementit i është dhënë lartësia e vijës pa njësi. NË këtë rast të gjitha etiketat p trashëgojnë lartësinë e linjës 1.5 nga etiketa e trupit.

Ekzistojnë tre mënyra për të zbutur këtë problem:

zvogëlo lartësinë e vijës së pseudo-elementit::shkronja e parë, një vlerë prej .5 do të funksionojë pothuajse gjithmonë;

vendos lartësinë e vijës me njësi për pseudoelementin:: shkronja e parë;

caktoni lartësinë e vijës me njësi për trupin ose prindin:: shkronja e parë.

Opsioni i parë ruan ritmin vertikal, siç është rasti me vlerën e lartësisë së vijës pa njësi. Opsioni i dytë kufizon efektet anësore të një lartësie fikse në vetë pseudo-elementët. Opsioni i tretë është më i keqi, ka shumë mundësi që të krijoni një efekt anësor që do të duhet të rishkruhet me kod shtesë CSS.

Në rastin tonë, le të reduktojmë lartësinë e rreshtit të p::first-letter në 0,5 (dhe të rishkruajmë vetitë në skedar për të përdorur veçorinë e fontit të stenografisë):

p:: shkronja e parë ( fonti: i theksuar i pjerrët 3em / .5 serif; ngjyra: #3f51b5; )

Rezultati mund të shihet më poshtë. Vini re se na duhej gjithashtu të rregullonim kufirin e poshtëm të çdo paragrafi p për të kompensuar vlerën e reduktuar të lartësisë së rreshtit të p:: shkronjës së parë.

Do të duhen pak më shumë rreshta CSS për të krijuar kapakët e rënies. Ndryshe nga shkronjat e para, teksti ngjitur mbështillet rreth kapakut të rënies. Kjo është, ne duhet të shtojmë float: majtas; sipas stileve tona. Ne gjithashtu do të shtojmë margjinat e sipërme, djathtas dhe të poshtme:

p:: shkronja e parë ( fonti: me shkronja të theksuara të pjerrëta 3em / .5 serif; stili i shkronjave: italic; ngjyra: #607d8b; float: majtas; margjina: 0.2em 0.25em .01em 0; )

Elementi lundrues, ose pseudo elementi në rastin tonë, bën që pjesa tjetër e tekstit të mbështillet rreth tij, siç tregohet më poshtë.

Nëse nuk përdorni px ose rem për të vendosur madhësitë, kufijtë dhe lartësitë e rreshtave, do të jetë shumë e vështirë të stiloni shkronjat e para në mënyrë perfekte në të gjithë shfletuesit.

Ndonjëherë shkronja e parë e një elementi teksti është një shenjë pikësimi. Për shembull, një lajm që fillon me një citim:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit." Fusce odio leo, sollicitudin ose mattis eget, ...

Në këtë rast, stilet për::shkronjën e parë do të aplikohen si për kuotën fillestare ashtu edhe për shkronjën e parë, siç tregohet më poshtë. Stilet aplikohen në të njëjtën mënyrë në të gjithë shfletuesit.

Megjithatë, rezultati do të jetë i ndryshëm kur shenja e pikësimit gjenerohet nga elementi. Merrni parasysh shënimin e mëposhtëm:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce odio leo, sollicitudin ose mattis eget, iaculis sit ...

Aktualisht, shfletuesit e japin etiketën q si thonjëza specifike për gjuhën që hapen dhe mbyllen. Megjithatë, jo të gjithë shfletuesit i njohin citate të tilla në të njëjtën mënyrë. Në Firefox 42 (shih më poshtë), Safari 8 dhe më lart versionet e hershme::shkronja e parë ndryshon vetëm kuotën e hapjes.

Në Chrome, Opera dhe Yandex, citati hapës i etiketës q dhe shkronja e parë e paragrafit nuk janë të stiluara. Më poshtë është një pamje e ekranit në Chrome.

IE aplikon stile si për kuotën fillestare ashtu edhe për shkronjën e parë të paragrafit. Shikoni më poshtë.

Specifikimi i CSS Pseudo-elementet e Modulit të Nivelit 4 thotë se një shenjë pikësimi që i paraprin ose menjëherë pason shkronjën ose karakterin e parë duhet të stilohet. Megjithatë, specifikimi nuk shpjegon qartë se si të aplikohen stilet në shenjat e pikësimit të krijuara.

Defektet e shfletuesit kur përdorni::shkronja e parë

Në pjesën më të madhe:: germa e parë funksionon saktësisht siç pritej në të gjithë shfletuesit. Si me të gjithë Karakteristikat e CSS, ky pseudo-element ka disa gabime dhe keqpërdorime për t'u ditur.

Në Firefox 39 dhe më herët, disa karaktere bëjnë që Firefox të injorojë rregullin: :first-letter: -,$,^,_,+,`,~,>,<.>

Kjo vlen për rastet kur karakteri i parë specifikohet nëpërmjet::para dhe veçorisë së përmbajtjes, si dhe nëse specifikohet në kodin burimor të dokumentit. Nuk ka asnjë rregullim për këtë gabim. Nëse përdorni::shkronjën e parë, do t'ju duhet t'i shpëtoni këtyre karaktereve në fillim të një paragrafi.

Shënim: defekte në shfletuesit Blink

Disa versione të shfletuesve Blink nuk do të zbatojnë rregullin e shkronjës së parë nëse prindi ka veçorinë e tij të ekranit të vendosur në inline ose tabelë. Defekti është në Chrome 42, Opera 29 dhe Yandex 15. Defekti u rregullua në Chrome 44, por publikimi nuk do të shohë dritën derisa ky libër të jetë në duart tuaja. Mënyra më e lehtë për të zgjidhur problemin është t'i shtoni prindit veçorinë e ekranit: inline-block, display: block, ose display: tabela-cell.

Krijimi i efekteve tipografike me:: rreshtin e parë

Pseudo-class::first-line funksionon njësoj si::first-letter, përveç se efekti shtrihet në të gjithë rreshtin e parë të elementit. Për shembull, mund ta bëni rreshtin e parë të çdo paragrafi më të madh dhe të ndryshoni ngjyrën e tekstit:

Ju mund ta detyroni fundin e rreshtit të parë me br ose hr, siç tregohet më poshtë. Fatkeqësisht, kjo nuk funksionon gjithmonë. Nëse elementi juaj mund të përshtatet vetëm me 72 karaktere, atëherë një etiketë br pas karakterit të 80-të nuk do të ketë efekt në pseudoelementin e linjës së parë. Ju thjesht do të merrni një thyerje të çuditshme të linjës.

Në mënyrë të ngjashme, me një hapësirë ​​që nuk thyhet (), e cila futet në mënyrë që të mos thyhen fjalët midis rreshtave. Kjo nuk do të ndikojë në asnjë mënyrë ::first-line. Fjala që ndodhet përpara do të zhvendoset me forcë në rreshtin ku ndodhet teksti pas hapësirë ​​që nuk thyhet.

Përmbajtja e krijuar e shtuar nëpërmjet::bere do të shfaqet në rreshtin e parë siç tregohet më poshtë.

Nëse teksti i krijuar është mjaft i gjatë, ai do të mbushë plotësisht rreshtin e parë. Megjithatë, nëse shtoni ekran: bllok (për shembull, p::para (përmbajtja: '!!!'; shfaqja: bllok;)), atëherë përmbajtja do të zërë të gjithë rreshtin e parë.

Fatkeqësisht, ky gabim është ende i pranishëm në Firefox 40 dhe më herët. Firefox e injoron plotësisht rregullin.

Ndërfaqe argëtuese me::selection

Pseudo-elementi::zgjedhja është një nga të ashtuquajturat pseudo-elementë "theksues", siç përcaktohet në specifikimin e Modulit Pseudo-Elements CSS Niveli 4. Ky pseudo-element theksues ishte më parë pjesë e specifikimeve të Nivelit 3 të Seleksionuesve, vetëm një i mbështetur nga shfletuesit.

Me zgjedhjen :: mund të aplikoni stile CSS në përmbajtjen e zgjedhur me miun. Si parazgjedhje, sfondi dhe ngjyra e tekstit të përmbajtjes së zgjedhur përcaktohen nga sistemi. Sidoqoftë, zhvilluesit mund t'i ndryshojnë këto cilësime siç tregohet më poshtë.

Me::selection, jo të gjitha vetitë mund të përdoren. Specifikimi thotë vetëm vetitë e mëposhtme:

Mbani parasysh aksesueshmërinë kur zgjidhni një ngjyrë në plan të parë dhe sfond për:: përzgjedhje. Disa kombinime ngjyrash japin kontrast të dobët për njerëzit me shikim të dëmtuar. Kombinime të tjera mund të jenë të palexueshme për njerëzit e verbër. Përpara zgjedhjes përfundimtare të ngjyrës, përdorni Kontrolluesin e Kontrastit dhe Simulatorin e Verbërisë së ngjyrave.

Moduli Pseudo-Elements ka gjithashtu pseudo-klasat::spelling-error dhe ::grammar-error. Kur ato të zbatohen, ne do të jemi në gjendje të stilojmë tekstin me gabime të kontrolluara në fjalorin e shfletuesit.

Pseudo-elementet ju lejojnë të vendosni stilin e elementeve që nuk janë të përcaktuar në pemën e elementeve të dokumentit, si dhe të gjeneroni përmbajtje që nuk është në kodin burimor të tekstit.

Sintaksa për përdorimin e pseudo-elementeve është si më poshtë.

Përzgjedhësi: Pseudo-element ( Përshkrimi i rregullave të stilit)

Emri i përzgjedhësit vjen i pari, i ndjekur nga dy pika, i ndjekur nga emri i pseudoelementit. Çdo pseudo-element mund të zbatohet vetëm për një përzgjedhës, nëse dëshironi të vendosni disa pseudo-elemente për një përzgjedhës menjëherë, rregullat e stilit duhet t'u shtohen atyre individualisht, siç tregohet më poshtë.

Foo: shkronja e parë (ngjyra: e kuqe)
.foo:first-line (stili i shkronjave: italic)

Pseudo-elementet nuk mund të aplikohen për stilet e brendshme, vetëm për një fletë stili të lidhur ose global.

: pas

Përdoret për të futur përmbajtjen e caktuar pas përmbajtjes së elementit. Ky pseudo-element funksionon në lidhje me veçorinë e stilit të përmbajtjes, e cila specifikon përmbajtjen që duhet futur. Shembulli 16-1 tregon përdorimin e pseudoelementit :after për të shtuar tekst në fund të një paragrafi.

Shembulli 16.1. Përdorimi: pas

HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Kapja e një luani në shkretëtirë duke përdorur metodën e raportit të artë.

Metoda e kapjes së një luani është një numërim i thjeshtë.

Rezultati i shembullit është paraqitur në Fig. 16.1.

Oriz. 16.1. Shtimi i tekstit në një paragraf me :after

NË ky shembull i shtohet përmbajtjes së paragrafit me klasën e re fjalë shtesë, e cila është vlera e vetive të përmbajtjes.

Pseudo-elementet :after dhe :para dhe vetia e stilit të përmbajtjes nuk mbështeten. Shfletuesi i internetit Explorer deri në versionin e shtatë përfshirës.

: më parë

Funksioni :para është i ngjashëm me pseudoelementin :after, por fut përmbajtjen përpara përmbajtjes së elementit. Shembulli 16-2 tregon se si të shtoni shënues të llojit tuaj në listën e artikujve duke u fshehur shënuesit standardë dhe duke aplikuar pseudoelementin :para.

Shembulli 16.2. Përdorimi: më parë

HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4

• Cheburashka
• Krokodili Gena
• Shapoklyak
• Miu Larisa

Rezultati i shembullit është paraqitur më poshtë (Figura 16.2).

Oriz. 16.2. Ndryshimi i pamjes së shënuesve me :para

Në këtë shembull, pseudoelementi :para vendoset për përzgjedhësin LI që përcakton elementet e listës. Shtimi i karaktereve të dëshiruar bëhet duke vendosur vlerën e vetive të përmbajtjes. Vini re se argumenti nuk duhet të jetë tekst, mund të përdoren edhe karaktere Unicode.

Të dyja :after dhe :bere vlerësohen vetëm tek elementët që kanë përmbajtje, kështu që shtimi në një përzgjedhës img ose hyrje nuk do të nxjerrë asgjë.

: letra e parë

Përcakton stilin e karakterit të parë në tekstin e elementit të cilit i shtohet. Kjo ju lejon të krijoni një kapak rënie dhe një iniciale të spikatur në tekst.

Një kapak është një shkronjë e parë e zmadhuar, vija bazë e së cilës është një ose më shumë rreshta më e ulët se vija bazë e tekstit të trupit. Fillestar i dalë - i zmadhuar shkronja e madhe, vija bazë e së cilës përputhet me vijën bazë të tekstit të trupit.

Konsideroni një shembull të krijimit të një fillestari të spikatur. Kjo kërkon shtimin e një pseudo-elementi me shkronjën e parë në përzgjedhësin P dhe vendosjen e stilit fillestar të dëshiruar. Në veçanti, rrisni madhësinë e tekstit dhe ndryshoni ngjyrën e tekstit (shembulli 16.3).

Shembulli 16.3. Përdorimi: shkronja e parë

HTML5 CSS 2.1 IE Cr Op Sa Fx

Rrezja e elektrik dore ndriçoi shkallët e vjetra kërcitëse, përgjatë të cilave Pasha ishte ngjitur në shtëpi jo më shumë se pesë minuta më parë. Olya hapi me kujdes derën dhe ndezi dritën brenda shtëpisë. Një rreze drite, sikur pa dëshirë, e kaloi rrugën përmes një velloje të ngushtë errësire dhe pluhuri.

Vështrimi i Olya ra në dysheme dhe ajo bërtiti. Në dhomën e zbrazët nuk kishte njeri dhe vetëm këpuca e grisur e Pashait shtrihej në dysheme.

Rezultati i shembullit është paraqitur më poshtë (Figura 16.3).

Oriz. 16.3. Krijimi i një fillestari të spikatur

Ky shembull ndryshon fontin, madhësinë dhe ngjyrën e shkronjës së parë të çdo paragrafi të tekstit.

:linja e parë

Përcakton stilin e rreshtit të parë të tekstit të bllokut. Gjatësia e këtij vargu varet nga shumë faktorë, si fonti i përdorur, madhësia e dritares së shfletuesit, gjerësia e bllokut, gjuha etj.

Jo të gjitha vetitë e stilit mund të aplikohen në pseudoelementin :first-line. Ju mund të përdorni veçoritë që lidhen me fontin, duke ndryshuar ngjyrën e tekstit dhe sfondit, si dhe: qartë , lartësia e rreshtit , hapësira e shkronjave , dekorimi i tekstit , transformimi i tekstit , rreshtimi vertikal dhe hapësira e fjalëve .

Shembulli 16-4 tregon përdorimin e pseudoelementit të rreshtit të parë në një paragraf të tekstit.

Shembulli 16.4. Theksoni rreshtin e parë të tekstit

HTML5 CSS 2.1 IE Cr Op Sa Fx

Pyes veten nëse ka një mënyrë vërtet praktike për të përdorur pronën e linjës së parë? Jo, jo e tillë që do të ishte e mundur të tregohej se kjo është e mundur, por për të marrë me të vërtetë frymën nga bukuria e vendimit, sytë u ndezën nga perspektivat e fshehura, pas së cilës mbetet vetëm t'i thuash vetes se kjo është ajo, kjo është gjëja për të bërë ndryshe, gjithashtu me hijeshi dhe efektivitet është thjesht e pamundur.

Rezultati i shembullit është paraqitur në Fig. 16.4.

Oriz. 16.4. Rezultati i aplikimit të pseudoelementit: rreshti i parë

Në këtë shembull, rreshti i parë është theksuar me të kuqe dhe me shkronja të pjerrëta. Vini re se kur ndryshon gjerësia e dritares së shfletuesit, stili i rreshtit të parë mbetet i njëjtë, pavarësisht nga numri i fjalëve që përmban.

Pyetje për të kontrolluar

1. Cili pseudoelement ju lejon të shtoni tekst në fillim të një fjalie?

1. : pas
2. : më parë
3. :linja e parë
4. : teksti i parë
5. : letra e parë

2. Çfarë bën stili i mëposhtëm?

OL LI: shkronja e parë (
ngjyra: e kuqe;
}

1. Ndryshon ngjyrën e shkronjës së parë të një artikulli të listës me pika.
2. Ndryshon ngjyrën e shkronjës së parë të një artikulli të renditur të listës.
3. Ndryshon ngjyrën e rreshtit të parë në një listë me pika.
4. Ndryshon ngjyrën e rreshtit të parë në një listë të renditur.
5. Ndryshon ngjyrën e tekstit të gjithë listës.

3. Cili përzgjedhës shkruhet gabimisht?

1. p.re:para
2. shkurt: i rreshtit të parë
3. p.i ri.mbrapa:pas
4. div: para: shkronja e parë
5. a:hover:para

Përgjigjet

2. Ndryshon ngjyrën e shkronjës së parë të artikullit të listës me numër.

Në seksionin e mëparshëm të këtij kapitulli, u diskutuan katër lloje të përzgjedhësve - përzgjedhësit e etiketës, klasës, ID-së dhe grupit. Në këtë pjesë, ne do të kalojmë te përzgjedhësit pasardhës (të quajtur edhe përzgjedhës kontekstualë) dhe do t'ju prezantojmë me pseudo-klasat dhe pseudo-elementet CSS.

Përzgjedhës pasardhës

Kur është e nevojshme të stiloni etiketa specifike në një faqe interneti, përdoren përzgjedhësit e etiketave. Për shembull, për të bërë të gjitha lidhjet pa përjashtim pa nënvizuar, duhet të shkruani një rregull të thjeshtë:

A (teksti-dekorim: asnjë;)

Dhe çfarë të bëjmë kur kemi nevojë për lidhje të nënvizuara, por vetëm kur ato janë në etiketë

Ne mund të krijojmë një klasë të veçantë dhe ta caktojmë atë në lidhjet e dëshiruara, por kjo nuk është plotësisht rruga e duhur, e cila kërkon kohë dhe hapësirë ​​shtesë në kodin HTML. Është shumë më e lehtë të përdorësh përzgjedhës pasardhës (përzgjedhës të kontekstit) dhe të shkruash:

Pa (dekorimi i tekstit: nënvizoni;)

Me fjalë të thjeshta, ne kemi treguar tani se të gjitha lidhjet , të cilat janë në etiketa

Duhet nënvizuar. Dhe ky rregull nuk vlen për të gjitha lidhjet e tjera.

• paraardhës quhet një etiketë që përfshin etiketa të tjera. Në diagramin e mësipërm, html është paraardhësi i kokës dhe trupit, dhe koka është paraardhësi i titullit dhe shkrimit. Etiketa e trupit është paraardhësi i h1, h2 dhe p;
• pasardhës quhet një etiketë që ndodhet në një ose më shumë etiketa. Për shembull, etiketat e kokës dhe trupit janë pasardhës të etiketa html, titulli dhe shkrimi janë fëmijë të kokës dhe html , etiketat h1 , h2 dhe p janë fëmijë të trupit dhe html , dhe span është fëmijë i p , trupit dhe html ;
• prindërore Një element që është një nivel më i lartë se një tjetër quhet. Në skemë, html është prindi i kokës dhe trupit. Etiketa e kokës është prindi etiketat e titullit dhe skenar. Etiketa e trupit është prindi i h1, h2 dhe p. Dhe etiketa p është prindi i hapësirës;
• fëmijë, përkatësisht quhet elementi që është nën elementi prind. Etiketat h1, h2, p janë fëmijë të trupit. Por në të njëjtën kohë etiketa e hapësirësështë një fëmijë i vetëm p;
• si motër, ose fqinjët janë elementë që kanë një prind të përbashkët. Ju ndoshta keni menduar tashmë se etiketat e kokës dhe trupit janë etiketa motra. Gjithashtu ngjitur me njëra-tjetrën janë etiketat h1, h2, p.

Kur krijoni një përzgjedhës pasardhës, fillimisht shkruhet emri i paraardhësit dhe më pas emri i pasardhësit. Duke marrë parasysh shembullin e mësipërm me lidhje të nënvizuara, ne mund të shkruajmë përzgjedhësin e fëmijëve në disa mënyra:

trupi html p a(); bodypa (); pa();

Të tre opsionet do të funksionojnë, por në këtë rast nuk ka kuptim të shkruani emrat e të gjithë paraardhësve, mjafton të kufizohemi vetëm në emrin e prindit. Vlen të përmendet se kur krijoni përzgjedhës për fëmijë, mund t'i referoheni jo vetëm emrit të etiketës më të vjetër, por edhe klasës ose identifikuesit që i është caktuar, gjë që jep edhe më shumë fleksibilitet për stilet e të shkruarit. Është shkruar kështu:

/*për klasa*/ .blogcontent a ( ngjyra: blu; ) /*për id*/ #mobilenav a (madhësia e shkronjave: 12 px; )

Pseudo-klasa dhe pseudo-elemente

Zakonisht stilet css aplikuar në ato elemente të një faqe interneti që janë të dukshme në kodin e saj burimor. Por ka raste kur ju duhet të krijoni një stil për një gjendje specifike të një elementi (për shembull, pamja e një lidhjeje të vizituar, ose shfaqja e një lidhjeje kur kursori qëndron pezull mbi të), si dhe për një element që nuk tregohet qartë në strukturën e faqes. Një shembull i një elementi të tillë do të ishte karakteri i parë në një paragraf, ose rreshti i parë.

Duke përdorur pseudo-klasa në CSS, ju mund të vendosni stilin për elementët ekzistues të një faqeje interneti, i cili do të zbatohet në rast të ndonjë veprimi të përdoruesit. Pseudo-elementet, nga ana tjetër, janë të ndryshëm në atë që mund të stilojnë përmbajtje joekzistente, si dhe elemente që nuk janë të shënuara qartë.

Pseudo-klasa të njohura CSS

Ju mund të stiloni elementë bazuar në gjendjen e atyre elementeve. Këtu është një listë e disa pseudo-klasave:

• :link - kjo pseudo-klasë vendos stilin e lidhjeve që përdoruesi nuk i ka ndjekur ende;
• :visited - ky, përkundrazi, aplikon stilin për lidhjet tashmë të vizituara;
• :hover - përcakton stilin e elementit kur kursori rri pezull mbi të (mund të zbatohet jo vetëm për lidhjet);
• :aktive - vendos stilin lidhje aktive(d.m.th., në momentin e klikimit mbi të);
• :fokus - aplikon një stil në një element kur fokusohet në të (për shembull, kur vendos kursorin në shiritin e kërkimit);
• :not() - Kjo pseudo-klasë e dobishme ju lejon të zgjidhni dhe stiloni vetëm ato elemente që nuk përmbajnë përzgjedhësin e specifikuar në kllapa.

Si shkruhen pseudo-klasat CSS? Ju duhet të shtoni një stil me emrin e elementit të kërkuar + emrin e pseudo-klasës. Shembull:

A:lidhja ( ngjyra: e kuqe; ) a:hover ( ngjyra: #26A65B; ) a:vizituar ( ngjyra: #CCC; )

Stili i shkruar thotë se lidhjet e rregullta, të pavizituara duhet të jenë a:link (ngjyra: e kuqe;), lidhja pezull duhet ndryshoni ngjyrën në një tjetër a:hover (ngjyra: #26A65B;), dhe lidhja e vizituar duhet të ketë ngjyra e tretë: e vizituar (ngjyra: #CCC;).

Pseudo-elemente të njohura të CSS

Nëse pseudo-klasat shkruhen me një dy pika, atëherë pseudo-elementet shkruhen me dy. Kjo u prezantua në CSS3 për të bërë dallimin midis pseudo-klasave dhe pseudo-elementeve. Sidoqoftë, më parë ky ndryshim nuk ekzistonte, dhe një dy pika e vetme përdorej me pseudo-elemente. Tani shfletuesit mbështesin të dy drejtshkrimet (por jo për të gjitha rastet). Konsideroni disa pseudo-elemente:

• ::after - përdoret së bashku me vetinë e përmbajtjes dhe ju lejon të shfaqni të dhënat e nevojshme pas përmbajtjes së elementit;
• ::para - kryen një funksion të ngjashëm si ai i mëparshmi, nxjerr vetëm të dhëna para përmbajtja e elementit;
• ::zgjedhja - ky pseudo-element njihet vetëm nga shfletuesit kur përdorni dy dy pika dhe ju lejon të vendosni ngjyrën dhe sfondin për tekstin që zgjidhet nga përdoruesi;
• ::shkronja e parë - përdoret për të ndryshuar stilin e karakterit të parë në tekstin e elementit;
• ::first-line - Përdoret për të ndryshuar stilin e rreshtit të parë të tekstit të një elementi.

Një shembull i përdorimit të pseudo-elementeve:

Blockquote::fore (përmbajtja: """; ) blockquote::after (përmbajtja: """; ) blockquote::selection (ngjyra: #C8F7C5; ngjyra e sfondit: #1E824C; )

Ne kemi shkruar një stil për thënie të gjata që shton citate të pemës së Krishtlindjes në fillim dhe në fund të përmbajtjes së etiketës

, dhe gjithashtu ndryshon ngjyrën dhe sfondin e tekstit të citatit të zgjedhur nga përdoruesi.

konkluzionet

Në këtë kapitull, ju mësuat për gjëra kaq të rëndësishme dhe të përdorura shpesh në CSS si përzgjedhësit pasardhës, pseudo-klasat dhe pseudo-elementet. Në të ardhmen, ne shpesh do t'u kthehemi atyre, kështu që mbani mend pikat kryesore në temën e trajtuar:

Zgjedhësit e fëmijëve ju ofrojnë opsione stilimi fleksibël dhe kompakte CSS.

Pseudo-klasat ju lejojnë të stiloni gjendje të ndryshme të një elementi të faqes në internet.

Pseudo-elementet në CSS mund të përdoren për të stiluar elementë në një faqe që nuk janë të përcaktuar qartë në strukturën e dokumentit.

Ndonjëherë duket se për të mbijetuar në bota moderne ju duhet të dini se si të krijoni faqe interneti. Edhe në shkolla japin mësim Por kjo nuk mjafton për të krijuar një burim cilësor. Ju gjithashtu duhet të dini bazat e fletëve të stilit kaskadë, në veçanti pseudo-klasat dhe pseudo-elementet CSS.

Cfare eshte?

Sipas ligjit të pashprehur, të gjitha stilet që një webmaster fut në shënimin CSS përdoren për ato elemente të strukturës që mund të shihen në kodin burimor. Megjithatë, ka grupe elementësh që nuk janë të shkruar në dokumentin HTML, por ato gjithashtu duhet të stilohen.

Për shembull, në skedarin HTML nuk ka asnjë etiketë të vetme që do të ishte përgjegjëse për dizajnin shkronje e madhe një paragraf ose zonë e re që vjen përpara një elementi specifik. Po, dhe etiketat nuk mund të tregojnë aktivitetin e lidhjeve ose të ndryshojnë imazhin kur kursori i miut qëndron pezull mbi të. Për të stiluar këto dhe shumë vlera të tjera, ekzistojnë përzgjedhës CSS: pseudo-klasa dhe pseudo-elemente.

Pseudo-klasat janë përzgjedhës që ndikojnë në elementët ekzistues të dokumentit. Pseudo-elementet zakonisht përcaktojnë dhe ndryshojnë një zonë që nuk ishte e pranishme fillimisht në skedarin origjinal. E thënë thjesht, pseudo-elementet përcaktojnë zona të reja të faqes që nuk ishin në shënimin HTML, dhe pseudo-klasat përcaktojnë gjendjen e objekteve në kushte të caktuara.

Pas: pas

Gjëja e parë që duhet t'i kushtoni vëmendje janë pseudo-elementët css më parë dhe më pas, pasi çdo burim që respekton veten i përdor ato për t'u përmirësuar pamjen, lexueshmëria dhe atraktiviteti i faqes. Këta elementë ofrojnë mundësinë për të shtuar zona, etiketa dhe stile të reja përpara ose pas dokumentit origjinal.

Të gjithë, me siguri, të paktën një herë panë njoftime të botimeve në çdo faqe, pas së cilës kishte fjalët: "E re", "E re" ose "Shock", "Të preferuarat", "Më të mirat", "Super", etj. Këto objekte u përcaktuan duke përdorur një pseudo-element

Për të krijuar një pozicion të tillë, duhet të shtoni kodin e mëposhtëm në fletën e stilit të kaskadës:

Këtu, fjala e re specifikon emrin e klasës së re, kështu që përpara paragrafit të nevojshëm në shënimin HTML, duhet të futni: class="new". Emri i klasës duhet të jetë midis kllapave të etiketës hapëse. Nëse gjithçka është bërë si duhet, atëherë pas përfundimit të paragrafit, mbishkrimi "Diçka e re" do të shfaqet në faqen e shfletuesit.

Natyrisht, shembulli përmban një skenar për një titull të thjeshtë, por askush nuk tha që nuk mund të ndryshoni madhësinë, ngjyrën dhe pozicionimin. Gjithçka parametrat e kërkuar mund të futet në klasën e re pas karakteristikës së përmbajtjes. Duhet t'i ndani me një pikëpresje dhe të mbyllni mbajtësin kaçurrelë në fund.

Para: para

Pseudoelementi ka karakteristika pothuajse identike.Me një ndryshim të vogël: është krijuar për të shtuar elementet e nevojshme përballë objektit. Shkruhet njëlloj si pas, vetëm me fjalën para.

Para paragrafit tjetër të tekstit, mund të shtoni fjalë që tërheqin vëmendjen, ose thjesht mund të vendosni një foto ose element Unicode përpara tekstit. Për shembull, hapja e thonjëzave ose indenteve. Për ta sjellë këtë në jetë, duhet të shtoni në shënimin CSS klasë e re dhe vendosni karakteristikat e kërkuara. Zgjidhja më e thjeshtë do të duket kështu:

Për të futur në fund të dokumentit, duhet të krijoni një pseudo-klasë pas dhe në vend të përmbajtja: e hapur shkruaj përmbajtja: mbyll, ripoziciononi në përputhje me rrethanat. Nëse në pseudo-klasën e mëparshme dhëmbëzimi ishte nga margjina e majtë, atëherë në klasën pas duhet të jetë nga margjina e djathtë. Ju gjithashtu mund të shtoni një imazh në shënim (për shembull, të njëjtat thonjëza) dhe teksti nuk do të duket më si një fletë e shurdhër.

Saga epike: së pari

Pseudo-elementi i parë CSS është gjithashtu shumë i popullarizuar në krijimin e projekteve të reja. Në veçanti, kjo vlen për projektet me tema argëtuese dhe përrallore, si dhe burime në internet të drejtimit historik dhe shkencor.

Ky pseudo-element CSS ka dy karakteristika - linjë dhe shkronjë:

• letër- ndryshon shkronjën e parë të fragmentit të tekstit të cilit i shtohet. Kështu, ai formon një kapak rënie - një element në të cilin vija bazë është disa rreshta poshtë tekstit kryesor. Për të vendosur këtë opsion në fletën e stilit të kaskadës, duhet të vendosni karakteristikat për paragrafin. Për shembull, P: shkronja e parë (***)- dhe tashmë midis kllapave tregoni të gjithë parametrat e nevojshëm, si ngjyra, fonti, madhësia. Nëse kapaku duhet të krijohet vetëm për paragrafin e parë, atëherë krijohet një klasë e re (njëlloj si në shembullin me e re: pas).
• linjë- ky pozicion ndryshon plotësisht rreshtin e parë të paragrafit. Është shumë i përshtatshëm për t'u përdorur në botime shkencore nëse keni nevojë të nënvizoni informacione të rëndësishme. Është shkruar në të njëjtën mënyrë si shembujt e tjerë. Por këtu është e rëndësishme të mbani mend se pseudo-elementi nxjerr në pah jo një fjali, por një varg. Në varësi të shfletuesit që përdor përdoruesi, rreshti i parë mund të jetë më i gjatë ose më i shkurtër, prandaj është e rëndësishme të siguroheni që kjo përzgjedhje të mos duket qesharake. Është për raste të tilla që pseudoelementi i ndërprerjes së linjës është krijuar në CSS.

Linja e re

Në fakt, ky element përdoret rrallë, sepse zëvendësohet me sukses nga etiketa
. Sidoqoftë, ka situata kur është e nevojshme të vendosni një ndërprerje të linjës me pseudo-elementë. Për këto qëllime, ju mund të përdorni të njëjtën gjë më pas. Për këtë shkruhet kodi i mëposhtëm: pas (përmbajtja: "\A"; hapësira e bardhë: para;). Emri i klasës duhet të futet midis kllapave të etiketës hapëse, sapo të mbyllet, pas saj do të vijojë një ndërprerje rreshti.

Ky opsion kërkon më shumë kohë për të ndërtuar përmbajtje të lexueshme dhe nëse nuk ka nevojë të punoni me shfletues anormalisht të paeksploruar, atëherë është më mirë të kufizoheni në etiketën
.

Sintaksa pseudo-klasore

Siç u përmend tashmë, pseudo-klasat përcaktojnë gjendjen e elementeve me të cilët ndërvepron përdoruesi. Ndryshe nga pseudo-elementet CSS, të cilët ofrojnë karakteristika që janë të padukshme për strukturën, klasat imagjinare janë të orientuara drejt objektivit. Për ta bërë më të qartë, më lejoni t'ju jap një shembull të vogël. Le të themi se faqja ka një listë Lidhje të dobishme, përdoruesi lundron nëpër to, lexon informacionin, por pas pak ndeshet me përmbajtjen që ka parë tashmë. Ai sapo shkoi përsëri në këtë faqe, sepse ka shumë lidhje, dhe ato nuk janë të ndryshme. Për të parandaluar që kjo të ndodhë, webmasterët shtojnë një pseudo-klasë që ndryshon ngjyrën e lidhjes së shikuar, atëherë përdoruesi do të dijë saktësisht se çfarë ka lexuar dhe ku nuk ka shkuar ende.

Të gjitha pseudo-klasat shkruhen në fletën e stilit kaskadë me një sintaksë të thjeshtë dhe të provuar:

• Përzgjedhësi: Pseudo-klasa (karakteristikat e stilit: ngjyra, madhësia, mbushja, pozicionimi, etj.)

Këto klasa mund të ndahen në tre grupe kryesore:

• ato që përcaktojnë gjendjen e elementit;
• ato që lidhen me pseudoelementët;
• klasa bedel që përcaktojnë gjuhën e përmbajtjes.

Pseudo-klasa dhe gjendja e elementit

Konsideroni, me radhë, cilat mund të jenë pseudo-klasat. Nëngrupi i parë karakterizohet nga një ndryshim në gjendjen e një elementi në varësi të gjendjes së tij në një moment të caktuar. Është si në shembullin e mësipërm: nëse klikohet lidhja, ajo do të ndryshojë ngjyrën. Kjo përfshin pseudo-klasat e mëposhtme:

• :aktive. Nëse aplikoni këtë pseudo-klasë, atëherë kur klikoni në një fragment të veçantë, ai do të bëhet aktiv. Kjo do të shfaqet si një ndryshim ngjyrash, një rritje në madhësi ose një animacion.
• :lidhje. Zbatohet kryesisht për lidhjet që përdoruesi nuk i ka vizituar ende. Ato mbeten të pandryshuara.
• : fokus. Më shpesh përdoret për dokumente tekstuale kur përdoruesi mund të ndryshojë ngjyrën e tekstit duke vendosur kursorin në fushë. Ndonjëherë kjo përdoret gjithashtu për imazhe. Për shembull, ata vendosin që fotografia të ketë hije, por kur klikohet, ajo merr një ngjyrë natyrale.
• :rri pezull. Kur përdoruesi thjesht lëviz miun mbi objekt i caktuar, mund të ndryshojë ngjyrën ose formën pa pasur nevojë të klikoni.
• :vizituar. Në thelb kjo pseudo-klasë është për lidhjet e vizituara që ndryshojnë ngjyrën e tyre në vjollcë si parazgjedhje.

Fillestarët gabimisht supozojnë se këto pseudo-klasa janë vetëm për lidhje, por me dëshirën dhe imagjinatën e duhur, ju mund të ndryshoni çdo element të faqes.

Specifike për pseudo-elementet CSS

Ky grup përzgjedhësish përfshin pseudo-klasa që mund të ndryshojnë pseudo-elementet. Një pseudo-klasë e tillë është :fëmija i parë. Në fletën e stilit të kaskadës, duhet të krijoni një klasë të re për :fëmija i parë dhe vendosni ngjyrën ose madhësinë e tekstit. Rezultati do të duket si ky:

• B: fëmija i parë (ngjyra: e kuqe; )

Më shpesh kjo bëhet kur është e nevojshme të zgjidhni disa fragmente teksti. me gërma të zeza dhe vetëm fillimi i paragrafit duhet të jetë i ndryshëm. Prandaj, klasa quhet njësoj si etiketa që është përgjegjëse për tekstin me shkronja të zeza. Nëse e zbatojmë këtë në praktikë, atëherë falë pseudo-klasës, vetëm fragmenti i parë i theksuar me shkronja të zeza do të ketë një ngjyrë të kuqe, pjesa tjetër e fjalëve do të jetë e zezë standarde.

Gjithashtu :fëmija i parë përdoret për të hequr dorëzimin e paragrafit të parë, pastaj në vend të ngjyra: e kuqe; do të duhet të shkruajë teksti-indenti: 0;, dhe zëvendësoni B me P (tregohet gjithashtu nga etiketa që është përgjegjëse për fillimin e paragrafit).

Gjuha e përmbajtjes

Pseudo klasë :lang kryesisht zbatohet për tekstet që shkruhen gjuhë të ndryshme. Për shembull, nëse artikulli përmban citate në gjuhën origjinale, atëherë mund të vendosni karakteristika të veçanta për to. Sintaksa për këtë grup do të ishte:

• Emri i klasës: gjuha (gjuha) (karakteristikat e tekstit (ngjyra, etj.))

Sa i përket pozicionit "gjuhë", ai caktohet sipas normave të pranuara. Për shembull, anglishtja është en, rusishtja është ru, gjermanishtja është de, e kështu me radhë.Me këtë pseudo-klasë, ju mund të ndryshoni stilin e tekstit të huaj në të gjithë dokumentin.

konkluzionet

CSS Pseudo-Classes and Pseudo-Elements është një nga ato pyetjet kaskadë të fletës së stilit që e bën të vështirë për t'u kuptuar. Sidoqoftë, nuk ka asgjë të komplikuar këtu, gjëja kryesore është të kuptojmë se një pseudo-klasë është një gjendje e caktuar që kryhet në kushtet e specifikuara më herët. Për shembull, kur rri pezull kursorin ose klikoni miun. Një pseudo-element është një pjesë e pavarur e një dokumenti që nuk është pjesë e shënjimit HTML, por mund të ketë stilin e vet. Madje mund të thuhet se është HTML virtual. Nëse e shikoni situatën nga kjo anë, atëherë gjithçka bëhet jashtëzakonisht e thjeshtë dhe e kuptueshme, dhe me njohuri të tilla tashmë mund të filloni të krijoni faqe në internet.