Cosa sono i fogli di stile a cascata e a cosa servono i CSS?

Cosa sono i fogli di stile a cascata e a cosa servono i CSS?

I CSS appartengono a una tripletta di tecnologie web di base insieme a HTML e JavaScript. Con un'attenta pianificazione, CSS contribuisce a una separazione delle preoccupazioni. Le risorse indipendenti controllano la struttura di un contenuto, la sua presentazione e il suo comportamento.





I fogli di stile svolgono un ruolo importante nell'accessibilità, nella scalabilità e persino nelle prestazioni web. In qualità di autore di contenuti o web designer, ti danno il controllo su come i dispositivi visualizzano i contenuti. Dal layout alla dimensione e al colore del carattere, i CSS trasformano i contenuti in pagine dall'aspetto gradevole.



Che aspetto ha il CSS?

I CSS sono un grande linguaggio: ci sono molte cose diverse da modellare! Ma la sua sintassi è semplice, con solo poche regole da imparare.





Gli elementi HTML hanno varie proprietà che i CSS possono definire. Il colore La proprietà imposta il colore di primo piano (ad esempio il testo). La dimensione del carattere dipende da dimensione del font proprietà.

Ogni proprietà può essere impostata su un valore supportato. L'assegnazione di un valore a una proprietà è una 'dichiarazione'. In genere, hanno questo aspetto:



property: value

Per esempio:

quanti soldi puoi guadagnare con il mining di bitcoin
color: red

I valori per proprietà diverse possono apparire molto diversi, anche i valori per la stessa proprietà. Ad esempio, ecco altri due modi per scrivere la dichiarazione precedente:



color: #ff0000
color: rgb(255, 0, 0)

Come si fondono HTML e fogli di stile

Puoi combinare HTML e CSS in diversi modi, ognuno con i suoi vantaggi.

Stili di scrittura in linea

Il metodo più semplice consiste nell'allegare dichiarazioni di stile direttamente a un elemento nel file HTML. Puoi farlo usando il stile attributo in questo modo:




Most of this text is red …


… but this isn’t!


Sebbene gli elementi di stile in linea come questo possano essere convenienti, presentano diversi inconvenienti. Per cominciare, complica l'HTML, rendendo più difficile la lettura a colpo d'occhio. È anche scomodo da mantenere: immagina un lungo documento in cui vogliamo impostare il colore di ogni paragrafo. Questo è CSS, ma non è 'Fogli di stile'.

Incorporare gli stili nella testa

Puoi iniziare a vedere come appare un foglio di stile con il secondo meccanismo, incorporamento . Usando questo approccio, raccogliamo tutte le dichiarazioni di stile insieme all'interno di a stile elemento nel testa del nostro documento. Sarà simile a questo:





/* style instructions go here */



...

Tuttavia, le nostre istruzioni di stile richiedono un po' più di dettagli rispetto a prima. Dato che le abbiamo spostate in testa, ogni regola non è più associata a un elemento. Potremmo aver dichiarato colore rosso , ma cosa dovrebbe avere quel colore?

È qui che entrano in gioco i selettori CSS. Ci consentono di indirizzare parti specifiche della pagina e definire il loro stile in un unico posto, utilizzando questa sintassi:

come rimuovere la punta del jack per cuffie rotta?
selector {
declaration1;
declaration2;
/* etc. */
}

Ad esempio, per applicare uno stile blu al testo dei paragrafi, possiamo specificare quanto segue:

p {
color: blue;
}

In questo esempio, il selettore è semplicemente P , che corrisponde a tutti gli elementi di paragrafo nel nostro documento. Colorerà tutto il testo in blu, purché sia ​​dentro

Collegamento di un foglio di stile esterno

Il metodo finale per coprire è il collegamento. Questo è di gran lunga l'approccio più utile e quello che dovresti optare per la maggior parte del tempo. Invece di incorporare regole CSS nel stile elemento direttamente nel documento, puoi spostarli in un file separato.


Incolla questo codice all'interno di tag del tuo file HTML per collegare il tuo foglio di stile esterno.

Il potere dei CSS

Con il metodo collegato, stiamo sfruttando una potenza fondamentale dei CSS: la separazione delle preoccupazioni. Tutte le informazioni semantiche, il significato del contenuto, sono contenute nel documento HTML. Lo stile, come appare, è in un file separato, il foglio di stile.

Ecco alcuni vantaggi di questa separazione:

  • Puoi cambiare un foglio di stile semplicemente cambiando il riferimento al file. Questo può accadere anche in modo dinamico. In un solo passaggio, puoi modificare l'intero aspetto di una pagina.
  • Molte pagine possono condividere gli stessi fogli di stile come richiesto. Modificando un singolo file, puoi aggiornare l'aspetto di un intero sito web.
  • Dividere una pagina in 'contenuto' e 'stile' ha vantaggi tecnici. I proxy e i browser possono memorizzare nella cache singoli file separatamente. Ciò significa che un sito può inviare le sue informazioni di stile una volta, invece di includerle in ogni singola pagina.
  • Quando collaborano, diversi team possono lavorare secondo i propri punti di forza, creando e modificando file separati senza influenzarsi a vicenda.

Spiegando la cascata

Hai imparato molto sugli stili e sui fogli di stile, ma per quanto riguarda la parte a cascata dei CSS?

La cascata è ciò che decide quali stili utilizzare quando sono presenti più fogli di stile. Hai visto come un autore può specificare gli stili per il proprio contenuto. Ma un'altra caratteristica dei CSS è che dà voce anche ai lettori e ai produttori di browser.

Potresti già esserti chiesto degli stili predefiniti. Ad esempio, come fa an H1 elemento appare grande e audace, anche senza fogli di stile dell'autore? Questo grazie a una serie di regole speciali che compongono il foglio di stile dell'agente utente. Queste regole vengono inizialmente applicate dal tuo browser web a ogni pagina che visiti.

La cascata specifica che un foglio di stile dell'autore si applica dopo gli stili dell'agente utente. Se il nostro browser dice che le intestazioni sono in grassetto ma l'autore della pagina dichiara che le intestazioni in questa pagina sono leggere, allora finiranno per essere leggere.

C'è un'altra fonte di fogli di stile che passa un po' di controllo al lettore. Qualsiasi utente web può, in teoria, mantenere un foglio di stile utente con regole personalizzate. Questi si trovano nel mezzo: le regole utente sovrascriveranno le impostazioni predefinite del browser, ma saranno esse stesse sovrascritte dagli stili dell'autore. Purtroppo, il supporto per i fogli di stile utente non è mai stato diffuso.

Targeting di diversi media

Puoi usare i fogli di stile in diversi contesti, oltre lo schermo. Il metà attributo del collegamento L'elemento definisce a quali tipi di media si applica il foglio di stile. Ad esempio, puoi definire a foglio di stile per la stampa utilizzando markup come il seguente:

È possibile raccogliere stili comuni in un foglio di stile globale e stili specifici del supporto in file separati. Esistono persino tipi di media per soddisfare le presentazioni sonore o braille dei tuoi contenuti. I CSS sono uno strumento fondamentale per migliorare l'accessibilità.

Imparentato: Come navigare sul Web se sei non vedente o ipovedente

come vedere i miei iscritti su youtube

Siti come Wikipedia usano i CSS per controllare il loro stile di stampa, nascondere elementi indesiderati e semplificare il layout.

CSS rende l'HTML un bell'aspetto

I fogli di stile a cascata coprono molto: la cascata, l'ereditarietà, i selettori, le sorgenti, i media, ecc. Ma la loro potenza abilita il web moderno. Questo è un supporto che fornisce funzionalità di riutilizzabilità, flessibilità e accessibilità integrate.

Per vedere tutta la potenza dei CSS e quanto ha da offrire, dai un'occhiata al nostro cheat sheet che copre tutte le proprietà essenziali di CSS3.

Condividere Condividere Tweet E-mail Il cheat sheet delle proprietà essenziali di CSS3

Padroneggia la sintassi CSS essenziale con il nostro cheat sheet delle proprietà CSS3.

Leggi Avanti Argomenti correlati
  • Programmazione
  • Sviluppo web
  • CSS
Circa l'autore Bobby Jack(58 articoli pubblicati)

Bobby è un appassionato di tecnologia che ha lavorato come sviluppatore software per quasi due decenni. È appassionato di giochi, lavora come editor di recensioni presso Switch Player Magazine ed è immerso in tutti gli aspetti dell'editoria online e dello sviluppo web.

Altro da Bobby Jack

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti