| Precedente :: Successivo |
| Autore |
Messaggio |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
 Inviato: 29 Set 2005 20:55 Oggetto: * i css |
 |
|
che sono 'sti benedetti css?
css significa "cascading style sheets", cioe' fogli di stile a cascata ed e' un linguaggio studiato appositamente per la formattazione
i css permettono di alleggerire di molto il codice delle pagine web e di ottimizzare al massimo la formattazione
i fogli di stile possono essere uniti al codice (x)html in diversi modi:
- linkando un file esterno: <head><link href="stile.css" rel="stylesheet" type="text/css" /></head>
- richiamando un file esterno: <head><style> @import url(stile.css); </style></head>
- scrivendoli nell'head della pagina: <head><style>body {background: black; color: white;}</style></head>
- inserendoli direttamente nei tag: <p style="color: red;">bla</p>
i css esprimono la loro piena potenzialita' soprattutto nel primo e nel secondo modo, perche' quando decidiamo di trasformare i paragrafi di un sito di 1000 pagine da font 10 a font 12 dovremo scriverlo UNA sola volta anziche' 1000 (nel caso di un css inserito nell'head) o innumerevoli (nel caso di css inseriti direttamente nei tag)
come si crea un file.css? semplicemente aprendo il blocco note, scrivendo e salvando il file con l'estensione.css
mettiamo di avere creato un file.css esterno che linkeremo poi alla nostra pagina.html; il codice della pagina potra' essere:
| Codice: |
<html>
<head>
<title>la mia prima pagina web</title>
<link href="file.css" rel="stylesheet" type="text/css" />
<head>
<body>
<div>
<h1>titolo pagina</h1>
<p>bla bla bla</p>
</div>
<div>
<h2 id="giallo">sottotitolo uno</h2>
<p>bla bla bla</p>
</div>
<div>
<h2 class="giallo">sottotitolo due</h2>
<p>bla bla bla</p>
<p class="giallo">bla bla bla</p>
</div>
</body>
</html>
|
i comandi che troveremo nel file.css sono dei seguenti tipi:
| Codice: |
p {color: yellow;}
|
in questo modo il testo di TUTTI e SOLO i p della pagina sara' di color giallo
| Codice: |
#giallo {color: yellow;}
|
in questo modo IL SOLO elemento della pagina con id="giallo" avra' il testo giallo
| Codice: |
.giallo {color: yellow;}
|
in questo modo il testo di TUTTI gli elementi della pagina con classe "giallo" sara' di color giallo
ricapitolando: possiamo determinare un valore generico valido per tutti gli elementi della pagina
possiamo dare un nome (id) ad un particolare elemento e formattarlo (ogni id dev'essere univoco nella pagina)
possiamo determinare delle caratteristiche da applicare a piu' elementi nella stessa pagina; e' chiaro che una classe che mi permette di colorare il testo avra' senso applicata ad un paragrafo o ad un titolo, ma non ne avra' applicata ad un'immagine, ad esempio
la sintassi dei css e':
- elemento
- aperta parentesi graffa
- attributo
- duepunti
- valore
- puntoevirgola
- (questi ultimi due ripetuti per tutti i valori necessari)
- chiusa parentesi graffa
e' importante il punto e virgola a fine attributo, perche' tutto quel che vien dopo un punto e virgola dimenticato e almeno fino alla chiusura della parentesi graffa successiva non sara' letto dal browser!
mettiamo di volere tutti i paragrafi con font verdana di 10 pixel e in grassetto rosso; il css sara':
| Codice: |
p {
font-family: verdana;
font-size: 10px;
font-weight: bold;
color: red;
}
|
e' possibile contrarre il comando in questo modo:
| Codice: |
p {
font: verdana 10px bold;
color: red;
}
|
nota: l'indentazione - cosi' come succede per le pagine in (x)html - non e' indispensabile, ma e' utile per una piu' agevole lettura del codice
***
perche' il nome "a cascata"?
perche' gli elementi figli (=interni) ereditano gli attributi degli elementi padri, ma soprattutto perche' si possono raggiungere gli elementi interni partendo da quelli esterni
pensiero confuso, ma cerchero' di spiegarmi meglio con un esempio:
| Codice: |
<html>
<head>
<title>la mia prima pagina web</title>
<link href="file.css" rel="stylesheet" type="text/css" />
<head>
<body>
<div id="uno">
<h1>titolo <span>pagina</span></h1>
<p>bla <span>bla</span> bla</p>
</div>
<div id="due">
<h2>sottotitolo uno</h2>
<p>bla <a href="#">bla</a> bla</p>
<ul>
<li>esempio di <a href="#">elenco</a></li>
<li>esempio di elenco</li>
</ul>
</div>
<div id="tre">
<h2>sottotitolo due</h2>
<p>bla bla bla</p>
<p>bla bla bla</p>
</div>
</body>
</html>
|
possiamo formattare questa pagina "a cascata" partendo dagli id che contraddistinguono i tre div e che sono IL SOLO elemento di identificazione; vediamo come sara' scritto il css:
| Codice: |
#uno {
background: red;
color: white;
}
#uno span {
background: navy;
}
#uno p span {
font-weight: bold;
}
#due {
background: pink;
color: black;
}
#due a {
text-decoration: none;
}
#due a:hover {
text-decoration: underline;
}
#due ul li a {
font-weight: bold;
}
#due ul li a:hover {
color: silver;
}
#tre {
text-align: center;
color: green;
}
#tre h2 {
color: violet;
}
|
e quel che otterremo sara' una pagina esteticamente parecchio schizofrenica 
battute sulle scelte cromatiche a parte, si puo' notare come gli elementi siano formattati richiamandoli partendo dall'id dell'elemento padre; ma vediamo in dettaglio la formattazione dei vari div:
| Codice: |
#uno {
background: red;
color: white;
}
#uno span {
background: navy;
}
#uno p span {
font-weight: bold;
}
|
il div con id="uno" sara' cosi' formattato:
- lo sfondo sara' rosso
- il testo bianco
- tutti i tag span avranno lo sfondo blu navy
- SOLO gli span presente nei paragrafi saranno in grassetto
secondo div:
| Codice: |
#due {
background: pink;
color: black;
}
#due a {
text-decoration: none;
}
#due a:hover {
text-decoration: underline;
}
#due ul li a {
font-weight: bold;
}
#due ul li a:hover {
color: silver;
}
|
questo div sara' cosi' formattato:
- sfondo rosa
- testo nero
- tutti i link di questo div saranno senza sottolineatura
- tutti i link di questo div avranno la sottolineatura nella posizione hover
- SOLO i link all'interno dei punti elenco saranno in grassetto
- SOLO i link all'interno dei punti elenco diventeranno grigio chiaro in posizione hover
il terzo div:
| Codice: |
#tre {
text-align: center;
color: green;
}
#tre h2 {
color: violet;
}
|
questo div sara' cosi' formattato:
- testo centrato
- testo di colore verde
- SOLO i titoli di misura h2 saranno di colore viola
come si puo' vedere, il css crea una specie di percorso per arrivare all'elemento interessato; usando con attenzione gli id e' possibile formattare la maggior parte delle nostre pagine
***
[disclaimer]
l'ho riletto, ma siccome e' lungo chiedo venia anticipatamente per eventuali svarioni: nel caso segnalatemi che li correggo, grazie 
[/disclaimer]
L'ultima modifica di rebelia il 01 Ott 2005 11:05, modificato 1 volta |
|
| Top |
|
 |
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 29 Set 2005 21:38 Oggetto: |
|
|
piccola precisazione, visto che mi sono accorta che e' un problema in cui incappano in molti
NON fatevi confondere dal termine "fogli" di stile: anche se si tratta di comandi dati in linea tipo
| Codice: |
<p style="color: red;">blablabla</p>
|
si tratta a tutti gli effetti di un foglio di stile; all'intero dell'attributo style infatti uso un linguaggio diverso da quello di html (i due punti, il punto e virgola... ): uso lo stesso linguaggio che uso nel file esterno, tranne che per le parentesi graffe che sono sostituite dall'apertura e dalla chiusura degli apici o delle virgolette
ricapitolando: sia che si tratti di un file.css, sia che si tratti di codice all'interno del tag <style></style>, sia che si tratti di codice inserito all'interno dell'attributo style=" ", stiamo SEMPRE parlando di fogli di stile e l'unica differenza e' che si tratta di fogli di stile esterni, interni oppure in linea
la controprova l'abbiamo usando un browser che ci permetta di disabilitare i fogli di stile: ci accorgeremo che li disabilitera' tutti, non importa in quale modo sono inglobati nella pagina html |
|
| Top |
|
|
paolosnow
Mortale adepto
Registrato: 14/04/05 12:08
Messaggi: 31
Residenza: Genova
|
| Inviato: 30 Set 2005 16:17 Oggetto: |
|
|
Per cominciare volevo ringraziarti moltissimo per la pazienza che hai avuto nella descrizione dei CSS
Purtroppo che sono solo due mesi che bazzico tra l'html  e tutti quei comandi puntini, virgolette ecc. comunque concordo che i CSS devono risolvere, e non poco, il problema dell'aggiornamento delle pagine di un sito.
Incomincio a fare delle prove poi appena mi blocco ti faccio sapere penso che sarà molto presto 
Ciao  |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 30 Set 2005 19:18 Oggetto: |
|
|
| paolosnow ha scritto: | Per cominciare volevo ringraziarti moltissimo per la pazienza che hai avuto nella descrizione dei CSS
Purtroppo che sono solo due mesi che bazzico tra l'html e tutti quei comandi puntini, virgolette ecc. comunque concordo che i CSS devono risolvere, e non poco, il problema dell'aggiornamento delle pagine di un sito.
Incomincio a fare delle prove poi appena mi blocco ti faccio sapere penso che sarà molto presto
Ciao |
nessun problema, sto qua 
dai un'occhiata nella sezione: ci sono thread che parlano della preparazione della base in (x)html e/o su da che parte iniziare per fare un sito, magari ti possono tornar utili |
|
| Top |
|
|
omissis
Semidio
Registrato: 12/09/05 02:29
Messaggi: 258
Residenza: torino
|
| Inviato: 30 Set 2005 19:36 Oggetto: |
|
|
io non li digerisco all'interno delle pagine html..
preferisco di gran lunga quelli esterni |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 30 Set 2005 19:41 Oggetto: |
|
|
| omissis ha scritto: | io non li digerisco all'interno delle pagine html..
preferisco di gran lunga quelli esterni |
beh, di sicuro piazzando tutto esternamente li sfrutti al meglio, altrimenti rischi di incartarti esattamente come succedeva con la vecchia formattazione dei tag html e di avere un'incredibile quantita' di lavoro per il minimo aggiornamento |
|
| Top |
|
|
epris
Mortale pio
Registrato: 21/06/05 17:41
Messaggi: 27
Residenza: Atripalda (Av)
|
| Inviato: 13 Ott 2005 01:40 Oggetto: Re: * i css |
|
|
| rebelia ha scritto: | | che sono 'sti benedetti css? |
per chi proprio non vuole cimentarsi nel codice, vi segnalo un'interessante programma che genera automaticamene le definizioni css... ovviamente non fa tutto quello che potrebbe fare un uomo.. però agli inizi....
anche se si vuole imparare copiando è buono! |
|
| Top |
|
|
rebelia
Dio maturo
Registrato: 17/07/03 09:22
Messaggi: 7987
|
| Inviato: 13 Ott 2005 08:44 Oggetto: |
|
|
| grazie per la segnalazione |
|
| Top |
|
|
kkk2003
Dio minore
Registrato: 11/08/05 07:15
Messaggi: 863
Residenza: Mosca - Russia
|
| Inviato: 14 Ott 2005 06:30 Oggetto: |
 |
|
Ancora una domanda....
Abbiamo creato il layout a 3 colonne, con il css. Visto pero' che, una volta cominciato, devo rifare tutto il sito, ho l'impressione che questo layout non mi vada bene per tutte le pagine. Ad esempio, nelle pagine con le foto, sto pensando lasciare l'intestazione, ma di eliminare le 3 colonne, per mancanza di spazio. Ma per fare questo, devo creare un nuovo css, dico bene? E' normale che in un sito, le pagine possano far riferimento a piu' css differenti?? |
|
| Top |
|
|
|
FAQ
Cerca
Lista utenti
Gruppi
Registrati
Profilo
Messaggi privati
Log in
