Share
Abbiamo una nuova e completa Guida all'apprendimento per aiutarti a imparare i CSS online, sia che tu stia appena iniziando con le nozioni di base o se desideri esplorare CSS più avanzati. Check-out Scopri CSS: la guida completa.
I CSS funzionano mano nella mano con HTML; HTML ordina la struttura della pagina, il CSS lo fa sembrare carino e aggiunge sottili livelli di interazione. Come web designer, dovresti davvero imparare a usare entrambe queste lingue. Anche se non fai da te la codifica, capire come funzionano ti aiuterà a progettare per il web.
C.S.S. sta per Fogli di stile; documenti che contengono regole di stile per l'applicazione all'HTML (o XML, insieme ad alcuni altri formati strutturali). Più regole di stile possono puntare a un elemento HTML, nel qual caso ci deve essere un modo per determinare quale regola dovrebbe avere effetto. Il termine a cascata descrive il processo di filtraggio verso il basso dalle regole generali, fino a quando non si incontra la regola più specifica. Questa regola viene quindi scelta per fare il suo lavoro ...
Attraverso i CSS, la presentazione può essere separata dalla struttura. Risolve la necessità di applicare le regole di stile tra HTML, come questo:
Presentazione all'interno della struttura. Ew. che mantiene i documenti più puliti e DRYer.
I CSS vengono letti dai browser web. Prendono il documento di markup, quindi applicano le regole di stile agli elementi all'interno di quel documento.
Non sempre interpretano le regole di stile le une delle altre e, mano a mano che i browser si sviluppano, anche il loro supporto alle nuove proposte di stile. Spesso sono gli stessi produttori di browser a sperimentare con le proprietà CSS, nella speranza che i loro suggerimenti vengano adottati dagli utenti.
In definitiva, spetta al World Wide Web Consortium (W3C) stabilire se le proprietà CSS sono standardizzate o meno.
La sintassi CSS comprende alcuni pezzi fondamentali; regole, selettori, dichiarazioni, proprietà e valori.
Questa regola CSS contiene tutti gli altri bit e bob che abbiamo appena menzionato.
I selettori puntano agli elementi all'interno del markup HTML, quindi le dichiarazioni all'interno delle parentesi graffe definiscono come dovrebbero essere disegnati quegli elementi. Ci possono essere più dichiarazioni all'interno di una singola regola; ogni dichiarazione comprendente una proprietà con un valore associato.
Esistono molti modi per selezionare elementi HTML, da quelli semplici selezionare i selettori:
Questo selezionerà tutte le immagini e applicherà zero padding a tutte loro. Poi abbiamo selettori di classe, che punta a tutti gli elementi con una classe specifica applicata a loro. Dai un'occhiata a questo markup, con il relativo CSS corrispondente:
Ecco un'ancora, di cui potrebbero esserci molti ... 
... allora questo selezionerà tutti gli ancore con una classe di "highlight" e li renderà arancione. Nota: contrariamente a quello che potresti sentire, non esiste una cosa come a Classe CSS. Ci sono Selettori CSS quale bersaglio Classi HTML. Puoi leggere maggiori informazioni su tantek.com e 456 Berea St.
Ci sono molti possibili selezionatori da imparare. Ci sono ancora più proprietà da affrontare (dai un'occhiata a questo elenco sul sito W3C). In seguito esamineremo i compiti durante i quali ti verrà chiesto di approfondirne ciascuno. Avere il maggior numero possibile a portata di mano ti farà diventare un programmatore CSS migliore!
Ora hai una comprensione fondamentale di ciò che è CSS, è il momento di immergersi correttamente. Ci sono un certo numero di corsi per principianti online che ti aiuteranno insieme; ecco solo una coppia che vale sicuramente la pena di verificare:
Quando Dave Shea ha lanciato il CSS Zen Garden nel maggio 2003, ha mirato a dimostrare che un singolo documento HTML può essere disegnato in modi infiniti utilizzando diversi fogli di stile. È stato un concetto brillante e un vero momento di luce per i progettisti di tutto il mondo.
Perché non fare qualcosa di simile te stesso? Prendi un semplice pezzo di markup (la lista di Unordered Navigation di Chris Coyier è il candidato perfetto):
Scopri quanti effetti diversi puoi ottenere, semplicemente modificando gli stili.
Dai un'occhiata a questo Webdesigntuts + Community Workshop in cui quasi 100 lettori hanno inviato i loro fogli di stile per una semplice lista non ordinata. Come vedrai dai risultati, un po 'di immaginazione può portare i CSS a lungo!
Se la gente conosce i CSS, ne twittano: è un fatto scientifico. Fai attenzione a ciò che le celebrità CSS stanno facendo e imparerai molto. Qui ci sono solo un paio di twitterers che dovresti seguire:
… e…
Perché non trovare i propri eroi in un sito di codifica sociale come GitHub o CodePen? La cosa migliore di reti come queste è il consiglio che tutti si danno l'un l'altro; se hai un problema con CSS, qualcuno lo avrà prima di te e sarà disposto a dare una mano.
CodePen Come accennato in precedenza, i browser non interpretano sempre i tuoi stili allo stesso modo. Questo è particolarmente vero se ti stai occupando di versioni precedenti di Internet Explorer, che sono molto indietro rispetto ai tempi in termini di adozione CSS. I browser moderni (come Google Chrome, Mozilla Firefox, Apple Safari, Opera e persino Internet Explorer 10) hanno una gestione più proattiva degli aggiornamenti, in modo da ridurre la probabilità che le versioni precedenti rimangano in giro a lungo.
Detto questo, ci sono differenze tra ognuno di questi browser indipendentemente da quanto siano aggiornati. Alcuni CSS saranno ben supportati in un browser, diversamente interpretati in un altro, quindi per questo motivo è un buon consiglio prestare attenzione ai browser.
Ecco alcune risorse utili che ti aiuteranno nel tuo cammino:
Sia che li leggi da copertina a copertina, o semplicemente li hai a portata di mano se hai bisogno di riferimenti rapidi, i migliori libri di settore non hanno eguali per l'apprendimento.
I CSS sono stati scritti molte volte, ma queste pubblicazioni sono la mia crema del raccolto:
Man mano che acquisisci sicurezza, il tuo vocabolario CSS crescerà. Impegnerai le proprietà CSS nella memoria e anche i vari modi di selezionare gli elementi. Ora è il momento di alzare davvero il livello e imparare seriamente alcuni selettori CSS.
Imparare i selettori CSS significa anche prendere confidenza con la specificità.
Stormtrooper Icon di Jory Raphael Quali selezionatori supereranno gli altri? Qual è la sintassi minima che dovrei usare nei miei selettori per essere efficiente nella mia codifica? L'unico posto in cui mando sempre le persone per apprendere le regole della specificità è il CSS: Andy Specificity Wars. Una visualizzazione ispirata di come i selezionatori piacciono quando si scontrano l'un l'altro (e le forze oscure).
I CSS sono una disciplina molto coinvolta. Una volta che hai le basi sotto la cintura, ci sono molte strade per ulteriori indagini. Per esempio:
CSS3 è costantemente in movimento. Vengono adottate nuove proprietà, altre vengono completamente eliminate dai browser, a volte anche la sintassi cambia. Affrontare i gradienti CSS, sarà un altro chiodo nella bara del tuo uso Photoshop; perché usare le immagini ritagliate quando puoi CSS?!
Fare riferimento a CSS3 Si prega di vedere tutta l'implementazione CSS3 corretta, con fallback consigliati per i browser non di supporto. Inoltre, dai uno sguardo a CSS3 Essentials su Tuts + Premium per dare una spinta alla tua conoscenza.
Il responsive Web Design consente di modificare i layout del tuo sito web in base al modo in cui si accede alla pagina. Le media query CSS3 aiutano questo processo, offrendo regole CSS diverse a seconda delle circostanze. Dai un'occhiata a Responsive Web Design: una guida visiva per iniziare.
Risulta che i CSS potrebbero essere migliori. Una volta che hai iniziato a usare i CSS per progetti del mondo reale, probabilmente trarrai le stesse conclusioni. Il mantenimento di file CSS di grandi dimensioni è difficile, la ripetizione è comune e perché non è possibile utilizzare una variabile per memorizzare il valore di un colore HEX anziché digitarlo più e più volte ?! I preprocessori CSS come Sass, LESS e Stylus risolvono tutti questi problemi e altro ancora. Senza nemmeno dover 'reimparare' un linguaggio simile (basta attenersi a CSS vanilla se lo si desidera) è possibile sfruttare la potenza dei preprocessori.
Dai un'occhiata a Get Into LESS, Mastering SASS e Sass vs. LESS vs. Stylus: Preprocess Shootout se sei interessato a saperne di più.
SMACSS (o Scalable and Modular Architecture for CSS) è un concetto sviluppato da Jonathan Snook, che mira a combattere la manutenibilità scomoda dei file CSS. Non insegna una nuova lingua, piuttosto suggerisce modi in cui puoi rendere più organizzato il tuo attuale CSS.
La scrittura di CSS modulari consente di prendere pezzi di codice di stile e inserirli in altri progetti, senza rovinare il resto dei tuoi stili. Gestione della specificità al suo meglio.
Non c'è dubbio che con competenze come HTML e CSS, sarai un web designer molto migliore. Segui i due processi di apprendimento che abbiamo delineato e sarai sulla buona strada.
Se si hanno dei consigli per l'apprendimento CSS, gridarli nei commenti!
Accentsconagua