W3.CSS - Guida rapida

Cos'è W3.CSS?

W3.CSS è un Cascading Style Sheet (CSS) sviluppato da w3schools.com . Aiuta a creare siti Web più veloci, belli e reattivi. Si ispira a Google Material Design.

Alcune delle sue caratteristiche salienti sono le seguenti:

Progettazione reattiva integrata
CSS standard
Ispirato da Google Material Design
Gratuito da usare

Design reattivo

W3.CSS ha una progettazione reattiva incorporata in modo che il sito Web creato utilizzando W3.CSS si ridisegnerà in base alle dimensioni del dispositivo.
W3.CSS ha una griglia fluida mobile-first a 12 colonne che supporta classi reattive per schermi di dimensioni piccole, grandi e medie.
Le classi W3.CSS sono create in modo tale che il sito web possa adattarsi a qualsiasi dimensione dello schermo.
I siti Web creati utilizzando W3.CSS sono completamente compatibili con PC, tablet e dispositivi mobili.

CSS standard

W3.CSS utilizza solo CSS standard ed è molto facile da imparare.
Non c'è dipendenza da alcuna libreria JavaScript esterna come jQuery.

Material Design

W3.CSS si ispira a Google Material Design.
Supporta il design simile alla carta.
Supporta ombre e colori audaci.
I colori e le sfumature rimangono uniformi su varie piattaforme e dispositivi.

E, soprattutto, è assolutamente gratuito.

Come utilizzare W3.CSS?

Esistono due modi per utilizzare W3.CSS:

Local Installation - Puoi scaricare il file W3.CSS sul tuo computer locale e includerlo nel tuo codice HTML.
CDN Based Version - Puoi includere il file W3.CSS nel tuo codice HTML direttamente dalla Content Delivery Network (CDN).

Installazione locale

Vai a https://www.w3schools.com/w3css/w3css_downloads.asp per scaricare l'ultima versione disponibile.
Quindi, metti il file w3.css scaricato in una directory del tuo sito web, ad esempio / css.

Esempio

Ora puoi includere il file css nel tuo file HTML come segue:

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

Produrrà il seguente risultato:

Versione basata su CDN

Puoi includere il file W3.CSS nel tuo codice HTML direttamente dalla Content Delivery Network (CDN). W3Schools.com fornisce contenuti per la versione più recente.

Note - Stiamo utilizzando la versione CDN di W3Schools.com della libreria durante questo tutorial.

Esempio

Ora riscriviamo l'esempio sopra usando la libreria jQuery dal CDN di W3Schools.com.

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

Produrrà il seguente risultato:

HTML5 ha i seguenti elementi contenitore:

<div> - Fornisce un contenitore generico al contenuto HTML.
<header> - Rappresenta la sezione dell'intestazione.
<footer> - Rappresenta la sezione del piè di pagina.
<article> - Rappresenta articoli.
<section> - Fornisce un contenitore generico per vari tipi di sezioni.

W3.CSS fornisce w3-containercome classe primaria per modellare tutti i contenitori sopra menzionati. W3.CSS ha anche altre classi comew3-border, w3-red, w3-teal, w3-padding-32 per aggiungere ulteriori attributi di stile ai contenitori.

Esempio

L'esempio seguente mostra l'uso della classe w3-container per definire vari contenitori.

w3css_containers.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-red">
         <h1>HTML5 Tutorial</h1>
      </header>
      
      <div class = "w3-container w3-border w3-teal">
         <p>HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a mark up language.</p>
      </div>
      
      <article class = "w3-container">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </article>
      
      <section class = "w3-container">
         <p>HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.</p>
      </section>
      
      <footer class = "w3-container w3-red">
         <p>Copyright @TutorialsPoint.COM</p>
      </footer>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS fornisce anche contenitori con capacità nascondi / chiudi. Vedere il seguente esempio:

w3css_hide_container.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <div class = "w3-container w3-border w3-teal">
         <span class = "w3-closebtn" onclick = "this.parentElement.style.display = 'none'">X</span>
         <p>Close container by clicking on the X in the upper right corner.</p>
      </div>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS fornisce un eccellente supporto per l'evidenziazione della sintassi delle seguenti lingue:

