Tutorial 1Il linguaggio css serve a gestire il layout di un sito web quindi la grafica.
Invece di cambiare gli stili (i colori, le immagini di background ecc.) di ogni singola pagina del vostro sito web è possibile usare un solo foglio di stile.css e metterci dentro tutte le regole comuni a tutte le pagine web del vostro sitozzo.
esistono due metodi per inserire regole css all'interno di pagine web:
il collegamento ad una pagina esterna
regole interne al documento web
Collegamento a pagine esterneè il metodo più utilizzato Tuttavia in tutte le pagine del vostro sito deve essere presente il collegamento al foglio di stile css come sotto indicato...
- Codice:
-
<html>
<head>
<title>stili</title>
<link rel="stylesheet" type="text/css" href="stile.css"> [QUI INSERIRE IL COLLEGAMENTO AL FOGLIO DI STILE]
</head>
<body>...
QUESTO era un esempio di pagina web con collegamento ad uno stile css.
analizziamo ora gli elementi dell' <head> della nostra pagina web:
l'elemento <link> ha molti attributi molto importanti spiegati di seguito:
1.l'elemento rel che descrive il rapporto tra la pagina web e foglio di stile css esso può essere stylesheet o alternate stylesheet ma sicuramente il più usato (unicamente usato) è lo stylesheet.
2.l'attributo type che può avere solo il valore text/css
3.l'elemento href che propone il link alla pagina di stile css
tuttavia questo metodo potrebbe causare problemi con browser vecchi (anche se è la più usata).
per limitare i danni con i browser vecchi si dovrebbe usare @import all'interno del tag <style>
es.
- Codice:
-
<style>
@import url(stile.css);
</style>
l'unica cosa da notare è che all'interno di url va inserito il collegamento completo alla pagina di stile css.
regole interne al documento web
questo metodo è meno utilizzato tuttavia è utile se hai bisogno di inserire regole diverse all'interno di una pagina rispetto ad un'altra.
ecco un esempio.
- Codice:
-
<html>
<head>
<title>tutorial stili css</title>
<style type="text/css">
body {
background: #000000;
}
</style>
</head>
<body>...
da notare bene:
- Codice:
-
<style type="text/css">
body {
background: #000000;
}
in questo codice è contenuta una regola
- Codice:
-
body {
background: #000000;
}
che dice che nel <body> è presente uno sfondo di colore #000000.
e con questo concludo il primo pezzo di tutorial.
tutorial 2le regole all'interno di un foglio di stile css
Commenti
Per inserire parti di commento (cioè non visibili se non si guarda il foglio di stile) in un CSS racchiudetelo tra questi segni:
/* come segno di apertura
*/ come segno di chiusura
regole:
- Codice:
-
h2 {color background: black;}
h2 viene chiamato selettore invece quello che sta all'interno delle parentesi graffe viene chiamato blocco di dichiarazione in cui vengono scritte le proprietà che devono avere i selettori.
alcuni esempi di selettori:
selettori messi in ordine semplice:
- Codice:
-
h1 {color: #000000;}
p {background: white; font: 12px Verdana, arial, sans-serif;}
table {width: 200px;}
selettori raggruppati:
se più selettori devono avere le stesse caratteristiche è possibile separarli dalla virgola senza ripetere sempre gli stessi blocchi di dichiarazioni:
se per esempio dovessimo avere :
- Codice:
-
h1 {background: white;}
h2 {background: white;}
h3 {background: white;}
è possibile scriverlo così:
- Codice:
-
h1, h2, h3 {background: white;}
tuttavia se tutti i selettori di una pagina devono avere la stessa caratteristica è possibile usare il selettore * che li comprende tutti...
- Codice:
-
* { color: black; }
fine tutorial 2
tutorial 3CSS proprietà di base
Proprietà del color
per sapere i colori e le loro proprietà fondamentali vi rimando al tutorial di darkjoker
però nei fogli css sono presenti alcune altre proprietà del colore che si riferiscono al "div" a cui devono essere applicate...
ecco vari esempi:
1. il colore di primo piano (foreground color)
2. il colore di sfondo (background color)
3. il colore del bordo (border color)
esempi:
- Codice:
-
#div { background color: black; foreground color: black; border color: black}
proprietà dello sfondo:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
esempi
background color
- Codice:
-
#div{background-color: <valore>;}
background image
- Codice:
-
#div { background-image: url(<valore>); }
notare che nell'url fra le parentesi bisogna inserire il collegamento all'immagine
background-repeat
Con questa proprietà iniziano le novità. Essa consente di definire la direzione in cui l'immagine di sfondo viene ripetuta.
- Codice:
-
#div {background-repeat: <valore>;}
i valori di repeat:
- Codice:
-
* repeat. L'immagine viene ripetuta in orizzontale e verticale. E' il comportamento standard.
* repeat-x. L'immagine viene ripetuta solo in orizzontale.
* repeat-y. L'immagine viene ripetuta solo in verticale.
* no-repeat. L'immagine non viene ripetuta.
esempio:
- Codice:
-
body { background-image: url(sfondo.gif); background-repeat: repeat; }
div { background-image: url(sfondo.gif); background-repeat: repeat-x; }
background-attachment
Con questa proprietà si imposta il comportamento dell'immagine di sfondo rispetto all'elemento cui è applicata e all'intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa.
- Codice:
-
#div {background-attachment: <valore>;}
Valori
- Codice:
-
* scroll. L'immagine scorre con il resto del documento quando si fa lo scrolling della pagina
* fixed. L'immagine rimane fissa mentre il documento scorre
Questa proprietà consente risultati estetici di grande impatto ed è consigliabile, per ottenerne il meglio, usarla sia in combinazione con le altre proprietà sia con immagini grandi.
background-position
Proprietà un pò complessa. Definisce il punto in cui verrà piazzata un'immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Si applica solo agli elementi blocco o rimpiazzati. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser.
- Codice:
-
#div {background-position: <valore> o <valori>;}
Valori
I valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull'asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi:
* con valori in percentuale
* con valori espressi con unità di misura
* con le parole chiave top, left, bottom, right
esempio:
- Codice:
-
body {
background-image: url(back_400.gif);
background-repeat: no-repeat;
background-position: 50px 50px;
}
proprietà dei font:
font-family
La proprietà font-family serve a impostare il tipo di carattere di una qualunque porzione di testo.
- Codice:
-
p {font-family: arial, Verdana, sans-serif;}
i valori delle famiglie
* serif (Times New Roman)
* sans-serif (arial)
* cursive (Comic Sans)
* fantasy (Allegro BT)
* monospace (Courier)
font-size
Insieme a font-family è la proprietà considerata essenziale nella definizione dell'aspetto del testo, di cui definisce le dimensioni.
- Codice:
-
selettore { font-size: <valore>; }
i valori della size:
- Codice:
-
* le sette parole chiave xx-small, x-small, small, medium, large, x-large, xx-large
* quelli espressi con le seguenti unità di misura: pixel (px), centimetri (cm), millimetri (mm), punti (pt), picas (pc), pollici (in), x-height(ex). Di tutte queste unità le uniche proponibili per il testo sono punti e pixel. Si consiglia di usare la prima solo per CSS destinati alla stampa.
font-weight
Serve a definire la consistenza o "peso" visivo del testo.
- Codice:
-
selettore {font-weight: <valore>;}
Valori
Il "peso" visivo di un carattere può essere espresso con una scala numerica o con parole chiave:
* valori numerici 100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900 ordinati in senso crescente (dal leggero al pesante)
* normal. Valore di default. E' l'aspetto normale del font ed equivale al valore 400
* bold. Il carattere acquista l'aspetto che definiamo in genere grassetto. Equivale a 700
* bolder. Misura relativa. Serve a specificare che una determinata porzione di testo dovrà apparire più pesante rispetto al testo dell'elemento parente
* lighter. Misura relativa. Il testo sarà più leggero di quello dell'elemento parente
Text-align
La proprietà serve a impostare l'allineamento del testo.
- Codice:
-
selettore { text-align: <valore>; }
Valori
* left. Allinea il testo a sinistra
* right. Allinea il testo a destra
* center. Centra il testo
* justify. Giustifica il testo
spero che il tutorial vi sia servito
poi ne scriverò uno sui layout di pagine web a più colonne
se avete domande chiedete( questo è il mio primo tutorial non so se mi sono spiegato bene...) comunque commentate!!!!
Indice 
