100+ resurse CSS pentru designeri și dezvoltatori web

de Bradley Nice, Manager de conținut la ClickHelp.com - instrument de documentare software

Un designer web / dezvoltator serios trebuie să solicite o abilitate pentru a scrie CSS bun. CSS este un limbaj simplu, foarte ușor de învățat, dar foarte puternic. Odată ce îl înveți, s-ar putea să fii uimit de abilitatea sa.

În cazul în care nu sunteți familiarizat cu CSS, iată o introducere rapidă:

„CSS este un limbaj special folosit pentru stilul conținutului HTML. CSS definește modul în care vor fi afișate elementele HTML - culoare, dimensiune, poziție, bordură, fundal etc. ”
© Echipa ClickHelp

Astăzi am adunat un set serios de resurse CSS pentru a vă ajuta să învățați. Este împărțit în mai multe categorii: Tutoriale de învățare, Site-uri și cărți, Referințe și foi de lucru, Tutoriale și tehnici, Șabloane și cadre, Galerii și vitrine, Instrumente și bloguri specifice CSS și Site-uri de știri.

Tutoriale de învățare, site-uri și cărți

Site-uri: Codecademy, FreeCodeCamp.com, SoloLearn, Treehouse, Tutsplus, A to Z CSS, Dash, Hello World, Khan Academy, HTML5 de la Scratch, Sitepoint, Usersnap

Cărți: HTML și CSS, programare după ore - Tutorial CSS

  • Tutorial video de bază HTML și CSS al lui Chris Coyier (62 MB) - Un video trebuie să vizioneze pentru începători absoluti. Te învață totul, de la alegerea unui editor de text, scrierea paginii HTML pumn și utilizarea CSS pentru design.
  • Crearea unei fișe de stil global - Nu aveți nevoie de fișiere CSS diferite pentru pagini diferite, creați întotdeauna un singur fișier CSS global pentru toate paginile dvs. web. Foile de stil globale pot fi aplicate fie pe întregul site, fie pe un subset de pagini, iar acest lucru înseamnă că trebuie să actualizați unul sau două fișiere doar atunci când trebuie să faceți o schimbare de stil.
  • Noțiuni de bază CSS - Înfășurat în lumea tabelelor cuibărite și a marcajului învechit? Folosind CSS pentru a stiliza fișierele dvs. HTML (X), veți beneficia de dvs. și de vizitatorii dvs. în multe feluri. Aflați elementele de bază ale CSS, capitol după capitol online sau descărcați toate cele 18 capitole de bază CSS într-un singur fișier PDF ce poate fi imprimat.
  • Tutorial de tip CSS (Cascading Style Sheets) - Aflați modul de utilizare a CSS, definirea dimensiunii fontului, a marjelor și a captusirii. Identificați elementele HTML prin intermediul atributelor ID și clase.
  • Tutorial CSS - Mai multe tutoriale CSS aici, de la lecția 1 până la 16, conțin o scurtă introducere și un indepth tutorial despre CSS, aflați de la utilizarea culorilor la elementele plutitoare.
  • HTML & CSS pentru începători - Cum să configurați pagina dvs. web HTML, să creați titluri și paragrafe, să adăugați liste, să schimbați dimensiunea fontului, culoarea și tipul folosind CSS.
  • Aflați HTML și CSS într-un singur ghid ușor de utilizat. - Ghid simplu și cuprinzător dedicat pentru a ajuta începătorii să învețe HTML și CSS. Prezentând elementele fundamentale, acest ghid lucrează prin toate elementele comune ale proiectării și dezvoltării frontale.

