Ei bine, pentru început, voi spune că selectorul servește pentru identificarea unică a elementului din documentul html la care vrem să aplicăm acest stil CSS.
Până în acest moment, am lucrat cu acest selector. ca selector, numele elementului html a fost folosit direct. la care vrem să aplicăm acest stil. Ie scrierea unei clase, de exemplu, pentru un paragraf (P). toate paragrafele de pe pagină au obținut stilul acestei clase.
P font-family: arial, verdana, sans-serif;
font-size: 12px
>
Și acum imaginați-vă o situație în care este necesar să faceți primul paragraf într-un stil, al doilea în altul, al treilea în al treilea, etc. Atunci selectorul de clasă ne va ajuta.
Să ne uităm la crearea unei clase generice în CSS. Și este foarte ușor să faci acest lucru: mai întâi punem o perioadă, apoi imediat, fără un spațiu, scrieți numele clasei, bine, apoi în stilul arcuite. Ei bine, de exemplu:
.font verde-familie: arial, verdana, sans-serif;
font-size: 12px; culoare: verde;
>
Cum să aplicați acest stil?
Să presupunem că vrem să aplicăm acest stil unui anumit paragraf din document. Iată cum va arăta în html:
După cum puteți vedea, atributul de clasă este utilizat cu valoarea numelui de stil. Înțelegi? Iată un alt exemplu:
Acesta este un paragraf obișnuit. Pentru el, selectorul de elemente este folosit
Acest paragraf este verde, deoarece clasa a fost aplicată
Și acest paragraf de un font mai mare și roșu
Acest paragraf este din nou normal, în funcție de clasa selectorului de elemente
Se specifică primul stil de bază pentru toate punctele (selector pe un element), și apoi, dacă dorim în orice punctul de a schimba ceva, pentru a crea un stil aparte (clasa selector) și atribuiți-l la prezentul alineat pentru ea. Când vom crea această clasă foarte special, avem nevoie pentru a scrie numai la acele proprietăți pe care doriți să le adăugați sau modificați, în ceea ce privește stilul de bază pentru acel element.
Clase în exemplul de mai sus poate fi aplicată nu numai la secțiunea, dar, de asemenea, de exemplu, la anteturile, sau o astfel de celulă de tabel, sau întregul tabel, pe scurt, ele pot fi folosite oriunde în cazul în care acestea pot afecta ceva (în acest caz, ori de câte ori există o opțiune de culoare și text).
Pentru a face ca clasa să acționeze numai pe un anumit element (de exemplu un paragraf), puteți specifica numele elementului înainte de punct:
Acum, clasa verde nu va actiona asupra altui element decat elementul P.
↑ Sus ↑
Acest selector este utilizat dacă doriți să identificați un singur element. Unic, diferit de oricine altcineva din document. De exemplu, selectați primul titlu al paginii într-un anumit mod:
<Н1 id =" firstheader "> Primul titlu de pe pagină
După cum puteți vedea în html-parte, în loc de atributul class, atributul id este folosit aici. și în css - în loc de punct este folosit semnul #.
În principiu, același lucru se poate face și cu utilizarea unui selector de clasă, acesta este cineva care îi place mai mult :)
↑ Sus ↑
Acesta este un lucru foarte util. Să presupunem că avem o pagină cu tabele și paragrafe de text, și în tabel, și există secțiuni în cuvinte aldine (puternice). Și astfel, am nevoie de dramatic pentru a face cuvinte într-un paragraf, care a început în verde cu caractere aldine. Și așa:
Ie la începutul P atunci un spațiu, apoi STRONG și apoi stilul. Această linie este citită aproximativ astfel: Dacă există un element STRONG în interiorul elementului P, atunci elementul puternic ar trebui să aibă un stil verde.
Nesting poate fi de orice nivel. Iată un alt exemplu: „Dacă dintr-o dată în interiorul unei celule de masă (TD) pentru a satisface punctul (P), în interiorul căruia este un cuvânt cu caractere aldine (puternic) lasa acest cuvânt se va transforma roșu.!“
Acum cred că deja înțelegi. Experimentați-vă, creați-vă propriile stiluri și veți fi fericiți.
↑ Sus ↑
Articole similare
-
Jocuri pe teme - cunoștințe - la lecții de engleză - valurile de engleză
-
Dezvoltarea metodică în domeniul artelor plastice (de la, clasa a 2-a) pe tema lecției
Trimiteți-le prietenilor: