Un'introduzione alle classi in html e css

Inutile dire che lo sviluppo web è enorme. Gran parte di ciò è dovuto al fatto che quasi tutti sono sul Web. Tuttavia, c'è una carenza di sviluppatori nel settore ed è per questo che il curriculum di sviluppo web è così facilmente disponibile e gratuito. Con questo in mente, ti mostreremo un po 'di cosa trattano HTML e CSS. Più specificamente, ti mostreremo come funzionano le "classi".

Non ti stiamo iniziando dall'inizio, dato che ci sono già tantissimi programmi gratuiti. Invece, ti mostreremo specificamente come funzionano le lezioni, in quanto è un componente necessario per lo stile del tuo sito web. Abbiamo anche pensato che valesse la pena di essere trattato prima di pubblicare il nostro sguardo sull'API Bootstrap di Twitter, poiché anche le classi sono un componente richiesto.

Come disclaimer, se sei completamente nuovo in HTML e CSS, questo probabilmente non è un buon inizio per te. Se hai familiarità con esso, non dovrebbe essere troppo difficile da prendere, però. Ma, se stai cercando un tutorial completo per principianti, ci sono molte grandi opzioni online. Per citarne alcuni, c'è FreeCodeCamp, The Odin Project, CodeAcademy, Code School, Team Treehouse, Udacity e molti altri ancora. Se scegli di iniziare a scavare in uno di questi, ti consiglio vivamente di seguirne uno (come Free Code Camp) e finirlo prima di iniziarne un altro, poiché molti dei contenuti "di base" possono essere piuttosto ripetitivi.

Detto questo, andiamo a scavare in cosa sono le classi.

Come funzionano le lezioni

Le lezioni sono estremamente utili. Prendono la ripetitività dallo styling HTML. Senza lezioni, dovresti dare uno stile a ciascun elemento del tuo markup individualmente. E se avessi due degli stessi elementi, ma volessi dare uno stile diverso a ciascuno di essi? Sarebbe un casino completo. Ecco perché abbiamo lezioni. Le classi aggiungono una struttura organizzativa al tuo HTML, permettendoti di mantenere il codice relativamente pulito. Non solo, ma le classi possono essere utilizzate più di una volta. In altre parole, non dovrai mai creare le stesse regole di stile due volte.

Ecco come appaiono le lezioni all'interno della nostra etichetta:

Come puoi vedere, sotto il nostro tag body, ne abbiamo due

elementi con classi diverse. Il primo

il tag ha la classe "head1" mentre il secondo tag ha la classe "head2". Quindi, nel nostro CSS, invece di applicare lo stile solo al

elemento, possiamo applicare lo stile a quelle singole classi. Perché dovremmo farlo?

Il motivo principale è che non vuoi tutto il tuo

elementi per avere lo stesso stile. Creerebbe un sacco di mal di testa quando si crea un sito Web e, inoltre, i siti Web non sarebbero molto belli. Le classi ci consentono di applicare lo stile solo a un'istanza del tag, non a tutte

tag nel documento. Quindi, come si scrive una classe in HTML? Come questo:

Alcuni contenuti

È possibile aggiungere la proprietà "class" a quasi tutti gli elementi HTML.

Grande! Quindi, abbiamo delle lezioni, ma nel loro stato attuale, in realtà non stanno facendo nulla. Questo perché non abbiamo ancora aggiunto regole di stile alla classe. Per fare ciò, dovremo creare un documento .css separato. Lo chiamerò semplicemente main.css. In quel documento, modificheremmo una classe come questa:

Per selezionare una classe che vogliamo modellare, facciamo questo:

.head1 {colore: rosso; text-align: center; }

All'interno delle parentesi graffe si trovano tutte le "regole" (o stile) che applichiamo a quella classe. Esistono molte regole diverse che puoi inserire in quella classe. Nel mio caso, ho cambiato il colore del testo in rosso usando la regola "color" e ho centrato il testo usando la regola "text-align". Puoi trovare un elenco completo delle regole CSS e la loro documentazione dalla rete di sviluppatori di Mozilla.

Ora, il nostro stile non è ancora applicato alle classi nel nostro documento HTML, ed è perché non abbiamo ancora collegato i due file insieme. Torna al tuo file HTML e in tag, ti consigliamo di collegare il tuo file CSS in questo modo:

Il tuo documento HTML dovrebbe apparire così:

E il nostro progetto di test dovrebbe apparire così sul Web:

Per un video più dettagliato che illustra questi passaggi, vedere di seguito.

video

Conclusione

E questo è tutto ciò che c'è da sapere sulle lezioni! Sono davvero semplici da capire. Ovviamente su siti Web grandi e popolari che visiti, le regole all'interno delle classi sono molto più complicate di quelle che abbiamo trattato, ma nella loro forma più semplice, è così che funzionano.

Se avete domande o avete avuto problemi a seguire, fatecelo sapere nei commenti qui sotto o nei forum PCMech! Oppure, se sei interessato a una guida completa per principianti HTML / CSS su PCMech, assicurati di comunicarcelo anche tu!