Site-urile web sunt alcătuite dintr-un număr de piese individuale, inclusiv imagini, text și diverse documente. Aceste documente nu includ doar documentele care pot fi legate de diferite pagini, cum ar fi fișiere PDF, ci și documentele care sunt utilizate pentru a construi paginile în sine, Documente HTML pentru a determina structura unei pagini și a documentelor CSS (Cascading Style Sheet) pentru a dicta aspectul unei pagini. Acest articol va aprofunda CSS, acoperind ce este și unde este utilizat astăzi pe site-uri web.
O lecție de istorie CSS
CSS a fost dezvoltat pentru prima dată în 1997 ca o modalitate pentru dezvoltatorii de web de a defini aspectul vizual al paginilor web pe care le creează. Acesta a fost destinat să permită profesioniștilor web să facă acest lucru separați conținutul și structura codului unui site web din designul vizual, lucru care nu fusese posibil înainte de acest moment.
Separarea structurii și stilului permite HTML să îndeplinească mai mult din funcția pe care se baza inițial - marcajul conținut, fără a fi nevoie să vă faceți griji cu privire la designul și aspectul paginii în sine, ceva cunoscut în mod obișnuit ca „aspectul și aspectul” paginii pagină.
Evoluția CSS
CSS nu a câștigat popularitate până în jurul anului 2000, când browserele web au început să folosească mai mult decât aspectele de bază ale fontului și culorilor acestui limbaj de marcare. Astăzi, toate browserele moderne acceptă toate nivelurile CSS 1, majoritatea nivelului CSS 2 și chiar majoritatea aspectelor CSS nivel 3. Pe măsură ce CSS continuă să evolueze și sunt introduse noi stiluri, browserele web au început să implementeze module care aduc un nou suport CSS în aceste browsere și oferă designerilor web noi instrumente puternice de stil pentru a funcționa cu.
În (mulți) ani, au existat designeri web selectați care au refuzat să utilizeze CSS pentru proiectarea și dezvoltarea de site-uri web, dar această practică a dispărut aproape din industrie astăzi. CSS este acum un standard utilizat pe scară largă în designul web și ați fi greu de găsit pe oricine care lucrează astăzi în industrie care nu avea cel puțin o înțelegere de bază a acestei limbi.
CSS este o abreviere
După cum sa menționat deja, termenul CSS înseamnă „Foaie de stil în cascadă”. Să descompunem puțin această frază pentru a explica mai complet ce fac aceste documente.
Cuvântul „foaie de stil” se referă la documentul în sine (cum ar fi fișierele HTML, CSS sunt într-adevăr doar documente text care pot fi editate cu o varietate de programe). Foile de stil au fost folosite pentru proiectarea documentelor de mulți ani. Acestea sunt specificațiile tehnice pentru un aspect, fie tipărit, fie online. Proiectanții de tipărire au folosit de mult timp foi de stil pentru a se asigura că desenele lor sunt tipărite exact conform specificațiilor lor. O foaie de stil pentru o pagină web are același scop, dar cu funcționalitatea adăugată de a spune browserului web cum să redea documentul vizualizat. Astăzi, foile de stil CSS pot fi utilizate și interogări media pentru a schimba modul în care arată o pagină diferite dispozitive și dimensiuni de ecran. Acest lucru este extrem de important, deoarece permite redarea diferită a unui singur document HTML în funcție de ecranul utilizat pentru a-l accesa.
Cascadă este partea cu adevărat specială a termenului „foaie de stil în cascadă”. O foaie de stil web este destinat să cascadă printr-o serie de stiluri în acea foaie, ca un râu deasupra unei cascade. Apa din râu lovește toate stâncile 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 ale site-ului web.
Foi de stil de designer Înlocuiesc foi de stil implicite din browser
Fiecare pagină web este afectată de cel puțin o foaie de stil, chiar dacă designerul web nu aplică niciun stil. Această foaie de stil este foaia de stil agent utilizator - cunoscut și ca stiluri implicite pe care browserul web le va folosi pentru a afișa o pagină dacă nu sunt furnizate alte instrucțiuni. De exemplu, în mod implicit, hyperlink-urile sunt stilizate în albastru și sunt subliniate. Aceste stiluri provin dintr-o foaie de stil implicită a browserului web. Cu toate acestea, dacă designerul web oferă alte instrucțiuni, browserul va trebui să știe ce instrucțiuni au prioritate. Toate browserele au propriile stiluri implicite, dar multe dintre aceste valori implicite (cum ar fi linkurile text albastre subliniate) sunt partajate între toate sau majoritatea browserelor și versiunilor majore.
Pentru un alt exemplu de browser implicit, în browserul nostru web, fontul implicit este „Times New Roman"afișat la dimensiunea 16. Cu toate acestea, aproape niciuna dintre paginile pe care le vizităm afișează în acea familie și dimensiune de fonturi. Acest lucru se datorează faptului că cascada definește ca cele de-a doua foi de stil, care sunt stabilite de designeri înșiși, să fie redefinite dimensiunea fontului și familie, anulând valorile implicite ale browserului nostru web. Orice foi de stil pe care le creați pentru o pagină web vor avea mai multă specificitate decât stilurile implicite ale unui browser, astfel încât acele valori 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 acesta este valoarea implicită, dar dacă fișierul CSS al site-ului dvs. spune că linkurile ar trebui să fie verzi, acea culoare va înlocui albastrul implicit. Sublinierea va rămâne în acest exemplu, deoarece nu ați specificat altfel.
Unde se folosește CSS?
CSS poate fi, de asemenea, utilizat pentru a defini cum ar trebui să arate 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 tipărită. Deoarece elementele paginilor web, cum ar fi butoanele de navigare sau formularele web, nu vor avea niciun scop pe pagina tipărită, o foaie de stil de tipărire poate fi utilizată pentru a „dezactiva” acele zone când se tipărește o pagină. Deși nu este o practică obișnuită pe multe site-uri, opțiunea de a crea foi de stil de imprimare este puternică și atractivă (în experiență - majoritatea profesioniștilor din web nu fac acest lucru pur și simplu pentru că sfera bugetului unui site nu necesită acest lucru suplimentar fi realizat).
De ce este important CSS?
CSS este unul dintre cele mai puternice instrumente pe care un web designer le poate învăța, deoarece cu el puteți afecta întregul aspect vizual al unui site web. Foile de stil bine scrise pot fi actualizate rapid și permit site-urilor să schimbe ceea ce este prioritar vizual pe ecran, care la rândul său arată valoarea și concentrarea vizitatorilor, fără a fi nevoie să se facă modificări la subiacent Marcare HTML.
Principala provocare a CSS este că există destul de puțin de învățat - și cu browserele care se schimbă în fiecare zi, ceea ce funcționează bine astăzi s-ar putea să nu aibă sens mâine, pe măsură ce noile stiluri devin susținute, iar altele sunt renunțate sau nu sunt în favoarea unui motiv sau un alt.
Curba de învățare CSS merită
Deoarece CSS poate fi în cascadă și se combină și având în vedere modul în care diferite browsere pot interpreta și implementa directivele în mod diferit, CSS poate fi mai dificil de învățat decât HTML simplu. CSS se modifică, de asemenea, în browsere într-un mod pe care HTML nu îl schimbă. Cu toate acestea, odată ce începeți să utilizați CSS, veți vedea că valorificarea puterii foilor de stil vă va oferi o flexibilitate incredibilă în modul în care așezați paginile web și le definiți aspectul. Pe parcurs, veți aduna un „sac de trucuri” de stiluri și abordări care au funcționat pentru dvs. în trecut și la care vă puteți îndrepta din nou în timp ce construiți noi pagini web in viitor.