Tutorial di base CSS

Conoscenze di base necessarie

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

  • HTML
  • XHTML

Se desideri imparare questi progetti per primi, vai al Pagina iniziale Visita i tutorial correlati.

Panoramica CSS
  • CSS sta per Style Sheets in cascata (CAscading STyle SSheets)
  • Definizioni di stileCome visualizzare Elementi HTML
  • Gli stili sono solitamente archiviati inTabelle di stileIn
  • Aggiungere gli stili a HTML 4.0 era perRisolvere il problema della separazione del contenuto dalla presentazione
  • Tabella di stile esternaPuò migliorare notevolmente l'efficienza del lavoro
  • Gli stili esterni sono solitamente archiviati in File CSSIn
  • Più definizioni di stile possonoCascadingPer un

Gli stili risolvono un problema comune.

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

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

Per risolvere questo problema, l'World Wide Web Consortium (W3C), questa organizzazione di standardizzazione non profit, ha assunto la missione di standardizzare HTML e ha creato STYLES (stili) oltre HTML 4.0.

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

Le tabelle di stile migliorano notevolmente l'efficienza del lavoro.

La tabella di stile definisce come visualizzare gli elementi HTML, come i tag di carattere e le proprietà di colore nei modelli di stile HTML 3.2, che sono solitamente conservati in file .css esterni. Modificando semplicemente un documento CSS, gli stili esterni ti permettono di cambiare l'aspetto della layout di tutte le pagine del sito in modo simultaneo.

Poiché CSS permette di controllare contemporaneamente lo stile e la layout di più pagine, può essere considerato una rivoluzione nel campo del design web. Come sviluppatore web, puoi definire uno stile per ogni elemento HTML e applicarlo a qualsiasi numero di pagine desiderato. Per effettuare trasformazioni globali, è sufficiente modificare lo stile e tutti gli elementi del sito verranno automaticamente aggiornati.

Stili multipli si sovrappongono a

Le tabelle di stile permettono di definire le informazioni di stile in vari modi. Gli stili possono essere definiti in un singolo elemento HTML, nel tag di testa della pagina HTML, o in un file CSS esterno. È anche possibile riferirsi a più tabelle di stile esterne all'interno di un singolo documento HTML.

Ordine di sovrapposizione

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

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

  1. Impostazioni predefinite del browser
  2. Tabella di stile esterna
  3. Tabella di stile interna (posizionata all'interno del tag <head>)
  4. Stile in linea (interno all'elemento HTML)

Pertanto, lo stile in linea (interno all'elemento HTML) ha la priorità più alta, il che significa che precede le seguenti dichiarazioni di stile: le dichiarazioni di stile nel tag <head>, le dichiarazioni di stile nelle tabelle di stile esterne, o le dichiarazioni di stile nel browser (valore predefinito).