Lezione 4: Lavorare con CSS


In questa lezione vedremo insieme come modificare il comportamento della navbar a seconda di particolari azioni, come il passaggio del mouse sul pulsante, la selezione della pagina o il colore del menu nella versione mobile.

Fogli di stile:

Avevamo già introdotto il concetto di fogli di stile nella prima lezione di questo tutorato. Nel dettaglio con l'utilizzo dei Cascading Style Sheets (CSS), istruiamo il browser a riguardo dei font da utilizzare, i colori degli elementi della pagina, il corretto layout che vogliamo ottenere, ecc.

In aggiunta al materiale visto in aula, per ulteriori approfondimenti vi consiglio la lettura della documenzione disponibile sul portale della w3schools.

Riprendo l'esempio del Carousel visto nella precedente lezione, vogliamo modificarne alcuni comportamenti attraverso l'utilizzo delle formule CSS. Questo rappresenta il primo passo per la definizione del lavoro obiettivo di queste lezioni, che troverete a questo link.

Si tratta di una versione leggermente modificata dell'esempio presente nella documenzione di Bootstrap che abbiamo incontrato. Di seguito, vedremo dunque come introdurre formule aggiuntive di stile senza modificare il documento standard di Bootstrap.

Multipli file CSS:

Continuando l'esempio di barra di navigazione fatto nella precedente lezione, proveremo ora ad applicare delle formule in modo da modificarne l'aspetto. Per prima cosa è necessario definire un nuovo documento CSS da importare nella nostra pagina di test. Posizionatevi dunque all'interno della directory Bootstrap e definite un nuovo documento custom.css all'interno della directory css. Tornate quindi all'interno della pagina html e copiate il seguente codice: <link href="css/custom.css" rel="stylesheet">.

Come visto precedentemente, questo ci permette di importare il nostro foglio di stile in aggiunta al documento di specifica di Bootstrap.

Navbar:

Proviamo ora a modificare l'aspetto della nostra barra, per prima cosa vogliamo che tutte le scritte siano trasformate in automatico in maiuscole, aumentare la spaziature tra le lettere e modificarne il colore. Per farlo, sarà sufficiente inserire all'interno del nostro nuovo file css il seguente codice: 
.navbar li a {
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    color: #ffffff;
}
Con questa formula, stiamo istruendo il browser a modifcare tutte le scritte, che sono link, all'interno della classe navbar.

Esercizio

Prova a cambiare il colore del brand (utilizzando la proprietà color) all'interno della barra di navigazione utilizzando le formule CSS.

Fai attenzione a come è dichiarato il brand all'interno del codice!

Esercizio

Argh! Cambiando il colore delle scritte non riusciamo più a leggere all'interno del dropdown menu. Ma non ti preoccupare, possiamo sempre creare una nuova formula per cambiare il colore dello sfondo no?

Per modificare il colore di sfondo utilizza la funzione CSS: background-color: black

Navbar Mobile:

Vediamo ora come possiamo modificare l'aspetto della navbar nella sua versione mobile. Infatti la formula che abbiamo creato sopra, non comprende anche la classe della nostra barra in versione ridotta.

Basandoci su quanto fatto per la versione desktop, intuitivamente per modificare la versione mobile sarà necessario creare delle formule che qualifichino le classi utilizzate per la definizine dei sottomenu mobile oriented. Questi, rispondono alla classe .navbar-toggle alla quale possiamo inoltre associare reazioni a seconda delle operazioni eseguite sull'elemento.

Esercizio

Basandoti sull'eserizio precedente, utilizza la stessa formula per modificare il colore di sfondo, del navbar-toggle e delle icon-bar del menu mobile.

Pseudo-classi:

Ma quali sono le operazioni associate a questi elementi? Queste ricadono all'interno delle pseudo-classi di CSS. In particolare, ci permettono di qualificare dinamicamente lo stato di un oggetto all'interno della pagina web, vai qui per un overview teorico più apprfondito sulle pseudo-classi. In dettaglio, definiamo delle formule per dei mutamenti al passaggio del mouse (hover) o selezione dell'elemento (focus), ecc. Vediamo qui sotto delle regole che modificano in caso di passaggio del mouse o selezione il colore del navbar-brand: 
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus,
.navbar .navbar-brand:active,
.navbar .navbar-brand.active {
    color: #0000ff;
}

Esercizio

Nel codice scritto sopra vediamo due volte la formula active, sapresti spiegare la differenza tra le due?

Con :active specifichiamo lo stato in cui l'elemento si trova, quindi in questo caso l'elemento è stato premuto o è in focus; mentre, con .active stiamo applicando la regola nel caso in cui l'elemento sia valorizzato con la classe active.

Esercizio

Sulla base di quanto visto in questo paragrafo, modifica il comportamento delle voci di menu presenti sulla navbar, in caso di hover e focus.

Font:

Come detto in precedenza, attraverso i file CSS siamo in grado di definire per ciascun elemento della pagina un diverso font. Come per un qualsiasi editor di testo, possiamo definire la famiglia del font, la grandezza, lo stile ed il "peso" (boldness). In CSS abbiamo a disposizione due famiglie di font:
  • Generici: come "Serif", "Monospace", "Display", ecc
  • Specifici: come "Times New Roman", "Arial", "Roboto", ecc.
Per un elenco dei font disponibili, potete consultare l'elenco risorse del tutorato o visitare direttamente il portale Google fonts. Ulteriori informazioni, ed esercizi, sono disponibili sul portale w3schools.

Al solito, dobbiamo ricordare che nello sviluppo di elementi web, la struttura gerarchica degli elementi è molto imporante. Per cui, se volessimo modificare i font della nostra pagina, ci sarà sufficiente creare una regola che includa tutto il <body>: 

body {
    font-family: "Roboto Slab","Times New Roman",Times,serif;
}
Come vedete, possiamo definire più famiglie di font. In questo caso, il browser applicherà la prima famiglia disponibili nella lista definita. Questo vuol dire che, nel caso in cui non trovasse il font Roboto cercherà d'applicare Times new roman ecc. In questo modo è possibile creare soluzioni di backup nella visualizzazione del nostro sito.

Aggiornando la pagina però, avrete notato che il font visualizzato non è affatto Roboto! Infatti, è necessario un passaggio aggiuntivo da parte degli sviluppatori. Sarà necessario includere un collegamento al font, che faremo seguire alle dichiarazioni dei fogli di stile:

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom_css.css" rel="stylesheet">

<!-- Font Aggiuntivi -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

Esercizio

In questo paragrafo abbiamo definito una regola che si applica all'intero body. Per ipotesi, inseriamo nuovi elementi all'interno della pagina:

<div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h1>Ciao Mondo</h1>
                <h2>Ciao Mondo</h2>
                <h3>Ciao Mondo</h3>
                <h4>Ciao Mondo</h4>
                <h5>Ciao Mondo</h5>
            </div>
        </div>
</div>
Il tuo compito, è di definire per questi nuovi elementi dei font specifici in CSS. Prova ad applicare effetti di spaziatura, di stile (normal, italic).