Share
Avem un Ghid de învățare nou și cuprinzător care vă ajută să învățați CSS online, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat. Verifică Aflați CSS: Ghidul complet.
CSS funcționează mână în mână cu HTML; HTML sortează structura paginii, CSS face să arate destul și adaugă nivele subtile de interacțiune. În calitate de designer de web, ar trebui să înțelegeți cu adevărat aceste două limbi. Chiar dacă nu faceți singur codificarea, înțelegerea modului în care acestea funcționează vă va ajuta să proiectați pentru web.
C.S.S. standuri pentru Foi de stil cascadă; documente care conțin reguli de stil pentru aplicarea la HTML (sau XML, alături de câteva alte formate structurale). Regulile de stil multiple pot indica un element HTML, caz în care trebuie să existe o modalitate de a determina ce regulă ar trebui să aibă efect. Termenul cascadă descrie procesul de filtrare de la reguli generale, până când se întâlnește regula cea mai specifică. Această regulă este apoi aleasă să-și facă munca ...
Prin CSS, prezentarea poate fi separată de structură. Se rezolvă necesitatea de a sparge regulile de stil în cadrul HTML-ului, cum ar fi:
Prezentare în cadrul structurii. Ew. care păstrează documentele mai netede și DRYer.
CSS este citit de browserele web. Ei iau documentul de marcare, apoi aplică regulile de stil pentru elementele din document.
Ei nu interpretează întotdeauna regulile de stil la fel ca unul pe altul, și pe măsură ce browserele se dezvoltă și ei, suportă noile propuneri de stil. Este adesea producătorii browser-ului înșiși care experimentează cu proprietăți CSS, cu speranța că sugestiile lor vor fi adoptate de utilizatori.
În cele din urmă, consorțiul World Wide Web (W3C) are obligația de a stabili dacă proprietățile CSS sunt standardizate sau nu.
Sintaxa CSS cuprinde câteva piese fundamentale; reguli, selectori, declarații, proprietăți și valori.
Această regulă CSS conține toți ceilalți biți și bobocuri pe care tocmai le-am menționat.
Selectorii fac trimitere la elementele din interiorul marcajului HTML, atunci declarațiile din cadrul coastelor curbate definesc cum ar trebui să fie elementele respective. Pot exista mai multe declarații într-o singură regulă; fiecare declarație cuprinzând o proprietate cu o valoare asociată.
Există mai multe moduri în care puteți selecta elemente HTML, de la simple tip selectori:
Aceasta va selecta toate imaginile și va aplica zăbrele zero tuturor. Atunci noi avem selectori de clasă, care indică toate elementele cu o anumită clasă aplicată acestora. Aruncați o privire la acest marcaj, cu CSS-ul corespunzător:
Iată o ancoră, de care ar putea fi multe ... 
... atunci aceasta va selecta toate ancorele cu o clasă de "evidențiere" și le va face portocalii. Notă: spre deosebire de ceea ce ați putea auzi, nu există un astfel de lucru ca a CSS. Sunt Selectori CSS care vizează Clase HTML. Puteți citi mai multe despre acest lucru pe tantek.com și 456 Berea St.
Există foarte mulți selectori posibili de învățat. Există chiar și mai multe proprietăți care trebuie abordate (consultați această listă pe site-ul W3C). Mai târziu, vom examina sarcinile în care vi se va cere să învățați multe din ele. Având cât mai multe posibilități la vârful degetului dvs. vă veți face un coder mai bun CSS!
Acum aveți o înțelegere fundamentală a ceea ce este CSS, este timpul să vă scufundați în mod corespunzător. Există o serie de cursuri de începători online, care vă vor ajuta; aici sunt doar un cuplu care cu siguranta merita sa verificati:
Când Dave Shea a lansat CSS Zen Garden în mai 2003, el și-a propus să demonstreze că un singur document HTML ar putea fi desenat în moduri infinite folosind diferite foi de stil. Acesta a fost un concept strălucit și un moment real cu becuri luminoase pentru designeri din întreaga lume.
De ce nu faci tu ceva asemănător? Luați o simplă piesă de marcare (lista de navigare neordonată a lui Chris Coyier este candidatul perfect):
Vedeți câte efecte diferite puteți obține, prin modificarea stilurilor.
Aruncați o privire la acest workshop comunitar Webdesigntuts +, unde aproape 100 de cititori au trimis foile de stil pentru o listă simplă neordonată. Așa cum veți vedea din rezultate, puțină imaginație poate duce CSS la o distanță lungă!
Dacă oamenii cunosc CSS, aceștia spun despre asta - asta e știința. Acordați atenție la ceea ce fac celebritățile CSS și veți învăța multe. Iată doar câteva tichete pe care ar trebui să le urmați:
… și…
De ce nu găsiți eroii pe un site de codare socială cum ar fi GitHub sau CodePen? Cel mai bun lucru despre rețele precum acestea este sfatul pe care toți îl acordă reciproc; dacă aveți o problemă CSS, cineva va fi avut-o în fața dvs. și va fi dispusă să ofere o mână.
CodePen După cum am menționat mai devreme, browserele nu interpretează întotdeauna stilurile în mod egal. Acest lucru este valabil în mod special dacă sunteți de catering pentru versiunile mai vechi ale Internet Explorer, care sunt mult în spatele ori în ceea ce privește adoptarea CSS. Browserele moderne (cum ar fi Google Chrome, Mozilla Firefox, Apple Safari, Opera și chiar Internet Explorer 10) au o gestionare proactivă de actualizare, astfel încât să se reducă probabilitatea ca versiunile mai vechi să plutească în jur.
Spunând că există diferențe între fiecare dintre aceste browsere, indiferent de cât de actualizate se întâmplă. Unele CSS vor fi bine suportate într-un browser, altfel interpretate în altul, deci din acest motiv este recomandat să acordați atenție browserelor.
Iată câteva resurse utile care vă vor ajuta pe drum:
Indiferent dacă le citiți acoperă pentru a acoperi, sau pur și simplu le-au la îndemână, dacă aveți nevoie de referință rapidă, cele mai bune cărți industrie sunt de neegalat pentru învățare.
CSS a fost scris de multe ori, dar aceste publicații sunt crema mea de cultură:
Pe măsură ce câștigi încredere, vocabularul tău CSS va crește. Veți comenta proprietățile CSS în memorie și de asemenea diferitele moduri de selectare a elementelor. Acum este momentul să transformăm într-adevăr o notă și să învățăm serios câțiva selectori CSS.
Învățarea selectorilor CSS înseamnă, de asemenea, abordarea specificității.
Stormtrooper Icon de Jory Raphael Ce selectori vor suprascrie celorlalți? Care este sintaxa minimă pe care ar trebui să o folosesc în selectorul meu pentru a fi eficientă în codarea mea? Singurul loc pe care îl trimit întotdeauna oamenilor pentru a învăța regulile specificității este CSS-ul lui Andy Clarke: Războaiele de specificitate. O vizualizare inspirată a modului în care selectorii se îndreaptă atunci când se opresc unul împotriva celuilalt (și forțele întunecate).
CSS este o disciplină foarte implicată. Odată ce aveți elementele de bază sub centură, există multe căi pentru investigații suplimentare. De exemplu:
CSS3 este în permanență în mișcare. Sunt adoptate proprietăți noi, altele sunt abandonate de browsere, uneori sintaxa chiar se schimbă. Noțiuni de bază cu privire la Gradients CSS, va fi un alt cui în sicriu de utilizare Photoshop; de ce utilizați imagini furate atunci când puteți să-l CSS?!
Consultați CSS3 Vă rugăm să vedeți toate implementările CSS3 corecte, cu rezervări recomandate pentru browserele care nu sunt compatibile. De asemenea, aruncați o privire la CSS3 Essentials pe Tuts + Premium pentru a vă da cunoștințele un impuls.
Responsive Web Design vă permite să modificați aspectul web al fluidului, în funcție de modul în care este accesată pagina. Întrebările media CSS3 ajută la acest proces, oferind diferite reguli CSS în funcție de circumstanțe. Aruncați o privire la Responsive Web Design: Un ghid vizual pentru a începe.
Se pare că CSS ar putea fi mai bine. Odată ce ați început să utilizați CSS pentru proiectele din lumea reală, probabil veți trage aceeași concluzie. Întreținerea fișierelor CSS mari este dificilă, repetarea este comună - și de ce nu puteți utiliza o variabilă pentru a stoca valoarea unei culori HEX în loc să o tastați din nou și peste ?! Preprocesoarele CSS, cum ar fi Sass, LESS și Stylus, rezolvă toate aceste probleme și multe altele. Fără a trebui să "reînveți" un limbaj similar (doar să rămâi la CSS de vanilie, dacă vrei), poți valorifica puterea preprocesorilor.
Check out Get In LESS, Mastering SASS și Sass vs. LESS vs. Stylus: Preprocessor Shootout dacă sunteți interesat să aflați mai multe.
SMACSS (sau arhitectura scalabilă și modulară pentru CSS) este un concept dezvoltat de Jonathan Snook, care are ca scop combaterea mentenabilității ciudate a fișierelor CSS. Nu predă o limbă nouă, ci mai degrabă sugerează modalități prin care puteți face mai bine organizată actuala dvs. CSS.
Scrierea CSS modular vă permite să luați bucăți de cod de styling și să-l introduceți în alte proiecte, fără a distruge restul stilurilor dvs. Managementul specificității la cel mai înalt nivel.
Nu există nici o îndoială că, cu abilități precum HTML și CSS sub centură, veți fi un designer web mult mai bun. Urmați cele două procese de învățare pe care le-am prezentat și veți fi pe drum.
Dacă aveți recomandări de învățare CSS, strigați-le în comentarii!
Accentsconagua