HTML - Usa le classi w3-code htmlHigh sul contenitore con codice HTML.
CSS - Usa le classi w3-code cssHigh sul contenitore con codice CSS.
JS - Utilizza le classi w3-code jsHigh sul contenitore con codice CSS.

Devi includere il seguente script per avere un collegamento al file js per avere il supporto per l'evidenziazione della sintassi -

<script src = "https://www.w3schools.com/lib/w3codecolors.js"></script>

w3css_color_coding.htm

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>HTML Syntax Highlighted</h2>
      </header>
      <div class = "w3-code htmlHigh">
         <html>
            <head>
               <title>The W3.CSS Example</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="css/w3.css">
            </head>
            
            <body>
               <header class="w3-container w3-teal">
                  <h1>Hello World!</h1>
               </header>
            </body>
         </html>
      </div>
      
      <header class="w3-container w3-teal">
         <h2>CSS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         .bold {
            font-weight:bold;
         }
         #boldLabel {
            font-weight:bold;
         }
         table, th, td {
            font-family:sans;
         }
      </div>
      
      <header class = "w3-container w3-teal">
         <h2>JS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         <script type="text/javascript">
            function(message){
            }
            var message = "Hello, World!";
            alert(message);
         </script>
      </div>
      <script src="https://www.w3schools.com/lib/w3codecolors.js"></script>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS ha diverse classi speciali per visualizzare i contenitori come carte simili a carta con ombre.

Sr. No.	Nome e descrizione della classe
1	w3-card Definisce lo stile di un contenitore per qualsiasi contenuto HTML con bordo
2	w3-card-2 Modella un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 2px
3	w3-card-4 Modella un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 4px
4	w3-card-8 Modella un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 8px
5	w3-card-12 Modella un contenitore per qualsiasi contenuto HTML con un'ombra con bordi di 12 px

Esempio

w3css_cards.htm

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <style>
         div {
            width : 200px;	
            height : 200px;	
         } 
      </style>
   </head>
   
   <body>   
      <header class = "w3-container w3-teal">   
         <h2>Yellow Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-2 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-4 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-8 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>
      
      <header class = "w3-container w3-teal">   
         <h2>White Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card w3-white">
         <p><b>TODO:</b> Learn W3.CSS</p>
      </div>
      <div class = "w3-card-8 w3-white">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>
      
      <div class = "w3-card-4" style = "width:550px;">
         <header class = "w3-container w3-blue">
            <h1>HTML5 Tutorial</h1>
         </header>
         
         <div class = "w3-container" style = "width:550px;">
            <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
         </div>
      </div>
      <br/>
      
      <header class  =  "w3-container w3-teal">   
         <h2>Image Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card-12" style = "width:255px; height: 230px;">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-container">
            <p>Learn HTML5</p>
         </div>
      </div>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS ha diverse classi speciali per creare un design reattivo.

Sr. No.	Nome e descrizione della classe
1	w3-half Imposta il contenitore in modo che occupi 1/2 ^nd della finestra su dispositivi con schermo medio o grande. Se uno schermo è più piccolo di 601 pixel, ridimensiona il contenitore al 100%.
2	w3-third Imposta il contenitore di occupare 1/3 ^rd della finestra su dispositivi grande schermo medio o. Se uno schermo è più piccolo di 601 pixel, ridimensiona il contenitore al 100%.
3	w3-quarter Imposta il contenitore di occupare 1/4 ^th della finestra su dispositivi grande schermo medio o. Se uno schermo è più piccolo di 601 pixel, ridimensiona il contenitore al 100%.
4	w3-col Specifica una colonna in una griglia di 12 colonne.
5	w3-row Specifica un contenitore senza riempimento da utilizzare per le classi reattive. Questa classe è obbligatoria affinché le classi reattive siano completamente reattive.

Esempio

