Sono una serie di tecniche atte a migliorare i nostri fogli di stile dal lato estetico ma che non servono per modificare la struttura vera e propria.

Bisogna ricordarsi che dobbiamo creare fogli di stile di tipo cross-browser e facili da modificare in caso di manutenzione futura.

Inserire un foglio di stile secondario ci è utile per poter far modifiche senza intaccare il foglio di stile principale.

Selettori di attributo

Teoria:

• selettore[att^="val"]: dove l’attributo del selettore inizia con il valore “val”
• selettore[att$="val"]: dove l’attributo del selettore termina con il valore “val”
• selettore[att*="val"]: dove l’attributo del selettore contiene con il valore “val”

Sono molto utili se si vogliono modificare per esempio i link.

Un esempio:

1. <div class=“esempio”>
2. <h2>Selettori di attributo</h2>
3. <a href=“mailto:test@test.it”>Sono un link di tipo “mailto”</a>
4. <a href=“htto://test.pdf”>Punto ad un PDF</a>
5. <a href=“http://delicious.com”>Contengo la parola “delicious”</a>
6. </div>

Ora con il foglio di stile separato potremo associare ad ogni link un’icona personalizzata, così:

1. a[href$=".pdf"]{
2. background: url(img/page_white_acrobat.png) no-repeat center right;
3. padding: 0 20px 5px 0;
4. }
5. a[href^="mailto"]{
6. background: url(img/email_open.png) no-repeat center right;
7. padding: 0 20px 5px 0;
8. }
9. a[href*="delicious"]{
10. background: url(img/delicious.jpg) no-repeat center right;
11. padding: 0 20px 5px 0;
12. }

per browser come IE6, che non permette l’uso di questa tecnica, verrà visualizzato semplicemente il link.

Selettori adiacenti

Questo tipo di selettore permette di modificare insieme due tag html adiacenti.

Un esempio con i tag p e h2:

1. <div class=“esempio selettori_adiacenti”>
2. <h2>Selettori adiacenti</h2>
3. <p>Questo &amp;egrave; il primo paragrafo, e come tale &amp;egrave; speciale.</p>
4. <p>Lorem ipsum dolor sit amet..</p><p>Lorem ipsum dolor sit amet..</p>
5. </div>

Ed ecco il selettore:

1. .selettori_adiacenti h2 + p {
2. font-size: 200%;
3. border-bottom : 1px dotted #000;
4. }

In questo caso, ogni volta che il browser incontrerà prima il tag <h2> e poi il tag <p> modificherà lo stile in base al nostro selettore creato.

Bordi arrotondati

Quando ancora si impaginava con le tabelle, non si aveva la possibilità di modificare i bordi arrotondandoli. Una prima innovazione sono stati i “Nifty Corners Cube” .

Con l’era del CSS3, si ha la possibilità di modificare anche i bordi.

Ecco i selettori:

• “border-radius” (la versione standard CSS3)
• “-moz-border-radius” per Mozilla
• “-webkit-border-radius” per Webkit
• “-o-border-radius” per Opera
• “-icab-border-radius” per iCab
• “-khtml-border-radius” per Konqueror

border-radius: indica il raggio dell’angolo del bordo.

Naturalmente si possono specificare anche i singoli angoli con le proprietà topright,topleft,ecc.(-moz-border-radius-topright (angolo alto a destra)).

La prima specifica ci permette anche di specificare per ogni singolo browser il tipo di angolo.