Ce sunt foile de stil în cascadă și pentru ce se folosește CSS?

CSS aparține unui triplet de tehnologii web de bază, alături de HTML și JavaScript. Cu o planificare atentă, CSS contribuie la separarea preocupărilor. Resursele independente controlează structura, prezentarea și comportamentul unui conținut.

Foi de stil joacă un rol important în accesibilitate, scalabilitate și chiar performanță web. În calitate de autor de conținut sau designer de web, acestea vă oferă control asupra modului în care dispozitivele redau conținut. De la aspect la dimensiunea și culoarea fontului, CSS transformă conținutul în pagini frumoase.

Cum arată CSS?

CSS este un limbaj mare - există multe lucruri diferite de stilat! Dar sintaxa sa este simplă, cu doar câteva reguli de învățat.

Elementele HTML au diverse proprietăți pe care CSS le poate stiliza. The culoare proprietatea setează culoarea din prim-plan (de exemplu, text). Dimensiunea fontului depinde de marimea fontului proprietate.

Fiecare proprietate poate fi setată la o valoare acceptată. Atribuirea unei valori unei proprietăți este o „declarație”. În general, arată astfel:

property: value

De exemplu:

de ce Xbox-ul meu se pornește singur

color: red

Valorile pentru proprietăți diferite pot arăta foarte diferite, chiar valori pentru aceeași proprietate. De exemplu, iată încă două modalități de a scrie declarația anterioară:

color: #ff0000  
color: rgb(255, 0, 0)

Cum se unesc HTML și Foi de stil

Puteți combina HTML și CSS în câteva moduri diferite, fiecare cu avantajele sale.

Stiluri de scriere în linie

Cea mai simplă metodă este de a atașa declarații de stil direct unui element din fișierul HTML. Puteți face acest lucru folosind stil atribut așa:

  
 Most of this text is red …
  
 … but this isn’t!

În timp ce elementele de stil în linie de acest gen pot fi convenabile, are mai multe dezavantaje. Pentru început, acesta complică HTML-ul, ceea ce face mai dificilă citirea dintr-o privire. Este, de asemenea, dificil de întreținut: imaginați-vă un document lung în care dorim să stabilim culoarea fiecărui paragraf. Acesta este CSS, dar nu este „Foi de stil”.

Încorporarea stilurilor în cap

Puteți începe să vedeți cum arată o foaie de stil cu al doilea mecanism, încorporare . Folosind această abordare, adunăm toate declarațiile de stil împreună într-un stil element în cap din documentul nostru. Va arăta cam așa:

  
  
  
  
 /* style instructions go here */  
  
  
  
 ...

Cu toate acestea, instrucțiunile noastre de stil au nevoie de ceva mai multe detalii decât înainte. Deoarece le-am mutat în cap, fiecare regulă nu mai este asociată cu un element. Am fi putut declara culoarea rosie , dar ce ar trebui să aibă acea culoare?

Aici intervin selectoarele CSS. Acestea ne permit să vizăm anumite părți ale paginii și să le definim stilul într-un singur loc, folosind această sintaxă:

cum să ștergeți un cont de telegramă

selector {  
 declaration1;  
 declaration2;  
 /* etc. */  
}

De exemplu, pentru a stiliza textul paragrafelor în albastru, putem specifica următoarele:

p {  
 color: blue;  
}

În acest exemplu, selectorul este simplu p , care se potrivește cu toate elementele de paragraf din documentul nostru. Va colora tot textul în albastru, atâta timp cât este în interior

Conectarea unei foi de stil externe

Metoda finală de acoperit este legarea. Aceasta este, de departe, cea mai utilă abordare și una pe care ar trebui să o optați de cele mai multe ori. În loc să încorporeze reguli CSS în stil element direct din document, le puteți muta într-un fișier separat.

Lipiți acest cod în interiorul etichete ale fișierului HTML pentru a lega foaia de stil externă.

Puterea CSS

Cu metoda legată, valorificăm o putere centrală a CSS: separarea preocupărilor. Toate informațiile semantice - ce înseamnă conținutul - sunt conținute în documentul HTML. Stilul - cum arată - se află într-un fișier separat, foaia de stil.

Iată doar câteva beneficii ale acestei separări:

