INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Stilizzare gli elementi HTML accedendo agli attributi coi CSS

Design di siti Web con HTML e CSS
Disegno di siti Web con HTML, CSS e Dynamic HTML.

In una lezione della guida ai CSS abbiamo visto come impostare stili attraverso la definizione di classi e ID. Possiamo evitare di impostarne e "colpire" gli elementi che ci interessano semplicemente individuando gli attributi che li caratterizzano.

La, che prevede l'utilizzo delle parentesi quadre, sintassi è la seguente:

elemento[attributo]
{
     stile: ...;
}

O anche valorizzando l'attributo in questione:

elemento[attributo="valore"]
{
     stile: ...;
}

Per Internet Explorer, fino alla versione 8, è necessario lavorare in XHTML, mentre per altri browser il funzionamento avviene anche senza la specifica di una !DOCTYPE.

Vediamo dunque un esempio:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div[title]
{
    color: #FF0000;
}
</style>
</head>
<body>

<div>Prima riga...</div>

<div title="Testo alternativo">Seconda riga...</div>

</body>
</html>

Abbiamo individuato tutti i "div" che contengono un attributo "title". Ma possiamo anche individuare degli specifici "title", come segue:

div[title="Testo alternativo"]

In questo modo non tutti i "div" saranno individuati dallo stile, ma solo quelli che contengono uno specifico valore.

Questo sistema è utilissimo per i form, onde individuare ad esempio le caselle di testo piuttosto che i bottoni:

input[type="text"]
{
    background: #EEEEEE;
}
input[type="submit"]
{
    background: #555555;
}

Si provi ad impostare un form per verificare il funzionamento dell'esempio.

TAGS - parentesi quadre css, selettori attributi css

IN EVIDENZA
Una slidegallery con jQuery Pagamenti online con PayPal e PHP Riavviare IIS Guadagna col tuo sito grazie a TradeD... Effetto ombra su testo con Photoshop Guida XHTML Riscrivere le URL con Asp Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Referenze dei Tag Html HTTP 500 internal server error Introduzione ad Ajax ed Asp con Jscri... Breve guida a jQuery Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript

HOT LINKS
Corsi online Guadagna col sito Hosting 20 euro Mr.Webmaster PHP&Linux ExtroWebSite gDesign NetFree TutorialWeb Dablones AiutoPC AspCode MorpheusWeb WebIsland WebmasterRisorse PCSelf