Che cos'è i fogli di stile HTML?
Il foglio di stile CSS a cascata è un foglio con un insieme di regole e proprietà che indica al browser come eseguire il rendering HTML utilizzando tutti gli stili specificati.
CSS è il modo in cui modelliamo qualsiasi pagina web. Il CSS ha tutte le proprietà come sfondo, colori, caratteri, spaziatura, bordi, ecc. Che possiamo definire per ogni elemento delle pagine.
I fogli di stile HTML vengono anche utilizzati per impostare il layout della pagina, ad esempio dove devono essere posizionati l'intestazione, i piè di pagina o qualsiasi altro elemento sulla pagina. Il CSS è sempre parlato insieme all'HTML poiché le pagine senza stile sono molto pallide senza evidenziazione di titoli ecc. E le stesse dimensioni del carattere su tutta la pagina non danno una buona occhiata agli utenti.
Come utilizzare i fogli di stile HTML?
In passato, stili, script, HTML tutto era scritto dappertutto nella stessa pagina. Ciò ha reso le pagine estremamente lunghe ed estremamente difficili da leggere e modificare. Poi è arrivato il modo di separare HTML, stili e Javascript.
Modi per includere fogli di stile HTML in una pagina Web:
Esistono 3 modi in cui possiamo includere gli stili:
-
Styling in linea
Questo è un modo di scrivere stili per ogni elemento all'interno dello stesso HTML all'interno di un attributo chiamato style.
Questo stile di stile non è affatto raccomandato poiché l'HTML sembra ingombra e non possiamo seguire l'approccio "Scrivi una volta, usa in molti posti"
Eg: Hello World!
-
Styling interno
Ciò comporta l'inserimento di stili in un tag di stile e il posizionamento all'interno di una pagina Web sopra HTML. Questo stile di stile è ancora meglio dello stile in linea poiché possiamo avere stili comuni raggruppati nel caso in cui debba essere utilizzato per più elementi contemporaneamente.
In fase di sviluppo, è più semplice modificare il file HTML e non è necessario aprire ogni volta il file CSS corrispondente e modificarlo ogni volta.
Eg:
container-block(
font-size: 10px;
margin-top: 10px;
)
Hello World!
-
Styling esterno
Questo è il modo più comune e migliore di avere stili per una pagina web. Questo è simile allo stile interno ma la differenza è che gli stili sono scritti in un file separato con estensione .css e il riferimento ad esso è inserito nel tag head della pagina web.
La sintassi per il collegamento del file CSS sulla pagina Web è:
Gli stili devono essere inclusi nel tag head che si trova sopra il tag body (ovvero il contenuto effettivo) dell'HTML
Qual è la priorità tra stile in linea, interno, esterno?
Gli stili in linea hanno più priorità rispetto a quelli interni e quindi l'ultima priorità è per lo stile esterno.
Inline> interno> esterno
Best practice durante l'utilizzo dei CSS:
- I CSS possono essere separati in un numero di file anziché in uno solo.
- I file CSS separati possono essere inclusi uno alla volta in un tag head usando i tag link.
- Oppure un file CSS può avere più istruzioni di importazione per importare il resto dei file CSS. Ciò separerà logicamente il CSS ma alla fine tutti gli stili verranno resi dallo stesso file.
Utilizzo: @import './process.css';
- Gli stili possono essere definiti per qualsiasi elemento della pagina Web con selettori come tag HTML stesso, nomi di classe, ID, nomi di attributi.
- Sono disponibili alcuni pseudo-selettori come:
- prima
- dopo
- nth-child
- Primogenito
- ultimo bambino
- librarsi
- visitato
Questi sono fondamentalmente stati degli elementi selezionati e non proprio gli elementi esatti.
- Quando i file CSS moltiplicati sono inclusi nella pagina, l'ultimo ha la massima priorità e sovrascrive gli stili esistenti dei file precedenti con lo stesso selettore.
- I fogli di stile devono essere utilizzati prima dello stesso HTML in modo che gli stili vengano applicati durante il caricamento della pagina. Se incluso alla fine, l'HTML si carica dapprima e poi lentamente vengono applicati gli stili, il che crea una brutta esperienza per l'utente.
Varie caratteristiche dei fogli di stile CSS a cascata:
- CSS fornisce animazioni : in precedenza javascript veniva utilizzato solo per le animazioni. Ma i CSS più recenti, ovvero CSS3, forniscono animazioni usando le proprietà stesse.
- Prefissi fornitore: prima che i browser rilascino la versione standard / il nome della proprietà per qualsiasi nuova funzionalità, i browser ci forniscono alcuni prefissi fornitore per qualche tempo per un certo periodo di tempo come esperimento. Gli sviluppatori devono attendere che il browser rilasci le sue versioni standard e, nel frattempo, le funzioni sperimentali possono essere utilizzate con i prefissi dei fornitori.
- Trasformazioni CSS: la transizione viene utilizzata per passare progressivamente a un valore da un altro di una proprietà entro una determinata durata.
Eg: -webkit-transition: width 2s, height 4s;
- Trasformazioni CSS: le trasformazioni in CSS consentono di tradurre, ruotare, ridimensionare e inclinare gli elementi.
Media query:
I dispositivi mobili, i desktop e gli iPad si comportano in modo diverso, tuttavia non possiamo dare uno stile alle pagine allo stesso modo. I precedenti standard Web hanno progettato in modo tale da disporre di CSS diversi per ogni tipo di dispositivo.
Con l'avanzamento degli standard web e il modo in cui il web è costruito, i browser sono sviluppati per avere un singolo CSS che può essere utilizzato per qualsiasi tipo di dispositivo. Per modificare gli stili dei dispositivi in base a larghezza e altezza, vengono utilizzate le query multimediali con le quali è possibile specificare la larghezza minima o massima del dispositivo e scrivere stili al suo interno.
Eg: @media screen and (max-width: 767px)(
container(
width: 60%;
padding: 20px;
)
)
Gli stili sono sicuramente un vantaggio per il web. E poiché lo sviluppo web è aumentato esponenzialmente negli ultimi tempi, CSS3 ha sicuramente guadagnato molta richiesta per rendere le pagine estremamente interattive e intuitive.
Articoli consigliati
Questa è stata una guida ai fogli di stile HTML. Qui discutiamo come usare i fogli di stile HTML, le varie funzioni e i modi per includere CSS in una pagina Web. Puoi anche consultare i seguenti articoli per saperne di più -
- Introduzione ai CSS
- Vantaggi del CSS nel Web Design
- Che cos'è il CSS? | Come usare?
- CSS è sensibile al maiuscolo / minuscolo?
- Vari stili di elenco HTML