Tutorial css - identificatori css

Identificatorii CSS sunt creați folosind caracterul de rețea (#), urmat de numele identificatorului. Acest nume, ca și clasele, este inventat de tine în mod independent și poate conține caractere latine (az, AZ), numere (0-9), cratime (-) și subliniere (_), dar nu pot începe cu un număr sau o cratimă, după care există o figură. Sintaxa generală este:







Pentru a aplica stiluri de identitate unui element HTML, trebuie pur și simplu să specificați atributul id = "id_name" în eticheta sa. unde identificator_name. în consecință, și există un nume al identificatorului inventat de dvs. Dar, spre deosebire de o clasă, nu pot exista două sau mai multe elemente pe pagină cu același id. astfel încât să aveți grijă atunci când lucrați cu identificatori.

Ca și numele clasei, numele identificatorului trebuie să se potrivească întotdeauna exact cu ceea ce scrieți în atributul id. De exemplu, dacă aveți identificatorul #sidebar, trebuie să scrieți id = "sidebar" în etichetă. mai degrabă decât id = "Sidebar". id = "SIDEBAR", etc.

Exemplu de utilizare a identificatorilor în CSS

Rezultă în browser







Combinarea identificatorilor CSS

Pentru a specifica ce element HTML cu un id dat va fi aplicat stilurilor, identificatorii pot fi combinați cu alți selectori (etichete, atribute, clase etc.). Sintaxă generală:

Un exemplu de combinare a identificatorilor CSS cu alți selectori

Rezultă în browser

Textul bold este verde.

Poate că veți întreba: "De ce aveți nevoie de o astfel de uniune, deoarece pe fiecare pagină poate exista doar un element cu un anumit id"? Și veți avea dreptate parțială. De exemplu, dacă vom scrie în exemplul anterior nu p # ultima, ci doar #last - rezultatul va fi același.

Dar nu este neapărat să aveți același identificator aplicat aceluiași element pe toate paginile, nu? Să presupunem că, în exemplu, înlocuim codul HTML cu următorul text - textul nu va mai fi verde, acesta va deveni simplu îndrăzneț:

  1. După cum știți, majoritatea browserelor, în mod implicit, adaugă câmpuri mici de spațiu gol pe marginea paginii. Amintiți-vă din HTML ce etichetă este responsabilă pentru aceste câmpuri și le eliminați.
  2. Creați trei coloane pe pagină. Coloana din mijloc să aibă lățimea "cauciucului" și lateral fixă.
  3. Permiteți tuturor coloanelor în înălțime să fie egale cu înălțimea ferestrei browserului, indiferent de rezoluția și dimensiunea ecranului. Pentru a face acest lucru, aveți nevoie de proprietatea înălțimii. în care va fi necesară pătrunderea și gândirea cu atenție, deoarece nu totul este atât de simplu cu înălțimea procentuală.
  4. Vopsiți pagina așa cum este prezentat în lecție.






Articole similare

Trimiteți-le prietenilor: