Introduzione a CSS

Conoscenze di base necessarie

Prima di continuare, è necessario avere una conoscenza di base delle seguenti informazioni:

  • HTML
  • XHTML

Se desideri imparare questi progetti prima, puoi farlo nel Pagina iniziale Visita i tutorial correlati.

Panoramica del CSS

  • CSS si riferisce alle tabelle di stile in cascata (Cascading Style Sheets)
  • Definizioni di stileCome visualizzare Elementi HTML
  • Di solito, i stili sono conservati inTabelle di stileIn
  • Aggiungere lo stile all'HTML 4.0 era perRisolvere il problema della separazione del contenuto dalla presentazione
  • Stile esternoPuò migliorare significativamente l'efficienza
  • Le tabelle di stile esterne sono solitamente conservate in File CSSIn
  • Definizioni di stile multiple possonoCascadingPer un

Lo stile ha risolto un problema comune

I tag HTML erano progettati originariamente per definire il contenuto del documento. Utilizzando tag come <h1>, <p>, <table>, l'intenzione di HTML era di esprimere informazioni come “Questo è un titolo”, “Questo è un paragrafo”, “Questo è una tabella”. contemporaneamente, la layout del documento era completata dal browser senza l'uso di tag di formattazione.

Poiché i due browser principali (Netscape e Internet Explorer) continuano a aggiungere nuovi tag HTML e proprietà (come i tag di carattere e le proprietà di colore) alla specifica HTML, è diventato sempre più difficile creare siti in cui il contenuto del documento è chiaramente indipendente dal livello di presentazione del documento.

Per risolvere questo problema, la World Wide Web Consortium (W3C), questa associazione di standardizzazione non profit, ha assunto la missione di standardizzare HTML e ha creato lo stile (Style) oltre all'HTML 4.0.

Tutti i browser mainstream supportano le tabelle di stile in cascata.

Le tabelle di stile migliorano significativamente l'efficienza del lavoro

Le tabelle di stile definiscono come visualizzare gli elementi HTML, allo stesso modo in cui i tag di carattere e le proprietà di colore in HTML 3.2 hanno funzionato. Di solito, le tabelle di stile sono conservate in file .css esterni. Modificando semplicemente un documento CSS, le tabelle di stile esterne ti permettono di cambiare contemporaneamente la layout e l'aspetto di tutte le pagine del sito.

Grazie al controllo simultaneo dello stile e della layout di più pagine, il CSS può essere considerato una rivoluzione nel campo del design web. Come sviluppatore web, puoi definire uno stile per ogni elemento HTML e applicarlo a quante pagine desideri. Per aggiornamenti globali, è sufficiente modificare lo stile e tutti gli elementi del sito si aggiornano automaticamente.

Stili multipli vengono sovrapposti a uno

I fogli di stile permettono di definire le informazioni di stile in vari modi. Gli stili possono essere definiti in un singolo elemento HTML, all'interno dell'elemento di testa della pagina HTML, o in un file CSS esterno. È anche possibile referenziare più stylesheet esterni all'interno dello stesso documento HTML.

Ordine di sovrapposizione

Quando lo stesso elemento HTML viene definito da più stili, quale stile viene utilizzato?

In generale, tutti gli stili si sovrappongono a un nuovo tavolo virtuale degli stili secondo le seguenti regole, dove il numero 4 ha la priorità più alta.

  1. Impostazioni predefinite del browser
  2. Stile esterno
  3. Stile interno (posizionato all'interno dell'etichetta <head>)
  4. Stili inline (all'interno degli elementi HTML)

Di conseguenza, gli stili inline (all'interno degli elementi HTML) hanno la priorità più alta, il che significa che prevarranno sugli stili dichiarati nelle etichette <head>, negli stylesheet esterni o negli stili del browser (valore predefinito).