Un titlu de articol competent și atrăgător poate atrage atenția și vizitatorii site-ului. Aceasta este una dintre cele mai importante componente în optimizarea SEO a unui proiect pe Internet. În această postare vă voi spune care sunt anteturile h1, h2, h3, h4, h5, h6 și cum să le scrieți. În plus, veți afla despre titlul principal al paginii - titlu.

Dar să vorbim despre totul în ordine.

Ce este titlul

Asa de, titlu- aceasta etichetă specială situat la începutul codului html, descriind pe scurt conținutul o anumită pagină site-ul. Despre titlul titlului mai voluminos și detaliat în acest articol.

V cod sursa titlul principal arată astfel:

Acest tip de titlu, de exemplu, pe CMS Joomla este creat în mod automat... Adică titlul care este atribuit fiecărui material și este astfel titlul antetului. Importanța sa pentru optimizarea SEO internă a site-ului nu este exagerată, deoarece este ceea ce utilizatorul de internet îl vede în bara de căutare pentru o cerere anume.

Ce este titlul h1

Titlul H1- acestea sunt mai multe fraze bine structurate, în care este înglobat aproape întregul sens al materialului prezentat. Cu alte cuvinte, acesta este cel mai important titlu de la începutul paginii.

Același set specific de cuvinte ca și pentru titlu este generat în titlul h1 Joomla. Așa arată în codul sursă:

Cine este freelancer și cum să deveniți

S-au scris o mulțime de informații cuprinzătoare despre dacă acest lucru este bun sau rău, dar totuși nu există o definiție specifică. Iată ce are de spus celebrul blogger Devaka despre asta.

Devine clar că motorul Joomla, totuși, ca și restul CMS-ului, simplifică foarte mult lucrul cu site-ul, deoarece la crearea antetelor nu este nevoie să editați codul html.

Restul antetelor sunt create direct în editor de text... În funcție de panou și set elemente active, este selectat functie specifica, care este denumit „Paragraf” în editorul de text JCE. Deplasând cursorul, puteți vedea că toate titlurile existente sunt prezentate aici, de la h1 la h6.

Cum se scrie titlul h1 și titlul

În domeniul optimizării SEO, există reguli clare pentru scrierea etichetelor de bază și anume:

1. Cuvinte cheie... În ochii motoarelor de căutare, unul bine scris pare mult mai promițător și mai atractiv dacă la începutul titlului său și h1 scrii cuvinte care răspund interogări cheie... Cum le recunoști? Pentru aceasta există un serviciu online special wordstat.yandex.ua.

2. Lizibilitate... Nu poți doar să introduci cuvinte cheie într-un titlu. Textul ar trebui să fie natural și ușor de citit, altfel motoarele de căutare vor considera acest truc drept spam. Când scrieți titlul h1 și titlul, încercați să plasați Cuvinte cheie cât mai aproape de începutul lor. Titlurile h1, h2, h3 sunt o altă chestiune... Ele pot fi declinate și diluate cu anumite cuvinte tematice.

3. Fără luări... Pentru ca paginile site-ului să se claseze mai sus în rezultatele cautarii, v cod html nu ar trebui să existe titluri duplicat. Pentru a verifica paginile, deschideți site-ul într-un browser și apăsați tastele rapide Ctrl + U, apoi Ctrl + F. În caseta de căutare, scrieți h1 și toate caracterele prezente vor fi evidențiate cu un fundal galben.

4. Lungime... 70 de caractere sunt permise în eticheta de titlu deoarece cantitate mare pur și simplu nu se va potrivi în fragment.

5. Unicitatea... Fiecare titlu ar trebui să fie unic într-un anumit proiect de Internet, astfel încât utilizatorilor să le fie mai ușor să navigheze și să găsească exact ceea ce au nevoie.

7. Semne de separare este indicat să nu folosiți.

Utilizarea corectă a etichetelor h2 - h6

Titlurile h2 - h6 ajută la orientarea în textul prezentat, făcând materialul mai atractiv în ochii cititorilor și roboților de căutare. Prin urmare, există câteva reguli stricte atunci când le creați, și anume:

Structura titlurilor trebuie aranjată astfel încât să se formeze o ierarhie consistentă. Să aruncăm o privire la un exemplu ilustrativ. Să presupunem că autorul scrie un articol pe tema „Freestyle Wrestling”. În acest caz, subtitlurile vor arăta astfel.

De la autor: Specificația Modulului Pseudo-elemente CSS Nivelul 4 aruncă lumină asupra comportamentului pseudo-elementelor existente și oferă altele noi. Cu toate acestea, doar câteva dintre noile pseudo-elemente au suport în browserele recente.

Astăzi vom vorbi despre următoarele pseudo-elemente:

:: before - inserează conținutul generat înainte de conținutul elementului

:: după - inserează conținutul generat după conținutul elementului

:: prima literă - Selectează prima literă a unui element

:: prima linie - selectează prima linie a unui element

:: selectie - Stilează textul selectat de cursor

Dintre acestea, elementele de selecție :: first – letter, :: first – line și :: afectează conținutul care este inclus în surse. Pe de altă parte, pseudoelementele :: înainte și :: după, inserează conținut în document care nu se află în surse. Să aruncăm o privire mai atentă la toate pseudo-elementele.

Notă: sintaxă cu un singur punct

Este posibil să fi văzut versiunile cu un singur punct pentru :: prima literă, :: prima linie, :: înainte și :: după în vechiul CSS. În CSS2, aceste pseudo-elemente au fost specificate cu două puncte unice :. IE8 necesită o singură sintaxă de două puncte, deși majoritatea celorlalte browsere acceptă ambele. Mai bine să folosiți sintaxa două puncte.

Pseudo-elementele :: înainte și :: după

Majoritatea pseudo-elementelor vă permit să selectați conținut care este deja prezent în sursa documentului, dar care nu este specificat de limbă (cu alte cuvinte, HTML-ul dvs.). Totuși, :: înainte și :: după muncă diferit. Aceste pseudo-elemente adaugă conținut generat arborelui documentului. Conținutul generat nu există în sursa HTML, dar este afișat.

De ce să folosiți conținutul generat? De exemplu, puteți marca câmpuri obligatorii forme prin adăugarea de conținut după etichete:

/ * Se aplică etichetei asociate câmpului obligatoriu * / .required :: after (conținut: „(Obligatoriu)”; culoare: # c00; font-size: .8em;)

În câmpul de formular obligatoriu, trebuie să utilizați proprietate HTML necesar. pentru că aceasta informatie este deja disponibil în DOM, :: înainte și :: după acționează ca ajutoare. Acesta nu este conținut critic, așa că nu trebuie să îl adăugați la sursă.

Notă: conținut generat și accesibilitate

Unele cititoare de ecran și browsere recunosc și citesc conținutul generat, dar majoritatea nu recunosc. Nu utilizați pseudo-elementele :: înainte și :: după pentru a furniza conținut generat utilizatorilor cu dizabilități... Puteți explora acest lucru mai detaliat în articolul lui Leonie Watson „Suport pentru accesibilitate pentru conținutul CSS generat”.

O altă utilizare a :: înainte și :: după este adăugarea unui prefix sau sufix la conținut. Formularul de mai sus poate folosi text de ajutor, așa cum se arată mai jos:

Introducem textul nostru auxiliar între paranteze, folosind :: înainte și :: după.

Helptext :: înainte (conținut: "(";) .helptext :: după (conținut: ")";)

Rezultat.

Poate cel mai mult mod util utilizări :: înainte și :: după - curățați elementele plutitoare. Nicolas Gallagher a introdus această tehnică (care se bazează pe munca lui Thierry Koblentz) în postarea sa „noul hack micro clearfix”:

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

Adăugați clasa clearfix la orice element care trebuie șters după elementul flotant.

Pseudo-clasele :: înainte și :: după se comportă complet ca copiii etichetei la care sunt atașați. Ele moștenesc toate proprietățile posibile ale părintelui și sunt localizate în interiorul blocului părinte. De asemenea, ele interacționează cu alte elemente de bloc ca și cum ar fi etichete reale. Afișarea: bloc sau afișarea: proprietățile tabelului pe :: înainte și :: după funcționează exact la fel ca pe alte elemente.

Atenție: un pseudo-element per selector

Pe acest moment este permis un singur pseudo-element per selector. Adică, o intrare ca p :: first-line :: before este incorectă.

Crearea de efecte tipografice cu: prima literă

Pseudo-elementele :: înainte și :: după inserează conținut, în timp ce :: prima literă funcționează cu conținut deja scris în sursă. Poate fi folosit pentru a crea prima literă sau efectul de minuscule pe care l-ați văzut în reviste și cărți.

Notă: prima literă și majuscule

Efectul primei litere este o literă mare la începutul textului, care este setată la o dimensiune mai mare a fontului în raport cu restul textului. O literă este similară cu prima literă, dar este introdusă în primul paragraf de cel puțin două rânduri.

Stilurile de mai jos adaugă prima literă majusculă la toate p paragrafele din document:

p :: prima literă (familie font: serif; greutate font: bold; dimensiune font: 3em; stil font: cursiv; culoare: # 3f51b5;)

Din captură de ecran, puteți vedea că :: prima literă modifică înălțimea liniei primei linii dacă elementului i s-a dat o valoare a înălțimii liniei fără unități. V în acest caz toate etichetele p moștenesc o valoare a înălțimii liniei de 1,5 din eticheta body.

Există trei moduri de a atenua această problemă:

micșorați înălțimea liniei pentru pseudo-elementul :: cu prima literă, aproape întotdeauna 5 va face;

setați înălțimea liniei cu unitățile pentru :: prima – pseudo-element de literă;

setați înălțimea liniei în unități de corp sau părinte :: prima – literă.

Prima opțiune menține ritmul vertical, așa cum este cazul cu o valoare a înălțimii liniei care nu este unitară. A doua opțiune limitează efectele secundare ale înălțimii liniei fixe la pseudo-elementele în sine. A treia opțiune este cea mai proastă, există o probabilitate mare ca veți crea un efect secundar care va trebui rescris cu cod CSS suplimentar.

În cazul nostru, să reducem înălțimea liniei pentru p :: prima literă la 5 (și să rescriem proprietățile în fișier, vom folosi proprietatea fontului scurt):

p :: prima literă (font: bold italic 3em / .5 serif; culoare: # 3f51b5;)

Rezultatul poate fi văzut mai jos. Rețineți că, de asemenea, trebuia să ajustam marginea de jos a fiecărui paragraf p pentru a compensa înălțimea liniei scăzută cu p :: prima literă.

Este nevoie de puțin mai multe linii de CSS pentru a crea limitele. Spre deosebire de primele majuscule, textul adiacent curge în jurul capacului. Adică trebuie să adăugăm float: left; în stilurile noastre. Vom adăuga, de asemenea, marginile de sus, din dreapta și de jos:

p :: prima literă (font: bold italic 3em / .5 serif; font-style: italic; culoare: # 607d8b; float: stânga; margine: 0.2em 0.25em .01em 0;)

Un element plutitor sau, în cazul nostru, un pseudo element, face ca restul textului să curgă în jurul lui, așa cum se arată mai jos.

Cu excepția cazului în care utilizați px sau rem pentru a seta dimensiunile, marginile și înălțimea liniei, va fi foarte dificil să stilați perfect prima literă :: în toate browserele.

Uneori, un semn de punctuație este folosit ca prima literă a unui element de text. De exemplu, o știre care începe cu un citat:

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

În acest caz, stilurile pentru :: prima literă vor fi aplicate atât citatului de deschidere, cât și primei litere, așa cum se arată mai jos. Stilurile sunt aplicate la fel în toate browserele.

Cu toate acestea, rezultatul va fi diferit atunci când punctuația este generată de element. Luați în considerare următorul marcaj:

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

În acest moment, browserele redau eticheta q sub formă de ghilimele, folosite într-o anumită limbă, care se va deschide și se va închide. Cu toate acestea, nu toate browserele recunosc astfel de ghilimele în mod egal. În Firefox 42 (vezi mai jos), Safari 8 sau mai multe versiuni timpurii:: prima literă modifică doar citatul de deschidere.

În Chrome, Opera și Yandex, citatul de deschidere al etichetei q și prima literă a paragrafului nu sunt stilizate. Mai jos este o captură de ecran în Chrome.

IE aplică stiluri atât pentru ghilimele de deschidere, cât și pentru prima literă a paragrafului. Vezi mai jos.

Specificația Modulului Pseudo-elemente CSS Nivelul 4 spune că semnul de punctuație care precede sau imediat după prima literă sau caracter ar trebui să fie stilizat. Cu toate acestea, specificația nu explică în mod explicit modul de aplicare a stilurilor semnelor de punctuație generate.

Erori de browser la utilizarea :: prima literă

În cea mai mare parte, :: prima literă funcționează exact așa cum v-ați aștepta în toate browserele. Ca în cazul tuturor Proprietăți CSS, acest pseudo-element are câteva erori și utilizări greșite de care trebuie să fii conștient.

În Firefox 39 și versiunile anterioare, unele caractere fac Firefox să ignore regula :: prima literă: -, $, ^, _, +, `, ~,>,<.>

Acest lucru se aplică cazurilor în care primul caracter este specificat prin :: înainte și proprietatea conținut, precum și dacă este specificat în sursa documentului. Nu există nicio remediere pentru acest bug. Dacă utilizați :: prima literă, va trebui să evitați aceste caractere la începutul paragrafului.

Notă: erori în browserele Blink

Unele versiuni ale browserului Blink nu vor aplica regula :: first – letter dacă părintele are o proprietate de afișare setată la inline sau table. Eroarea se află în Chrome 42, Opera 29 și Yandex 15. Eroarea a fost remediată în Chrome 44, dar versiunea nu va fi lansată decât după ce această carte va fi în mâinile tale. Cea mai simplă soluție este să adăugați proprietăți display: inline-block, display: block sau display: table-cell proprietăților părinte.

Crearea de efecte tipografice cu :: prima linie

Pseudoclasa :: de prima linie funcționează la fel ca :: prima literă, cu excepția faptului că efectul se extinde la întreaga primă linie a elementului. Puteți, de exemplu, să măriți primul rând al fiecărui paragraf și să schimbați culoarea textului:

Puteți forța sfârșitul primei linii cu br sau hr, așa cum se arată mai jos. Din păcate, acest lucru nu funcționează întotdeauna. Dacă elementul dvs. poate găzdui doar 72 de caractere, atunci eticheta br după al 80-lea caracter nu va avea niciun efect asupra pseudo-elementului :: de prima linie. Veți obține doar o pauză ciudată de linie.

La fel, cu spațiul neîntrerupt (), care se inserează pentru a nu rupe cuvintele între rânduri. Acest lucru nu va afecta în niciun fel :: prima linie. Cuvântul care se află înainte va fi mutat forțat pe linia unde textul de după spatiu de nerupere.

Conținutul generat adăugat prin :: înainte va fi afișat pe prima linie, așa cum se arată mai jos.

Dacă textul generat este suficient de lung, acesta va umple complet prima linie. Cu toate acestea, dacă adăugați display: block (de exemplu, p :: înainte de (conținut: ‘!!!’; display: block;)), atunci conținutul va umple întreaga primă linie.

Din păcate, această eroare este încă prezentă în Firefox 40 și versiuni anterioare. Firefox ignoră complet regula.

Interfețe distractive cu selecție ::

Pseudo-elementul de selecție :: se referă la așa-numitele pseudo-elemente „evidențiate” definite în specificația Modulului Pseudo-Elemente CSS Nivelul 4. Acest pseudo-element de evidențiere a făcut parte anterior din specificația Selectors Level 3 și este singurul acceptat în browsere.

Cu selecția ::, puteți aplica stiluri CSS conținutului selectat cu mouse-ul. În mod implicit, fundalul și culoarea textului conținutului selectat sunt setate de sistem. Cu toate acestea, dezvoltatorii pot modifica aceste setări, așa cum se arată mai jos.

Nu toate proprietățile pot fi utilizate cu selecția ::. Specificația conține doar următoarele proprietăți:

Fiți conștienți de accesibilitate atunci când alegeți o culoare de prim plan și fundal pentru :: selectie. Unele combinații de culori oferă un contrast slab pentru persoanele cu vedere scăzută. Alte combinații pot fi ilizibile pentru daltonii. Utilizați Verificatorul de contrast și Simulatorul de daltonism înainte de a finaliza alegerile de culoare.

Modulul Pseudo-Elemente conține, de asemenea, pseudo-clasele :: greșeli de ortografie și :: erori de gramatică. Când sunt implementate, putem stila textul cu erori verificate în dicționarul browserului.

Pseudo-elemente vă permit să setați stilul elementelor care nu sunt definite în arborele de elemente al documentului, precum și să generați conținut care nu se află în codul sursă al textului.

Sintaxa pentru utilizarea pseudo-elementelor este următoarea.

Selector: Pseudo-element (Descrierea regulilor de stil)

Mai întâi vine numele selectorului, apoi două puncte, urmat de numele pseudo-elementului. Fiecare pseudo-element poate fi aplicat doar unui selector, dacă doriți să setați mai multe pseudo-elemente pentru un selector deodată, regulile de stil trebuie adăugate la ele separat, așa cum se arată mai jos.

Foo: prima literă (culoare: roșu)
.foo: prima linie (stil font: cursiv)

Pseudo-elementele nu pot fi aplicate stilurilor interne, ci doar unei foi de stil legate sau globale.

: după

Folosit pentru a insera conținutul atribuit după conținutul elementului. Acest pseudo-element funcționează împreună cu proprietatea stil de conținut, care definește conținutul de inserat. Exemplul 16-1 arată utilizarea pseudo-elementului: after pentru a adăuga text la sfârșitul unui paragraf.

Exemplul 16.1. Aplicare: dupa

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

Prinderea unui leu în deșert folosind metoda proporției de aur.

Metoda de a prinde un leu este o simplă forță brută.

Rezultatul exemplului este prezentat în Fig. 16.1.

Orez. 16.1. Adăugarea de text la un paragraf cu: după

V acest exemplu la conţinutul paragrafului cu clasa nouă se adaugă cuvânt suplimentar care este valoarea proprietății conținutului.

Pseudoelementele: după și: înainte și proprietatea stilului de conținut nu sunt acceptate motor de cautare Explorer până la versiunea a șaptea inclusiv.

: inainte de

Funcția: before este similară cu pseudo-elementul: after, dar inserează conținut înaintea conținutului elementului. Exemplul 16.2 arată cum să adăugați marcatori personalizați la elementele din listă prin ascunderea markere standardși aplicând: înainte de pseudo-element.

Exemplul 16.2. Folosind: înainte

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

• Cheburashka
• Crocodilul Gena
• Shapoklyak
• Șobolanul Larissa

Rezultatul exemplului este prezentat mai jos (fig. 16.2).

Orez. 16.2. Schimbarea aspectului markerilor cu: înainte

În acest exemplu, pseudo-elementul: înainte este setat pentru selectorul LI care definește elementele listei. Adăugarea caracterelor dorite se face prin setarea valorii proprietății de conținut. Vă rugăm să rețineți că argumentul nu trebuie să fie text; pot fi utilizate și caractere Unicode.

Ambele: după și: înainte produc rezultate numai pentru elementele care au conținut, deci adăugarea la img sau la selectorul de intrare nu va scoate nimic.

: prima literă

Determină stilul primului caracter din textul elementului la care este adăugat. Acest lucru vă permite să creați o limitare și o inițială proeminentă în text.

O literă de referință este o primă literă mărită a cărei linie de bază este cu una sau mai multe linii mai jos decât linia de bază a textului. Inițială proeminentă - mărită litera cursiva a cărui linie de bază este aceeași cu linia de bază a textului corpului.

Să ne uităm la un exemplu de creare a unei inițiale proeminente. Acest lucru necesită adăugarea: pseudo-elementului cu prima literă la selectorul P și setarea stilului inițial dorit. În special, măriți dimensiunea textului și schimbați culoarea textului (exemplul 16.3).

Exemplul 16.3. Utilizare: prima literă

HTML5 CSS 2.1 IE Cr Op Sa Fx

Raza lanternei scotea în evidență vechile trepte scârțâitoare, de-a lungul cărora Pașa urcase în casă nu mai târziu de cinci minute în urmă. Olya deschise ușa cu grijă și aprinse o lumină în interiorul casei. O rază de lumină, parcă fără tragere de inimă, și-a făcut loc prin perdeaua strânsă a întunericului și a prafului.

Privirea Olyei a căzut pe podea și a țipat. Nu era nimeni în camera goală și doar pe podea era pantoful rupt al lui Pașa.

Rezultatul exemplului este prezentat mai jos (fig. 16.3).

Orez. 16.3. Realizarea unei inițiale proeminente

Acest exemplu modifică fontul, dimensiunea și culoarea primei litere a fiecărui paragraf de text.

: prima linie

Determină stilul primei linii de text bloc. Lungimea acestei linii depinde de mulți factori, cum ar fi fontul utilizat, dimensiunea ferestrei browserului, lățimea blocului, limba etc.

Nu toate proprietățile de stil se pot aplica: pseudo-elementului de primă linie. Este permisă utilizarea proprietăților legate de font, schimbarea culorii textului și a fundalului, precum și: clar, înălțime de linie, spațiere între litere, decor text, transformare text, aliniere verticală și spațiere între cuvinte.

Exemplul 16-4 arată utilizarea: pseudo-elementului de primă linie pe un paragraf de text.

Exemplul 16.4. Selectați primul rând de text

HTML5 CSS 2.1 IE Cr Op Sa Fx

Mă întreb dacă există o modalitate cu adevărat practică de a folosi proprietatea de primă linie? Nu, nu de așa natură încât ar fi posibil să arăți că se poate, ci să captezi cu adevărat spiritul frumuseții soluției, să luminezi ochii din perspective ascunse, după care rămâne doar să-ți spui că asta este acest lucru, acest lucru trebuie făcut diferit, de asemenea, elegant și eficient este pur și simplu imposibil.

Rezultatul exemplului este prezentat în Fig. 16.4.

Orez. 16.4. Rezultatul aplicării pseudo-elementului: prima linie

În acest exemplu, prima linie este evidențiată cu roșu și italice. Vă rugăm să rețineți că atunci când schimbați lățimea ferestrei browser, stilul primei linii rămâne constant, indiferent de numărul de cuvinte incluse în ea.

Întrebări de verificat

1. Ce pseudo-element vă permite să adăugați text la începutul unei propoziții?

1. : după
2. : inainte de
3. : prima linie
4. : primul text
5. : prima literă

2. Ce face următorul stil?

OL LI: prima literă (
culoarea rosie;
}

1. Schimbă culoarea primei litere a unui element din listă cu marcatori.
2. Schimbă culoarea primei litere a unui articol numerotat din listă.
3. Schimbă culoarea primei linii din lista cu marcatori.
4. Schimbă culoarea primei linii dintr-o listă numerotată.
5. Schimbă culoarea textului întregii liste.

3. Care selector este scris greșit?

1. p.nou:înainte
2. abr: prima linie
3. p.nou.spate: după
4. div: înainte de: prima-litera
5. a: hover: înainte

Răspunsuri

2. Schimbă culoarea primei litere a unui articol numerotat din listă.

În secțiunea anterioară a acestui capitol, au fost discutate patru tipuri de selectoare — selectoare pentru etichete, clase, ID-uri și grupuri. În această parte, vom trece la selectorii descendenți (numiți și selectori de context) și, de asemenea, vă vom prezenta pseudoclasele și pseudoelementele CSS.

Selector de descendenți

Când trebuie să stilați anumite etichete pe o pagină web, sunt utilizați selectori de etichete. De exemplu, pentru a face toate linkurile fără excepție neaccentuat, trebuie să scrieți o regulă simplă:

A (decor text: niciunul;)

Și ce să facem atunci când avem nevoie de linkuri subliniate, dar numai când sunt în etichetă

Am putea crea o clasă separată și să o atribuim legăturilor pe care le dorim, dar nu este chiar așa calea cea buna, care necesită investiții suplimentare în timp și spațiu în codul HTML. Este mult mai ușor să folosești selectori descendenți (selectori de context) și să scrii:

P a (decor text: subliniere;)

În termeni simpli, am indicat acum că toate linkurile care sunt în etichete

Trebuie subliniat. Și această regulă nu se aplică tuturor celorlalte link-uri.

• strămoş acea etichetă se numește care include alte etichete. În diagrama de mai sus, html este strămoșul pentru cap și corp, iar cap, la rândul său, este strămoș pentru titlu și script. Eticheta corporală este strămoșul lui h1, h2 și p;
• descendent numită etichetă care se află într-una sau mai multe etichete. De exemplu, etichetele cap și corp sunt descendenți etichetă html, titlul și scriptul sunt descendenți atât pentru head, cât și pentru html, etichetele h1, h2 și p sunt descendenți atât pentru body, cât și pentru html, iar span este un descendent pentru p, body și html;
• mamă se numește elementul care este cu un nivel mai înalt față de celălalt. În schemă, părintele este html în raport cu cap și corp. Etichetă de cap - părinte etichete de titluși scenariu. Eticheta body este părintele lui h1, h2 și p. Și eticheta p este părintele intervalului;
• filială, respectiv, se numește elementul care se află sub element părinte... Etichetele h1, h2, p sunt copii ai corpului. Dar in acelasi timp eticheta span este singurul copil al lui p;
• asistență medicală, sau frații sunt elemente care au un părinte comun. Probabil ați ghicit deja că etichetele pentru cap și corp sunt frați. De asemenea, etichetele h1, h2, p sunt adiacente unul altuia.

La crearea unui selector de descendenți, numele strămoșului este înregistrat mai întâi, iar apoi numele descendentului. Luând în considerare exemplul de mai sus cu link-uri subliniate, am putea scrie selectorul de descendenți în mai multe moduri:

Html body p a (); corp p a (); p a ();

Toate cele trei opțiuni vor funcționa, dar în acest caz nu are sens să scriem numele tuturor strămoșilor, este suficient să ne limităm la numele părintelui. Este demn de remarcat faptul că atunci când creați selectori de descendenți, vă puteți referi nu numai la numele etichetei senior, ci și la clasa sau identificatorul atribuit acesteia, ceea ce oferă și mai multe opțiuni flexibile pentru stiluri de scris. Este scris într-un mod similar:

/ * pentru clase * / .blogcontent a (culoare: albastru;) / * pentru identificatori * / #mobilenav a (dimensiune font: 12px;)

Pseudo-clase și pseudo-elemente

De obicei Stiluri CSS se aplică acelor elemente ale unei pagini web care sunt vizibile în codul sursă. Dar există cazuri când este necesar să se creeze un stil pentru o anumită stare a unui element (de exemplu, apariția unei legături vizitate sau apariția unei legături atunci când cursorul trece peste el), precum și pentru un element care nu este clar indicat în structura paginii. Un exemplu de astfel de element ar fi primul caracter dintr-un paragraf sau prima linie.

Cu ajutorul pseudo-claselor în CSS, puteți seta stilul pentru elementele existente ale unei pagini web, care va fi aplicat în cazul unei acțiuni a utilizatorului. Pseudo-elemente diferă prin faptul că pot defini stilul conținutului inexistent, precum și elementele clar nemarcate.

Pseudo-clase CSS populare

Puteți stila elemente care depind de starea acelor elemente. Iată o listă cu câteva dintre pseudo-clase:

• : link - Această pseudo-clasă specifică stilul linkurilor pe care utilizatorul nu le-a urmat încă;
• : vizitat - acesta, dimpotrivă, aplică stilul linkurilor deja vizitate;
• : hover - determină stilul elementului când cursorul trece peste el (poate fi aplicat nu numai link-urilor);
• : activ - stabilește stilul link activ(adică în momentul clicului pe el);
• : focus - aplică stilul elementului atunci când se concentrează asupra acestuia (de exemplu, când plasează cursorul în bara de căutare);
• : not () - Această pseudo-clasă utilă vă permite să selectați și să stilați doar acele elemente care nu conțin selectorul specificat în paranteze.

Cum sunt scrise pseudoclasele CSS? Trebuie să adăugați un stil cu numele elementului necesar + numele pseudo-clasei. Exemplu:

A: link (culoare: roșu;) a: hover (culoare: # 26A65B;) a: vizitat (culoare: #CCC;)

Stilul scris spune că link-urile obișnuite, nevizitate ar trebui să fie roșu a: link (culoare: roșu;), linkul de pe hover ar trebui schimbați culoarea într-o altă a: hover (culoare: # 26A65B;) iar linkul vizitat trebuie să aibă a treia culoare: vizitat (culoare: #CCC;).

Pseudo-elemente populare CSS

Dacă pseudo-clasele sunt scrise cu două puncte, atunci pseudo-elementele sunt scrise cu două. Acest lucru a fost implementat în CSS3 pentru a diferenția între pseudo-clase și pseudo-elemente. Cu toate acestea, această diferență nu a existat înainte și un singur punct a fost folosit cu pseudo-elemente. Browserele acceptă în prezent ambele ortografii (dar nu în toate cazurile). Să aruncăm o privire la câteva pseudo-elemente:

• :: after - este folosit împreună cu proprietatea content și vă permite să afișați datele necesare după conținutul elementului;
• :: înainte - îndeplinește o funcție similară cu cea anterioară, afișează doar date față conținutul elementului;
• :: selecție - acest pseudo-element este recunoscut de browsere numai atunci când se folosesc două puncte și vă permite să setați culoarea și fundalul textului care este selectat de utilizator;
• :: prima literă - folosită pentru a schimba stilul primului caracter din textul unui element;
• :: first-line - folosit pentru a schimba stilul primei linii de text dintr-un element.

Un exemplu de utilizare a pseudo-elementelor:

Blockquote :: înainte (conținut: "" ";) blockquote :: după (conținut:" "";) blockquote :: selecție (culoare: # C8F7C5; culoare de fundal: # 1E824C;)

Am scris un stil pentru ghilimele lungi care adaugă ghilimele în formă de ghiveci la începutul și la sfârșitul conținutului etichetei.

și, de asemenea, modifică culoarea și fundalul textului citat selectat de utilizator.

concluzii

În acest capitol, ați învățat despre lucruri importante și utilizate în mod obișnuit în CSS, cum ar fi selectoare de descendenți, pseudo-clase și pseudo-elemente. În viitor, vom reveni adesea la ele, așa că amintiți-vă principalele puncte ale subiectului abordat:

Cu selectoare de descendenți, aveți opțiuni de stil CSS flexibile și compacte.

Pseudo-clasele vă permit să stilați diferitele stări ale unui element de pagină web.

Folosind pseudo-elemente în CSS, puteți stila elemente pe o pagină care nu sunt identificate clar în structura documentului.

Uneori se pare că pentru a supraviețui în lumea modernă trebuie să știi cum să creezi site-uri web. Ei predau chiar și în școli, dar acest lucru nu este suficient pentru a crea o resursă de calitate. De asemenea, trebuie să cunoașteți elementele de bază ale foilor de stil în cascadă, în special pseudo-clasele și pseudo-elementele CSS.

Ce este?

Potrivit unei legi nerostite, toate stilurile pe care webmasterul le scrie în marcajul CSS sunt folosite pentru acele elemente de structură care pot fi văzute în codul sursă. Cu toate acestea, există grupuri de elemente care nu sunt scrise în documentul HTML, dar trebuie și stilate.

De exemplu, nu există o singură etichetă în fișierul HTML care să fie responsabilă pentru design. majusculă un nou paragraf sau o regiune care vine înaintea unui anumit element. Și cu etichete este imposibil să afișați activitatea linkurilor sau să schimbați imaginea atunci când cursorul mouse-ului trece peste ea. Pentru a decora acestea și multe alte semnificații, există selectoare CSS: pseudo-clase și pseudo-elemente.

Pseudo-clasele sunt selectoare care afectează elementele existente într-un document. Pseudo-elementele sunt de obicei folosite pentru a seta și modifica o zonă care nu era prezentă inițial în fișierul original. În termeni simpli, pseudo-elementele definesc noi zone ale paginii care nu erau în marcajul HTML, iar pseudo-clasele definesc starea obiectelor în anumite condiții.

După: după

Primul lucru la care trebuie să vă uitați sunt pseudoelementele CSS înainteși după, deoarece fiecare resursă care se respectă le folosește pentru a se îmbunătăți aspect, lizibilitatea și atractivitatea site-ului. Aceste elemente oferă posibilitatea de a adăuga noi regiuni, etichete și stiluri înainte sau după documentul original.

Toată lumea, probabil, a văzut cel puțin o dată anunțuri de publicații pe orice site, după care au apărut cuvintele: „Nou”, „Nou” sau „Șoc”, „Favorite”, „Cel mai bun”, „Super”, etc. Aceste obiecte. au fost specificate folosind un pseudo-element

Pentru a crea o astfel de poziție, trebuie să adăugați următorul cod la foaia de stil în cascadă:

Aici, cuvântul new setează numele noii clase, așa că înainte de paragraful necesar din marcajul HTML, trebuie să introduceți: class = "new". Numele clasei trebuie să apară între parantezele etichetei de deschidere. Dacă totul este făcut corect, atunci după sfârșitul paragrafului de pe pagina browserului va apărea inscripția „Ceva nou”.

Desigur, exemplul conține un script pentru o etichetă simplă, dar nimeni nu a spus că nu poți schimba dimensiunea, culoarea și poziționarea. Tot parametrii necesari poate fi scris în noua clasă după caracteristica de conținut. Separați-le cu punct și virgulă și închideți bretele la sfârșit.

Înainte: înainte

Pseudo-elementul are caracteristici aproape identice Cu o mică diferență: este conceput pentru a adăuga elementele necesareîn fața obiectului. Scris exact la fel ca după, doar cu cuvântul înainte.

Înainte de următorul paragraf de text, puteți adăuga cuvinte care să atragă atenția sau puteți plasa pur și simplu o imagine sau un element Unicode în fața textului. De exemplu, ghilimele de deschidere sau indentarea. Pentru a aduce acest lucru la viață, trebuie să adăugați markup CSS noua clasași setați caracteristicile necesare. Cea mai simplă soluție ar arăta astfel:

Pentru a indenta sfârșitul documentului, trebuie să creați pseudo-clasa după și în loc de continut: deschis a scrie continut: aproape, schimbați poziționarea în consecință. Dacă pseudoclasa înainte a fost indentată din marginea din stânga, atunci în clasa de după ar trebui să fie din dreapta. De asemenea, puteți adăuga o imagine la marcaj (de exemplu, aceleași ghilimele), iar textul nu va mai arăta ca o foaie plictisitoare.

Saga epică: în primul rând

Primul pseudo-element CSS este, de asemenea, foarte popular în crearea de noi proiecte. În special, acest lucru se aplică proiectelor cu teme de divertisment și basme, precum și resurse web ale direcției istorice și științifice.

Acest pseudo-element CSS are două caracteristici - linie și literă:

• Scrisoare- modifică prima literă a fragmentului de text la care se adaugă. Astfel, formează un drop cap - un element în care linia de bază se află la câteva linii sub textul principal. Pentru a seta acest parametru într-o foaie de stil în cascadă, trebuie să setați caracteristicile paragrafului. De exemplu, P: prima literă (***)- și deja între paranteze indicați toți parametrii necesari, cum ar fi culoarea, fontul, dimensiunea. Dacă trebuie creat o limită doar pentru primul paragraf, atunci este creată o nouă clasă (la fel ca în exemplul cu nou: după).
• Linia- această poziție schimbă complet primul rând al paragrafului. Este foarte convenabil de utilizat în publicațiile științifice dacă trebuie să evidențiați informații importante. Scris în același mod ca și alte exemple. Dar lucrul important de reținut aici este că pseudo-elementul nu evidențiază o propoziție, ci un șir. În funcție de browserul pe care îl folosește utilizatorul, prima linie poate fi mai lungă sau mai scurtă, așa că este important să vă asigurați că această selecție nu arată ridicol. Pentru aceste cazuri a fost creată pseudo-linia întreruptă CSS.

Linie nouă

De fapt, acest element este rar folosit, deoarece este înlocuit cu succes de etichetă
... Cu toate acestea, există situații în care este necesar să se specifice întreruperile de linie cu pseudo-elemente. În aceste scopuri, puteți folosi același după. Pentru a face acest lucru, scrieți următorul cod: după (conținut: „\ A”; spațiu alb: pre;)... Numele clasei trebuie introdus între parantezele etichetei de deschidere, de îndată ce se închide, va fi urmat de o întrerupere de linie.

Această opțiune necesită mai mult timp la construirea conținutului care poate fi citit și, dacă nu este nevoie să lucrați cu browsere anormal de necunoscute, atunci este mai bine să vă limitați la etichetă.
.

Sintaxă pseudo-clasă

După cum sa menționat deja, pseudoclasele determină starea elementelor cu care interacționează utilizatorul. Spre deosebire de pseudoelementele CSS, care definesc caracteristici invizibile pentru structură, se concentrează asupra claselor imaginare.Pentru a fi mai clar, poate fi dat un mic exemplu. Să presupunem că site-ul are o listă Link-uri utile, utilizatorul navighează printre ele, citește informațiile, dar după un timp dă peste conținutul pe care l-a văzut deja. Tocmai a intrat din nou pe această pagină, pentru că există multe link-uri și nu sunt diferite. Pentru a preveni acest lucru, webmasterii adaugă o pseudo-clasă care schimbă culoarea link-ului vizualizat, apoi utilizatorul va ști exact ce a citit și unde nu a mers încă.

Toate pseudo-clasele sunt scrise în foaia de stil în cascadă cu o sintaxă simplă și adevărată:

• Selector: Pseudo-clasă (caracteristicile stilului: culoare, dimensiune, indentare, poziționare etc.)

Aceste clase pot fi împărțite în trei grupe principale:

• cele care determină starea elementului;
• cele legate de pseudo-elemente;
• clase inactiv care definesc limbajul conținutului.

Pseudo-clase și starea elementului

Să aruncăm o privire la ce pot fi pseudo-clase. Prima subspecie se caracterizează printr-o schimbare a stării unui element în funcție de starea acestuia la un anumit moment. Acesta este același ca în exemplul de mai sus: dacă linkul a fost urmat, atunci se va schimba culoarea. Aceasta include următoarele pseudo-clase:

• :activ. Dacă aplicați această pseudo-clasă, atunci când faceți clic pe un fragment separat, acesta va deveni activ. Acest lucru se va manifesta ca o schimbare de culoare, o creștere a dimensiunii sau va apărea o animație.
• :legătură... Se aplică în principal link-urilor pe care utilizatorul nu le-a vizitat încă. Ele rămân neschimbate.
• : concentrare... Cel mai des folosit pentru documente text, când utilizatorul, prin plasarea cursorului pe câmp, poate schimba culoarea textului. Aceasta este uneori folosită și pentru imagini. De exemplu, imaginea este afișată umbrită, dar când se face clic, capătă o culoare naturală.
• :planare... Când utilizatorul trece mouse-ul peste obiect specific, poate schimba culoarea sau forma fără a fi nevoie să faceți clic.
• :vizitat... Practic, această pseudo-clasă este pentru link-urile vizitate care își schimbă culoarea în violet în mod implicit.

Începătorii presupun în mod eronat că aceste pseudo-clase sunt destinate doar link-urilor, dar cu dorința și imaginația potrivite, puteți schimba orice element al site-ului.

Specific pentru pseudo-elemente CSS

Acest grup de selectori include pseudo-clase, care pot schimba pseudo-elemente. O astfel de pseudo-clasă este : primul copil... În foaia de stil în cascadă, trebuie să creați o nouă clasă pentru : primul copilși setați culoarea sau dimensiunea textului. Rezultatul va arăta astfel:

• B: primul copil (culoare: roșu;)

Cel mai adesea acest lucru se face atunci când este necesar să selectați mai multe fragmente de text. cu aldineși numai începutul paragrafului ar trebui să fie diferit. Prin urmare, clasa este numită la fel ca eticheta care este responsabilă pentru textul aldin. Dacă punem acest lucru în practică, atunci datorită pseudo-clasei, doar primul fragment îngroșat va fi roșu, restul cuvintelor va fi negru standard.

De asemenea : primul copil utilizați pentru a elimina indentarea din primul paragraf, apoi în loc de culoarea rosie; va trebui să scrie text-indent: 0;, și înlocuiți B cu P (se indică și eticheta care este responsabilă pentru începutul paragrafului).

Limbajul conținutului

Pseudo-clasă : lang se aplică în principal textelor care sunt scrise limbi diferite... De exemplu, dacă articolul conține citări în limba originală, atunci pot fi setate caracteristici separate pentru acestea. Sintaxa pentru acest cluster va fi următoarea:

• Numele clasei: limba (limba) (caracteristicile textului (culoare etc.))

În ceea ce privește funcția „limbă”, aceasta este desemnată în conformitate cu normele acceptate. De exemplu, engleză - en, rusă - ru, germană - de etc. Datorită acestei pseudo-clase, puteți schimba stilul textului străin în întregul document.

concluzii

Pseudo-clasele și pseudo-elementele CSS sunt una dintre acele întrebări de foaie de stil în cascadă care sunt greu de înțeles. Cu toate acestea, nu este nimic dificil aici, principalul lucru este să înțelegeți că o pseudo-clasă este o anumită stare care este executată în condițiile specificate mai devreme. De exemplu, la trecerea mouse-ului sau la clic pe mouse. Un pseudo-element este o parte independentă a unui document care nu face parte din marcajul HTML, dar poate avea propriul stil. Ai putea spune chiar că este HTML virtual. Dacă priviți situația din această parte, atunci totul devine extrem de simplu și de înțeles, iar cu aceste cunoștințe puteți începe deja să creați site-uri.