Ce sunt foile de stil cascadă?
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ă folosească mai mult decât fontul și culorile de bază ale acestui limbaj de markup. Astăzi, toate browserele moderne acceptă toate nivelurile CSS 1, cea mai mare parte a CSS Level 2 și chiar cele mai multe aspecte ale CSS Level 3. Pe măsură ce CSS continuă să evolueze și se introduc noi stiluri, browserele web au început să implementeze module care aduc un nou suport CSS în acele browsere și oferă designerilor noștri instrumente noi de styling cu care să lucrați.
Î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 foarte greu să găsiți pe oricine care lucrează în industria de astăzi care nu au 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 dintr-o foaie 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 browser implicit, în browser-ul meu web, fontul implicit este " Times New Roman " afișat la dimensiunea 16. Totuși nici una dintre paginile pe care le vizitez se afișează în familia și dimensiunea 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, înlăturând implicațiile browserului meu web. Toate foile de stil pe care le creați pentru o pagină Web vor avea o specificitate mai mare decât stilurile implicite ale browserului, astfel că acele setări implicite se vor aplica numai dacă foaia dvs. 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 altfel.
Unde este folosit CSS?
CSS poate fi de asemenea folosit pentru a defini modul în care ar trebui să pară paginile web 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 mea - majoritatea profesioniștilor web nu fac acest lucru pur și simplu pentru că scopul unui site al unui buget nu face apel la această muncă suplimentară ).
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. Pe parcurs, veți strânge o "pungă 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,