Sei sulla pagina 1di 2

HTML CODICI

<!DOCTYPE html>
<html></html>

<head></head>
<title></title>
<body></body>

Titolo: <h1></h1> (numeri fra 1 e 6)


Paragrafo: <p></p>

Immagine: <img src="urlimmagine"/>


Link: <a href="urllink">scrittacorrispondente</a>

Lista numerata: <ol></ol>


Lista con pallino: <ul></ul>
Elementi di una lista: <li></li>

Stile: <p style="contenuto"></p>


Fra le virgolette ci pu essere (separati da un ; ):
1. text-alignment:center/left/right
2. background-color:red
3. color:red (oppure color:#cc0000)
4. font-family:Arial (separati da virgole per pi scelta)
5. font-size:12px (oppure: font-size:1em)

Grassetto <strong></strong>
Corsivo <em></em>

Tabella: <table></table>
<thead> <tr>
<th colspan="numerocolonneoccupate">titolo<th>
</tr></thead>
<tbody>
Nuova riga <tr></tr>
Nuovo elemento in una riga <td></td>
<tbody>

Divisorio <div></div>
Isolatore di un elemento <span></span>

<!--I'm a comment!-->

CSS
<link type="text/css" rel="stylesheet" href="stylesheet.css"/> collegamento per l'html
<style></style> per mettere css dentro al file html, va messo dentro <head>

p{ scrittura di base (p= elemento html, fra le graffe gli style)


height/width:100px;
border:1px solid/dashed/dotted black; border-width border-color border-radius(angoli curvi,
100% un cerchio)
text-decoration:none;
margin:auto;
text-align:center;
}

/*I'm a comment!*/

* {...} selettore universale (tutta la pagina)

div div h3 { ...} applica gli style solo al h3 che sta sotto a due div

div > p {...} solo il p che sta immediatamente sotto a div, senza altri cosi prima tipo <ul>
<elemento class="parola"> classe, in css si indica .parola {...} per tanti elementi
<elemento id="parola"> classe, in css si indica #parola {...} per un singolo elemento

selector:pseudo-class_selector esempi:
a:hover {...}
a:link An unvisited link.
a:visited A visited link.
p:first-child il primo di tanti p nati da uno stesso indicatore
p:nth-child(2) il secondo (si pu mettere qualsiasi numero)

display:block massima larghezza, niente di fianco


display:inline-block massima larghezza, altro di fianco
display:inline solo spazio necessario, altro di fianco
display:none elemento sparito

margin lo spazio attorno all'elemento, fa variare la distanza tra elementi


border il bordo
padding lo spazio tra contenuto e bordo, fa variare la distanza tra di essi
content il contenuto
T=top B=bottom L=left R=right anche numeri negativi per direzione opposta

margin:auto (centro) margin-left/right/top/bottom:2px margin: 1px (top) 2px (right) 3px 4px
padding:10px padding-left/right/top/bottom:2p padding: 1px (top) 2px (right) 3px 4px

float:right/left indica la posizione


clear:right/left/both elemento si mette sotto ai floating di destra, di sinistra o tutti
position:static
position:absolute sposta in base al 1 elemento genitore che non ha position:static
position:relative sposta rispetto alla posizione static di partenza
position:fixed scrollando la barra laterale, l'elemento rimane fisso
z-index:1 sempre sopra a tutti