Ce este CSS?

Publicat: 2019-03-08

Ultima actualizare pe 22 aprilie 2020

Cascading Style Sheets for the web În World Wide Web (www), CSS este acronimul pentru Cascading Style Sheets. CSS este un limbaj pentru foi de stil folosit pentru a descrie prezentarea unui document scris într-un limbaj de marcare, de obicei HTML. CSS reglementează modul în care aspectul și conținutul unei pagini web trebuie să fie afișate pe un ecran, hârtie sau pe alte suporturi. CSS economisește multă muncă, deoarece controlează aspectul mai multor pagini web simultan.

Un document este de obicei un fișier text structurat folosind un limbaj de marcare precum HTML. Prezentarea unui document înseamnă convertirea acestuia într-o formă utilizabilă prezentată vizual pe ecranul unui computer printr-un browser web precum Chrome, Firefox, Opera, Microsoft Edge și altele. Browserele web aplică reguli CSS unui document pentru a afecta modul în care sunt afișate.

Acest blog este o introducere generală a foilor de stil în cascadă (CSS), definind ce sunt acestea și pentru ce sunt folosite pe web. Aceasta este o introducere care răspunde la întrebări de bază despre aceasta, fără a intra adânc în lumea minunată și interesantă a CSS.

Acea! Compania oferă servicii de web design captivante și eficiente pentru agenții din întreaga lume. Aflați mai multe despre serviciile noastre de design web cu etichetă albă și despre cum vă putem ajuta pe dvs. și clienții dvs. să creați sau să-și îmbunătățească prezența pe web. Incepe astazi!

CSS inițiat în 1994. A fost creat și este întreținut de W3C. Grupul de lucru CSS al W3C creează documente numite specificații. După ce specificațiile au fost discutate și ratificate oficial de membrii W3C, acestea devin o recomandare.

Cascading Style Sheets nivelul 1 (CSS1) a apărut din W3C ca recomandare în decembrie 1996. CSS2 a devenit o recomandare W3C în mai 1998. Nivelul CSS 3, care a fost început în 1998, este încă în curs de dezvoltare. CSS3 este o combinație de specificații CSS2 și specificații noi numite module. O specificație CSS este formată dintr-un set de proprietăți, care au valori setate pentru a actualiza modul în care este afișat conținutul HTML.

CSS a venit pentru a simplifica procesul de prezentare a documentelor noastre în limbajul de marcare. Puteți controla o varietate de proprietăți precum:

  • culoarea textului,
  • stilul fonturilor,
  • spațierea dintre paragrafe,
  • cum sunt dimensionate și dispuse coloanele,
  • imagini de fundal sau culori,
  • modele de layout,
  • variații de afișare în funcție de dimensiunile ecranului (Media Queries).

Cum aplicăm CSS?

Cascading Style Sheets for the web Există patru moduri de a aplica stiluri documentelor noastre HTML. Cele mai frecvent utilizate metode sunt fișierele CSS externe care sunt încorporate într-un element <style> în documentul nostru HTML. Dacă sunt specificate stiluri de foi diferite, stilurile se vor cascada în stiluri noi, cu următoarea prioritate (mai mare este numărul mai puțin important):

Prioritatea 4: implicit browser

Browserele includ unele stiluri pre-scrise pentru noi. Uneori nu vrem aceste stiluri preîncărcate, așa că le putem suprascrie. Există unele browsere care nu acceptă specificațiile CSS moderne sau au propria lor formă de utilizare a proprietăților CSS. Din acest motiv, ar trebui să avem grijă când scriem CSS-ul nostru într-un document HTML.

That! Company White Label Services

Prioritatea 3: Fișier extern foaie de stil

Elementul <link> poate fi folosit pentru a include un fișier de foaie de stil extern în documentul dvs. HTML. O foaie de stil externă este un fișier text separat cu extensia „.css”. Definim toate regulile de stil din acest fișier text și apoi includem acest fișier în orice document HTML în interiorul etichetelor <head>…</head> folosind elementul <link>.

 <link rel="stylesheet" type="text/css" href="style.css" />

Prioritatea 2: încorporată în documentul HTML

Putem pune regulile noastre CSS într-un document HTML folosind elementul <style> pentru a conține regulile. Etichetele <style>…</style> sunt plasate în interiorul etichetelor <head>…</head>.

 <stil>
 selector {
 Valoarea proprietății;
 }
 </stil>

Prioritatea 1: Inline în elementele noastre HTML

Putem folosi atributul de stil al oricărui element HTML pentru a defini regulile de stil. Aceste reguli vor fi aplicate numai pentru acel element.

 <p>Bună lume!</p>

Regulile CSS se anulează

Am descris patru moduri de a aplica regulile foii de stil documentului nostru HTML. Iată regula pentru a înlocui orice regulă pentru foaia de stil:

Orice foaie de stil inline are cea mai mare prioritate. Deci, va suprascrie orice regulă definită în etichetele <style>…</style> sau regulile definite în orice fișier extern de foaie de stil.

Orice regulă definită în etichetele <style>…</style> va suprascrie regulile definite în orice fișier extern de foaie de stil.

Orice regulă definită în fișierul foaie de stil extern are cea mai mică prioritate, iar regulile definite în acest fișier vor fi aplicate numai atunci când cele două reguli de mai sus nu sunt aplicabile.

Selectoare CSS

O regulă CSS este interpretată de browser și apoi aplicată elementelor corespunzătoare din documentul nostru HTML. O regulă de stil este compusă din trei părți:

  • Selector - este folosit pentru a „găsi” (sau selecta) elemente HTML pe baza numelui, id-ului, clasei, atributului și multe altele.
  • Proprietatea - este un tip de stil al CSS. Ar putea fi culoare, chenar, fundal, font, afișare, alinierea textului, margini, spațiere între linii etc.
  • Valoarea − este atribuită proprietăților. De exemplu, proprietatea culoarea de fundal poate avea o valoare fie roșu, fie verde.

Sintaxa regulilor CSS

Sintaxa unei reguli CSS constă dintr-un selector și o declarație de proprietate și valoare:

 selector { proprietate: valoare; }

Selectorul indică elementul HTML pentru stil.

Blocul de declarații (în acolade) conține una sau mai multe declarații separate prin punct și virgulă.

Fiecare declarație include un nume de proprietate CSS și o valoare, separate prin două puncte.

Putem scrie o regulă CSS și apoi reutiliza aceeași regulă în mai multe elemente și documente HTML. Folosind CSS, nu este nevoie să scriem de fiecare dată atribute HTML inline de etichetă, ceea ce se aplică numai elementului stilizat. Scriem doar o regulă CSS și o aplicăm tuturor aparițiilor acelui element de etichetă. Deci, mai puțin cod înseamnă pagini mai rapide.

Schimbările și întreținerea documentului nostru HTML sunt simple atunci când folosim reguli de stil externe sau încorporate. Pur și simplu schimbăm regula de stil și toate elementele din documentele noastre HTML vor fi actualizate automat. Cu CSS avem acces la mai multe dimensiuni de ecran de dispozitiv prin Interogări media. Interogările media ne permit să optimizăm documentul HTML pentru mai mult de un tip de dispozitiv. Folosind același document HTML, putem prezenta versiuni diferite ale paginilor noastre web.

Citeste mai mult

Din nou, această postare abia deschide interesul cititorului pentru a afla despre CSS și varietatea de lucruri disponibile pentru a controla documentele noastre HTML. Este o parte super puternică și foarte importantă a web-ului. Câteva resurse principale în care vă puteți scufunda mai adânc în el sunt:

Scoala W3C

MDN

Tutorial CSS