w3css_responsive_design.htm

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-half w3-red">
            <h2>w3-half</h2>
            <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-half">
            <h2>w3-half</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-third w3-red">
            <h2>w3-third</h2>
            <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-third">
            <h2>w3-third</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-quarter w3-red">
            <h2>w3-quarter</h2>
            <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-quarter">
            <h2>w3-quarter</h2>
         </div>
      </div>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS fornisce una griglia reattiva ai fluidi a 12 colonne.

Utilizza le classi di stile w3-row e w3-col per definire rispettivamente righe e colonne.

Sr. No.	Nome e descrizione della classe
1	w3-row Specifica un contenitore senza riempimento da utilizzare per le colonne reattive. Questa classe è obbligatoria affinché le classi reattive siano completamente reattive.
2	w3-col Specifica una colonna con sottoclassi

w3-col ha diverse sottoclassi pensate per diversi tipi di schermi.

Colonne per dispositivi con schermo piccolo

Di seguito è riportato un elenco di stili a livello di colonna per i dispositivi con schermo piccolo, in genere gli smartphone.

Sr. No.	Nome e descrizione della classe
1	s1 Definisce 1 di 12 colonne con larghezza come 08,33%.
2	s2 Definisce 2 colonne su 12 con larghezza pari al 16,66%.
3	s3 Definisce 3 colonne su 12 con larghezza pari al 25,00%.
4	s4 Definisce 4 colonne su 12 con larghezza pari al 33,33%.
5	s12 Definisce 12 di 12 colonne con larghezza pari al 100%. Classe predefinita per telefoni con schermo piccolo.

Colonne per dispositivi a schermo medio

Di seguito è riportato un elenco di stili a livello di colonna per dispositivi con schermo medio, in genere tablet.

Sr. No.	Nome e descrizione della classe
1	m1 Definisce 1 di 12 colonne con larghezza come 08,33%.
2	m2 Definisce 2 colonne su 12 con larghezza pari al 16,66%.
3	m3 Definisce 3 colonne su 12 con larghezza pari al 25,00%.
4	m4 Definisce 4 colonne su 12 con larghezza pari al 33,33%.
5	m12 Definisce 12 di 12 colonne con larghezza pari al 100%. Classe predefinita per telefoni con schermo medio.

Colonne per dispositivi con schermo di grandi dimensioni

Di seguito è riportato un elenco di stili a livello di colonna per dispositivi con schermo di grandi dimensioni, in genere laptop.

Sr. No.	Nome e descrizione della classe
1	\|1 Definisce 1 di 12 colonne con larghezza come 08,33%.
2	\|2 Definisce 2 colonne su 12 con larghezza pari al 16,66%.
3	\|3 Definisce 3 colonne su 12 con larghezza pari al 25,00%.
4	\|4 Definisce 4 colonne su 12 con larghezza pari al 33,33%.
5	\|12 Definisce 12 di 12 colonne con larghezza pari al 100%. Classe predefinita per dispositivi con schermo di grandi dimensioni.

Utilizzo

Ogni sottoclasse determina il numero di colonne della griglia da utilizzare in base al tipo di dispositivo. Considera il seguente frammento HTML.

<div class = "w3-row">
   <div class = "w3-col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

Le colonne predefinite da utilizzare sono 12 su un dispositivo se una sottoclasse non è menzionata nell'attributo class di un elemento HTML.

Esempio

w3css_grids.htm

<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <div class = "w3-row">
         <div class = "w3-col m1 w3-center w3-grey">1</div>
         <div class = "w3-col m1 w3-center">2</div>
         <div class = "w3-col m1 w3-center w3-grey">3</div>
         <div class = "w3-col m1 w3-center">4</div>
      
         <div class = "w3-col m1 w3-center w3-grey">5</div>
         <div class = "w3-col m1 w3-center">6</div>
         <div class = "w3-col m1 w3-center w3-grey">7</div>
         <div class = "w3-col m1 w3-center">8</div>
      
         <div class = "w3-col m1 w3-center w3-grey">9</div>
         <div class = "w3-col m1 w3-center">10</div>
         <div class = "w3-col m1 w3-center w3-grey">11</div>
         <div class = "w3-col m1 w3-center">12</div>
      </div>
      
      <div class = "w3-row">
         <div class = "w3-col w3-container m4 l3 w3-yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
         </div>
      
         <div class = "w3-col w3-container s4 m8 l9">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS ha un CSS molto bello e reattivo per la progettazione di moduli. Vengono utilizzati i seguenti CSS:

