Costruire un sito Web 6 – CSS – Parte 4
Oggi parliamo di Margin, Padding e Border.
Margin
Margin serve per dare un margine tutto intorno a una fotografia piuttosto che a un paragrafo ect. Se noi scriviamo Margin:100px; vuol dire che metteremo 100px tutto intorno all’oggetto. Possiamo anche decidere di fare dei margini diversi. Se invece di un varolo ne mettiamo due Margin:100px 50px; metterono 100px sopra e sotto e 50px a destra e sinistra. Volendo possiamo anche cambiare il margine per ogni lato Margin:100px 50px 20px 40px; in questo caso avremo 100px sopra, 50px a destra, 20px sotto e 40px a sinistra del nostro oggetto. Esiste un’altro modo per dare margine.
- margin-top:100px;
- margin-left:50px;
- margin-bottom:20px;
- margin-right:40px;
In questo modo se lo desideriamo possiamo avere i margini dove vogliamo in modo più leggibile.
Padding
Il Padding funzione allo stesso modo di margin. La differenza sostanziale è che mentre margine da del margine intorno all’oggetto, padding da margine all’interno dell’oggetto stesso.
<html>
<head>
<title>Pagina web con CSS</title>
<style type=”text/css”>
.secondo {
color:pink;
background-color:#000080;
width:200px;
float:left;
text-align: justify;
position:relative;
padding:50px ;}
</style>
</head>
<body>
<p class=”secondo”>Nei primi tredici anni del suo impero il giovane imperatore dovette affrontare due guerre civili, causate – come testimonia Michele Psello nelle sue cronache – dai generali Barda Sclero e Barda Foca, che lo ritenevano troppo giovane per governare l’Impero.</p>
</body>
</html>
Il risultato.
Come vedete tutto intorno al testo abbiamo del margine. Senza padding il risultato è questo:
Border
Border si utilizza per dare uno stile al bordo dell’oggetto. Es:
<html>
<head>
<title>Webpage With Style </title>
<style type="text/css">
#quadrato-red {
background-color:red;
border: 10px yellow solid;
}
#quadrato-blue {
background-color:blue;
border-style: ridge solid dotted dashed;
border-color: green beige pink palegoldenrod;
border-width: 10px 5px 2px 1px;
}
#quadrato-green {
background-color:green;
border-radius:50%;
}
.quadrato{
width:400px;
height:400px;
margin:40px;
float:left;
}
</style>
</head>
<body>
<div id="quadrato-red" class="quadrato"> </div>
<div id="quadrato-blue" class="quadrato"> </div>
<div id="quadrato-green" class="quadrato"> </div>
</body>
</html>
Potete copiare il codice e vedere quello che fa. Col border bisogna specificare tre valore; la grandezza del bordo il colore e lo stile. border: 10px yellow solid;
- border-style:ridge solid dotted dashed; si da uno stile diverso per ogni bordo
- border-color: green beige pink palegoldenrod; si da un colore diverso per ogni bordo
- border-width: 10px 5px 2px 1px; si da una grandezza diversa per ogni bordo
- border-radius:50%; per creare dei cerchi o se utilizzate px anche bordi arrotondati
Se volete approfondire tutti gli argomenti fin qui trattati basta cercare su internet e troverete tutto.
Costruire un sito Web 4 – CSS – Parte 2
CLASSI e ID
Nel precedente articolo vi avevo parlato del CSS inline. Adesso cominciamo a vedere il CSS interno. Col CSS interno si può da stile a tutto quello che si vuole, vediamo come si fa.
All’interno del tag <head></head> si deve specificare che tutto quello che si scriverà sarà CSS. Si utilizza il tag <style></style> ma non basta bisogna specificare anche il tipo. Perciò <style type=”text/css”> </style>. In questo modo diciamo a HTML che tutto quello che scriviamo all’interno del tag <style> è CSS. Se voglia dare dello stile a tutti i paragrafi e cioè <p></p> basta aggiungere la p seguita dalle parentesi graffe. E tutto quello che scriviamo all’interno delle parentesi graffe di p mi darà stile a tutti i <p>. Di conseguenza se volessi cambiare lo stile al tag <h1> si procede come abbiamo fatto con <p>. La procedura è uguale per tutti i tag. La cosa importante che alla fine di ogni linea di comando è mettere il ;.
In questo modo noi possiamo dare stile uguale ad es. a tutti i paragrafi. Ma come faccio se ho più paragrafi e voglio cambiare stile a ogni paragrafo? Si devono usare le classi e gli ID.
<style type=”text/css”>
.size {
font-size:200%;
}</style>
</head>
<body>
<h1 class=”size”>Titolo</h1>
Praticamente noi creiamo una class dandogli il nome che vogliamo in questo esempio size. Per poterla richiamare dovremo utilizzare il punto davanti al nome .size, in questo modo noi possiamo utilizzare la class size in tutti i tag che vogliamo e dare lo stesso stile a tutti i tag, dove la utilizziamo in questo esempio utilizzando font-size:200% il testo sarà il 200% più grande dell’originale. Possiamo anche utilizzare più classi in un tag. Se noi avessimo delle classi che si chiamano size e font li potremo richiamare mettendoli all’interno delle virgolette distanziati dallo spazio. Es. <h1 class=”size font”>Titolo</h1> in questo modo utilizzeremo due classi. Per quanto riguarda gli ID la struttura è identica, l’unica differenza sarà che per richiamarli non si utilizzerà il punto ma bensì il #. E al posto di class si utilizza id.
<style type=”text/css”>
#size {
font-size:200%;
}</style>
</head>
<body>
<h1 id=”size”>Titolo</h1>
La domanda sporge spontanea, ma se sono uguali perché utilizzare sia le classi che gli id? Le classi servono per definire una tipologia di elementi, cioè per attribuire uno scopo e/o una presentazione ad un sottoinsieme di elementi con caratteristiche e funzionalità comuni di una pagina HTML. Gli id servono per definire un elemento unico in una pagina, con un unico e preciso scopo, nella maggior parte dei casi tale scopo è determinare una sezione in una pagina HTML. In sostanza, quando sappiamo che un elemento sarà unico useremo un id. Negli altri casi, se non disponiamo di alternative (come ad esempio il selettore discendente) possiamo usare una classe.
