Cos'è il CSS

Il CSS (acronimo di Cascading Style Sheets) è il linguaggio utilizzato per la formattazione (stile) visiva delle pagine HTML.

I documenti creati con questo linguaggio, si definiscono con l'estensione .css e non possono essere eseguiti se non accompagnati appunto dalla pagina HTML. Il loro funzionamentp agisce infatti sul DOM (Document Object Model) ovvero il risultato dell'elaborazione HTML da parte del browser.

Inizialmente i CSS erano "limitati" alla customizzazione di elementi ben definiti.
In seguito all'introduzione dell'HTML5, sono nate però ulteriori evoluzioni di questo linguaggio (definito CSS3) per permettere una customizzazione dinamica a seconda della variazione dei contenuti stessi nella pagina.

Principi del CSS

Elementi di base e definizione dello stile

Principi del CSS

I documenti (o fogli) di stile CSS, sono caratterizzati da un insieme di regole applicate sul documento HTML.

  • Per poter definire una regola è necessario seguire sempre la logica

    selettore {opzione:valore; opzione2:valore2; etc...}
    
  • Per poter inserire un commento all'interno dei fogli CSS

    /* Commento di test */
    selettore {opzione:valore; opzione2:valore2; etc...}
    

Principi del CSS

Il selettore può essere di diverse tipologie

  • Generico: permette di attribuire una regola a tutti gli elementi dello stesso tipo

    span {opzione:valore; opzione2:valore2; etc...} /* Regola per tutti i tag span */
    
  • ID: definisce lo stile esatto di un elemento tramite l'attributo id dello stesso

    /* Nel codice HTML ci sarà <span id="customspan">testo dello span</span> */
    span#customspan {opzione:valore; opzione2:valore2; etc...} 
    
  • Classe: definisce lo stile di tutti gli elementi con lo stesso attributo class, anche se differenti per tipologia

    .customclass {opzione:valore; opzione2:valore2; etc...} 
    

Principi del CSS

  • Generalmente tutti gli elementi HTML presenti nel contenitore body, dovrebbero avere un'id e opzionalmente una classe nel caso in cui si voglia attribuire lo stesso stile a più elementi
  • L'id nel CSS si traduce con il simbolo #
  • La classe nel CSS si traduce con il simbolo .
  • E' possibile definire lo stesso stile a più selettori contemporaneamente, definendoli nella stessa regola e separandoli dalla virgola

    /* Es. stesso stile per tag h1, p e span */
    h1, p, span {opzione:valore; opzione2:valore2; etc...} 
    
    /* Es. stesso stile per id "customid" e classe "customclass" */
    #customid, .customclass {opzione:valore; opzione2:valore2; etc...} 
    

Principi del CSS

Per poter associare il codice CSS alla pagina HTML, si possono utilizzare tre diverse tecniche

  • Internal: inserimento del codice direttamente nell'head della pagina HTML, all'interno del tag style

    <head>
    	<title>Titolo della pagina</title>
    	<style>
    		/* Codice CSS */
    	</style>
    </head>
    
  • External: inclusione di un file .css tramite il tag link

    <head>
    	<title>Titolo della pagina</title>
    	<link rel="stylesheet" type="text/css" href="stile.css" />
    </head>
    
  • Inline: inserimento del codice direttamente all'interno del tag interessato, tramite l'attributo style

    <span style="selettore{opzione:valore;}">Testo dello span</span>
    

Principi del CSS

Fra i tre metodi si consiglia assolutamente quello external in quanto permette un caricamento migliore della pagina e un'efficienza maggiore rilevata dai motori di ricerca.

Tuttavia è possibile anche adottare soluzioni miste fra le tre diverse tecniche. In questo caso occorre tener conto della priorità del codice applicato su eventuali selettori uguali.

L'ordine delle priorità (in ordine decrescente) è il seguente:

  • Inline
  • Internal
  • External

Dunque se all'interno di un file .css si applica uno stile generico per lo span, e all'interno della pagina HTML si applica un'inline style su uno span, quest'ultimo avrà priorità su quello inserito nel file .css

Regole CSS

Alla scoperta del mondo CSS e delle sue proprietà

Regole CSS