Referințe și foi de lucru

  • Index CSS Properties - O listă alfabetică a fiecărei proprietăți CSS.
  • CSS Shorthand Guide - O foaie de lucru care acoperă formate de tip shorthand de bază CSS.
  • Fișe de înșelare CSS - Două foi de înșelăciune de la About.com - una de bază și una pentru machete CSS.
  • Listamatic - Acest site oferă exemple despre cum să folosești CSS pentru a crea stiluri de listă radical diferite.
  • Ghid pentru începători de la un proiectant CSS experimentat - Aceasta este o listă de resurse uriașă pentru începătorii CSS.
  • 5 sfaturi pentru organizarea CSS - Acest articol oferă cinci metode cu adevărat utile pentru păstrarea fișelor de stil mai bine organizate (și, prin urmare, mai ușor de editat ulterior).
  • Cele 5 sfaturi CSS - O colecție de cinci sfaturi simple pentru crearea CSS mai bune.
  • Modul Quirks și Modul Strict - Un ghid pentru modul interogări și modul strict în browserele moderne.
  • CSS Cheat Sheet (V2) - O referință CSS de o singură pagină care listează toate selecțiile CSS 2.1.
  • CSS de bază: Partea 1 - Un ghid de referință de 6 pagini pentru elemente CSS de bază de la Refcardz.
  • Fisa Cheat Shorthand (PDF) - Foaie de referință pentru formatul CSS shorthand.
  • Utilizarea CSS (Cascading Style Sheets) - Un ghid de bază pentru CSS, inclusiv avantajele utilizării CSS.
  • 5 Moduri de a scrie instantaneu CSS mai bine - Câteva sfaturi pentru a scrie CSS bun, care este atât eficient cât și eficient.
  • Optimizarea structurii site-ului dvs. web pentru imprimare cu CSS - Un ghid pentru crearea de foi de stil pentru imprimare.
  • PrintStylesheets - Un alt ghid pentru crearea foilor de stil de imprimare.
  • Tipografia CSS: tehnici de contrast, tutoriale și bune practici - o colecție excelentă de resurse tipografice CSS.
  • Puternice tehnici CSS pentru codificare eficientă - O colecție de tehnici CSS, idei și soluții pentru o mai bună codificare CSS.
  • Resetarea stilurilor CSS cu resetarea CSS - Un ghid complet pentru resetarea stilurilor.
  • Convenția privind denumirea structurală în CSS - Un articol despre denumirea elementelor bazate pe ceea ce sunt în loc de unde sunt sau cum arată.
  • Îmbunătățirea lizibilității codului cu ghiduri de stil CSS - Un articol care cuprinde cinci tehnici pe care le puteți utiliza pentru a face codul dvs. mai mentenabil și mai gestionabil.
  • 70 de idei de experți pentru o mai bună codificare CSS - O colecție de sfaturi pentru experți pentru îmbunătățirea codului dvs.
  • Teoria flotei CSS: lucruri pe care ar trebui să le cunoașteți - Un ghid pentru înțelegerea plutirii în CSS.
  • Ghid complet CSS - O resursă uriașă care acoperă practic toate părțile CSS.
  • Contrast tipografic și flux - un articol care conține elementele de bază ale creării unui tip bun cu contrast tipografic suficient în CSS.
  • Cum dimensionați textul în CSS - Un ghid detaliat pentru dimensionarea textului CSS.
  • Fisa de înșelăciune CSS - o foaie de înșelare CSS foarte completă pe web.
  • 13 Principii de instruire ale CSS Toți ar trebui să știe - O listă de convenții CSS de bază de care ar trebui să fiți conștienți.
  • Ghid de resurse - Acesta este ghidul de resurse CSS din CSS Zen Garden.
  • CSS Beauty - un site care oferă știri, resurse și o galerie CSS.
  • Utilizarea comenzilor rapide CSS - Un ghid de referință pentru unele elemente de bază CSS.
  • Manualul dezvoltatorului web - Aceasta este o colecție masivă de CSS și alte resurse, inclusiv vitrine, instrumente și multe altele.
  • Proiectare pe un dime: 100 de resurse CSS Freebie - O colecție mare de resurse CSS, inclusiv articole, tutoriale, machete și multe altele.
  • 15 Proprietăți CSS pe care probabil nu le folosiți niciodată (dar poate ar trebui) - Acest articol acoperă cincisprezece proprietăți CSS deseori trecute cu vederea, pe care mulți designeri ar putea să nu le știe niciodată că există.
  • 10 Principii ale maeștrilor CSS - O colecție de principii și îndrumări minunate de la unii dintre maeștrii CSS.
  • Specificitatea CSS: Lucruri pe care ar trebui să le știi - Un ghid pentru specificitatea CSS, unul dintre cele mai dificile concepte CSS de înțeles.
  • Rezolvarea durerilor de cap CSS 5 Commons - Un ghid pentru soluționarea problemelor CSS precum bug-ul dublu marjă IE6 și stilurile ineficiente.

