Ce este CSS? Funcția principală a acestui instrument!

¿Ce este CSS? Vino și află în acest articol interesant. CSS s-a născut pentru a schimba pentru totdeauna conceptul de design și funcționalitate a paginilor web.

¿Ce este CSS?

Este un limbaj de stil conceput pentru a defini aspectele vizuale ale elementelor electronice create folosind HTML și XHTML, precum: culoare, dimensiune, aspect etc. Practic, încearcă să compenseze limitările de proiectare și complexitatea HTML.

Nu întotdeauna stilurile încorporate în fiecare dintre părți ale unei pagini web satisfac cerințele proiectantului. Cu toate acestea, CSS este cel mai bun mod de a schimba modul în care elementele sunt vizualizate pe ecran, deoarece separă conținutul și prezentarea.

Pe de altă parte, CSS permite crearea de documente bine definite, cu semnificație completă, dar mai puțin complexe, ușor accesibile și ușor de întreținut. În plus, permite ca aceste documente să fie vizualizate de pe orice suport sau dispozitiv.

Evoluție

Nașterea sa se datorează creșterii internetului și extinderii limbajului HTML pentru dezvoltarea documentelor electronice. În principiu, nu existau standarde pentru editarea acestui tip de document, ceea ce făcea necesară crearea unui limbaj de foaie care să permită aplicarea consecventă a diferitelor stiluri.

CSS și-a făcut apariția formală în 1995, produs al unirii CHSS și SSP, propuneri prezentate Consorțiului World Wide Web (W3C), în încercarea sa de a realiza standardizarea unui limbaj de foi de stil pentru limbile HTML.

Un an mai târziu, W3C a lansat prima sa recomandare oficială, numită nivelul CSS 1. Cu toate acestea, în 1997 a decis să separe lucrarea CSS de lucrările DOM și HTML. Așadar, în 1998, grupul de lucru CSS a lansat prima sugestie separată, pe care a numit-o nivelul CSS 2.

Aproape zece ani mai târziu, în 2007, a fost făcută ultima actualizare cunoscută a nivelului CSS 2, numită CSS 2.1. De fapt, această versiune este cea care continuă să fie utilizată astăzi în browsere.

Se știe că, în paralel, W3C a dezvoltat ceea ce ar fi recomandarea CSS de nivel 3. Cu toate acestea, deși unele elemente au fost încorporate în browsere, nu există încă nimic oficial.

De asemenea, se știe că adaptarea de către browsere, care sunt însărcinate cu interpretarea codului HTML și CSS, astfel încât imaginile să fie afișate prin intermediul motorului lor, nu a fost ușoară. Atât de mult încât prima versiune de suport complet pentru CSS a fost publicată în 2000. Se referea la nivelul CSS 1 și aparținea browserului Internet Explorer 5 pentru Mac. Până în prezent, niciun browser nu oferă suport avansat pentru CSS 2.1.

În acest sens, se pare că, în prezent, browserele Safari și Opera sunt cele care se apropie cel mai mult de suportul dorit pentru CSS, deoarece includ unele aspecte aparținând reviziei CSS 3 neterminate și oferă un suport aproape perfect pentru versiunea 2.1. Acestea sunt urmate de Firefox și Google Chrome, dar suportul lor pentru versiunea 3 este încă mai puțin avansat.

La rândul său, Internet Explorer până la versiunea 6 a prezentat deficiențe semnificative în suportul cerut de CSS 2.1.

Cum funcționează CSS?

Practic, atunci când dezvoltați o pagină web utilizând limbajele HTML și HTML, conținutul și funcțiile fiecărui element din pagină sunt definite. Ulterior, prin limbajul CSS se stabilește aspectul vizual al fiecărui element, de exemplu: tipul și dimensiunea fontului textului, separarea dintre paragrafe, poziția elementelor etc.

caracteristici

CSS este un limbaj a cărui utilizare a explodat printre designerii de web. Acest lucru datorită beneficiilor sale incredibile, printre acestea se numără:

