• CHI SONO
    • Status
  • Business Improv
  • Comunicazione
    • CNV
  • eBook
  • VENDITA
    • Il venditore sociopatico
    • Gestione del cliente
  • WordPress
    • Pillole WordPress
    • Temi per WordPress
      • Avada
  • Web Jungle
Pikadilly – Blog per smanettoni in via di sviluppo
Pikadilly - Blog per smanettoni in via di sviluppo
  • CHI SONO
    • Status
  • Business Improv
  • Comunicazione
    • CNV
  • eBook
  • VENDITA
    • Il venditore sociopatico
    • Gestione del cliente
  • WordPress
    • Pillole WordPress
    • Temi per WordPress
      • Avada
  • Web Jungle
Home
Risorse
Css

Css:Formattare testo e immagini con i Selettori di attributo

Maggio 1st, 2008 Pikadilly Css 0 comments

Oggi invece di andare a brucare erba in campagna ho passato un pomeriggio leggendo…e leggi quà, leggi là ho imparato delle cose nuove e mi è venuta voglia di scrivere qualche altra pillolina che potrebbe servire per formattare in maniera particolare i form o i moduli in generale. Tutto questo attraverso i selettori di attributo. Ma prima di vedere come formattare i form vorrei scrivere dei post riguardo questi particolare e utili selettori.

Cosa sono i selettori di attributo?

I selettori di attributo formattano gli elementi in base ai loro attributi, ovviamente tramite css. Ci sono quattro tipo di selettori di attributo: selettore di attributo semplice, selezione basata su un valore di attributo esatto, selezione su un valore di attributo parziale e selettore di attributo specifico.
In questo post ne vedremo due:il selettore di attributo semplice e la selezione basata su un valore di attributo esatto.

Il selettore di attributo semplice

Il selettore di attributo semplice formattano tutti quegli elementi che hanno un tipo di attributo al di là del loro valore.

Se vogliamo che tutti i paragrafi abbiano un colore arancio ma allo stesso tempo ogni paragrafo deve avere diversi font possiamo usare il selettore di attributo semplice e le varie classi applicate al tag <p>. Vediamo come con l’esempio:

Css:

p[class]{
color: #FF9900;/*colore arancio*/
}

p.kiwi{

}
p.arancio{
font-family: “Courier New”, Courier, monospace;
}

p.banana{
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Xhtml:

<p class=”kiwi”>Questo è un paragrafo con calsse kiwi.</p>

<p class=”arancio”>Questo è un paragrafo con calsse arancio.</p>
<p class=”banana”>Questo è un paragrafo con calsse banana.</p>

Il risultato sarà questo:

Selettore di attributo semplice

Il primo paragrafo a cui è applicata la classe .kiwi usa il font di default della pagina che è Trebuchet Ms; il secondo, .arancio, usa la famiglia di font Courier New”, Courier e monospace; il terzo, .banana, invece usa la famiglia capeggiata da Verdana.

Come si vede nell’esempio tutti i paragrafi sono color arancione, avrei potuto semplicemente scrivere p {
color: #FF9900;}
e automaticamente tutti i paragrafi si sarebbero formattati con quel colore, ma se non volessi tutti i paragrafi del documento arancioni questa soluzione è utile, certo agli altri paragrafi non dovrò applicare nessuna classe perchè se no il selettore di attributo mi colorerà quel paragrafo di arancione.

Selezione basata su un valore di attributo esatto

Per andare a formattare quegli elementi che hanno un determinato valore di attributo si usa questo tipo di selezione, vediamo l’esempio.

Css:

a[href=”http://www.pikadilly.it”]{
color: #FF9999;

}

Xhtml:

<a href=”http://www.pikadilly.it”>Blog</a>

L’attribuo herf ha come valore l’indirizzo del mio blog, nel css ho scritto che ogni tag a con attributo href con valore l’indirizzo del mio blog deve cololare il link di rosa pallido.
Come nell’immagine:

Selezione basata su valore di attributo esatto

Allo stesso tempo voglio però che altri link che rimandano al mio blog siano di colore arancio pallido, allora mi servirò anche dell’attributo title per formattare le altre ancore, in questo modo:

Css:

a[href=”http://www.pikadilly.it”][title=”Il mio blog”]{
color: #FFCC33;
}

xhtml:

<a href=”http://www.pikadilly.it” title=”il mio blog”>Blog</a>

Così dico al css di andarmi a colorare di arancio pallido tutti quei link che hanno come attributo herf con l’indirizzo del mio sito e l’attributo title con la dicitura “il mio blog”.

Selezione basata su valore di attributo esatto con title

Se vogliamo applicare anche le pseudoclassi :visited, :active e :hover basterà dichiarare questo nel css:

a:hover[href=”http://www.pikadilly.it”][title=”il mio blog”]{
color: #FF3300;
}

o

a[href=”http://www.pikadilly.it”][title=”il mio blog”]:hover{
color: #FF3300;
}

Funziona sia mettendo :hover dopo le parentesi che contengono gli attributi o prima.

Questi tipi di selettori funzionano sia con l’ultima versione di IE, con Firefox (of course), Opera e Safari per windows.

Per vedere questi selettori in azione ecco l’esempio pratico:

Selettori di attributo

Facebook Twitter

Chi sono

Mi chiamo Francesca L. Luciani, sono una consulente di comunicazione politica e di comunicazione teatrale. Nel tempo libero sono una mezza sega.

Ultimi post

Apr 18th 10:11 AM
Comunicazione

SMM di INPS blasta gli utenti: può farlo?

Mar 18th 11:09 AM
Comunicazione

Commenti: sono sempre necessari?

Ott 3rd 10:46 AM
Comunicazione

Come evitare di autoflagellarti quando la gente non legge

Giu 6th 9:43 AM
Comunicazione

Perché ho cancellato la newsletter?

Apr 12th 3:00 PM
Vendita

Se vendi per forza non vendi niente

Smanettare

  • Risorse
  • Css
  • Dreamweaver
  • Forum
  • Grafica
  • Photoshop
  • Joomla
  • Phpbb3

Archivi

  • Informativa sulla privacy
  • Cookie Policy
  • Sitemap
  • Back to top

CHI SONO… SERIAMENTE

Francesca L. Luciani
Consulente di comunicazione politica e comunicazione teatrale.
www.francescaluciani.it

COPYRIGHT

Licenza Creative Commons
Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 4.0 Internazionale.
© Pikadilly 2020 Tutti i diritti riservati. Le immagini sono dei rispettivi autori. Cookie Policy
Il tema è di: Mip Themes
Questo sito raccoglie dati statistici anonimi sulla navigazione, mediante cookie installati da terze parti autorizzate, rispettando la privacy dei tuoi dati personali. Cliccando Ok accetti il servizio e gli stessi cookie. Leggi la cookie policy