Tutoriale și tehnici

  • 20 Resurse utile pentru învățarea despre CSS3
  • CSS3 Dezlegat - Sfaturi, trucuri și tehnici
  • 20 Tutoriale CSS3 foarte utile
  • Funcții și caracteristici interesante CSS3: 30+ Tutoriale utile
  • CSS de la Ground Up - Acesta este un tutorial foarte de bază pentru a începe cu CSS, care vă conduce prin crearea primei dvs. pagini web de bază cu CSS. Presupune că persoana care parcurge tutorialul nu are cunoștințe mici sau deloc despre modul de codificare a unui site web și este o resursă excelentă pentru începători.
  • 53 Tehnici CSS de care nu puteți trăi - Aceasta este o colecție uriașă de tehnici CSS pentru orice, de la meniuri la formulare până la tipărirea foilor de stil.
  • CSS Shadows Drop - Un tutorial despre cum puteți crea umbre drop pe imagini folosind CSS.
  • Selectutorial - CSS Selectori - Un ghid de bază pentru selectorii CSS și modul de funcționare al acestora.
  • CSS Tehnici de navigație - O colecție de 37 de modele diferite de navigare folosind CSS.
  • Tehnici CSS pe care le folosesc tot timpul - O colecție de tehnici CSS pe care Christian Montoya o consideră extrem de valoroasă.
  • Răspuns tehnici CSS - 20 Sfaturi și trucuri CSS - O colecție de tehnici CSS, inclusiv colțuri rotunjite și ferestre pop-up CSS.
  • Sfaturi și trucuri CSS - o colecție de tehnici CSS utile, de bază.
  • Fișă de stil principal: cea mai utilă tehnică CSS - o foaie de stil principală folosită pentru ștergerea și resetarea implicită a browserului.
  • Afișarea acelor Hyperlink cu CSS - Un tutorial rapid pentru adăugarea pictogramelor de tip link, folosind CSS compatibil cu IE7, Safari și Firefox.
  • Zece trucuri CSS pe care nu le poți cunoaște - Acoperă sfaturi precum scurtatura de caractere CSS, înlocuirea imaginii și alinierea verticală cu CSS.
  • Mai mult de zece trucuri CSS pe care nu le poți cunoaște - acest articol acoperă lucruri precum blocuri vs. elemente inline, setând o lățime minimă a paginii și text invizibil.
  • Transformarea unei liste într-o bară de navigare - Un excelent tutorial despre crearea unei bare nav dintr-o listă stilată.
  • Transformarea listelor în arbori - Cum se creează o listă cu mai multe niveluri neordonate sub forma unui document sau a unui arbore de pagini.
  • Reconstrucția paginii web cu CSS - Cum să reconstruiți o pagină web cu un aspect CSS.
  • Aspecte CSS avansate: pas cu pas - Un tutorial pas cu pas pentru crearea unui aspect avansat în 3 coloane.
  • Crearea unui layout CSS de la Scratch - Un ghid complet pentru crearea de la sol a unui site bazat pe CSS.
  • Tutorial CSS - Un tutorial complet de la W3Schools.
  • Fișe de stil - O altă colecție de tutorial CSS foarte completă.
  • Fancy Paragrafele cu CSS - Un tutorial pentru a crea formate de paragrafe specializate.
  • Și mai multe colțuri rotunjite cu CSS - O tehnică pentru crearea colțurilor rotunjite care acceptă transparența PNG și alfa.
  • Meniuri Uberlink CSS List - Un tutorial pentru crearea unei bare nav care se comportă ca un meniu de schimb de imagini, dar folosește doar două imagini și evidențiază pagina curentă.
  • Cum să adăugați variabile în fișierele dvs. CSS - Un ghid pentru aplicarea variabilelor la CSS folosind PHP și rescrierea URL-ului Apache.
  • 15+ tehnici și instrumente pentru codificarea CSS a browserului încrucișat - Acest articol acoperă mai mult de 15 sfaturi pentru crearea codului CSS compatibil cu browserul.
  • Centrare CSS - Distracție pentru toți! - Un ghid pentru centrarea CSS în machete, incluzând machete lichide de centrare.
  • Poziționare absolută în interiorul poziționării relative - Un ghid pentru poziționarea elementelor copilului în cadrul unui element părinte relativ poziționat.
  • Faux Absolute Poziționare - Un ghid către o abordare de poziționare care combină cele mai bune atribute atât de plutire cât și de poziționare absolută.
  • Aliniere verticală pentru liste de navigare cu mai multe linii - Un ghid pentru alinierea listelor care utilizează abordarea casetei plutite.
  • Top 10 Lista CSS pentru butoane CSS - O colecție de zece dintre cele mai bune tutoriale pentru crearea butoanelor CSS.
  • Colțuri Mountaintop - Crearea colțurilor rotunjite cu CSS.
  • CSS Rounded Corners Roundup - O colecție de tehnici și tutoriale cu colțuri rotunjite.
  • CSS Trucuri pentru gloanțe personalizate - Un ghid pentru crearea de stiluri personalizate pentru gloanțe cu CSS.
  • Swag CSS: liste cu mai multe coloane - un ghid pentru crearea unei liste ordonate semantic-logice, care se înfășoară prin mai multe coloane verticale.
  • Îmbunătățirea afișării link-urilor pentru tipărire - arată cum să includeți adresele URL ale linkului în printurile paginilor dvs. după textul de ancorare a linkului.
  • Advanced CSS Menu Trick - Un meniu avansat foarte fain, cu efect de estompare, construit cu CSS.
  • Meniuri CSS - Un tutorial despre crearea meniurilor din liste cuibărite cu CSS2 și fără JavaScript.
  • Meniu file CSS cu meniuri derulante - Un tutorial pentru crearea unui meniu derulant cu CSS.
  • Meniu Advanced CSS - Un tutorial pentru crearea unui meniu CSS cu adevărat excelent din WebDesignerWall.
  • Taburi orizontale animate - Un tutorial pentru crearea filelor de meniu orizontale care se animă pe rollover.
  • Meniu grafic CSS cu rollover - Un excelent tutorial pentru crearea unui meniu CSS cu efect de rulare.
  • Derulări CSS hibride - Un tutorial despre cum se pot crea dropdown-uri CSS care se degradează cu grație și sunt bine structurate, printre altele.
  • Ghid pentru începători pentru CSS - Un ghid complet pentru cei nou pentru CSS.
  • Noțiuni introductive cu CSS: un exercițiu practic - Un ghid foarte de bază pentru a începe cu CSS.
  • Cum: CSS Background Background - Un tutorial pentru lucrul cu fundaluri mari cu CSS.
  • Interfața CSS Extensibilă - Un tutorial complet pentru crearea de site-uri web CSS extrem de personalizabile și adaptabile.
  • Utilizarea CSS pentru a face orice: 50+ exemple creative și tutoriale - o colecție de peste 50 de tutoriale pentru crearea de machete CSS unice.
  • Dezvoltare rapidă și ușoară CSS cu Firebug - Un ghid pentru utilizarea Firebug pentru a îmbunătăți design-urile web.
  • 10 exemple de tipografie CSS frumoasă și cum au făcut-o ... - oferă exemple excelente de tipografie CSS, împreună cu tutoriale despre cum să creați fiecare.
  • 16 Tutoriale și tehnici CSS Grafice și diagrame utilizabile - O colecție de tutoriale pentru crearea de diagrame și grafice bazate pe CSS pentru vizualizarea datelor.
  • Citate mai bune de tragere: nu repetați marcarea - un ghid pentru crearea cotațiilor de tragere care nu includ nicio marcare repetată inutilă.
  • CSS Gradient Text Effect - Un tutorial pentru crearea gradienților de text pentru titlurile dvs.
  • 43 Tutoriale PSD către XHTML, CSS Crearea machetei web și navigare - O listă uriașă de tutoriale pentru transformarea proiectelor Photoshop în fișiere CSS / XHTML valide.
  • Hărți cu imagini CSS - Un tutorial pentru crearea hărților de imagine cu CSS și XHTML.
  • Grilele fluide - Un ghid pentru crearea machetei pe bază de grile fluide.
  • Cum depanați CSS - Un tutorial de tehnici de depanare pentru CSS.
  • 10 Tehnici CSS dificile, dar minunate - Un ghid pentru unele tehnici CSS avansate care merită învățate.
  • 50+ Scripturi de navigație bazate pe file Nice Clean CSS - O colecție excelentă de navigare cu file utilizând CSS.
  • 30 Tehnici și exemple CSS excepționale - O colecție excelentă de efecte CSS cu adevărat interesante, inclusiv o galerie de imagini hoverbox, un subsol lipicios și un efect de acordeon doar CSS, printre altele.
  • 101 CSS Techniques of All Time Partea 1 - Partea 2 - O altă colecție uriașă de tehnici CSS grozave, cu tutoriale pentru fiecare.
  • Dead Center - Un scurt tutorial despre cum să poziționați ceva în centrul unei ferestre a browserului (atât pe verticală cât și pe orizontală).
  • Aspecte lichide modul simplu - Un tutorial complet despre crearea de machete CSS lichide.