Sr. No.	Nome e descrizione della classe
1	w3-group Rappresenta un contenitore con bordi. Può essere utilizzato per raggruppare un'etichetta e un input.
2	w3-input Abbellisce un controllo di input.
3	w3-label Abbellisce un'etichetta.
4	w3-checkbox w3-checkmark Abbellisci una casella di controllo / pulsante di opzione.

Esempio

w3css_forms.htm

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <form class = "w3-container w3-card-8">
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">User Name</label>
         </div>
         
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">Email</label>
         </div>
         
         <div class = "w3-group">
            <textarea class = "w3-input" style = "width:90%" required></textarea>
            <label class = "w3-label">Comments</label>
         </div>
         <div class = "w3-row">
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "checkbox" checked = "checked">
                  <div class = "w3-checkmark"></div> Married
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox">
                  <div class = "w3-checkmark"></div> Single
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
               <br>
               <br>
            </div>
            
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "male" checked>
                  <div class = "w3-checkmark"></div> Male
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female">
                  <div class = "w3-checkmark"></div> Female
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
            </div>
         </div>
      </form>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS ha un CSS molto bello e reattivo per personalizzare l'aspetto di un pulsante. Vengono utilizzati i seguenti CSS:

Sr. No.	Nome e descrizione della classe
1	w3-btn Rappresenta un pulsante standard. Può essere utilizzato anche per definire un collegamento come pulsante.
2	w3-btn-floating Rappresenta un pulsante mobile che ha un design circolare.
3	w3-btn-floating-large Rappresenta un grande pulsante mobile.

Esempio

w3css_buttons.htm

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Standard Buttons</h2>
      <button class = "w3-btn">Click Me</button>
      <button class = "w3-btn w3-teal">Click Me</button>
      <button class = "w3-btn w3-disabled">I am disabled</button>
      
      <h2>Links as Buttons</h2>
      <a class = "w3-btn">Link</a>
      <a class = "w3-btn w3-teal">Link</a>
      <a class = "w3-btn w3-disabled">Disabled Link</a>
      
      <h2>Floating Buttons</h2>
      <a class = "w3-btn-floating">+</a>
      <a class = "w3-btn-floating w3-teal">+</a>
      <a class = "w3-btn-floating w3-disabled">+</a>
      
      <h2>Large Floating Buttons</h2>
      <a class = "w3-btn-floating-large">+</a>
      <a class = "w3-btn-floating-large w3-teal">+</a>
      <a class = "w3-btn-floating-large w3-disabled">+</a>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS supporta un diverso tipo di tooltip usando la classe w3-tooltip. Dai un'occhiata al seguente esempio. Qui abbiamo inserito un tooltiptext all'interno di un div e un'immagine e applicato w3- tooltip al div genitore.

<div class = "w3-tooltip">
   <div class = "w3-text w3-container w3-teal" style = "width:255px;">
      <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
   </div>
   <div>
      <img src = "html5-mini-logo.jpg" alt = "html5">
   </div>
</div>

Esempio

w3css_tooltips.htm

<html>
   <head>
      <title>The W3.CSS Tooltips</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Hover Demo</h2>
      <div class = "w3-tooltip">
         <div class = "w3-text w3-container w3-teal" style = "width:255px;">
            <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
         </div>
         
         <div>
            <img src = "html5-mini-logo.jpg" alt = "html5">
         </div>
      </div>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS può essere utilizzato per visualizzare una finestra di dialogo modale personalizzabile invece dell'avviso JavaScript standard.

Utilizza le classi di stile w3-row e w3-col per definire rispettivamente righe e colonne.

