Modalități de conectare a unui CSS la un document
- Atunci când o foaie de stil este descrisă în documentul în sine, ea poate fi plasată între ele în etichete (care, la rândul lor, sunt situate în acest document între etichete și ). Toate regulile din acest tabel sunt valide pe întreg documentul;
- Atunci când o foaie de stil este descris în document, acesta poate fi introdus în ea în corpul unei singure etichete (prin stilul atribut) al acestui document. Toate regulile din acest tabel se aplică numai conținutului acestei etichete.
În primele două cazuri, se spune că foile de stil externe sunt aplicate în document. iar în celelalte două cazuri - foi de stil interne.
Pentru a adăuga CSS la un document XML, acesta din urmă trebuie să conțină o legătură specială cu foaia de stil. De exemplu:
Ierarhia elementelor dintr-un document
După cum știți, documentele HTML sunt construite pe baza unei ierarhii de elemente, care pot fi reprezentate vizual într-o formă arborescentă. Elementele HTML pentru fiecare alte pot fi părinte, copil, strămoș, descendent, sora.
Un element este părintele unui alt element, dacă este imediat în structura ierarhică a documentului, direct deasupra acestui element. Un element este strămoșul unui alt element, dacă în structura ierarhică a documentului se află undeva deasupra acestui element.
Să menționăm, de exemplu, în document două paragrafe p. inclusiv un font cu caractere aldine b. Atunci elementele b vor fi copii ai elementelor lor părinte. și descendenții strămoșilor lor. În schimb, pentru elementele p elementul corpului va fi doar părintele. Și, în plus, aceste două elemente p vor fi elemente surime. ca având același părinte - corp.
În CSS, pot fi setate nu numai elemente individuale, ci și elemente care sunt descendenți, copii sau elemente sora ale altor elemente (a se vedea subsecțiunea "tipuri de selectori"), utilizând selectori.
Construirea unei reguli CSS
Tipuri de selectori
Selectorii de reguli CSS pot fi
- De asemenea, în CSS există un așa numit selector universal. Înseamnă orice element găsit în document. De exemplu, *. Înainte de orice selector care specifică o clasă sau un identificator, puteți pune un caracter selector universal, care are ca rezultat, de exemplu, o expresie echivalentă. primul și * .firma au același înțeles.
Clase de elemente. ID-uri de articole.
O clasă sau un identificator pot fi atribuite oricărui element HTML (tag) utilizând atributele de clasă sau id ale acestui element (etichetă):
Diferența principală dintre clasele de elemente și a identificatorilor de elemente care, în documentul de orice clasă pot fi atribuite mai multe elemente, și identificatorul - doar unul. De asemenea, diferența este că pot exista mai multe clase (în cazul în care clasa elementului este format din mai multe cuvinte, separate prin spații). Pentru identificatori, acest lucru nu este posibil.
Numele de clase și de identificatori, spre deosebire de numele etichetelor și atributele acestora, sunt sensibile la registrul de litere.
Proprietățile clasei și identificatorilor sunt specificate utilizând selectorii corespunzători. Și poate fi definită ca o proprietate a clasei ca întreg (în acest caz, selectorul începe cu o „“), sau identificatorul în sine o proprietate (în acest caz, selectorul începe cu un «#»), și proprietățile acestei clase de orice element sau acest identificator.
Moștenirea. Cascadă. Prioritățile stilurilor CSS.
Aplicarea CSS în documente HTML se bazează pe principiile moștenirii și cascadării. Principiul moștenirii este că proprietățile CSS declarate pentru elementele strămoșilor sunt moștenite de elemente descendente. Dar, desigur, nu toate proprietățile CSS sunt moștenite - de exemplu, în cazul în care înseamnă CSS p paragraf tag-ul dat cadru, acesta nu va fi moștenită de orice etichetă conținute în această etichetă p, dar, în cazul în care punctul p CSS înseamnă a seta culoarea fontului (de exemplu, , culoare: verde;), atunci această proprietate va fi moștenită de fiecare element de tag care se află în paragraf.
Principiul se aplică în cascadă, în cazul în care unele elemente HTML în același timp, li sa atribuit o mai mult de un reguli CSS, adică, atunci când are loc conflictul de valori ale acestor norme. Pentru a rezolva astfel de conflicte, introduceți reguli de prioritate.
Exemplu de foaie de calcul
Un exemplu de foaie de stil (în această formă se poate plasa fie într-un fișier .css separat, fie este încadrat cu etichete