| Sintassi del codice categoria di CSS
|
|
Usando un puntino (.) seguito dal nome del codice categoria, dichiarate un codice categoria di CSS. Componete il nome del codice categoria voi stessi. Se desiderate fornire le proprietà/valori al vostro codice categoria, potete assegnarli dopo il nome del codice categoria.
|
|
.class-name { property:value; }
|
|
|
Potete premettere il puntino con il nome dell'elemento del HTML se desiderate usare lo stesso nome del codice categoria per gli elementi multipli, ma ciascuno con uno stile differente.
|
|
html-element-name.class-name { property:value; }
|
|
|
Potreste definire i codici categoria del foglio di stile per ciascuno, se desiderate un paragrafo viola della serie completa di caratteri e un paragrafo blu della serie completa di caratteri.
|
.purple {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #003399;
}
.blue {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #663399;
}
|
|
Allora applicare questo ai paragrafi differenti usando dopo il codice:
<p
class="purple">The
purple paragraph text
will go here.</p>
<p
class="blue">The
blue paragraph
text will go
here.</p>
|
|
| La modifica del <span>
|
|
Usando la modifica del <span>, potete anche applicare questo alle sezioni del HTML come questa: |
|
<p
class="purple">This
text will be purple
until you get to
<span
class="blue">these
words, which are
blue</span> and
then the text
carries on being
purple.</p>
|
|
|
Se desiderate visualizzare il codice in un differente colorare secondo la relativa lingua:
|
code.html { color: #4b0082 }
code.css { color: #191970 }
|
|
|
Per esempio, usando il class~= " pastoral ", possiamo assegnare le informazioni di stile a tutti gli elementi come segue:
|
|
*.pastoral { color: green } /* all elements with class~=pastoral */
|
|
| Ciò che segue assegna lo stile soltanto agli elementi H2 con class~= " pastoral ":
|
|
H2.pastoral { color: green } /* H1 elements with class~=pastoral */
|
|
| Dato queste regole, il primo caso H2 qui sotto non avrebbe testo verde, mentre il secondo:
|
<H2>Not green</H2>
<H2 class="pastoral">Very green</H2>
|
|
|
Senza un elemento collegato, potete dichiarare i codici categoria come segue:
|
|
.note { font-size: small }
|
|
| Esempio del codice categoria di CSS
|
<head>
<style type="text/css">
h1.css-section { color:#999999;}
p.css-section { color:#000099; }
</style>
</head>
<body>
<h1 class="css-section">CSS Class</h1>
<p class="css-section">CSS classes can be very useful</p>
</body>
|
|
|
|
|
CSS Class
CSS classes can be very useful
|
|
