Accesso nº 27513343 di Venerdì 29 Marzo 2024 delle ore 08:35 Benvenuto Ospite.
Buon onomastico a: Jonah, Bertoldo (priore generale dei carmelitani)
Il dubbio, che da una parte è la tortura dell´intelletto, dall´altra è il padre della scienza e del diritto. (C. Bini)
  Password dimenticata ?     Ricordami       Accedi Invisibile
Ricerca Avanzata  
Iscriviti Iscrivitipolicy La Policymail Contattacidona DonaFaq Faq
messaggi 1
home Homeindice Indice ForumProgrammazionePrimi PassiCSS con JavaScript ?
N.B. Alcune pagine sono in costruzione e altre in allestimento (diciamo per precisione in Perfezionamento), ma Estrazioni, Ricerca, GuestBook, Calendario, News, Contattaci e tutto il resto funzionano perfettamente...
Purtroppo il Forum con PhpBB è stato vittima di malfunzionamenti imprevisti, perciò abbiamo deciso di rimuoverlo e di risciverlo noi di sana pianta, (in tempi brevissimi, lo pomettiamo), ma come avrai notato, intanto le estrazioni sono diventate molto più puntuali e lo saranno sempre di più...

Sito in Costruzione... ancora un pò di pazienza
costruzione
E sempre Grazie per la vostra comprenione...
Visione di un Argomento
Visione Argomento CSS con JavaScript ?
Da Nando_56
Di Giovedì 25 Ottobre 2007 00:00
Risposte: 0
Argomenti: 5
Forums: 2
Da Nando_56
Di Giovedì 25 Ottobre 2007 13:49
Risposte: 0
Argomenti: 2
|◄ Trovati 2 Argomenti, Argomento:
2
di 2.   01 02
Da Nando_56
Di Sabato 28 Giugno 2014 09:05
Risposte: 0
Letture: 0
Aperto
Un breve tutorial sul linguaggio dei Css
Offline
avatar
Amministratore Fondatore
Palermo, Italy
Messaggi: 34
Registrato: 07 Dicembre 2005
Che bisogno c'è ?
  Visto che adesso c'è la versione 3 dei CSS ?
  Del resto basta saper dove mettere le mani, no ?


img

  I CSS (Cascading Style Sheets) (in italiano fogli di stile a cascata), servono per gestire tutto il layout di un sito Web.
  Con i CSS è possibile intervenire sulla formattazione del testo, sulla visualizzazione delle pagine in modo semplice ed efficace.
  I CSS sono una conoscenza fondamentale per qualsiasi webmaster.
  Partiamo da qui con l'uso del Css...

  Ci sono due modi per dotare di stile una pagina web.
  Lo stile Integrato che è incorporato nella pagina html nella sezione tra i tags ltheadgt e lt/headgt.
  Ecco un esempio di stile incorporato:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio di pagina Html</title>
<style type="text/css">
.box /* Dichiariamo la classe */
{
float: right; /* Si metterà sempre sulla destra della pagina */
font-size: 12px; /* Dimensione font 12 pixels */
color: blue; /* Colore del testo blu */
background-color: white; /* Colore dello sfondo bianco */
border: 1px outset blue; /* Bordo rialzato (Effetto tasto rialzato) */
}
.box:hover /* Creiamo ancora una classe */
{
border: 1px inset blue; /* Bordo incassato (Effetto tasto premuto) */
}
</style>
</head>

<body>
<div class="box">
Ciao a tutti !
</div>
</body>
</html>

  Ed ecco il box:
Ciao a tutti !


  Passate sopra con il mouse per vedere l'effetto tasto premuto.

  I fogli di stile veri e propri che vengono collegati alla pagina mediante una istruzione
<link>
questo è molto conveniente quando si tratta di siti di dimensioni maggiori.

  Questo invece è un esempio di foglio di stile esterno::
<!DOCTYPE html>
<html>
<head>
<title>Esempio di pagina Html</title>
<meta charset="utf-8">
<link rel="stylesheet" href="varie/style.css" type="text/css">
</head>

<body>
<div class="box">
Ciao a tutti !
</div>
</body>
</html>

  Dove il box in questione è stato dichiarato nel file style.css che si trova nella dir "varie/" magari assieme a numerose direttive.
  Dimenticavo di dire che quei segni strani all'inizio e alla fine di una frase erano tag di commento, in css equivalgono a: Apertura /* tutto quello che segue sarà ignorato fino al tag di chiusura */

  Ecco un esempio di Box a scomparsa come quelli usati in questo sito nelle sezioni: GuestBook, Downloads, Trucchi, SitiAmici, News, Foto Curiose, Barze e Faq:
