Oreste
Signore, <oreste.signore@isti.cnr.it>
ISTI
Area della Ricerca CNR
via Moruzzi, 1
56124 Pisa
Questa versione è ancora in fase di revisione
:",
ed è quindi una coppia
property/value
h1 {color: red;}
h1 indica che la regola
va applicata a tutti gli elementi h1 del documento
color
red
p {color: #00ff00; font-size: 24px}
p saranno in verde
p saranno con
caratteri di dimensione 24px
<h2 style="color: red; text-transform:
uppercase;">Testo heading 2</h2>
head di un documento HTML
<link> nella
componente head del documento HTML
html
head e
body
font-family)
prendono il valore specificato per l' elemento padre
h1 rispetto a quella su
body
background)
Esempio di codifica di una regola (sintassi BNF)
<font-weight> ::= font-weight: <value>
This style is used if, for example, the definition of <value> needs to be given separately. Some of the syntax definitions can be quite complicated. The notation used is as follows:
| Notation | Meaning |
|---|---|
| <Abc> | A value of type Abc. Some of the more common types are discussed later. |
| abc | A keyword that must appear exactly as written. |
| X Y Z | X must occur then Y then Z in that order. |
| X | Y | X or Y must occur. |
| X || Y || Z | X, Y or Z or some combination in any order. |
| [ Abc ] | The square brackets are used to group items together. |
| ST* | ST is repeated zero or more times. ST can be a bracketed set of items. |
| ST+ | ST is repeated one or more times. |
| ST? | ST is optional. It can either appear once or not at all. |
| ST {A,B} | ST must occur at least A times and at most B times. |
(rif. cap. 3 Wium Lee & Boss)
em per creare style
sheet scalabili
em per
impostare il font-size
vedi cap. 4 cssPrimer
vedi cap. 5 cssPrimer
vedi cap. 6 cssPrimer
vedi cap. 7 cssPrimer
vedi cap. 8 cssPrimer
<div> (division) è
un elemento block-level
<span> (span of words)
è un elemento inline
class
<div class="nomeClasse"> <p> In una div possono comparire elementi inline, e anche <span class="specificaSpan"> parole che assumono le caratteristiche</span> assegnate alla classe "specificaSpan".<br /> La div può avere caratteristiche di visualizzazione particolari. </p> </div>
| Tipo | Significato (la regola si applica a ...) | Esempio |
|---|---|---|
| selettore universale | tutti gli elementi nel documento |
*
|
| element type | tutti gli HTML elements del tipo del selettore |
h1
|
| class selector | tutti gli elementi HTML che precedono il punto (o tutti, se non è specificato nulla) la cui definizione li rende elementi della classe il cui nome segue il punto |
.articletitle h1.important
|
| ID selector | l' unico elemento nel documento il cui attributo coincide con la stringa che segue il simbolo # |
#special3
|
| pseudo-element selector (CSS2) | le istanze dello pseudo-element |
p:first-letter
|
| pseudo-class selector (CSS2) | istanze della pseudo-classs, la cui presentazione può variare a seguito dell' interazione dell' utente con la pagina |
a:hover
|
| descendant selector | tutti gli elementi del tipo più a destra di una lista (separata da spazi), solo quando l' element type discende dal tipo alla sua sinistra |
p em
|
| parent-child selector (CSS2) | tutti gli elementi del tipo specificato a destra del simbolo ">", che sono figli degli elementi a sinistra del simbolo ">" (è una forma più specifica del descendant selector) |
body > p
|
| adjacent selectors (CSS2) | tutti gli elementi del tipo specificato a destra del segno "+", adiacenti (nel codice HTML) agli elementi a sinistra del segno "+" |
h1+h2
|
| attribute selectors (CSS2) | attributi che corrispondono al profilo specificato nelle parentesi quadre |
p[align]
|
La regola si applica a:
tutti gli elementi nel documento
* {
color: red;
font-style: ;
}
La regola si applica a:
tutti gli HTML elements del tipo del selettore
body {
color: white;
background-color: black;
}
La regola si applica a:
tutti gli elementi HTML che precedono il punto (o
tutti, se non è specificato nulla) la cui
definizione li rende elementi della classe il cui nome
segue il punto
.blue {
font-family: verdana, arial, sans-serif;
color: #0000ff;
}
Saranno in blu tutti gli elementi per i quali si
specifica
class="blue" (esempio)
Si possono definire gli elementi che possono appartenere a una classe (esempio):
h1,h2.blue {
font-family: verdana, arial, sans-serif;
color:#0000ff;
}
La regola si applica a:
l' unico elemento nel documento il cui attributo
coincide con la stringa che segue il simbolo #
La regola si applica a:
le istanze dello pseudo-element
(è una proprietà CSS2)
La regola si applica a:
istanze della pseudo-classs, la cui presentazione
può variare a seguito dell' interazione dell'
utente con la pagina
(è una proprietà CSS2)
Il CSS2 definisce queste pseudo classi:
La regola si applica a:
tutti gli elementi del tipo più a destra di
una lista (separata da spazi), solo quando l' element
type discende dal tipo alla sua sinistra
La regola si applica a:
tutti gli elementi del tipo specificato a destra del
simbolo ">", che sono figli degli elementi a sinistra
del simbolo ">" (è una forma più
specifica del descendant selector)
(è una proprietà CSS2)
La regola si applica a:
tutti gli elementi del tipo specificato a destra del
segno "+", adiacenti (nel codice HTML) agli elementi a
sinistra del segno "+"
(è una proprietà CSS2)
La regola si applica a:
attributi che corrispondono al profilo specificato
nelle parentesi quadre
(è una proprietà CSS2)
[attribute] – matches if the
attribute is defined at all for the element(s)
[attribute="setting"] – matches only
if the attribute is defined as having the value of
setting
[attribute~="setting"] – matches
only if the attribute is defined with a space-separated
list of values, one of which exactly matches "setting"
[attribute|="setting"] – matches
only if the attribute is defined with a hyphen-
separated list of "words" and the first of these words
begins with setting