Indice degli argomenti

  • Dimensioni
  • Formattazione del testo
  • Links
  • Font
  • Background
  • Liste
  • Bordi
  • Padding & Margin
  • Visibilità
  • Posizioni
  • Allineamento
  • Selettori avanzati
  • Regole CSS

    Dimensioni

    Correlate al concetto di contenitori, quindi dei div HTML, le proprietà legate alle dimensioni permettono di definire al meglio le sezioni della pagina web.

    Prendiamo per ipotesi la struttura classica di un sito web, composto da intestazione (header), contenuto (wrap) e piè di pagina (footer).

    HEADER
    WRAP
    FOOTER

    Per poter creare una struttura di questo tipo, occorre dunque creare tre diversi div e attribuire ad ognuno un'apposita proprietà CSS. Generalmente si consiglia sempre di disegnare su carta la struttura della pagina, per capire come impostare i div e quanti crearne.

    Regole CSS

    Dimensioni

    La struttura sarà dunque così composta

    <div id="header"></div>
    <div id="wrap"></div>
    <div id="footer"></div>
    
    #header, #wrap, #footer {width:100%; min-height:50px;}
    #wrap {min-height:400px;}
    

    Abbiamo dunque impostato la massima larghezza (100% di larghezza rispetto al contenitore, ovvero il tag <body>) e un'altezza minima per i tre div. Abbiamo inoltre specificato che solo il contenitore wrap, potrà avere un'altezza minima diversa da header e footer.

    Per far sì che i contenuti siano adattati ad ogni risoluzione e device, la buona norma prevede di impostare sempre le dimensioni dell'opzione width in percentuale (%).
    Viceversa per l'altezza, si consiglia di utilizzare impostazioni statiche più precise, come i pixels (px)

    Regole CSS

    Dimensioni

    Le opzioni per impostare le dimensioni, sono dunque le seguenti.

    Larghezza

    • width
    • max-width
    • min-width

    Altezza

    • height
    • max-height
    • min-height

    Le dimensioni possono essere impostate su tutti i tags contenitori dell'HTML (div, p, table, etc...), mentre non avrebbero effetto su tags non contenitori come il tag span.

    Regole CSS

    Formattazione del testo

    Il CSS permette di definire come deve apparire il testo dei contenuti della pagina (es. tags p, span).

    Opzione Valore Descrizione Esempio
    color [colore in hex, rgb o name] Definizione del colore del testo <span style="color:red;">Testo rosso</span>
    Testo rosso
    text-align [center, right, left, justify] Allineamento del testo nel contenitore <p style="text-align:right;">Testo a destra</p>

    Testo a destra

    text-decoration [none, underline, overline, line-trough] Decorazione del testo (sottolineatura, linea sovrapposta ecc...) <span style="text-decoration:underline;">Testo sottolineato</span>
    Testo sottolineato
    text-transofmr [uppercase, lowercase, capitalize] Trasformazione maiuscola/minuscola del testo <span style="text-transform:uppercase;">testo maiuscolo</span>
    testo maiuscolo
    letter-spacing [Dimensione] Distanza fra le lettere <span style="letter-spacing:7px;">testo staccato</span>
    testo staccato
    line-height [Dimensione] Altezza della singola riga <span style="line-height:20px;">testo alto</span>
    testo alto

    Regole CSS

    Links

    Per quanto riguarda i links (ovvero i tags a) si possono applicare tutti gli stili già visti in precedenza per i testi.
    In più però ci sono peculiarità previste esclusivamente per i link vista la loro natura diversa da un testo normale.

    Nel dettaglio su un link sono previsti quattro diversi status:

    • :link - status di default del link non visitato e cliccato
    • :visited - link visitato in seguito a click sullo stesso
    • :hover - al passaggio del mouse sul link
    • :active - al momento del click sul link

    Questi quattro diversi stati presenti nel ciclo di vita di un link, sono gestibili tramite CSS utilizzando quelle che vengono definite pseudo classi e che si individuano appunto con il simbolo dei due punti (:) a differenza del singolo punto che individua generalmente le classi HTML.

    Regole CSS

    Links

    Sarà dunque possibile definire per un link quattro regole differenti

    /* Testo blu non sottolineato */
    a:link{color:blue; text-decoration:none;}
    /* Testo rosso con linea sovrapposta */
    a:visited{color:red; text-decoration:line-trough;}
    /* Testo argentato sottolineato */
    a:hover{color:silver; text-decoration:underline;}
    /* Testo rosso non sottolineato */
    a:active{color:yellow; text-decoration:none;}
    

    E' bene ricordare che:

    • Ogni browser applica uno stile di default ai links
    • Lo stato :link equivale alla semplice regola applicata sul tag a

    Regole CSS

    Font

    Il CSS permette di definire ogni singolo aspetto della pagina HTML.
    Ci permette anche di cambiare il font ovvero la tipologia di carattere di scrittura.

    Nel browser si identificano tre diverse famiglie di font riconosciute:

    • Serif - come il font Times New Roman
    • Sans-Serif - come il font Verdana
    • Monospace - come il Lucida Console

    La differenza fra le tre famiglie, è ovviamente apparente. Il Monospace differisce dalle altre due famiglie in quanto prevede per ogni singolo carattere la stessa dimensione occupata nello schermo.

    Fra Serif e Sans-Serif c'è invece una differenza riassumibile tramite la seguente immagine

    Regole CSS

    Font

    Vediamo dunque gli stili legati alla formattazione del font

    Opzione Valore Descrizione Esempio
    font-family [font a scelta es. Verdana, Times New Roman] Definizione del font <span style="font-family:'Lucida Console';">Testo </span>
    Testo
    font-style [italic, normal] Definisce lo stile in corsivo o meno <p style="font-style:italic;">Testo in corsivo</p>

    Testo in corsivo

    font-weight [bold, normal / 100, 200, 300, 400, 500, 600, 700, 800] Spessore del testo <p style="font-weight:700;">Testo extra bold;/p>

    Testo extra bold

    font-size [Dimensione px o em] Grandezza del testo <span style="font-size:10px;">Testo molto piccolo;/span>
    Testo molto piccolo

    Regole CSS

    Font

    Per quanto riguarda la proprietà del font-size è possibile impostare la dimensione del font in pixels o em.
    Sicuramente i pixels sono più semplici da utilizzare in quanto siamo abituati alla risoluzione degli schermi.

    Gli standard del web (W3C) consigliano però l'utilizzo dell'unità di misura em in quanto più adatta per una compatibilità ottimale con tutti i dispositivi (dunque responsive).

    L'unità em si determina in funzione della grandezza del font dell'elemento contenitore.
    Se per esempio abbiamo un elemento div al quale è applicata una proprietà di font-size pari a 30px, e all'interno ci inseriamo un tag span con font-size pari a 0.5em, lo span assumerà una dimensione di 15px, ovvero la metà della grandezza del contenitore.

    Se invece non è presente alcun contenitore, si fa riferimento alla dimensione di default del browser, ovvero di 16px, quindi si potrà utilizzare la regola:

    1em = 16px

    Regole CSS

    Background

    La proprietà di background, permette di definire il colore o l'immagine di sfondo di un elemento contenitore.

    Opzione Valore Descrizione Esempio
    background-color [colore hex, rgb o name] Colore di sfondo <div style="background-color:red;"></div>
    background-image [url] Immagine di sfondo <div style="background-image:url('path/to/image.png');"></div>
    background-repeat [no-repeat, repeat-x, repeat-y] Ripetizione dello sfondo in orizzontale, verticale o nessuna <div style="background-repeat:no-repeat;"></div>

    Le varie proprietà del background, possono essere unite in un'unica opzione background, rispettando l'ordine colore, immagine e ripetizione (saltando anche qualche elemento se necessario).
    Per esempio per impostare un'immagine di sfondo evitando che si ripeti:

    div{background:url('path/to/image.png') no-repeat};
    

    Regole CSS

    Liste

    Per quanto riguarda le liste, ci sono solo due proprietà del CSS essenziali, applicabili al tag contenitore ul (o ol)

    Opzione Valore Descrizione Esempio
    list-style-type [circle, square, disc, decimal, ...] Tipologia di marker della lista <ul style="list-style-type=square;">
       <li>Primo</li;
       <li>Secondo</li;
    </ul>


    • Primo
    • Secondo
    list-style-image [url] Definisce un'immagine come marker <ul style="list-style-image=url('path/to/image.png');">
       <li>Primo</li;
       <li>Secondo</li;
    </ul>


    • Primo
    • Secondo

    Regole CSS

    Liste

    Molto spesso le liste sono utilizzate per disporre elementi in maniera ordinata orizzontalmente (come per esempio nei menù) o verticalmente (una classica barra di notifiche).
    Questo sistema generalmente comporta l'oscuramento del marker della lista stessa.

    Per disporre invece le voci della lista orizzontalmente per creare ad esempio un menù, si utilizza la proprietà display:inline;

    ul{list-style-type:none;}
    ul li{display:inline;}
    
    <ul>
    	<li> Voce </li>
    	<li> Seconda Voce </li>
    	<li> Terza Voce </li>
    </ul>
    

    Regole CSS

    Bordi

    Ogni elemento contenitore può avere dei bordi preimpostati per definirne al meglio le dimensioni dal punto di vista visivo.
    Per ognuno dei quattro lati di un contenitore, è possibile definire lo specifico bordo utilizzando le proprietà di:

    • width - dimensione in pixels del bordo
    • style - [solid, dotted, double, inset, outset] definisce lo stile del bordo (linea continua, punteggiato, etc...). Generalmente si utilizza lo style solid
    • color - colore come al solito a scelta fra name, hex o rgb del bordo

    Sarà dunque possibile per ogni lato del contenitore (top, bottom, left, right) definire le seguenti proprietà

    div{
    	/* Bordo di sinistra rosso, solido e di 1px */
    	border-left-width:1px;
    	border-left-style:solid;
    	border-left-color:red;
    }
    

    Regole CSS

    Bordi

    Risulta però molto macchinoso andare a definire per ogni singolo lato del contenitore, tre diverse proprietà solo per il bordo.
    Proprio per questo, così come per il background, esiste una forma ridotta per definire i bordi di un lato del contenitore:

    div{
    	/* Bordo di sinistra rosso, solido e di 1px */
    	border-left:1px solid red;
    }
    

    E' necessario rispettare sempre l'ordine dimensione, stile, colore.
    Per ridurre ancora il processo, è possibile indicare con una sola proprietà il bordo dell'intero contenitore, evitando l'operazione ripetuta quattro volte

    div{
    	/* Bordo dell'intero contenitore, solido e di 1px */
    	border:1px solid red;
    }
    

    Regole CSS

    Padding & Margin

    Quando si ha a che fare con i div, risulta essenziale utilizzare elementi separatori all'interno della pagina intesi come semplici spazi o margini.
    Nella struttura di una pagina HTML e dunque nelle proprietà CSS, di individuano due diverse tipologie di spaziatura fra gli elementi:

    • margin: il margine è la spaziatura esterna del contenitore rispetto ad altri elementi
    • padding: spaziatura interna al contenitore stesso, utilizzata per distaccare appunto il contenuto

    Regole CSS

    Padding & Margin

    Il funzionamento dal punto di vista del CSS è molto simile per margin e padding.
    E' possibile infatti definire per entrambe la distanza per i quattro lati:

    • top
    • right
    • bottom
    • left

    Regole CSS

    Padding & Margin

    Singolarmente:

    div{
    	margin-top:10px; margin-right:15px; margin-bottom:20px; margin-left:25px;
    	padding-top:25px; padding-right:30px; padding-bottom:35px; padding-left:40px;
    }
    

    Con la definizione abbreviata rispettando l'ordine top, right, bottom, left (verso "orario")

    div{
    	margin:10px 15px 20px 25px;
    	padding:25px 30px 25px 40px;
    }
    

    Oppure nel caso in cui le distanza da tutti i lati sia la stessa

    div{
    	margin:10px;
    	padding:25px;
    }
    

    Regole CSS

    Visibilità

    Nel CSS si può giocare molto con la visibilità degli elementi e l'effetto a comparsa per rendere le pagine sempre più avanzate dal punto di vista del design e dell'experience.

    Esistono due diverse proprietà CSS per determinare la visibilità di un elemento, simili ma non uguali:

    • visibility: [visibile, hidden] - permette di mostrare o nascondere l'elemento, ma lasciandolo comunque nel layout della pagina, influenzando dunque il posizionamento degli altri contenuti
    • display: [block, none] - permette di mostrare o nascondere l'elemento, ma rimuovendolo del tutto dalla composizione del layout della pagina

    Regole CSS

    Visibilità

    Esempio visibility

    h2{visibility:hidden;}
    
    <h1>Esempio Visibility</h1>
    <h2>Testo h2</h2>
    <p>Il tag h2 non è visibile ma occupa comunque spazio</p>
    

    Risultato dell'esempio:

    Esempio Visibility

    Testo h2

    Il tag h2 non è visibile ma occupa comunque spazio

    Regole CSS

    Visibilità

    Esempio display

    h2{display:none;}
    
    <h1>Esempio Display;/h1>
    <h2>Testo h2</h2>
    <p>Il tag h2 non è visibile e non occupa spazio</p>
    

    Risultato dell'esempio:

    Esempio Display

    Testo h2

    Il tag h2 non è visibile e non occupa spazio

    Regole CSS

    Posizioni

    Grazie al CSS è possibile agire sulla pagina web e stravolgerne la visualizzazione rispetto alla creazione dei contenuti.

    In particolar modo la presenza dei div permette di disporre i contenuti esattamente come vogliamo.
    Per agevolare queste operazioni, si utilizza la proprietà position del CSS.
    Un elemento all'interno della pagina può avere tre diverse posizioni:

    • relative: relativa rispetto all'ordine naturale dei contenuti
    • absolute: assoluta e dunque svincolata rispetto al contenitore
    • fixed: fissa rispetto all'intera pagina HTML

    Modificando le proprietà di posizione di un elemento si possono creare tutti gli scenari comuni ai quali attualmente siamo abituati nel mondo del web.

    Regole CSS

    Posizioni

    • Grazie alla posizione fixed, è possibile avere elementi fissi nella pagina come per esempio la chat di Facebook o il classico menù che ti "segue" durante la navigazione.
    • La posizione absolute, aiuta invece nella disposizione di elementi all'interno di un contenitore, che deve essere svincolata dal normale flusso della disposizione dei contenuti, e al tempo stesso deve adattarsi allo schermo per mantenere un riferimento ben definito.
      la posizione absolute dipende sempre da un contenitore. Se non vi è un contenitore, si farà riferimento all'intera pagina HTML come main container.
    • La posizione relativa, è invece quella normale di un elemento.
    • Per sfruttare al massimo le potenzialità della proprietà position, si fa riferimento ad altre proprietà CSS per determinare al meglio la disposizione e la visibilità del contenuto da posizionare:
      • margin e padding (oppure le proprietà dirette right, top, bottom, left che funzionano come i margin)
      • cursor [pointer, move, resize, default, etc...] per definire la tipologia del cursore del mouse
      • z-index per definire la priorità di un elemento sugli altri. Più è alto il valore numerico dello z-index, maggiore sarà la priorità (visibilità) dell'elemento sugli altri
      • overflow [auto, hidden, scroll, visible] definisce cosa accade al superamento (orizzontale o verticale) delle dimensioni del contenitore.

    Regole CSS

    Posizioni

    Per esempio se si vuole riprodurre il div contenitore della chat di Facebook

    body{
    	background:red;
    }
    div#chat-facebook{
    	position:fixed; /* Sempre fisso nella pagina */
    	width:200px;
    	/* Settando top e bottom, imposto di conseguenza l'altezza del div */
    	top:0px; /* Margin top */
    	bottom:0px; /* Margin bottom */
    	right:0px; /* Spostato sulla destra */
    	background:blue; 
    }
    
    <body>
    	<div id="chat-facebook"> My wonderful chat </div>
    </body>
    

    Regole CSS

    Posizioni

    Avremo come risultato

    My Wonderful Chat


    Di conseguenza essendo la posizione fissa del box chat, allo scroll della pagina principale, la chat resterà sempre salda sulla destra.

    Regole CSS

    Allineamento

    Come già detto, ogni elemento di default segue un'ordine di visualizzazione consecutivo, ovvero relativo rispetto al punto del documento HTML nel quale viene creato.

    Per quanto riguarda la disposizione dei div, se per esempio si vuole creare un wrap composto da sidebar e contenuto principale, dovremmo creare due elementi e disporli uno di fianco all'altro:

    div#sidebar{width:30%; height:300px; background:yellow;}
    div#content{width:70%; height:300px; background:red;}
    
    <div id="sidebar"></div>
    <div id="content"></div>
    

    La disposizione naturale degli elementi, non ci permetterebbe però di visualizzarli correttamente uno di fianco all'altro:

    Regole CSS

    Allineamento

    Per risolvere questo problema, si utilizza la proprietà di allineamento del CSS, ovvero il float, che permette di agire sul flusso naturale degli elementi e disporli con un allineamento a destra o a sinistra rispetto ai precedenti e successivi elementi.

    div#sidebar{width:30%; height:300px; background:yellow; float:left;}
    div#content{width:70%; height:300px; background:red; float:right;}
    
    <div id="sidebar"></div>
    <div id="content"></div>
    

    Aggiungendo il float left ad entrambi gli elementi, specifichiamo che entrambi dovranno allinearsi sulla sinistra.

    Regole CSS

    Allineamento

    Grazie al float, è dunque possibile allineare molti elementi su una stessa riga immaginaria.
    Bisogna sempre tener conto però che la riga immaginaria non deve superare (almeno nelel pagine web standard) la dimensione del 100% in width, altrimenti si avrebbe il fastidioso effetto di scroll orizzontale sull'intera pagina.

    Dunque se si utilizza un padding o un margin, occorre tener conto che questi valori influiscono sulla larghezza del div stesso.

    Esempio
    Se abbiamo un div con width=300px e height=100px e applichiamo un padding=10px,
    il div avrà una dimensione di 320px (300px originali + 10px padding left + 10px padding right) con altezza di 120px (100px originali + 10px padding top + 10px padding bottom).

    Proprio per questo la progettazione del layout della pagina web (anche solo su carta) può essere fondamentale per evitare perdite di tempo nella definizione e correzione dei div.

    Regole CSS

    Selettori avanzati

    Oltre alla selezione di un elemento per tag generico, indicatore di classe o ID, esistono altre tre tipologie di selettori nel CSS:

    • combinators: selezione degli elementi a cascata
    • pseudo-class: selezione tramite uno status
    • pseudo-element: selezione di un componente specifico dell'elemento

    Regole CSS

    Selettori avanzati

    I combinators permettono di attribuire regole generiche (e non) di elementi appartenenti ad altri elementi parent.
    Questo soprattutto per i div permette di differenziare gli stili del contenuto del div, a seconda appunto dell'elemento contenitore.

    span{color:red; font-size:15px;} /* Regola generica per tutti i tags span */
    div#custom span{color:blue;} /* Regola specifica per le span contenute nel div con id custom */
    
    <span>Testo di default</span>
    <div>
    	<span>Testo contenuto nel div</span>
    </div>
    

    Ed ecco il risultato

    Testo di default
    Testo contenuto nel div

    Regole CSS

    Selettori avanzati

    Dunque il combinator semplice, permette di definire il contenitore (div) e l'elemento interessato (span) e di attribuire specifiche proprietà allo stesso.

    Il combinator può essere però anche di altre tre tipologie più evolute:

    • div > span: solamente gli elementi contenuti direttamente nel div avranno determinate proprietà

      <div><span>Testo</span></div> <!-- Lo span avrà le proprietà del CSS -->
      <div><p>Testo p con <span>span</span></p></div> <!-- Lo span NON avrà le proprietà del CSS  -->
      
    • div + span: solamente gli elementi immediatamente successivi al div avranno determinate proprietà

      <div>
          <span>Testo</span> <!-- NON avrà le proprietà CSS -->
      </div>
      <span>Testo 2</span> <!-- Avrà le proprietà CSS -->
      <span>Testo 3</span> <!-- NON avrà le proprietà CSS -->
      

    Regole CSS

    Selettori avanzati

    • div ~ span: tutti gli elementi NON contenuti direttamente nel div avranno determinate proprietà

      <div>
          <span>Testo</span> <!-- NON avrà le proprietà CSS -->
      </div>
      <span>Testo 2</span> <!-- Avrà le proprietà CSS -->
      <span>Testo 3</span> <!-- Avrà le proprietà CSS -->
      

    Regole CSS

    Selettori avanzati

    Le pseudo classi permettono la seleziona degli elementi in funzione del loro stato.
    Abbiamo già visto le pseudo-classi applicate al tag a per gli stati di hover, active, link, visited.

    Così come per i link, esistono molte altre tipologie di pesudo-classi che permettono molte funzionalità, ecco un prospetto delle più utilizzate.

    pseudo-class Descrizione
    :focus Fondamentale per individuare il click sugli elementi
    :checked Applicato sulle checkbox permette di determinare lo status "selezionato"
    :disabled Per selezionare gli input disabilitati
    :empty Per selezionare i tag vuoti
    :first-child Seleziona il primo elemento nel contenitore
    :last-child Seleziona l'ultimo elemento nel contenitore
    :not(selettore) Seleziona tutti gli elementi diversi dal selettore

    Regole CSS

    Selettori avanzati

    Può sembrare banale, ma grazie ai selettori è possibile scrivere effetti e proprietà degli elementi solamente tramite il CSS!
    Per esempio il selettore :focus è molto utilizzato per determinare la visibilità dei famosi menù a comparsa

    <style>
        div#menu{
            display:none; position:absolute;padding:10px;
            top:30px; left:20px;  width:200px; height:100px;
            background:red; color:white; line-height:100px; font-size:12px;
        }
        
        li{ cursor:pointer; outline:none;}
        li:focus div#menu{display:block;}
    </style>
    
    <li tabindex="0">
        Cliccami per far comparire il menu
        <div id="menu">
            Eccomi sono il menu!
        </div>
    </li>
    

    Regole CSS

    Selettori avanzati

    Gli pseudo elementi permettono invece la selezioni di parti di un determinato elemento.
    A differenza delle pseudo-classi, gli pseudo-elementi si individuano tramite il simbolo ::.

    Ecco un prospetto dei selettori di questa tipologia

    pseudo-element Descrizione
    ::after Sezione immediatamente successiva all'elemento
    ::before Sezione immediatamente precedente all'elemento
    ::first-letter Seleziona la prima lettera di un testo
    ::first-line Seleziona la prima linea di un testo

    Regole CSS

    Selettori avanzati

    Di seguito un esempio di selettore ::before

    h1::before {
        content: url('http://www.w3schools.com/css/smiley.gif');
        margin-right:10px;
    }
    
    <h1>Il mio titolo con ::before</h1>
    

    Ed ecco il risultato:

    Il mio titolo con ::before


    Andando ad ispezionare l'elemento sullo smiley, vedremo che nel DOM è stato creato uno pseudo-elemento chiamato proprio ::before al quale ha applicato le proprietà CSS inserite.

    Esercitazione

    Verifica HTML e CSS

    Esercitazione

    Selettori avanzati

    Riprodurre la schermata che si trova al seguente link con solo HTML e CSS.

    http://neexpro.com

    Indicazioni per l'esercitazione:

    • Evitare di replicare le animazioni
    • Provare ad impostare l'header fisso anche in fase di scroll
    • Utilizzare la proprietà CSS border-radius per effettuare i bordi arrotondati
    • Le immagini e i colori potranno essere variati liberamente

    Warning: include(slides/47.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/css/index.php on line 94

    Warning: include(): Failed opening 'slides/47.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/css/index.php on line 94

    Warning: include(slides/48.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/css/index.php on line 95

    Warning: include(): Failed opening 'slides/48.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/css/index.php on line 95

    Warning: include(slides/49.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/css/index.php on line 96

    Warning: include(): Failed opening 'slides/49.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/css/index.php on line 96

    Warning: include(slides/50.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/css/index.php on line 97

    Warning: include(): Failed opening 'slides/50.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/css/index.php on line 97

    Warning: include(slides/51.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/css/index.php on line 98

    Warning: include(): Failed opening 'slides/51.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/css/index.php on line 98

    Warning: include(slides/52.php): failed to open stream: No such file or directory in /home/brainin6/subdomains/slides/css/index.php on line 99

    Warning: include(): Failed opening 'slides/52.php' for inclusion (include_path='.:/usr/local/php71/pear') in /home/brainin6/subdomains/slides/css/index.php on line 99

    <Thank u!>

    Sempre pronto a darti una mano