Este flexibil, oferind diverse alternative pentru a îndeplini aceeași sarcină. Aceasta generează trei moduri de a include CSS într-un document HTML electronic: în documentul în sine, într-un fișier extern și în elemente HTML.
Pot fi definite diferite stiluri pentru diverse medii, inclusiv: proiectoare, ecrane, monitoare și dispozitive mobile etc.
Definește proprietăți specifice pentru anumite suporturi, permițându-vă să modificați stilul unei pagini în funcție de funcționalitatea dispozitivului. Acest lucru determină existența a patru reguli pentru a stabili media pe care se vor aplica stilurile CSS: @media, @import, tag , iar cel referitor la amestecarea diferitelor medii.
Când valoarea unei proprietăți este setată pe un element, toți descendenții acelui element moștenesc aceeași valoare.

Element

Stilurile de foi CSS sunt alcătuite din următoarele elemente de bază:

Regula: Constituie fiecare dintre stilurile care aparțin unei foi de stil CSS. La rândul său, este alcătuit din selectoare și declarații.
Selector: Se referă la elementul HTML pe care va fi aplicat stilul.
Declarație: Aceasta este specificația stilurilor aplicate elementelor. Poate conține una sau mai multe proprietăți. Prin declarații, este clar ce trebuie făcut.
Proprietate: face posibilă modificarea aspectului unuia sau mai multor elemente.
Valoare: este rezultatul modificării caracteristicilor elementelor.

În general, un fișier CSS conține mai multe stiluri, fiecare dintre care poate conține un număr mare de elemente. În mod similar, o specificație de stil poate conține diverse combinații de proprietăți / valori.

Selectoare

Selectorii sunt necesari pentru crearea paginilor web, deoarece aceștia indică la ce element trebuie aplicat stilul CSS. Acestea garantează modul corect de a face acest lucru, permițând selectarea exactă a elementelor dintr-o pagină web.

În ciuda existenței mai multor tipuri de selectoare, cele cinci principale vor fi denumite mai jos:

Universal: este identificat printr-un asterisc. Selectează toate elementele unei pagini, ceea ce o face un selector de mică utilizare, deoarece nu este frecvent ca același stil să fie aplicat tuturor elementelor paginii.
De tip sau etichetă: Se utilizează atunci când eticheta HTML a elementelor paginii se potrivește cu valoarea selectorului. Pentru utilizarea sa, este necesar să se indice doar numele etichetei asociate elementului selectat. În general, se aplică în elemente de tip paragraf.
Descendent: Se referă la selectarea elementelor care se află între etichetele de deschidere și de închidere ale altor elemente. Adică selectează elemente care se află în alte elemente, cărora li se pot aplica diferite stiluri CSS, atâta timp cât sunt de același tip. Asigură acuratețea selectoarelor de tip sau etichetă.
Clasă: rezolvați limitările de selecție ale celor trei tipuri anterioare de selectoare, deoarece permite aplicarea stilurilor unui singur element al paginii, identificând direct regula. Sunt foarte utile în proiectarea de pagini complexe, deoarece aceeași valoare a atributului de clasă poate fi inclusă în mai multe elemente ale aceleiași pagini.
De la ID: Îmbunătățește eficiența selectorului de clasă în aplicarea stilurilor unui singur element pe o pagină. Funcționează atunci când doriți să selectați un element prin atributul său id. Valoarea acestui atribut nu poate fi repetată în mai multe elemente de pe aceeași pagină.

Este important să rețineți că CSS permite utilizarea diferitelor combinații, pornind de la acești selectori de bază.

Proprietăţi

După cum sa menționat deja, proprietățile vă permit să proiectați aspectul paginilor HTML. Printre principalele tehnici se numără:

Shortland: este folosit de toți designerii de web. Vă permite să creați foi de stil mai concise și ușor de citit, deoarece prin intermediul acestuia puteți seta valoarea diferitelor proprietăți în același timp.
HasLayout pentru Internet Explorer: Este practic un remediu de eroare legat de CSS, care se bazează atât pe caracteristicile browserului, cât și pe alte erori existente.
Float curat: Permite corectarea problemelor cauzate de elementele plutitoare, forțând înălțimea elementelor containerului.
Elemente de aceeași înălțime: încearcă ca toate coloanele unei pagini să aibă aceeași înălțime. Se bazează pe utilizarea proprietății de afișare a CSS.
Tipografie: Acestea sunt tehnici care asigură faptul că utilizatorii văd corect tipul de caractere utilizat în proiectarea paginii, indiferent de fontul utilizat.

