Lezione_7-1 - Posizionamento statico

Questo è il paragrafo 1. Il testo è inserito in un elemento di tipo p. Gli elementi p nello standard HTML sono classificati come grouping content. Comunemente sono utilizzati per contenere paragrafi di testo ma possono contenere altri elementi per enfatizzare il testo quali em e mark o collegamenti quali a. L'elemento p è di tipo block. Notate come le sue dimensioni aumentano man mano che viene aggiunto testo e come la sua ampiezza occupa tutta la content area dell'elemento che la contiene.

Questo è il paragrafo 2. Le proprietà di stile della div bordata di verde che stò utilizzando per mostrare il posizionamento static degli elemeni sono le seguenti:

.contenitoreStatico{
	background-color:beige;
	border-style:solid;
	border-color:green;
	padding:20px;
	margin:20px;
}			

Questo è il paragrafo 3. Le proprietà di stile degli elementi p in contenitoreStatico sono le seguenti:

.contenitoreStatico p{
	background-color:yellow;
	margin: 10px;
	border-style: solid;
	border-color:lime;
	padding:2px;
}			

Questo è il paragrafo 4. I frammenti di script css sopra mostrati sono contenuti in un elemento pre nello standard HTML è classificato come grouping content, lo stesso dell'elemento p, ma è destinato a contenere blocchi di testo preformattati nei quali la struttura è fornita da convenzioni tipografiche invece che da elementi. Tipicamente è utilizzato per includere frammenti di codice la cui struttura rispetta le convenzioni del linguaggio rappresentato. Le proprietà di stile che ho assegnato agli elementi pre in contenitoreStatico sono le seguenti:

.contenitoreStatico pre{
	background-color:lightgray;
	margin: 10px;
	border-style: solid;
	border-color:gray;
	padding:2px;
}			

Questo è il paragrafo 5. L'evidenziazione arancio è ottenuta inserendo il testo da evidenziare, in un elemento mark. Le proprietà di stile che ho assegnato agli elementi mark inseriti negli elementi p in contenitoreStatico sono le seguenti:

.contenitoreStatico p mark{
	background-color:orange;
	color:blue;
}			

Questo è il paragrafo 6. Ora, in questo paragrafo, inserisco un'immagine. Si tratta della foto di una grossa lucertola, un ramarro.
Ramarro (da Wikipedia)
Il ramarro orientale (Lacerta viridis Laurenti 1768) è un sauro della famiglia dei Lacertidi, di colore verde brillante, rapidissimo nei movimenti. Può vivere fino a vent'anni. La forma del corpo è quella tipica delle lucertole. Le dimensioni sono però maggiori: la lunghezza può raggiungere i 45 cm (coda compresa), anche se generalmente non supera i 12 cm (coda esclusa). Nei maschi, il dorso è verde brillante; nelle femmine è più scuro e presenta da due a quattro striature longitudinali chiare.Le parti ventrali tendono al giallo. Nei maschi il pene è di color giallo ocra. Nel periodo degli amori, la gola dei maschi diventa azzurra. I maschi si distinguono inoltre dalle femmine per le dimensioni della testa (più grossa) e per una maggiore larghezza della base della coda.
L'immagine è contenuto in un elemento img, un elemento di tipo display:inline. Le proprietà di stile che ho assegnato agli elementi img inseriti negli elementi p in contenitoreStatico sono le seguenti:

.contenitoreStatico p img{
	width:10%;
	margin:10px;
	border-style: solid;
	border-color:blue;
	padding:12px;		
}			

Questo è il paragrafo 7. Di seguito a questo paragrafo inserisco la foto del ramarro direttamente in contenitoreStatico.
Il ramarro orientale (Lacerta viridis Laurenti 1768) è un sauro della famiglia dei Lacertidi, di colore verde brillante, rapidissimo nei movimenti. Può vivere fino a vent'anni. La forma del corpo è quella tipica delle lucertole. Le dimensioni sono però maggiori: la lunghezza può raggiungere i 45 cm (coda compresa), anche se generalmente non supera i 12 cm (coda esclusa). Nei maschi, il dorso è verde brillante; nelle femmine è più scuro e presenta da due a quattro striature longitudinali chiare.Le parti ventrali tendono al giallo. Nei maschi il pene è di color giallo ocra. Nel periodo degli amori, la gola dei maschi diventa azzurra. I maschi si distinguono inoltre dalle femmine per le dimensioni della testa (più grossa) e per una maggiore larghezza della base della coda.

.

Questo è il paragrafo 8. Le proprietà di stile che ho assegnato agli elementi img inseriti in contenitoreStatico sono le seguenti:

.contenitoreStatico img{
	width:15%;
	margin:10px;
	border-style: solid;
	border-color:red;
	padding:12px;		
}			

.contenitoreStaticoConElementiFlottanti p mark{
	background-color:orange;
	color:blue;
	float:right;
}			

.contenitoreStaticoConElementiFlottanti p img{
	width:10%;
	margin:10px;
	border-style: solid;
	border-color:blue;
	padding:12px;
	float:left;
}			

.contenitoreStaticoConElementiFlottanti img{
	width:15%;
	margin:10px;
	border-style: solid;
	border-color:red;
	padding:12px;
	float:left;
}			

.staticaInterna{
	background-color:beige;
	border-style:solid;
	border-color:green;
	padding:20px;
}
.staticaInterna p{
	background-color:yellow;
	width:80%;
	padding:0px;
	margin:10px;
}
.staticaInterna p mark{
	background-color:orange;
	color:blue;
	float:right;
}
.staticaInterna img{
	all:unset;
	width:17%;
	margin:15px 5px 0px 0px;
	border-style: solid;
	border-color:lime;
	float:right;
}