CSS: classi e identificatori
Le Classi :
La definizione di classi permette di applicare lo stesso stile a tag differenti.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1 { font-style:italic; }
.hot { color:red; text-decoration:underline; }
</STYLE>
</HEAD>
<BODY>
<H1> Primo titolo </H1>
<H1 CLASS="hot"> Titolo da evidenziare </H1>
</BODY>
</HTML>
Identificatori :
Gli identificatori, permettono di definire delle regole che si applicano ad un solo elemento in un documento.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P { color:blue; }
#speciale { color:red; text-transform:uppercase; }
</STYLE>
</HEAD>
<BODY>
<I ID="speciale">test</I>
</BODY>
</HTML>
CSS: posizionamento
Padding :
Definisce lo spazio tra il bordo ed il contenuto dell?elemento.
Sono ammessi valori negativi. Top, right, bottom, e left
padding possono essere cambiati indipendentemente.
Proprieta' di Padding :
NN: Netscape, IE: Internet Explorer, W3C: Web Standard
|
Proprietà |
Descrizione |
Valori |
NN |
IE |
W3C |
|
Padding |
Per impostare le quattro proprietà in una sola volta |
padding-top
padding-right
padding-bottom
padding-left |
4.0 |
4.0 |
CSS1 |
|
padding-bottom |
Imposta il padding in basso |
length
% |
4.0 |
4.0 |
CSS1 |
|
padding-left |
Imposta il padding a sinistra |
length
% |
4.0 |
4.0 |
CSS1 |
|
padding-right |
Imposta il padding a destra |
length
% |
4.0 |
4.0 |
CSS1 |
|
padding-top |
Imposta il padding in alto |
length |
4.0 |
4.0 |
CSS1 |
Note per i Browser
Note in IE 4.0+:
La proprietà non funziona correttamente con elementi inline ed immagini
Note in IE 5.0+:
Non funziona correttamente con tables, table cells ed input fields
Netscape 4.0+:
Non funziona correttamente con elementi inline, list items, tables, ed images
Proprietà CSS di posizionamento :
Definiscono la posizione di un elemento.
<html>
<head>
<title>Enter the title of your HTML document here</title>
</head>
<body>
<DIV STYLE="position:absolute; left:50px; top:200px;">
<TABLE WIDTH="300px" BGCOLOR="blue" BORDER="1">
<TR>
<TD>
<FONT COLOR="#ffffff">
prima riga tabella container
<DIV STYLE="position:relative; left:150px;">
<TABLE BGCOLOR="yellow" BORDER="1">
<TR>
<TD>
prima riga tabella content
</TD>
</TR>
</TABLE>
</DIV>
seconda riga tabella container
</FONT>
</TD>
</TR>
</TABLE>
</DIV>
</body>
</html>