Modalități de a include CSS în HTML

Datorită flexibilității CSS, proiectantul poate alege modul în care dorește să includă foi de stil în documentele HTML. Acestea sunt:

În același document HTML: este ideal atunci când aveți câteva stiluri definite sau când doriți să includeți stiluri complementare într-o anumită pagină HTML. Se realizează utilizând eticheta y sólo pueden ubicarse en la cabecera del documento.
Într-un fișier extern: după etichetă Stilurile sunt legate de pagini HTML printr-un fișier CSS simplu. Fișierul CSS conține toate stilurile care urmează să fie incluse, iar pagina permite conectarea tuturor fișierelor necesare. Același fișier poate fi inclus în mai multe pagini în același timp, ceea ce garantează omogenitatea conținutului în toate. Este cea mai utilizată formă astăzi.
În elemente HTML: necesită definirea separată a stilului fiecărui element, ceea ce îl face metoda cea mai puțin utilizată de către proiectanții HTML. Se folosește numai pentru a include un stil foarte specific corespunzător unui singur element din document.

Definiția means

Principalele dispozitive avute în vedere pentru aplicarea foilor de stil CSS sunt: imprimante, ecrane, proiectoare, televizoare, dispozitive mobile, printre altele. Pentru fiecare dintre ele există o descriere specifică care permite definirea stilului. Cele mai utilizate sunt ecran, pentru a stabili aspectul documentului pe ecran; print, referindu-se la aspectul documentului în ceea ce privește tipărirea; și portabil, orientat spre vizualizarea documentelor pe dispozitive mobile.

Acum, așa cum am menționat mai devreme, CSS permite modificarea stilului unui document în funcție de funcționalitatea suportului sau a dispozitivului utilizat pentru a-l afișa. În acest fel, există următoarele reguli de definire a mediilor:

Stil @Media: vă permite să identificați rapid și direct mediul pe care va fi aplicat stilul care alcătuiește regula. Numele acestuia este scris imediat după @media. Dacă există mai multe medii pentru același stil, numele tuturor sunt scrise, separate prin virgule. Un exemplu al acestui tip de definiție este: @media screen {body {font - size: 13px}}, ceea ce înseamnă că dimensiunea de afișare a fontului pe ecran trebuie să fie de 13 pixeli.
@import: Folosit la conectarea fișierelor externe la documente HTML. Pentru a face acest lucru, după ce tastați @import, este definită adresa URL a fișierului CSS, urmată de numele mediului pe care urmează să fie aplicat stilul. De exemplu: @import url ("printer_styles.css") print. Aceasta înseamnă că, atunci când documentul este tipărit, stilurile incluse în fișierul CSS extern trebuie încărcate. Pentru mai multe suporturi media, numele acestora trebuie să fie separate prin virgule. Dacă media nu este specificată în regulă, browserul înțelege că stilul trebuie aplicat în mod egal tuturor mediilor.
<link>: Este utilizat și atunci când doriți să includeți stiluri legate prin diferite fișiere CSS externe. Structura sa este puțin mai complicată, deoarece necesită includerea atributului media pentru fiecare dintre stilurile din fiecare fișier. Forma sa de bază este următoarea: <link rel = "styleheet" type = "text / css" media = "screen" href = "basic.css" />. Ceea ce indică faptul că atunci când documentul este vizualizat printr-un ecran, ar trebui luate în considerare stilurile incluse în fișierul CSS.
Amestecarea metodelor: Practic, permite definirea mijloacelor prin combinarea oricăreia dintre cele trei căi anterioare. @import url ("section_styles.css") ecran; @media print {/ * Stiluri specifice imprimantei * /}. Aceasta înseamnă că stilurile afișate pe ecran provin dintr-un fișier legat cu eticheta <link> și inclus în regula @import. În plus, stilul de imprimare este definit de regula @media.