CSS - dove imparare a usarli?

Ciao, ho deciso di inserire una nuova sezione nel mio sito, vi potete immaginare il casino: dovrei cambiare tutte le pagine...
Ho sentito che ci sono in giro 'sti benedetti CSS che ti permettono, cambiando "la mamma" di tutte le pagine, di cambiarle in automatico?
Ho sentito bene?
Se così fosse, potreste darmi una dritta su come impararci q.cosa?
Non ne sono assolutamente niente.
Ah! mi raccomando: in italiano please... non ho voglia di scervellarmi...

Grazie!

anchio non so usarli, cmq

http://www.web-link.it/

ciao

Tutto quel papiro?
No, ci rinuncio non ho pazienza di leggere tutta quella roba tecnica...
Farò a manina... :~(

[flan]

anche qui
http://www.morpheusweb.it/html/manuali/css.asp
trovi qualcosa in italiano

[makpaolo]

http://www.lukeonweb.net/leggi.asp?id=346 ->Referenze dei fogli di stile Css

http://www.visuddhi.com/vstuff/l3cbu...dth=0#xbuilder ->esempi di come usarli

[flan]

ops mi sono sovrapposto, vedo che non serve, ma i CSS sono veramente utili!

Ora vado a vedere i link che mi avete lasciato.
Grazie!
Ma servono a fare quella cosa che ho scritto all'inizio?

[makpaolo]

Ora vado a vedere i link che mi avete lasciato.
Grazie!
Ma servono a fare quella cosa che ho scritto all'inizio?

se il sito è in css per modiifcarlo nei colori ecc... basta cambiare il css, comunque per averlo "dinamico" meglio php + css

Vabbé ragazzi, mi è venuto il nervoso.
Non ci capisco niente.
Addio... >:(

se il sito è in css per modiifcarlo nei colori ecc... basta cambiare il css, comunque per averlo "dinamico" meglio php + css

eheheheh
Faccio fatica con l'inglese, figurati con l'ARABO!

Se tu li metti nel tag Head stamperanno tutta la pagina con le caratteristiche scritte nei css,guarda che nn sn difficili :) dai che sn sicuro che impari subito se ti impegni

ti lascio dei link che puoi consultare:

http://www.morpheusweb.it/html/manuali/css.asp
http://edestavola.altervista.org/css2.html
http://www.web-link.it/css/css.htm
http://members.xoom.virgilio.it/abc_...rimipassi.html
http://www.gdesign.it/pages/howto/ar...2/slidcss2.php
buon lavoro!!

Ma io non capisco proprio una cosa:
d'accordo i comandi che sono a prova di imbecille, nel senso che li impari in fretta...
Il mio problema sta nel non capire la costruzione...
Io la immagino così...
faccio un foglio di stile, ci metto tutte le cose che voglio fare, tipo il titolo, la tabella centrale (che però NON E' per tutti i fogli uguali - quindi già questo mi dà da pensare - magari posso evitare di metterla non so) ecc. ecc. e mi viene fuori la base del documento
Questo documento come viene salvato? con che nome?
Poi, per esempio, mi accorgo che su tutti i miei fogli manca una A, allora vado sulla "base", inserisco la a nella parola dove manca e... cosa devo fare perché tutte le pagg prendano la modifica?
Abbiate pietà

Io la butto lì (però con le parolacce andateci piano... :P )

C'è nessuno che me lo farebbe?
Poi io lo linko in tutte le pagine ecc. ecc.

8)

Tu con i css puoi modificare lo stile dei caratteri,delle tabelle,il colore,per tutta la pagina o per le singole porzioni di pagina,questo pero' ti consiglio di farlo piu avanti,allora tu prendi un editor,dovrebbe avere la funzione gia impostata:nuovo css,oppure vai nella finestra dove visualizzi il codice,cancelli tutto quello che c'è scritto e cominci a scrivere:

[code:1:fcb32f3ec7]
FONT {text-decoration: underline;}

font indica cosa vai a modificare e quello che è nelle graffe come lo modifichi,poi continui se vuoi che il testo venga sl sottolineato,altrimenti puoi aggiungere altri parametri tipo


FONT {text-decoration: underline; font-family: comic sans ms,courier,verdana; }

font family indica il tipo di carattere,e cosi via..

poi ad esempio se vuoi modificare qualcos altro in particolare,prima della graffa metti l apparteneza,e dopo le caratteristiche

body{scrollbar-face-color: #999999;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #999999;
scrollbar-darkshadow-color: #999999;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ffffff;}

body è l appartenenza,poi scrollbar è cosa vai a modificare(barra di scorrimento ) e cio' che è dopo i due punti come lo vai a mofificare(in questo caso modifichi il colore).

ad esempio per il cambio colore e sottolineatura sui link al pasaggio del mouse posso scrivere:

a { color: #ffffff; text-decoration: none} colore normale
a:hover { color: #008090; text-decoration: underline} passaggio mouse-->cambio colore piu sottolineatura

alla fine tutto questo codice lo prendi e lo salvi con nome_a_caso.css

esempio:
[code]
FONT {text-decoration: underline; font-family: comic sans ms,courier,verdana; }
body{scrollbar-face-color: #999999;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #999999;
scrollbar-darkshadow-color: #999999;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ffffff;}
a { color: #ffffff; text-decoration: none}
a:hover { color: #008090; text-decoration: underline}
[/code]

una volta salvato lo inserisci sul server e lo carichi nella pagina che vuoi che mettano piede i css,inserendo nel tag head questo codice che va a scaricare il css durante l interpretazione del codice html
[code]
<LINK HREF="nome_a_caso.css" TYPE="text/css" REL="stylesheet">[/code]

ser invece preferisci metterlo dentro la pagina basta scrivere nel tag head cosi:
[code]
<head><style type="text/css">
FONT {text-decoration: underline; font-family: comic sans ms,courier,verdana; }
body{scrollbar-face-color: #999999;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #999999;
scrollbar-darkshadow-color: #999999;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ffffff;}
a { color: #ffffff; text-decoration: none}
a:hover { color: #008090; text-decoration: underline}
</style></head>[/code]

cosi' puoi fare se ogni pagine deve avere delle caratterisctiche diverse,altrimenti ti consiglierei di nn aggiungere altro codice e richiamrlo esternamente :wink:


spero di averti tolto almeno qualche dubbio :D :wink:

ciao


[/code:1:fcb32f3ec7]

Grazie, Xsescott, sei stato gentilissimo.
Ma non c'è niente da fare: non ci capisco un cavolo.
E' un problema che ho da sempre (elementari - medie - università. Mi sono salvata solo al master). Il problema è questo: quando mi metto in testa che una cosa NON LA CAPISCO, non c'è verso.
Sì sì, lo so che di fondo, probabilmente, NON LA VOGLIO capire...
Boh non so, sta di fatto che ci sono scogli che ho superato con difficoltà e suuperare questo, onestamente, il gioco non vale la candela...
Farò tutto a mano, ci metterò un sacco, ma almeno non mi innervosisco...

Grazie davvero!!!

Mi spiace :(

[stor]

Ma servono a fare quella cosa che ho scritto all'inizio?

No. Gli stili servono solo per definire gli attributi visivi del contenuto (colori, margini, font, posizione ecc...), non il contenuto stesso. Con un foglio di stile esterno si puo'per esempio definire il colore dello sfondo di tutte le pagine, basta cambiarlo nel file .css e tutte le pagine verranno visualizzate con il nuovo colore.. Va da se' che in ogni pagina deve essere esplicitamente "richiamato" il foglio di stile esterno.
Quello che dici tu e' invece l'inclusione di un certo contenuto in un certo punto della pagina (immagino sia la tabella in fondo). Qualunque sia il modo scelto per l'aggiornamento si richiede comunque di mettere mano a tutte le pagine. Le possibilita' sono:
1) l'aggiornamento manuale di tutte le pagine, da effettuarsi ad ogni modifica del sito
2) rivedere la strutturazione del sito creando un frame fisso in basso contenente la tabella... una navigation bar insomma, che sarebbe scritta una volta sola in un unico file html (Un bel tutorial sui frames si trova qui: http://www.aspide.it/manuale/frames/index.htm)
3) se la soluzione frame e' abborrita allora non resta che rinominare tutte la pagine e i link da html a php, e in ogni pagina al posto della tabella mettere un piccolo script che ne fa l'inclusione in quel punto da un unico file esterno, qualcosa del tipo: <?php include(nomefile); ?>

Usando insieme sia la tecnica dei css che quella del php (o in alternativa dei frames) e' possibile creare delle pagine "template", contenenti sezioni comuni a tutte quante (menu, barre di navigazione, news, links, immagini ecc) che sono da modificare in un solo punto, e inoltre grazie ai css puo' essere anche "regolato" in un colpo solo l'aspetto visivo di tutte le pagine.

Per finire i css non sono solo uno strumento per la definizione di stili, ma permettono di creare in modo completamente diverso la struttura stessa della pagina (impaginazione, colonne, posizione degli elementi ecc), qualche giorno fa grazie a questo forum ho scoperto http://www.constile.org

...Il problema è questo: quando mi metto in testa che una cosa NON LA CAPISCO, non c'è verso.
Sì sì, lo so che di fondo, probabilmente, NON LA VOGLIO capire...
Boh non so, sta di fatto che ci sono scogli che ho superato con difficoltà e suuperare questo, onestamente, il gioco non vale la candela...
Farò tutto a mano, ci metterò un sacco, ma almeno non mi innervosisco...

Vedi, forse ti innervosisci perché vuoi provare a fare da subito qualcosa di troppo "globale" e complesso, come ristrutturare tutta una pagina o addirittura il sito, implementando i CSS.

Secondo il mio personale consiglio invece, sarebbe molto più "leggero" cominciare semplicemente da piccoli esempi, piccoli passi, che so, in una pagina html "vuota", aggiungendo man mano elementi e relative definizione CSS.
Per esempio potresti cominciare dalla cosa più semplice, definire l'aspetto degli "elementi base" di una pagina html:

<html>
<head>
<title>Prova CSS</title>

<style>
[...qui cominci a provare i vari stili...]
</style>

</head>
<body>
Prova Prova

[...qui aggiungi man mano elementi html per le prove...]

</body>
</html>


Meglio partire dalle cose più basilari possibile, quando si affronta una nuova "tecnologia".

Dunque per es. dentro quel "blocco" STYLE (che serve per evitarti -per ora- di usare un file .css esterno) cominci ad aggiungere varie cose per prova, e se necessario inserisci l'elemento di cui vuoi definire lo stile sotto nel BODY: che so, vuoi definire l'aspetto di tutti i link della pagina allora metti nello style la definizione .. e sotto nel body ci metti il codice html di un link per vedere gli effetti.
Per es:
nel tag STYLE:
<style>
body {
font-size: 15px;
color: yellow;
background-color: orange;
}
</style>

E vedi che la scritta "Prova Prova" sarà con un font più grande, di colore giallo e lo sfondo della pagina sarà arancione...
e via così..

Il tutto passo passo così non ti stressi districandoti in cose complesse e incognite di primo impatto.

Ti spingo (come anche gli altri) ad usare gli Style Sheets (CSS) perché sono FONDAMENTALI per una pagina web e soprattutto per rendere leggerissimo il codice html.

Se vuoi provare a cimentarti sappi che stiamo qui appositamente a darti una mano, se invece vuoi "gettare la spugna".. è un grande peccato!

[stor]

Faccio un'aggiunta e correzione al mio messaggio precedente riguardo i frames. La soluzione e' ancora piu' semplice perche' usando il tag IFRAME la tabella delle sezioni puo' essere una normalissima pagina HTML inclusa nel punto voluto.

1) in tutte le pagine al posto della tabella mettere il codice:[code:1:a2b70a8f04]<iframe src="tabella.html" frameborder="0" width="100%"></iframe>[/code:1:a2b70a8f04]
2) la tabella con le sezioni del sito sara'contenuta nel file tabella.html, ai link contenuti in essa dovra' essere aggiunto: target="_top".

....e basta

Scusate il ritardo, ho avuto un attacco superintenso ma, fortunatamente, superbreve di influenza...

Cmq il mio problema ho capito dai vs. msg, che non lo posso risolvere con i CSS

si trattava, infatti, di aggiungere delle voci al menù. Questo menù viene richiamato da TUTTE le pagg. quindi, per non fare tutte le pagg a mano, mi chiedevo se fosse possibile farlo con i CSS.
Ma, a quanto ho capito, no...

Farò, appena starò meglio, pian pianino tutte le pagg...

[stor]

Mi permetto di insistere sull'ultima soluzione che ho proposto... almeno il lavoro su ogni pagina si fa una volta sola.

Il menu si mette in una pagina apposta che contiene solo quello, nell'esempio l'ho chiamata "tabella.html".

Nei link del menu, all'indirizzo delle pagine da chiamare, si aggiunge semplicemente il parametro target, per esempio il link:
<a href="pagina02.htm">
<font color="#CC3300" face="Verdana" size="2">Antipasti</font>
</a>

diventerebbe:
<a href="pagina02.htm" target="_top">
<font color="#CC3300" face="Verdana" size="2">Antipasti</font>
</a>


In tutte le altre pagine si toglie il menu e al suo posto si inserisce il codice dell'iframe... non serve fare altro, e si ottiene esattamente quello che dici, senza scomodare php o css

[heracleum]

Ah era per mettere un menu in tutte le pagine?? non avevo seguito tutta la faccenda...

Comunque CSS è fondamentale per la comoda gestione dell'aspetto del tuo sito, dunque in ogni caso sicuramente ti gioverà vederteli, e poi sono semplicissimi.

stor:
scusami ma se deve mettere un menu identico in tutte le pagine sarebbe sicuramente ben consigliato usare PHP e la sua comodissima funzione include("nomepagina.php");
Certo è più problematico se tutte le pagine sono con estensione .html (non so, chiedo)

[marcio]

Ah era per mettere un menu in tutte le pagine?? non avevo seguito tutta la faccenda...

Comunque CSS è fondamentale per la comoda gestione dell'aspetto del tuo sito, dunque in ogni caso sicuramente ti gioverà vederteli, e poi sono semplicissimi.

stor:
scusami ma se deve mettere un menu identico in tutte le pagine sarebbe sicuramente ben consigliato usare PHP e la sua comodissima funzione include("nomepagina.php");
Certo è più problematico se tutte le pagine sono con estensione .html (non so, chiedo)

quoto

Ragazzi mi sa che son del tutto rinco.......a 8)
Io ho il sito Paola's Web che, se guardate, ha un menù in alto dove sono indicate tutte le sezioni... ora, io avrei da aggiungere tre sezioni (Fonts - Galleria - Wallpapers).
Ora... questo menù è richiamato in tutte le pagine... quindi tutte le pagine devono subire la stessa modifica.
Ho letto che i CSS controllano solo il font e il colore, ma non controllano il contenuto delle pagine, quindi ho pensato che non mi fosse utile come, invece, avevo pensato all'inizio di questo 3d.

Ora grazie a una vostra ulteriore risposta, mi pare di capire che invece lo si possa fare.
Sigh! abbiate pietà e immaginate di parlare con un bimbo di 6 snni (Denzel Washington, docet ).
Si può fare sì o no?

[marcio]

Ragazzi mi sa che son del tutto rinco.......a 8)
Io ho il sito Paola's Web che, se guardate, ha un menù in alto dove sono indicate tutte le sezioni... ora, io avrei da aggiungere tre sezioni (Fonts - Galleria - Wallpapers).
Ora... questo menù è richiamato in tutte le pagine... quindi tutte le pagine devono subire la stessa modifica.
Ho letto che i CSS controllano solo il font e il colore, ma non controllano il contenuto delle pagine, quindi ho pensato che non mi fosse utile come, invece, avevo pensato all'inizio di questo 3d.

Ora grazie a una vostra ulteriore risposta, mi pare di capire che invece lo si possa fare.
Sigh! abbiate pietà e immaginate di parlare con un bimbo di 6 snni (Denzel Washington, docet ).
Si può fare sì o no?

innanzi tutto rinomina le pagine in .php
salvati poi il codice di quel menu in una pagina menu.inc.php
rimuovi il codice del menu da tutte le pagine dove è presente e inserisci nello stesso punto <? include("menu.inc.php"); ?>

dimmi come va

[stor]

La risposta e' ancora si, ma non con i css, e non con le pagine cosi' come sono adesso. Le possibilita' le ho gia' elencate nel messaggio del giorno 28, la prima e' quella che volevi seguire (aggiunta a mano in tutte le pagine), le altre sono in ordine di complessita'/raffinatezza. La 2 in particolare e' la piu' indolore, nel senso che richiede meno lavoro, e meno cose da comprendere o risorse particolari (mentre la modifica in php, sebbene piu' "professionale" richiede la modifica di tutti i link di tutte le pagine! E in locale sul pc non si vedrebbero neppure). Per la scelta 2 ho specificato meglio nei messaggi seguenti i singoli punti da toccare: creazione di una pagina contenente il solo menu' e sostituzione del menu'attualmente presente nelle altre pagine con il codice dell'iframe che ho scritto.

Bisogna comunque mettere mano alle pagine, resta solo da decidere quale delle 3 strade percorrere, una porta al punto di partenza qualora successivamente si voglia fare un'altra modifica, le altre permettono di fare il lavoro una sola volta, e aprono anche la strada a possibili nuovi modi di strutturare il sito e presentare i contenuti

Ora la cosa da comprendere e' se ti senti in grado di modificare il codice html a mano o se lavori solo col frontpage, nel qual caso sarebbe anche da capire se a lui danno fastidio (oppure se le devasta) le modifiche fatte a mano... per esempio il composer (l'equivalente frontpage della Netscape) mi taglia via qualsiasi frammento php messo dentro a mano... e fa anche piazza pulita di altri tag...

Innanzitutto ringrazio tutti per la disponibilità...
Poi...
... Stor io ho provato a fare come mi hai detto tu, ché mi sembrava la soluzione è semplice...

Risultato...

... un orrore indescrivibile... 8) e siccome è indescrivibile, ho uppato tutto per mostrarlo al mondo ecco quello che mi è venuto fuori http://paolasweb.altervista.org/desk/prova.htm

Anche impostando lo sfondo non cambia perché riparte da zero, e cmq ci sono degli spazi quando, in origine, le due tabelle sono attaccatissime...

dimenticavo...
questa è la pagina che ho creato per prima:

<body>

<div align="center">
<table border="1" width="80%" id="table13" bgcolor="#9A9A9A" style="border-width: 0px">
<tr>
<td style="border-style: none; border-width: medium" bgcolor="#808080" align="center">
<table border="1" width="100%" id="table14">
<tr>
<td width="125">
<p align="center">
<a href="mailto:chestress@fastwebnet.it">
<script type="text/javascript" src="http://www.altervista.org/js_tags/top100.js"></script>
 </a></td>
<td>
<p align="center" style="margin-top: 0; margin-bottom: 0"><b>
<font face="Verdana" size="2" color="#333333"><br>
.:<a href="../pagina_banner.htm"><font color="#000000">Basi Banner</font></a>:.   
.:<a href="../pagina_bottoni0.htm"><font color="#000000">Bottoni</font></a>:.     .:<a href="../pagina_gif00.htm"><font color="#000000">Gif Animate</font></a>:.  
.:<a href="../pagina_sfondi.htm"><font color="#000000">Sfondi</font></a>:.   .:<a href="../pagina_smiles00.htm"><font color="#000000">Smiles</font></a>:.</font></b></p>
<p align="center" style="margin-top: 0; margin-bottom: 0"><b>
<font face="Verdana" size="2" color="#333333">.:<a href="../pagina_templates.htm"><font color="#000000">Templates</font></a>:.    
.:<a href="../tutorials_photoshop.htm"><font color="#000000">Tutorials Photoshop</font></a>:.<br>
 </font></b></p>
</td>
<td width="125">
<p align="center"><a href="mailto:chestress@fastwebnet.it">
<img border="0" src="../Foto/postas.gif" width="16" height="16"></a><br>
<b>
<font face="Verdana" size="1">Sito Online dal 28.03.04 - h. 16.00</font></b></td>
</tr>
</table>
</td>
</tr>
</table>
</div>

Prova a metterci sto codice e a rinominare il file invece di prova.htm lo fai diventare prova.php

[code:1:f769fdf10f]<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>.::Paola's Web-HomePage::.</title>
</head>

<body background="../Foto/sfondo_grigio_sfumato.jpg" style="font-family: Verdana; font-size: 8pt; color: #000000">

<p align="center" style="margin-top: 0; margin-bottom: 0">
<img border="0" src="intestazione.gif" width="900" height="113"></p>
<p align="center" style="margin-top: 0; margin-bottom: 0"> </p>
<div align="center">
<? include ("titoli.htm"); ?>

<table border="1" width="80%" id="table13" bgcolor="#9A9A9A" style="border-width: 0px">
<tr>
<td style="border-style: none; border-width: medium">
<p style="margin-top: 0; margin-bottom: 0"> </td>
</tr>
<tr>
<td style="border-style: none; border-width: medium">
<p style="margin-top: 0; margin-bottom: 0" align="center">
<img border="0" src="basibanner.gif" width="148" height="49"></p>
<p style="margin-top: 0; margin-bottom: 0" align="center"> </p>
<p style="margin-top: 0; margin-bottom: 0" align="center">
<font face="Verdana" size="1">
Cliccare sulla base desiderata col tasto destro del mouse e salvare come immagine</font></p>
<p style="margin-top: 0; margin-bottom: 0" align="center">
<font face="Verdana" size="1">Basi banner 468 x 60</font></p>
<p style="margin-top: 0; margin-bottom: 0"> </p>
<p align="center" style="margin-top: 0; margin-bottom: 0"> </p>
<p align="center" style="margin-top: 0; margin-bottom: 0"> </p>
<p align="center" style="margin-top: 0; margin-bottom: 0">
<a href="../index.htm">
<img border="0" src="home2.GIF" width="38" height="13"></a></p>
<p align="center" style="margin-top: 0; margin-bottom: 0"> </p>
</td>
</tr>
<tr>
<td style="border-style: none; border-width: medium">
<table class="bodyline" cellSpacing="0" cellPadding="0" width="100%" border="0" id="table15">
<tr>
<td vAlign="top" align="middle"><center>
<font class="footmsg"><font size="1">Tutto il materiale
presente sul sito e il relativo copyright è dei rispettivi
proprietari.<br>
Per qualsiasi presunta violazione dello stesso, contattare
il <a href="mailto:chestress@fastwebnet.it&quot ;>
<font color="#000000">Webmaster</font></a><br>
 </font><center><font size="1">© Copyright 2004
http://paolasweb.altervista.org</font></center></font>
</center></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-style: none; border-width: medium">
<p align="center">
<img border="0" src="Banner.GIF" width="448" height="27"></td>
</tr>
</table>
</div>



</body>

</html>[/code:1:f769fdf10f]

Ma dopo, tuttissime le pagine le devo rinominare .php?