Questo è il terzo articolo della serie Back to Basics in cui diamo uno sguardo ai concetti di inizio web dello sviluppo web. Se sei un designer con poca o nessuna conoscenza della programmazione web, questa serie è per te.
Nel nostro primo articolo, abbiamo esaminato cos'è l'HTML e nel nostro secondo articolo abbiamo delineato l'anatomia di base di un documento HTML. Oggi passeremo a un nuovo argomento e risponderemo a una domanda molto importante: che cos'è il CSS?
Cos'è il CSS?
Prima di rispondere direttamente a questa domanda, ripensiamo alla risposta alla domanda della prima parte: cos'è l'HTML? Come abbiamo appreso, dal punto di vista concettuale, si potrebbe dire che l'HTML comprende principalmente il contenuto e struttura di una pagina web. Abbiamo usato la metafora di uno scheletro e abbiamo discusso su come HTML sia il fondamento del World Wide Web come lo conosciamo.
Se c'è un paragrafo in una pagina web, è da HTML. Se c'è un titolo e una galleria di immagini, ancora una volta, questi elementi sono stati probabilmente inseriti come snippet di codice HTML (ovvie eccezioni per Flash e simili).
Con questo in mente, i fogli di stile CSS, più comunemente definiti CSS, diventano la soluzione stile quel contenuto. Le scelte di colore, la ripetizione di trame di sfondo, ombre, angoli arrotondati e persino il layout sono tutte aree del CSS. Come designer, questa è l'area in cui probabilmente prospererai e godrai di più.
Per ottenere un'immagine chiara di quanto sia importante il CSS per il web design, diamo un'occhiata a una pagina web con e senza un foglio di stile.
CSS prima e dopo
Considerando che il CSS è relegato allo stile semplice? una pagina web, si potrebbe essere tentati di pensare che si tratta semplicemente di ciliegina sulla torta proverbiale, il che significa che fornisce puramente piccoli aggiustamenti estetici. Tuttavia, l'impatto che il CSS ha su una pagina web è enorme.
Per illustrare questa idea, ecco uno screenshot della homepage di Design Shack con il foglio di stile principale disabilitato:
Prima dei CSS
Questa struttura di base potrebbe essere abbinata a un numero infinito di variazioni, ognuna delle quali appare così drammaticamente diversa che, nonostante abbia lo stesso esatto HTML, non le riconosceresti nemmeno come la stessa pagina!
Con l'inclusione di un singolo foglio di stile, la homepage di Design Shack si trasforma in questo:
Dopo i CSS
Posso avere una "sacra schifezza ?? Noterai che questi non sono semplici cambiamenti di colore. L'influenza che il CSS ha sull'esperienza utente è drammatica. L'intero layout è stato ricostruito in un formato a tre colonne, sono state applicate texture di sfondo e la tipografia è stata drasticamente migliorata.
Come funziona?
Quindi, come fanno i CSS a fare tutta quella magia? Che impresa folle di codifica dovrai imparare a dire al browser di fare una trasformazione così drammatica? La buona notizia è che i CSS sono molto più semplici di quanto si possa pensare. È roba abbastanza di basso livello rispetto al tipo di codifica hardcore che devi fare in lingue come PHP. È anche incredibilmente divertente una volta capito.
È tutto sui selettori
Nella prima parte di questa serie, abbiamo imparato come l'HTML è costruito principalmente su tag. Quasi tutti gli snippet di HTML sono costituiti da HTML elementi avvolto con una serie di tag che sono approssimativamente conformi a questa sintassi:
Con i CSS, la sintassi è completamente diversa e tuttavia strettamente correlata. Possiamo davvero approfondire e indirizzare ogni piccolo pezzo del nostro HTML e adattarlo a se stesso. Compiamo questo compito con Selettori CSS.
Un selettore è esattamente ciò che sembra: ti permette di selezionare qualcosa per la manipolazione, nel nostro caso una porzione particolare dell'HTML. Molti selettori CSS corrispondono direttamente al tag target. Quindi, per esempio, se volessimo creare uno stile per i contenuti tra i tag h1 e paragraph, useremmo quanto segue.
Come puoi vedere, il selettore per? H1? il tag è semplicemente? h1 ?. Il selettore è quindi seguito da un insieme di parentesi graffe, che conterrà l'intero set di codice relativo a quel selettore.
Il codice all'interno delle parentesi graffe è suddiviso in proprietà, che definiscono esattamente ciò che stai cambiando riguardo alla parte mirata dell'HTML. Proprio come in Photoshop, ogni parte del design ha diverse proprietà che possono essere modificate. Un determinato passaggio di testo ha un font, una dimensione del font, un colore, l'altezza della riga, ecc. Ognuno di questi deve essere impostato manualmente invece di basarsi semplicemente sui default, che sono incoerenti tra i browser.
Ecco uno sguardo a questa sintassi in azione. Abbiamo un selettore, seguito da parentesi graffe, che contengono una proprietà e il suo valore seguito da un punto e virgola (facoltativo sull'ultima proprietà in una lista).
Questo codice è altamente leggibile e semplicemente imposta la dimensione di tutto il testo h1 sulla pagina a 25 pixel. La terminologia qui è molto importante quindi ecco un altro aspetto per voi gente dalla mentalità visiva.
Utilizzo di più proprietà
L'esempio sopra è abbastanza semplificato. Come ho già detto, ciascun selettore ha in genere diverse proprietà impostate dallo sviluppatore. Diversi programmatori organizzano il loro codice in modi diversi, ma ecco come è un blocco di CSS tipicamente strutturato.
Qui impostiamo il carattere, la sua dimensione e il suo colore. La? Font-famiglia? utilizza i caratteri di backup nel caso in cui il font principale non sia presente sulla macchina dell'utente finale.
Più dei tag
Gli esempi di selettori sopra puntano a semplici tag HTML, ma i CSS sono dotati di selettori molto più complessi che possono indirizzare tutti i tipi di HTML.Puoi persino combinare o "catena"? vari selettori insieme.
Ad esempio, supponiamo che tu abbia due paragrafi all'interno di due div diverse nel tuo codice HTML:
Ora, se ho semplicemente preso di mira il tag di paragrafo nel mio CSS, entrambi questi paragrafi sarebbero interessati. Tuttavia, diciamo che voglio che abbiano un aspetto diverso, come potrei farlo?
Ecco un modo, vedi se riesci a capire cosa sta succedendo:
Come puoi vedere, impostiamo ciascun paragrafo su un colore diverso combinando selettori. Abbiamo preso di mira il? P? in entrambi i casi ma nel primo blocco ho preso di mira la? mainSection? id e nel secondo ho preso di mira la? secondarySection? classe. La differenza è che le classi sono riutilizzabili e possono essere applicate a più elementi nel codice HTML mentre gli ID sono unici. Quindi una volta che modelliamo la nostra? SecondarySection? classe, possiamo applicare facilmente questi stili ad altri div semplicemente schiacciando quella classe nell'HTML.
Nei CSS, vuoi sempre essere il più efficiente possibile, quindi fai tutto il possibile con il minor numero possibile di codice. Le lezioni sono un enorme risparmio di tempo e spazio.
Per ulteriori informazioni sui selettori CSS, consulta il nostro articolo Selettori CSS: Just the Tricky Bits.
Cascading?
Ora abbiamo una comprensione rudimentale dei fogli di stile? e come loro? stile? l'HTML, quindi dove si trova il? cascading? parte entra?
Questo torna ancora una volta alla nozione di efficienza. Una volta impostato uno stile generico, questo? Cascades down? ad altri elementi. Questo codice, ad esempio, trasforma ogni singolo tag di ancoraggio nella pagina in rosso:
La specificità conta molto, quindi se aggiungiamo un po 'tutto cambia:
Ora ogni link sulla pagina è colorato in rosso, tranne quelli con la? sezione? id, che sarà blu. Il selettore più specifico ha annullato il selettore generale.
Per una breve panoramica su come capire quali regole ignoreranno le altre, dai un'occhiata a Come iniziare con i CSS.
Come funziona il web design?
Ora che abbiamo analizzato ciò che sono HTML e CSS, dovresti essere in grado di vedere come lavorano insieme per creare pagine web finite. Esaminiamo un rapido esempio di un processo di progettazione che qualcuno potrebbe attraversare.
Photoshop Mockup
In primo luogo, qualcuno apre Crop Photoshop e progetta fondamentalmente il sito. Che aspetto avrà, quali colori verranno utilizzati, dove verranno posizionate le immagini, le varie colonne di contenuti: tutto.
Si noti che questo passaggio è completamente facoltativo. C'è una tendenza piuttosto importante verso questi giorni progettazione nel browser e saltare completamente Photoshop o Fireworks.
HTML
Successivamente, lo sviluppatore web, che potrebbe o non potrebbe essere la stessa persona, esaminerà il mockup e individuerà le parti che possono entrare nell'HTML come paragrafi, immagini, ecc. I gruppi visivi di base nel design sono specchiati in HTML con div o altri elementi strutturali.
CSS
Il contenuto in HTML puro sarà privo di tutti gli stili, quindi lo sviluppatore successivo esaminerà il layout, i caratteri, i colori, ecc. Che sono stati utilizzati nel mockup di Photoshop e traduce queste caratteristiche in CSS. Mentre lo sviluppatore codifica, lui / lei guarda l'anteprima dal vivo per vedere come il codice influisce sul contenuto finché tutto è perfetto.
Conclusione
Dopo aver letto i tre articoli di questa serie, dovresti avere una solida idea di cosa sono HTML e CSS e come lavorano insieme per creare pagine web.
Questo non è stato in alcun modo uno sguardo esauriente su nessuna di queste sintassi, né è stato pensato per farti veramente funzionare e funzionare con il tuo codice. Invece, colma quella lacuna concettualistica della conoscenza relativa a ciò che sono queste lingue e come vengono utilizzate. Che tu voglia o meno essere un sviluppatore webpossedere questa conoscenza ti renderà migliore web designer.