.box_a_scomparsa /* Creiamo la classe */
{
position: relative; /* Posizione relativa (cioè dove capita) */
margin: 2px 2px 2px 2px; /* Margini (distanza da sopra/destra/sotto/sinistra) 2 pixels */
padding: auto; /* Padding Automatico */
font-size: 12px; /* Dimensione Font 12 pixels */
line-height: 14px; /* Dimensione delle linee o distanza 14 pixels */
height: 28px; /* Dimensione 28 pixels cioè Visibilità di 2 linee di testo */
text-align: justify; /* Testo giustificato a sinistra */
color: blue; /* Colore testo blu */
background-color: #FFFFFF; /* Sfondo Bianco */
cursor: auto; /* Cursore del mouse */
cursor: pointer; /* Puntatore */
overflow: hidden; /* Tutto il testo dopo i 28 pixel resta nascosto */
border: 1px inset blue; /* Ci mettiamo un bordo blu per vedere meglio l'effetto */
}
.box_a_scomparsa:hover /* Questa classe si attiva non appena il mouse ci passa sopra */
{
cursor: hand; /* Cursore da manina... */
cursor: pointer; /* ...a puntatore */
height: auto; /* Dimensione automatica... */
overflow: auto; /* ...e con questo rivela tutto il testo che era nascosto */
}

  A questo punto possiamo incorporarlo nelle pagine html in questo modo:
<div class="box_a_scomparsa">
Linea 01<br>
Linea 02<br>
Linea 03<br>
Linea 04<br>
Linea 05<br>
Linea 06<br>
Linea 07<br>
Linea 08<br>
Linea 09<br>
Linea 10<br>
</div>

  E questo è il box finale.
  Provate a passare sopra con il mouse e vedrete che magicamente al posto della freccia il cursore si trasformerà in una manina e il testo nascosto verrà rivelato.

Linea 01
Linea 02
Linea 03
Linea 04
Linea 05
Linea 06
Linea 07
Linea 08
Linea 09
Linea 10

  Notate anche cosa succede al resto della pagina ;-)

  Alla prossima !
|◄ Trovati 2 Argomenti, Argomento:
2
di 2.   01 02
Amo il computer a tal punto da averne fatto il mio mestiere
Primi Passi
Programmazione
Visione di un Argomento
Situazione Attuale Sito
Visitatori Totali finora 27513343 - In questo momento sono online 21 ospiti. di cui 0 Iscritti e 0 Nascosti
20 in Emozione Lotto - Estrazioni, 1 in Forum,
[ Basato sugli utenti attivi negli ultimi 5 minuti ]
Ultima Estrazione Lotto n. 10410
Ultima Estrazione Superenalotto n. 3751
Concorso n. 50 di Giovedì 28 Marzo 2024
Ecco chi c'è nel sito adesso
Iscriviti Iscrivitipolicy La Policymail Contattacidona DonaFaq Faq
messaggi 1
home Homeindice Indice ForumProgrammazionePrimi PassiCSS con JavaScript ?
Marzo 2024
DomLunMarMerGioVenSab
0102
03040506070809
10111213141516
17181920212223
24252627282930
31
BACHECA
NEWS:   È presente 1 New

IN RILIEVO DAL SITO: chi Chi Siamo ?nole Note Legalicond Condizionitdp Privacydona Donamap Mappa del sito

IN RILIEVO DAL FORUM: Annunci: Nota importante !BBCode Cosa sono ?Emoticons Cosa sono ?
Buon Giorno Ospite (Visitatore)
Puoi Leggere Tutto.
Ma non puoi C/R/M/S/E Nulla.
Passa sopra le lettere con il puntatore del mouse per la legenda...
I BBCode sono Attivi.
Le Emoticons sono Attive.
Goditi queste splendide immagini di Palermo e della sicilia in generale... Un click del mouse se le vuoi vedere meglio e la descrizione completa.
Immagine:0Immagine:1Immagine:2GalleriaImmagine:3Immagine:4Immagine:5
Auguri   Nessun Compleanno oggi...
  CHI C´È IN LINEA
  Record di utenti connessi: 3837 registrato Lunedì 28 Ottobre 2019 20:30
  Iscritti connessi:
  STATISTICHE
  Sito: 17 messaggi dal GuestBook ● 1 New ● 1 messaggio dallo Staff ● 45 Iscritti Totali ● Ultimo Iscritto Tonio
  Forums: Totale Messaggi 42 ● Categorie 8 ● Forums 14 ● Argomenti 42 ● Risposte 0
Privacy Policy - Personalizza tracciamento pubblicitario