Ottimizzare.com
Guideline: CSS ver 1.0
Data: 25 feb 2002
Autore: Claudio Santori
OGGETTO: linee guida per la creazione di un CSS
- link su sito web
- nome file posizione
- css base
- css per media alternativi
- advice vari
************************
LINK SU SITO WEB
************************
Se il CSS e' in un file esterno:
<link rel="stylesheet" type="text/css" media="all" href="/nome_css.css" />
media definsice il tipo di periferica e potrebbe essere: "all", "screen", "print"
************************
NOME FILE - POSIZIONE
************************
nomesito_style.css o nomesito.css
No solo style.css
Posizione: root
************************
CSS BASE
************************
/* CSS by Claudio Santori Ottimizzare.com Copyright */
/* tag generici */
body {
background: #FFFFFF;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 100%;
color: #000000;
padding-right: 10px;
padding-left: 10px
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 95%;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
h1 {
font-size: 200%;
color: #000000;
}
h2 {
font-size: 180%;
}
h3 {
font-size: 152%;
padding-left: 8px;
}
li {
line-height: 125%
}
/* colore link - attenzione all'uso di colori non standard */
a:link {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffcc00;
FONT-FAMILY: Verdana, Arial, sans-serif;
TEXT-DECORATION: none;
background-color: #000000;
}
a:visited {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-FAMILY: Verdana, Arial, sans-serif;
TEXT-DECORATION: none;
background-color: #000000;
}
a:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffcc00;
FONT-FAMILY: Verdana, Arial, sans-serif;
TEXT-DECORATION: underline;
background-color: #000000;
}
/* menu di navigazione */
A.menuon:link {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffcc00;
FONT-FAMILY: Verdana, Arial, sans-serif;
TEXT-DECORATION: none;
background-color: #000000;
}
A.menuon:visited {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffcc00;
FONT-FAMILY: Verdana, Arial, sans-serif;
TEXT-DECORATION: none;
background-color: #000000;
}
A.menuon:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffcc00;
FONT-FAMILY: Verdana, Arial, sans-serif;
TEXT-DECORATION: underline;
background-color: #000000;
}
A.menuoff:link {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-FAMILY: Verdana, Arial, sans-serif;
TEXT-DECORATION: none;
}
A.menuoff:visited {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-FAMILY: Verdana, Arial, sans-serif;
TEXT-DECORATION: none;
}
A.menuoff:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-FAMILY: Verdana, Arial, sans-serif;
TEXT-DECORATION: underline;
}
/* stili personalizzabili */
.stile {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
letter-spacing: 0px;
word-spacing: 1px;
}
.grigio {
FONT-WEIGHT: normal;
font-size: 10px;
color: #999999;
font-family: Verdana, Arial, sans-serif;
}
/* fine css www.ottimizzare.com copyright */
**************************************************
**************************************************
**************************************************
**************************************************
***********************************
css per media alternativi
***********************************
Si possono creare piu' css, uno in particolare per formattare il carattere
in fase di stampa. Si consiglia l'uso di questo secondo css alternativo
richiamato dalla riga
***********************************
CONSIGLI VARI
***********************************
Lavorare soprattutto con i tag ridefinendoli a proprio piacimento in modo
da rendere quanto piu' compatibili le pagine con Browser che non supportano
i css.
In pratica lavorare con h1 h2 p pre table etc. etc.
Per colori dei link non standard effettuare dei test con lettori campione
http://www.ottimizzare.com/download/guidelines/