CSS2
Per poter indicare ulteriormente i div senza creare troppi disordini con la gerarchia è possibile introdurre un’ulteriore
differenziazione: div:nth-child(2) → indica che il secondo div verticale ha caratteristiche diverse. È possibile utilizzare
anche una divisione che si basa sulla parità e disparità dei div utilizzando nth-child(even) o nth-child(odd)
La conta dei child (figli) deve corrispondere a una conta per posizioni: se il tag indicato non è presente, allora la
formattazione salta. Nel caso di sequenze non uniformi viene inserito il tag nth-of-type: tramite questo tag si va ad
evidenziare e modificare l’esatta particella corrispondente. Se voglio modificare il quarto paragrafo di una div, lo
evidenzierò con p:nth-of-type(4) {}
È possibile utilizzare delle pseudo classi per ampliare la navigazione all’interno del dom, applicabili a qualsiasi
elemento
<a href=”#”> prova </a>
Può essere modificato nel CSS a seconda della condizione in cui lo poniamo: a:active{color:green}, il testo viene
colorato di verde all’attivazione; a:link{color:red;}, il testo è normalmente rosso; a:visited{color:blue;}, dopo aver
cliccato sul collegamento il testo diventa blu; a:hover{color:brown;}, al passaggio del mouse Si tratta di codice CSS 2,
ossia più datato rispetto a quello attuale.
La stessa tecnica è applicabile ai div → div:hover{background:red;} indico che al passaggio del mouse sopra al
suddetto div, questo cambierà il suo colore di sfondo in rosso. Le regole base vengono dunque mantenute, ma al
tempo stesso sovrascritte dalle informazioni contenute nell’hover.
Creazione di un menù a tendina a scomparsa
li>ul {display:none; visibility:hidden; opacity:0;}
li:hover ul {display:block}
Nella prima affermazione il secondo menù viene reso invisibile, con l’attuazione della seconda affermazione lo
rendiamo nuovamente visibile al passaggio del mouse sulla casella corrispondente.
Lavorazione degli pseudo-elementi: si tratta di un sistema di lavorazione del dom a moduli, permettendo di inserire
anche degli elementi speciali
p::first-line → impostazione di caratteristiche particolari ai paragrafi, va sempre utilizzato con i doppi due punti
p::first-letter → aggiunte sulla prima lettera
Sono inoltre possibili delle lavorazioni speciali utilizzando il tag <form> : è possibile attribuirgli un valore, per
richiamarlo in modo più immediato all’interno del CSS.
<label> <input type=”text” placeholder=”nome”> Nome </label> all’interno del dom
input [placeholder=”nome”] {width:200px;} all’interno del foglio di stile
<input type=”button”>
input [type=”button”] {background-color:red;}
Nella creazione di un container al 100%, deve essere necessariamente essere creata una gerarchia per dividere la
parte che va al 100% dello schermo da quella che deve invece rimanere centrata nel caso di una diminuzione di
dimensione dello stesso (tramite zoom). Se si necessita di avere dei menù a tendina portati sempre al 100%, nella voce
corrispondente nel CSS va aggiunta la voce position:absolute;
