Dispersed dokumentation

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Usare i fogli di stile (CSS) ======

**[[http://www.rigacci.org/docs/biblio/online/css2/cover.html|CSS2 Specification]]**

Per includere un foglio di stile si aggiunge il tag specifico dentro **%%<head>%%**,

<code html>
<head>
<link rel="stylesheet" href="style.css">
<style type="text/css">
@import "file.php?c=css";
</style>
</head>
</code>

La cosa più complicata è scrivere i selettori in modo che siano più generici possibile e sfruttino l'effetto cascata.

===== Attributo ID =====

Ciascun attributo **''ID''** deve **comparire una sola volta all'interno di una pagina**, in modo da permetterne l'identificazione univoca. Se più di un elemento deve essere etichettato con lo stesso valore, si utilizzerà l'attributo ''class''.

<code css>
#navigation {
	float			: left;
/*	border-width	: thin; */
/*	border-style	: dotted; */
/*	border-color	: #993366; */
	margin-top		: 0px;
	margin-left		: 0px;
	width			: 15%;
	height			: auto;
	padding			: 1ex;
}
</code>

Il selettore ''**#navigation**'' si applica a qualunque elemento (in quanto niente precede il segno ''**#**'') che abbia ''**ID="navigation"**''. Lo stile dell'esempio sopra crea un box allineato a sinistra se applicato ad una sezione del tipo:

<code HTML>
<div id="navigation">
<ul>
<li><a href="item1">Item1</a>
<li><a href="item1">Item2</a>
<li><a href="item1">Item3</a>
</ul>
</div>
</code>

===== Attributo CLASS =====

<code css>
.menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
</code>

Il selettore ''**.menu ul**'' si applica ad ogni elemento ''**ul**'' che sia discendente di un qualunque elemento (in quanto niente precede il punto) cha abbia un attributo ''**CLASS="menu"**''.

L'esempio precedente può essere applicato ad una lista con qualcosa del genere:

<code html>
<div class="menu">
<ul>
<li><a href="item1">Item1</a>
<li><a href="item1">Item2</a>
<li><a href="item1">Item3</a>
</ul>
</div>
</code>
Dispersed dokumentation

User Tools

Site Tools

Page Tools