Șabloane și cadre

  • Grila CSS de 1 Kb - Este probabil cel mai simplu și mai compact sistem de grilă de acolo, dar include un instrument pentru a personaliza grila înainte de descărcare.
  • CSS Zen Garden - CSS Zen Garden este un cadru HTML și CSS realizat pentru a expune varietatea de modele care pot fi create folosind CSS. Pe lângă cadru, există tone de șabloane și teme disponibile.
  • Aspecte perfecte lichide CSS cu mai multe coloane - O colecție de machete lichide compatibile cu iPhone.
  • 960 Grid System - Un sistem grilă CSS bazat pe un aspect de bază de 960 pixeli.
  • Șabloane CSS gratuite - Un site care oferă peste 200 de șabloane CSS lansate sub licența Creative Commons Attribution 2.5.
  • Șabloane CSS frumoase și gratuite - O duzină de șabloane pentru a vă începe cu proiectările bazate pe CSS, incluzând o casetă centrată dinamică, patru coloane dinamice și modele centrate în total casetă fixă.
  • Little Boxes - O colecție de fișiere CSS pentru o varietate de machete.
  • Prototiparea cu Grid 960 CSS Framework - Un ghid pentru crearea de machete de site-uri web folosind Grid 960.
  • Prototiparea unui model de pagină de pornire în stil de revistă cu Blueprint CSS Framework - Un ghid foarte valoros pentru crearea de machete de tip revista și grilă cu Blueprint.