Sr. No.	Nome e descrizione della classe
1	modal-dialog Rappresenta la finestra principale principale per definire una finestra di dialogo.
2	w3-modal-dialog Rappresenta il contenitore del contenuto della finestra di dialogo.
3	w3-modal-content Rappresenta il contenuto della finestra di dialogo.

Esempio

w3css_modal_dialog.htm

<html>
   <head>
      <title>The W3.CSS Modal dialog</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Modal dialog Demo</h2>
      <a class = "w3-btn w3-teal" href = "#model-dialog">Open a Modal dialog</a>
      <div id = "model-dialog" class = "w3-modal">
         <div class = "w3-modal-dialog">
            <div class = "w3-modal-content w3-card-8">
               <header class = "w3-container w3-teal">
                  <a href = "#" class = "w3-closebtn">×</a>
                  <h2>TutorialsPoint</h2>
               </header>
               <div class = "w3-container">
                  <p>Hello World!</p>
               </div>
               <footer class = "w3-container w3-teal">
                  <p>@TutorialsPoint.COM</p>
               </footer>
            </div>
         </div>
      </div>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS può essere utilizzato per visualizzare diversi tipi di tabelle utilizzando vari stili su w3-table.

Sr. No.	Nome e descrizione della classe
1	w3-table Rappresenta una tabella di base senza alcun bordo.
2	w3-striped Visualizza una tabella spogliata.
3	w3-bordered Disegna una tabella con un bordo tra le righe.
4	w3-border Disegna una tabella con bordi.
5	w3-card Disegna un tavolo come una carta.
6	w3-responsive Disegna una tabella reattiva per mostrare una barra di scorrimento orizzontale, se lo schermo è troppo piccolo per visualizzare il contenuto.
7	w3-tiny Disegna una tabella con caratteri molto piccoli.
8	w3-small Disegna una tabella con caratteri piccoli.
9	w3-large Disegna una tabella con caratteri grandi.
10	w3-xlarge Disegna una tabella con caratteri extra large.
11	w3-xxlarge Disegna una tabella con caratteri molto extra large.
12	w3-xxxlarge Disegna una tabella con caratteri extra large molto alti.
13	w3-jumbo Disegna una tabella con caratteri grandi jumbo.

Esempio

w3css_tables.htm

<html>
   <head>
      <title>The W3.CSS Tables</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
      <table class = "w3-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Stripped Table with borders</h3>
      <table class = "w3-table w3-striped w3-bordered w3-border">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      <hr/>
      
      <h3>Table as Card</h3>
      <table class = "w3-table w3-card-4">
         <thead>
            <tr>
            <th>Student</th>
            <th>Class</th>
            <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Responsive table</h3>
      <div class = "w3-responsive">
         <table class = "w3-table w3-card-4">
            <thead>
               <tr>
                  <th>Student</th>
                  <th>Class</th>
                  <th>Data #1</th>
                  <th>Data #2</th>
                  <th>Data #3</th>
                  <th>Data #4</th>
                  <th>Data #5</th>
                  <th>Data #6</th>
                  <th>Data #7</th>
                  <th>Data #8</th>
                  <th>Data #9</th>
                  <th>Data #10</th>
               </tr>
            </thead>
            
            <tbody>
               <tr>
                  <td>Mahesh Parashar</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Rahul Sharma</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Mohan Sood</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <h3>Table with very small font</h3>
      <table class = "w3-table w3-tiny">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
               </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS può essere utilizzato per visualizzare diversi tipi di elenchi utilizzando vari stili su w3-ul.

Sr. No.	Nome e descrizione della classe
1	w3-ul Rappresenta un elenco di base senza alcun bordo.
2	w3-striped Visualizza un elenco spogliato.
3	w3-bordered Disegna un elenco con un bordo tra le righe.
4	w3-border Disegna un elenco con bordo.
5	w3-card Disegna una lista come una carta.
6	w3-tiny Disegna un elenco con caratteri molto piccoli.
7	w3-small Disegna un elenco con caratteri piccoli.
8	w3-large Disegna un elenco con caratteri grandi.
9	w3-xlarge Disegna un elenco con caratteri molto grandi.
10	w3-xxlarge Disegna un elenco con caratteri molto extra large.
11	w3-xxxlarge Disegna un elenco con caratteri extra large molto alti.
12	w3-jumbo Disegna un elenco con caratteri grandi jumbo.