Puteți schimba o foaie de stil doar schimbând referința fișierului. Acest lucru se poate întâmpla chiar dinamic. Într-un singur pas, puteți modifica întregul aspect al unei pagini.

Multe pagini pot partaja aceleași foi de stil, după cum este necesar. Schimbând un singur fișier, puteți actualiza aspectul unui întreg site web.

Împărțirea unei pagini în „conținut” și „stil” are avantaje tehnice. Proxy-urile și browserele pot memora separat fișiere individuale. Aceasta înseamnă că un site își poate trimite informațiile despre stil o singură dată, mai degrabă decât să le includă în fiecare pagină.

Atunci când colaborează, diferite echipe pot lucra la punctele forte, creând și editând fișiere separate fără a se afecta reciproc.

Explicând Cascada

Ați aflat multe despre stiluri și foi de stil, dar cum rămâne cu partea în cascadă a CSS?

Cascada este cea care decide ce stiluri să utilizeze atunci când sunt prezente mai multe foi de stil. Ați văzut cum un autor poate specifica stiluri pentru conținutul său. Dar o altă caracteristică a CSS este că oferă cititorilor și producătorilor de browsere unii spun și în această privință.

Este posibil să vă fi întrebat deja despre stilurile implicite. De exemplu, cum funcționează un H1 elementul pare mare și îndrăzneț, chiar și fără foi de stil de autor? Acest lucru se datorează unui set de reguli speciale care alcătuiesc foaia de stil a agentului utilizator. Aceste reguli sunt aplicate inițial de browserul dvs. web la fiecare pagină pe care o vizitați.

Cascada specifică faptul că o foaie de stil autor se aplică după stilurile utilizator-agent. Dacă browserul nostru spune că titlurile sunt îndrăznețe, dar autorul paginii declară că titlurile de pe această pagină sunt ușoare, atunci vor ajunge la lumină.

Există o altă sursă de foi de stil care predă un anumit control cititorului. Orice utilizator web poate, teoretic, să mențină o foaie de stil de utilizator cu reguli personalizate. Acestea stau la mijloc: regulile utilizatorului vor suprascrie setările implicite ale browserului, dar vor fi ele însele suprascrise de stilurile autorului. Din păcate, suportul pentru foile de stil de utilizator nu a fost niciodată răspândit.

Direcționarea diferitelor medii

Puteți utiliza Foi de stil în contexte diferite, dincolo de ecran. The jumătate atribut al legătură elementul definește tipurile de suport pentru care se aplică foaia de stil. De exemplu, puteți defini un foaie de stil pentru imprimare folosind markup ca următoarele:
Puteți aduna stiluri comune într-o singură foaie de stil globală și stiluri specifice media în fișiere separate. Există chiar și tipuri de media pentru a răspunde prezentărilor auditive sau braille ale conținutului dvs. CSS este un instrument vital pentru îmbunătățirea accesibilității.

Legate de: Cum să navigați pe web dacă sunteți orbi sau cu deficiențe de vedere
cum să îmi încarc telefonul mai repede

Site-uri precum Wikipedia folosesc CSS pentru a-și controla stilul de imprimare, ascunde elemente nedorite și simplifica aspectul.

CSS face ca HTML să arate bine

Foi de stil în cascadă acoperă foarte mult: cascadă, moștenire, selectoare, surse, media etc. Dar puterea lor permite web-ul modern. Acesta este un mediu care oferă caracteristici de reutilizare, flexibilitate și accesibilitate încorporate.

Pentru a vedea întreaga putere a CSS și cât de mult are de oferit, consultați fișa noastră de trucuri care acoperă toate proprietățile esențiale CSS3.
Acțiune Acțiune Tweet E-mail Foaia de trucuri Proprietăți esențiale CSS3
Stăpâniți sintaxa CSS esențială cu foaia de trucuri a proprietăților CSS3.
Citiți în continuare Subiecte asemănătoare

Programare

Dezvoltare web

CSS

Despre autor Bobby Jack(58 articole publicate)
Bobby este un pasionat de tehnologie care a lucrat ca dezvoltator de software timp de aproape două decenii. Este pasionat de jocuri, lucrează ca editor de recenzii la Switch Player Magazine și este cufundat în toate aspectele publicării online și dezvoltării web.
Mai multe de la Bobby Jack
Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Faceți clic aici pentru a vă abona