Galerii și vitrine

  • CSS Stars - o galerie care oferă câteva zeci de modele bazate pe CSS pentru perusul dvs.
  • Bazat pe CSS - o enormă galerie CSS cu mii de design-uri.
  • CSS Drive - o galerie CSS clasificată.
  • CSS Mania - o galerie CSS de aproximativ cinci ani.
  • CSSelite.com - O galerie categorizată de modele CSS.
  • CSS Creme - O galerie uriașă de site-uri care pot fi selectate după culoare, categorie sau designer care include, de asemenea, tutoriale și știri.
  • csswebsite - O galerie care vă permite să filtrați după categorie, dată sau culoare.
  • 40 Beautiful Dark CSS Web Designs - Un post de galerie care oferă câteva design-uri grozave întunecate, construite cu CSS.
  • Best of CSS Design 2008 - O altă postare a galeriei care prezintă cele mai bune modele CSS din 2008.
  • CSS Beauty Gallery - O galerie CSS cu intrări listate cronologic. Include modele din 2004 până în prezent.

Unelte

  • Firebug - Un plugin Firefox care vă permite să vizualizați și să editați CSS și alte coduri chiar în Firefox.
  • Aardvark - Extensie Firefox care vă permite să vedeți fiecare element HTML și clasă sau id.
  • CSSViewer 1.0.3 - O extensie Firefox care vă permite să vizualizați proprietățile CSS pe orice pagină web.
  • GridFox - Extensie Firefox pentru asistență în proiectarea layout-ului grilei prin suprapunerea unei grile pe orice site web.
  • CodeBurner - Un plugin pentru Firefox sau Firebug care face ca materialul de referință HTML și CSS să fie disponibil în browserul dvs.
  • IzzyMenu - Un creator de meniuri CSS gratuit care acceptă crearea de sub-meniuri derulante DHTML.
  • Spanky Corners - Un generator de cutie rotunjită de colț.
  • CleanCSS - Un formatator și optimizator CSS.
  • CSS Browser Selector - Un instrument util pentru abilitarea selectoarelor CSS bazate pe browserul vizitatorului.
  • Compresor CSS - un compresor de fișiere CSS.
  • CSS Layout Generator - Un generator CSS online simplu, care creează un cadru de bază.
  • CSSTidy - Un analizor CSS și optimizator open-source, descărcător.
  • CSS Drive CSS Compressor - Un instrument de compresie CSS care are un mod de bază și un mod avansat, în funcție de nevoile dvs.
  • Tabifier - Adăugă liniuțe la fișierele dvs. de cod.
  • CSSFly - Un editor CSS și XHTML bazat pe browser care funcționează în timp real.
  • List-O-Matic - Un instrument pentru crearea meniurilor de navigare bazate pe liste cu CSS.
  • Markup Maker - Creează un document cadru XHTML / HTML valid cu ID-urile de pagină pe care le introduceți.
  • CSSMate - Un editor CSS online.
  • CSS Type Set - Un generator de tipografie CSS.
  • Construiți 0,5 - Un instrument vizual pentru crearea de machete bazate pe cadrul Blueprint.
  • PXtoEM.com - Un instrument de convertor de dimensiuni pixel în EM.
  • CSS Editors Review - O colecție de recenzii ale unora dintre cei mai populari editori CSS.
  • YAML Builder - Un instrument vizual pentru crearea machetei YAML.
  • Gridinator - Un constructor de machete CSS.
  • Lista instrumentelor CSS - O listă uriașă de instrumente CSS pentru orice, de la fonturi la optimizatoare.
  • 50 Instrumente CSS extrem de utile și puternice - O listă a unor instrumente CSS grozave, împreună cu un pic despre fiecare.

Bloguri specifice și CSS-uri

  • CSS-Tricks - Un blog dedicat CSS de la Chris Coyier.
  • CSS final - Deși nu a fost actualizat în câteva luni, acest blog oferă încă câteva postări arhivate minunate.
  • CSS Help Pile - O colecție tot mai mare de tutoriale și resurse CSS.

O zi bună!

Bradley frumos,
Content Manager la ClickHelp.com - cel mai bun instrument de documentare online pentru furnizorii SaaS