Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Installare w3.css

Come installare il framework CSS w3.css, includendolo correttamente all'interno di una pagina web o di un più esteso progetto front-end.
Come installare il framework CSS w3.css, includendolo correttamente all'interno di una pagina web o di un più esteso progetto front-end.
Link copiato negli appunti

Quando si parla di framework CSS, il termine "installazione" indica semplicemente l'inserimento di tale framework all'interno del nostro progetto front-end. Per usufruire di un framework CSS, infatti, basterà scaricarlo dal sito del fornitore ed inserirlo nelle pagine HTML della nostra applicazione tramite il tag HTML <link>. In alternativa ad un file collocato localmente, per velocizzare maggiormente i tempi di caricamento, spesso la soluzione migliore consiste nell'uso di servizi di Content Delivery Network (CDN), che vengono forniti nella maggior parte dei casi dal fornitore stesso del framework o da servizi affiliati.

<-- inserimento Framework CSS, localmente o tramite CDN !-->
<link rel="stylesheet" href="urlcdn.css">
<style>
<-- utilizzo del framework css !-->
</style>

Una volta installato, sarà possibile utilizzare la sintassi del framework in questione all'interno della struttura HTML e nei successivi CSS locali (che vanno collocati dopo il framework CSS) della nostra pagina.

UPrima di vedere nello specifico come utilizzare w3.css, è bene sottolineare che utilizzare un framework CSS consente allo sviluppatore, come ad esempio nel caso di jQuery per Javascript, di produrre codice CSS e risultati di qualità anche senza possedere competenze avanzate di CSS. Tuttavia, maggiore è il bagaglio informativo dello sviluppatore, maggiore sarà il controllo sul framework CSS stesso e sulla qualità del codice finale prodotto. Per questo motivo, è consigliabile, prima di avvalersi delle funzionalità di un qualsiasi framework CSS, avere delle competenze di livello intermedio-avanzato relative a CSS3 (qui la guida di HTML.it) e ad HTML5 (qui la guida di HTML.it).

Installare w3.css

Per installare w3.css nelle nostre applicazioni, abbiamo dunque due opzioni:

  • includere il framework tramite servizio CDN;
  • scaricare il file ed includerlo localmente.

Per includerlo tramite CDN, basta utilizzare il link fornito direttamente da w3schools:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

ed utilizzarlo nella nostra pagina HTML:

<html>
        <head>
            <title>w3.css demo</title>
            <meta name="viewport" content="width = device-width, initial-scale = 1">
            <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        </head>
        <body>
            <header class="w3-container w3-red">
                <h1>Ciao!</h1>
                <p>Contenuto testuale</p>
            </header>
        </body>
    </html>

Per includerlo localmente, occorre scaricare il pacchetto w3.css, scompattarlo, ed includere l’apposito file nella nostra locazione:

<link rel="stylesheet" href="/locale/w3.css">

ed utilizzarlo nella nostra pagina HTML:

<html>
    <head>
        <title>w3.css demo</title>
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <link rel="stylesheet" href="/locale/w3.css">
    </head>
    <body>
        <header class="w3-container w3-red">
            <h1>Ciao!</h1>
            <p>Contenuto testuale</p>
        </header>
    </body>
</html>

Come abbiamo visto nel paragrafo precedente, una volta inserito un framework CSS, possiamo utilizzare la sintassi dello stesso direttamente all’interno dei nostri elementi HTML, o estenderla nei nostri CSS locali. Nella prossima lezione vedremo infatti come mettere in pratica questa procedura, che ci permetterà di saggiare la potenza di w3.css.


Ti consigliamo anche