SELETTORI SEMPLICI IN CSS

CSS INTRODUZIONE

Prima di parlare del post “Selettori semplici in CSS” diamo la definizione di CSS. CSS sta per Cascading Style Sheets, con i CSS descriviamo come vogliamo che gli elementi delle nostre pagine HTML appaiano, personalizziamo ad esempio font, colori, sfondi etc. Creato dal W3C (World Wide Web Consortium) come “complementare” ad HTML.

LA REGOLA DEL CSS

Per ciascun selettore abbiamo una coppia chiave-valore chiamata dichiarazione. Parleremo in dettaglio dei selettori più avanti.

COME AGGIUNGERE IL CSS ALLE NOSTRE PAGINE HTML

Esistono tre modi per inserire un foglio di stile in una pagina HTML.

EXTERNAL CSS

Con un foglio di stile esterno, puoi cambiare l’aspetto di un intero sito web cambiando solo un file. Ogni pagina HTML deve includere un riferimento al foglio di stile con il tag <link> inserito all’interno della sezione head.

INTERNAL CSS

Un foglio di stile interno può essere utilizzato se una singola pagina HTML ha uno stile unico. Lo stile interno è definito all’interno dell’elemento <style>, della sezione head.

INLINE CSS

Uno stile inline può essere utilizzato per applicare uno stile univoco a un singolo elemento. Per utilizzare gli stili in linea, aggiungi l’attributo style all’elemento pertinente. Tale attributo può contenere qualsiasi proprietà CSS.

STILI MULTIPLI

Continuando con l’argomento “Selettori semplici in CSS” c’è da chiedersi: quale stile verrà utilizzato quando è specificato più di uno stile per un elemento HTML? Tutti gli stili in una pagina verranno applicati “a cascata” in un nuovo foglio di stile “virtuale” secondo le seguenti regole, dove il numero uno ha la priorità più alta:

Stile inline (all’interno di un elemento HTML)
Fogli di stile esterni e interni (nella sezione head)
Impostazioni predefinite del browser

Quindi, uno stile inline ha la priorità più alta e sovrascriverà gli stili esterni e interni e le impostazioni predefinite del browser. Verifichiamo tutto ciò con l’inspector di Chrome. Nel codice di esempio ho definito un tag avente la proprietà color sovrascritta più volte. Verifichiamo che sia lo stile inline a prevalere.

CHROME INSPECTOR

PROCEDIMENTO

Apri la pagina HTML di esempio
Fai click con il tasto destro in un’area qualsiasi e seleziona la voce “ispeziona”
Seleziona la scheda Elements
All’interno dell’inspector seleziona il quadratino con la freccia in alto a sinistra
Seleziona l’elemento <h1> SIMPLE SELECTOR
Vedrai nel foglio CSS che le impostazioni sovrascritte vengono evidenziate come sbarrate e a prevalere è il colore dello stile inline.

COMMENTI CSS

I commenti vengono utilizzati per spiegare il codice e possono essere d’aiuto quando si modifica il codice sorgente in un secondo momento. I commenti vengono ignorati dai browser. Un commento CSS inizia con /* e termina con */.

SELETTORI CSS

Un selettore CSS seleziona gli elementi HTML a cui si vuole applicare uno stile. Possiamo dividere i selettori CSS in cinque categorie:

Simple selectors (seleziona gli elementi in base a name, id, class)
Combinator selectors (selezionano gli elementi in base a una relazione specifica tra di loro)
Pseudo-class selectors (selezionano elementi in base a un certo stato)
Pseudo-elements selectors (selezionano e modellano una parte di un elemento)
Attribute selectors (selezionare elementi in base a un attributo o un valore di attributo)

In questo primo articolo vedremo i Simple selectors.

CSS ELEMENT SELECTOR

Il selettore di elementi seleziona gli elementi HTML in base al nome dell’elemento.

CSS ID SELECTOR