Esempio

w3css_lists.htm

<html>
   <head>
      <title>The W3.CSS Lists</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>List Demo</h2>
      <hr/>
      <h3>Simple List</h3>
      <ul class = "w3-ul">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>Stripped List with borders</h3>
      <ul class = "w3-ul w3-striped w3-bordered w3-border">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List as Card</h3>
      <ul class = "w3-ul w3-card-4">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List with very small font</h3>
      <ul class = "w3-ul w3-tiny">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS fornisce opzioni per visualizzare le immagini in modi belli e interessanti usando w3-image come classe principale.

Sr. No.	Nome e descrizione della classe
1	w3-image Rappresenta un'immagine con stile di base senza alcun bordo.
2	w3-circle Visualizza un'immagine all'interno di un cerchio
3	w3-title Utilizzato per mettere del testo su un'immagine.
4	w3-card Disegna un'immagine come una carta.

Esempio

w3css_images.htm

<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Images Demo</h2>
      <hr/>
      <h3>Simple Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5">
      </div>
      
      <h3>Circled Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      
      <h3>Text over image</h3>
      <div class = "w3-image"><img src = "html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-title w3-text-black">Learn HTML5</div>
      </div>
      
      <h3>Image as a card</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-card-4">
      </div>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS supporta le seguenti popolari librerie di icone:

Font icone fantastiche
Icone dei materiali di Google
Icone Bootstrap

Utilizzo

Per utilizzare un'icona, inserisci il nome dell'icona nella classe di un elemento HTML <i>. Per controllare la dimensione di un'icona, puoi utilizzare le seguenti classi:

Sr. No.	Nome e descrizione della classe
1	w3-tiny Disegna un'icona di dimensioni molto ridotte.
2	w3-small Disegna un'icona di piccole dimensioni.
3	w3-large Disegna un'icona di grandi dimensioni.
4	w3-xlarge Disegna un'icona di dimensioni extra large.
5	w3-xxlarge Disegna un'icona di dimensioni molto grandi.
6	w3-xxxlarge Disegna un'icona di altissima dimensione extra large.

Esempio

w3css_icons.htm

<html>
   <head>
      <title>The W3.CSS Icons</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "w3-container">
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud w3-large"></i>
      <i class = "fa fa-cloud w3-xlarge"></i>
      <i class = "fa fa-cloud w3-xxlarge"></i>
      <i class = "fa fa-cloud w3-xxxlarge"></i>
      <i class = "fa fa-cloud w3-text-teal" style = "font-size:64px"></i>
      
      <h3>Google Material Design Icon Demo</h3>
      <i class = "material-icons w3-large">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons w3-xlarge">cloud</i>
      <i class = "material-icons w3-xxlarge">cloud</i>
      <i class = "material-icons w3-xxxlarge">cloud</i>
      <i class = "material-icons w3-text-teal" style = "font-size:64px">cloud</i>
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "gclass = "glyphicon glyphicon-cloud w3-large"></i>
      <i class = "glyphicon glyphicon-cloud w3-xlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-text-teal" style = "font-size:64px"></i>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS supporta un ricco set di classi di colori. Queste classi di colori sono ispirate e sviluppate considerando i colori utilizzati nel marketing, nei segnali stradali e nelle note adesive.

w3-red
w3-pink
w3-purple
w3-deep-purple
w3-indigo
w3-blue
w3-light-blue
w3-cyan
w3-teal
w3-green
w3-light-green
w3-lime
w3-khaki
w3-yellow
w3-amber
w3-orange
w3-deep-orange
w3-blue-grey
w3-brown
w3-light-grey
w3-grey
w3-dark-grey
w3-black

