Site-urile web sunt alcătuite dintr-un număr de piese individuale, inclusiv imagini, text și diverse documente. Aceste documente includ nu numai cele care pot fi asociate cu diverse pagini, cum ar fi fișierele PDF, dar și documentele utilizate pentru a construi paginile în sine, cum ar fi documentele HTML pentru a determina structura unei pagini și documentele CSS (Cascading Style Sheet) pentru a dicta aspectul unei pagini. Acest articol va cuprinde în CSS, care acoperă ceea ce este și unde este folosit astăzi pe site-urile Web.
O lecție de istorie CSS
CSS a fost dezvoltat pentru prima dată în 1997 ca o modalitate pentru dezvoltatorii web de a defini aspectul vizual al paginilor web pe care le creează. Acesta a fost destinat să permită profesioniștilor web să separe conținutul și structura codului site-ului de designul vizual, ceea ce nu a fost posibil înainte de acest moment.
Separarea structurii și a stilului permite ca HTML să efectueze mai mult din funcția pe care sa bazat inițial - marcajul conținutului, fără a fi nevoie să vă faceți griji cu privire la designul și aspectul paginii în sine, ceva cunoscut sub numele de "aspect și simț" a paginii.
CSS nu a câștigat popularitate până în jurul anului 2000, când browserele web au început să utilizeze mai mult decât aspectele de bază ale fontului și culorilor acestui limbaj de markup. Astazi, toate browserele moderne suporta toate CSS Level 1, cea mai mare parte a CSS Level 2 si chiar cele mai multe aspecte ale CSS Level 3. CSS continua sa evolueze si sunt introduse noi stiluri, browserele web au inceput sa implementeze module care aduc noi suport CSS în acele browsere și oferă designerilor noștri instrumente puternice de styling noi pentru a lucra cu.
În (mulți) ani în urmă, au existat anumiți designeri web care au refuzat să utilizeze CSS pentru proiectarea și dezvoltarea site-urilor web, dar această practică este totuși departe de industria de azi. CSS este acum un standard utilizat pe scară largă în designul web și veți fi greu să găsiți pe oricine care lucrează în industria de astăzi care nu a avut cel puțin o înțelegere de bază a acestei limbi.
CSS este o abreviere
Așa cum am menționat deja, termenul CSS înseamnă "Foaia de stil cascadă". Să lămurim puțin această frază pentru a explica mai bine ce fac aceste documente.
Cuvântul "foaie de stil" se referă la documentul în sine (cum ar fi HTML, fișierele CSS sunt într-adevăr doar documente text care pot fi editate cu o varietate de programe). Foile de stil au fost utilizate pentru proiectarea documentelor timp de mulți ani. Acestea sunt specificațiile tehnice pentru un aspect, imprimat sau online. Designerii de imprimare au folosit mult foi de stil pentru a se asigura că desenele lor sunt imprimate exact la specificațiile lor. O foaie de stil pentru o pagină web servește aceluiași scop, dar cu funcționalitatea adăugată de a spune și browser-ului web cum să redea documentul vizualizat. Astăzi, foile de stil CSS pot utiliza, de asemenea, interogări media pentru a schimba modul în care o pagină caută diferite dispozitive și dimensiuni ale ecranului. Acest lucru este incredibil de important, deoarece permite ca un singur document HTML să fie redat diferit în funcție de ecranul folosit pentru accesarea acestuia.
Cascada este partea cu adevărat specială a termenului "foaie de stil cascadă". O foaie de stil web are rolul de a cascada printr-o serie de stiluri din această foaie, ca un râu peste o cascadă. Apa din râu lovește toate pietrele din cascadă, dar numai cele din partea de jos afectează exact unde va curge apa. Același lucru este valabil și pentru cascada din foile de stil pentru site.
Fiecare pagină web este afectată de cel puțin o foaie de stil, chiar dacă designerul web nu aplică nici un stil. Această foaie de stil este foaia de stil pentru agentul de utilizator - cunoscută și ca stiluri implicite pe care browserul web le va utiliza pentru a afișa o pagină dacă nu sunt furnizate alte instrucțiuni. De exemplu, în mod prestabilit, hyperlink-urile sunt redate în albastru și sunt subliniate. Aceste stiluri provin de la foaia de stil implicită a browserului Web. Dacă web designerul oferă alte instrucțiuni, browserul va trebui să știe ce instrucțiuni au prioritate. Toate browserele au propriile stiluri implicite, însă multe dintre aceste valori implicite (cum ar fi linkurile de text albastru subliniate) sunt partajate în toate browserele și versiunile importante.
Pentru un alt exemplu de implicit pentru browser, în browserul nostru, fontul implicit este "Times New Roman" afișat la dimensiunea 16. Totuși, aproape nici una din paginile pe care le vizităm afișarea în familia și mărimea fontului. Acest lucru se datorează faptului că cascada definește faptul că cele două foi de stil, care sunt stabilite de către designerii înșiși, pentru a redefini dimensiunea fontului și a familiei, depășind valorile implicite ale browserului nostru web. Orice foi de stil pe care le creați pentru o pagină Web vor avea mai multe specificități decât stilurile implicite ale browserului, astfel că acele setări implicite se vor aplica numai dacă foaia de stil nu le suprascrie. Dacă doriți ca linkurile să fie albastre și subliniate, nu trebuie să faceți nimic, deoarece este implicit, dar dacă fișierul CSS al site-ului dvs. spune că legăturile ar trebui să fie verzi, acea culoare va suprascrie albastrul implicit. Sublinierea va rămâne în acest exemplu deoarece nu ați specificat altceva.
Unde este folosit CSS?
CSS poate fi, de asemenea, utilizat pentru a defini modul în care paginile web ar trebui să pară atunci când sunt vizualizate în alte medii decât un browser web. De exemplu, puteți crea o foaie de stil de imprimare care va defini modul în care pagina web ar trebui să fie tipărită. Deoarece elementele paginii web, cum ar fi butoanele de navigare sau formularele web, nu vor avea nici un scop pe pagina imprimată, o foaie de stil de tipărire poate fi utilizată pentru a "dezactiva" acele zone atunci când este tipărită o pagină.Deși nu este o practică obișnuită pe multe site-uri, opțiunea de a crea foi de stil de tipărire este puternică și atractivă (în experiența noastră - majoritatea profesioniștilor web nu fac acest lucru pur și simplu pentru că domeniul de acoperire a unui site nu presupune efectuarea acestei lucrări suplimentare ).
De ce este important CSS?
CSS este unul dintre cele mai puternice instrumente pe care un designer de web le poate învăța, deoarece cu ele puteți afecta întregul aspect vizual al unui site web. Foile de stil bine redactate pot fi actualizate rapid și permit site-urilor să schimbe ceea ce este prioritar vizual pe ecran, ceea ce, la rândul lor, prezintă valoare și se concentrează pe vizitatori, fără a fi nevoie să se facă modificări la marcajul HTML.
Principala provocare a CSS este că există destul de puțin pentru a învăța - și cu browserele care se schimbă în fiecare zi, lucrurile care funcționează astăzi ar putea să nu aibă sens mâine, deoarece stilurile noi sunt susținute și altele sunt abandonate sau căzute din favoare pentru un motiv sau altul .
Deoarece CSS poate cascada și combina, și având în vedere modul în care diferite browsere pot interpreta și implementa directivele în mod diferit, CSS poate fi mai dificil decât cel simplu HTML de masterat. De asemenea, CSS se modifică în browsere într-un mod în care HTML într-adevăr nu. Odată ce începeți să utilizați CSS, veți vedea că valorificarea puterii foilor de stil vă va oferi o flexibilitate incredibilă în ceea ce privește structura paginilor web și definirea aspectului acestora. De-a lungul drumului, veți acumula un "sac de trucuri" de stiluri și abordări care au lucrat pentru dvs. în trecut și la care vă puteți întoarce din nou pe măsură ce construiți noi pagini web în viitor.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 7/5/17