Il selettore id utilizza l’attributo id di un elemento HTML per selezionare un elemento specifico. L’id di un elemento deve essere univoco all’interno di una pagina; quindi, il selettore id viene utilizzato per selezionare un elemento univoco! Per selezionare un elemento con un id specifico, scrivere un carattere cancelletto (#), seguito dall’id dell’elemento.

CSS CLASS SELECTOR

Il selettore di classe seleziona gli elementi HTML in base ad un attributo class specifico. Per selezionare elementi con un attributo class, scrivi un carattere punto (.), seguito dal nome della classe.

CSS UNIVERSAL SELECTOR

Il selettore universale (*) seleziona tutti gli elementi HTML della pagina.

CSS GROUPING SELECTOR

Il selettore di raggruppamento seleziona tutti gli elementi HTML con le stesse definizioni di stile.

NB:PER TUTTI I VARI SELETTORI HO RIPORTATO DEL CODICE DI ESEMPIO.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>SIMPLE SELECTOR</title>
    <style>
        /*--ESEMPIO DI INTERNAL CSS*/
        h1 {color: brown;text-align: center;} 
    </style>
    
</head>
<body>
    
    <h1 style="color: blue; text-align:center;">SIMPLE SELECTOR</h1>
    <p>Lorem,
    <span class="bold"> ipsum dolor sit amet consectetur adipisicing elit.</span> 
        Tenetur vero illum similique, ullam perferendis veritatis 
        quod commodi odit, dolor alias dolore rem maiores corporis nihil 
        harum quos molestiae recusandae itaque!
    </p>
    <p>Vitae, autem nemo quia eaque libero ea expedita at ipsa, 
        iusto repellat <span class="bold">suscipit molestias maiores esse itaque obcaecati</span>  
        consequuntur illum sint provident! Minus, qui cum? Rem nihil 
        delectus assumenda ullam!
    </p>
    <div>
        <h2 id="intestazionedue">QUESTA INTESTAZIONE E IL PARAGAFO SI TROVANO DENTRO AL DIV</h2>
        <p>Lorem ipsum dolor,<span class="bold">sit amet consectetur adipisicing elit. </span>  
            Reprehenderit quasi deectus vel explicabo recusandae 
            deleniti iure sed simillique, error accusantium quidem officia 
            repellat voluptatem nobis! Rem quibusdam ea consequatur fugit!
        </p>
    </div>
    <div class="myclass">
        <h3>QUESTA INTESTAZIONE STA NEL DIV</h3>
    </div>
    <br>
    <hr>
    <div class="myclass2">
        <h4>INTESTAZIONE 4</h4>
    </div>
    <p class="testobianco grassetto"> Lorem ipsum dolor sit amet consectetur, 
        adipisicing elit. Impedit itaque excepturi omnis quisquam! Quis et iusto, 
        aliquid iure repellat quod laudantium minima maiores eaque incidunt nemo, 
        porro consequuntur asperiores! Ipsum.
    </p>
    
    <p class="bold">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
        Accusantium laborum optio, ea iusto adipisci itaque, quam 
        recusandae reprehenderit, eaque explicabo quo nemo consequuntur 
        velit cum totam aliquam. Voluptate, atque architecto?</p>
</body>
</html>

Copy to Clipboard

/*--ESEMPIO DI EXTERNAL STYLE*/
/*--In questo foglio di stile h1 è il selettore, mentre color e text-align
    sono due proprietà. La prima imposta il colore del testo mentre con la
    seconda informiamo il browser che il testo deve essere centrato.
    In questo esempio il selettore h1 ha tre impostazioni della
    proprietà color,ma con valori diversi. Quella inline vince su tutte.*/
h1{
    color: blueviolet;
    text-align: center;
}
/*--Il selettore di elementi seleziona gli elementi HTML 
    in base al nome dell'elemento. In questo caso i paragrafi.*/
p{
    color: red;
    text-align:left;
}
/*--Selezione di un elemento h2 in base al suo identificativo(id)
    la proprietà background-color specifica il colore di sfondo
    dell'elemento*/
#intestazionedue{
    color: chocolate;
    text-align: center;
    background-color: aquamarine;
}
/*--Selezione di un elemento div in base alla classe. La proprietà border
    specifica una bordo di 5px solid di colore rosso. Volendo si possono
    impostare le tre proprietà singolarmente.*/
.myclass{
    color: white;
    background-color: brown;
    text-align: center;
    border: 5px solid red;
}
/*--Il selettore di raggruppamento seleziona tutti 
    gli elementi HTML con le stesse definizioni di stile.*/
h1,h2 {
    border:2px solid black
}
/*--In questo esempio applico un font al div*/
.myclass2{
    font-size: large;
    font-family: 'Courier New', Courier, monospace;
    font-style: italic;
    border: 5px solid red;
}
/*--lo stile verrà applicato solo ai tag span che presentino 
     l’attributo class="bold"*/
span.bold{
    background-color: blue;
    border:2px solid green;
    color:white;
    font-weight:bold;
}
/*--Questa regola applicherà gli stili impostati a tutti gli elementi 
    in cui siano presenti (in qualunque ordine) i nomi delle classi 
    definiti nel selettore. Avranno dunque il testo biano e in 
    grassetto questi paragrafi:<p class="testobianco grassetto">...</p>*/
p.testobianco.grassetto {
    color:white; 
    font-weight:bold;
    background-color: blue;
}

LINK AL CODICE SU GITHUB

GITHUB

CSS INTRODUZIONE

LA REGOLA DEL CSS