Temi di colore

W3.CSS fornisce un eccellente supporto per l'applicazione di un tema a un sito Web utilizzando il suo tema di dominio pubblico css. Alcuni degli esempi sono forniti di seguito:

Sr. No.	Nome e descrizione CSS
1	w3-theme-indigo.css CSS con varianti di colore Indigo
2	w3-theme-red.css CSS con varianti di colore rosso

Per utilizzare i temi, vai al https://www.w3schools.com/w3css/w3css_downloads.asp per scaricare il file CSS richiesto.

Esempio

w3css_colors.htm

<html>
   <head>
      <title>The W3.CSS Color Themes</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "css/w3-theme-red.css">
   </head>
   
   <body class = "w3-container">
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "w3-card-4">
         <div class = "w3-container w3-theme w3-card-2">
            <h1>Red Colored Theme</h1>
         </div>
         
         <div class = "w3-container w3-text-theme">
            <h2>w3-text-theme - Theme for Text</h2>
         </div>
         
         <ul class = "w3-ul w3-border-top">
            <li class = "w3-theme-l5" style = "position:relative">
            <a class = "w3-btn-floating-large w3-theme-action w3-right"
            style = "position:absolute;top:-28px;right:16px;">+</a>
            <p>Using w3-theme-l5 / w3-theme-light style</p>
            </li>
            <li class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
            <li class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
            <li class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
            <li class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
            <li class = "w3-theme"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d1"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d2"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d3"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d4"><p>Using w3-theme style</p></li>
         </ul>
      </div>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS ha diverse classi speciali per visualizzare rapidamente una barra di navigazione o un menu su un sito web.

Sr. No.	Nome e descrizione della classe
1	w3-topnav Modella un elenco come menu / barra di navigazione orizzontale.
2	w3-sidenav Modella un elenco come menu verticale / barra di navigazione.

Esempio

w3css_navigation.htm

<html>
   <head>
      <title>The W3.CSS Navigation</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body class = "w3-container">
      <h2>Navigation Demo</h2>
      <hr/>
      <h3>Horizontal top navigation bar</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using font awesome icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="fa fa-home"></i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using material icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="material-icons">home</i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using Side Navigation</h3>
      <nav class = "w3-sidenav w3-red w3-card-2" style="width:25%">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
   </body>
</html>

Risultato

Verifica il risultato.

W3.CSS ha diverse classi di utilità che sono molto utili per le esigenze di progettazione quotidiana.

Color utility classes - Esempi: w3-rosso, w3-giallo
Padding utility classes - Esempi: w3-padding-jumbo, w3-padding-16
Margin utility classes - Esempi: w3-margin-8, w3-margin-64
Border utility class - Esempi: w3-border-left, w3-border-right
Size utility classes - Esempi: w3-tiny, w3-small
Circle utility class - Esempio: w3-circle
Center utility class - Esempio: w3-center

Esempio

w3css_utilities.htm

<html>
   <head>
      <title>The W3.CSS Utilities</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>W3.CSS Utilities</h2>
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class = "w3-container w3-red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Padding Utilities Demo</h3>
      <div class = "w3-container w3-red w3-padding-jumbo">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-padding-16">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Margin Utilities Demo</h3>
      <div class = "w3-container w3-margin-64">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-margin-8">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Border Utilities Demo</h3>
      <div class = "w3-container w3-red w3-border-left w3-border-right">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-border">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
 
      <h3>Size Utilities Demo</h3>
      <div class = "w3-container">
         <p class = "w3-small">Using w3-small font.</p>
         <p>Using Default (medium).</p>
         <p class = "w3-large">Using w3-large font.</p>
         <p class = "w3-xlarge">Using w3-xlarge font.</p>
      </div>

      <h3>Circle Utility Demo</h3>
      <div class = "w3-container">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      <h3>Center Utility Demo</h3>
      <div class = "w3-container w3-center w3-black w3-card-2">
         <img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5">
      </div>
   </body>
</html>

Risultato

Verifica il risultato.