EBOOK, libro elettronico

computereweb.net — Sat, 14 Nov 2009 14:27:02 +0000

Un ebook è un libro elettronico o meglio un libro digitale, grazie alla conversione nel formato pdf gli ebook possono esser portati anche in smarthphone e altri dispositivi multimediali.
Vengono venduti o distribuiti gratuitamente on line da chi li realizza. Quasi sempre trattano argomenti di natura informatica.
Esistono in commercio, ma con scarsa diffusione anche gli ebook reader, apparecchi elettronici con uno piccolo schermo lcd che consentono la lettura degli ebook.

Ecco una serie di ebook gratuiti, realizzati da computereweb.net sui principali linguaggi di programmazione:

GUIDA HTML

MODULI HTML
GUIDA CSS
GUIDA WML
GUIDA MYSQL

GUIDA CSS

computereweb.net — Mon, 18 May 2009 11:18:46 +0000

CSS è l’acronimo di (Cascading Style Sheets – Fogli di stile a cascata) sono utilizzati per creare la grafica del sito.

Inserimento dei css
I fogli di stile possono integrarsi all’interno del documento html oppure – più frequentemente – richiamati da un file esterno (con estensione .css).

Interno:

prova

…

Esterno:

Commenti:
/*commento*/

Regola fondamentale:
Nei fogli di stile, per richiamare un elemento in html, si fa così:
elemento {inserire gli stili adatti}
.nomeclasse {inserire gli stili adatti}
#nomeid {inserire gli stili adatti}
Inoltre, ricordarsi che nel caso delle classi e degli id è necessario individuare ed inserire la seguente sintassi in html:

contenuto

Selettori:
Affinchè possiamo personalizzare gli stili di un pagina html con i css, è necessario dichiararli sia nell’uno che nell’altro, utilizzando i selettori:

1- Individuare la parte della pagina html che si vuole arricchire graficalmente.

… paragrafo …

… titolo 1 …

;

–>
… contenuto tabella

2- Richiamare nel foglio di stile:
h1 {color: red;}
p {font-size: 10px; font-family: arial}
table {width: 500px}
body {font-size: 20px; background: blue; }

Le classi:
Consentono rispetto al semplice selettore di personalizzare solo quel determinato elemento o quella serie di elementi che sfruttano la stessa classe, ovvero l’ereditarietà delle classi.
1 – Vanno dichiarati nella pagina html, con questa sintassi: (generalmente si usa div come selettore, ma a secondo delle esigenze si possono usare qualsiasi altro selettore, il metodo è sempre lo stesso selettore+class)

… contenuto documento …

2 – Richiamato e personalizzato nel foglio del css, così:
.nomedellaclasse
{
font-family: arial;
color: red;
}

L’ereditarietà delle classi:

1. in html dichiaro una classe per uno specifico elemento:

contenuto

2. in css, rilevo come fatto sopra la classe:
.prova{
font-size: 15px;}

3. alla classe, posso associare altri elementi, precendola, così.
p.prova{
font-size: 15px;}

Le classi per i selettori:
E’ possibile specificare anche un determinato elemento in html.
1-html

…

….

2-css
p.nomeclasse {text-align: right;}
h1.titolo {font-weight: bold;}

Id:
1 – Vanno dichiarati nella pagina html, con questa sintassi:

… contenuto documento …

2 – Richiamato e personalizzato nel foglio del css, così:
#nomedellaclasse
{
font-family: arial;
color: red;
}

Nota:
la differenza sostanzialmente è che l’id è unico rispetto ad una classe e che si richiama con il cancelletto # anziché il punto.

Il Testo:

Allineamento
p {text-align: left;} /* a sinistra*/
p {text-align: right;} /* a destra */
p {text-align: center;} /* al centro */
p {text-align: justify;} /* giustificato */

Decorazione
p{text-decoration: overline;} /* sopralineato */
p{text-decoration: underline;} /* sottolineato */
p{text-decoration: overline underline;} /* sopra e sottolineato*/
p{text-decoration: line-through;} /* barrato */
p{text-decoration: blink;} /* */
p{text-decoration: none;} /* nessuno */

Trasformazione
p{text-transform: capitalize;} /* la prima lettera di ogni parola Maiuscola*/
p{text-transform: uppercase;} /* tutto minuscolo */
p{text-transform: lowercase;} /* TUTTO MAIUSCOLO*/

Interlinea
div {line-height: 50%;} /* il valore può essere espresso anche in em , preceduto dal numero, es.: 5em */

Spaziatura tra le lettere
div {letter-spacing: 2px;} /* il valore può essere espresso anche in em , preceduto dal numero, es.: 5em */

Il Carattere:
p {font-family: verdana} /* tipo di carattere */
p {font-size: 18px;} */ dimensione del carattere, generalmente espressa in px */
p {font-style: italic;} */stile del carattere: corsivo */
p {font-style: normal;} */stile del carattere: normale */ PREDEFINITO
P {font-weight: bold;} */spessore del carattere: grassetto*/
h1 {font-weight: 700;} */Personalizzazione dello spessore */
h1 {font-weight: lighter;} */Nessuno spessore */ PREDEDINIFTO
p {color: red;} */colore del carattere */

Gli Elenchi:
li
{list-style-type: disc;} /* i possibili valori sono: none; disc (PREDEFINITO); circle; square; decimal; lower-roman; upper-roman; lower-alpha; upper-alpha*/
li
{list-style-image: url(prova.jpg);}

Le classi degli elenchi:
1. individuare e dichiarare le classi di elenchi in html:

2. in css:
li.nomeelenco
{color: red;}

Lo Sfondo:
p {background-color: yellow} */colore di sfondo della pagina */

div {background-image: url(sfondo.jpeg);} */immagine di sfondo della pagina*/
div {background-image: url(sfondo.jpeg); background-repeat: repeat; } */RIPETE l’immagine di sfondo della pagina,*/PREDEFINITO
div {background-image: url(sfondo.jpeg); background-repeat: repeat-x;} */ripete ORIZZONTALMENTE l’immagine di sfondo della pagina,*/
div {background-image: url(sfondo.jpeg); background-repeat: repeat-y; } */ripete VERTICALMENTE l’immagine di sfondo della pagina,*/{background-image: url(sfondo.jpeg); background-repeat: no-repeat; } */NON RIPETE l’immagine di sfondo della pagina,*/
div {background-image: url(logo.gif); background-repeat: repeat-y; background-position: 50% 50%;} */dove devi inziare a ripetersi verticalmente*/
div {background-image: url(logo.gif); background-repeat: repeat-x; background-position: 50% 50%;}*/dove devi inziare a ripetersi orizzontalmente */
div {background-image: url(sfondo.jpeg); background-attachment: scroll; } */sfondo che si muove con lo scrolling pg */
div {background-image: url(sfondo.jpeg); background-attachment: fixed;} */sfondo fisso non si muove con lo scrolling */

I Link:
a:link {color: red} /*link normale */
a:visited {color: red} /*link visitato*/
a:hover {color: blue} /*link al passaggio del mouse*/

Gli attributi, generalmente si applicano ad hover:
a:hover {bgcolor: blue; text-decoration:italic; font-size:10px; font-family: arial}
/* bgcolor, stabilire il colore di sfondo, l’effetto evidenziatore; text-decoration, indica lo stile che può assumere il testo; font-size la dimensione del testo; font-family, il tipo di carattere; è possibile anche inserire un’immagine di sfondo con background-image: url (nome.jpg). */

Le classi per i link:
1 – Nella pagina html, individuare tutti i link che vogliamo assegnare una classe:
lacineteca.org

2- Nel foglio di stile, richiamare la classe:
a.affiliati:link { background: red}
a.affiliati:visited { background: red}
a.affiliati:hover { background: blue}

Box model (Spaziatura e Margini)
1- in html dopo inserire e chiudere il prima di

….contenuto

2- nel css, inserire la seguenti sintassi
#nomebox
{ width: 350px; */larghezza */
height: 150px; */ altezza */
padding: 0px 0px 5px 5px; */ spaziatura interna*/
margin: 5px 5px 10px 5px; */spaziatura esterna*/
border: 5px solid; */ bordo*/
}

Nota: il margin, padding e border possono essere dichiarati, anche in questo modo:
top=sopra; bottom=fondo; left=sinistra; right=destra.
padding-top
padding-bottom
padding-left
padding-right

margin-top
margin-bottom
margin-left
margin-right

border-top
border-bottom
border-left
border-right

Inoltre il border può essere:
none
dotted
dashed
double
groove
ridge
inset
outset
solid

Posizionamento degli elementi:
#posizioneelemento
{ position: absolute; */la position può essere absolute (assoluta) o relative (relative valore di default)
top: 150px; */distanza bordo superiore pg e elemento*/
left: 250px; } */distanza bordo a sinistra pg e elemento*/

#classenascosta
{ display: none; } */nasconde elemento*/
#classevisibile
{ display: block; } */visualizza l’elemento*/

Il cursore del mouse:
a { cursor: crosshair; } */il cursore del mouse nel sito è differente da quello usato dal pc; può essere: auto; default; crosshair hand pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help.

Anche in questo caso, possiamo personalizzare con una classe, in modo che solo alcuni link abbiamo quel cursore.
1.html: clicca qui
2. css: a.cursore { cursor: crosshair; }

La barra di scorrimento:
body
{ scrollbar-base-color: #000000; */*/
scrollbar-face-color: #000000;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-dark-shadow-color: #FFFFFF;
scrollbar-3d-light-color: #FFFFFF;
scrollbar-track-color: #FFFFFF; }

Tabble less
Costruire un layout attraverso le tabelle del css, detto tabble less.
Potete personalizzare come meglio credete il nome delle classi, anche se generalmente per main o wrapper s’intende la struttura generica; header e footer sono rispettivamente la testata e le piè di pagina; il content è il contenuto; la sidebar è la colonna sinistra e/o destra – a volte anche doppia colonna sx o dx.
1. html, creazione pagina index.html

prova

contenuto del sito
Benvenuti sul sito “computer e web” pagina test sui css.

2.Creiamo un foglio di stile, chiamamolo ad esempio stile.css (lo abbiamo già dichiarato in html!)
body
/*stilizzazione della barra di scorrimento*/
{ scrollbar-base-color: black;
scrollbar-face-color: black;
scrollbar-shadow-color: white;
scrollbar-arrow-color: white;
scrollbar-highlight-color: white;
scrollbar-dark-shadow-color: white;
scrollbar-3d-light-color: white;
scrollbar-track-color: white; }
{
background: #FFFFFF;
color: #000000;
margin: 10px 0px 10px 0px;
}
div
{
font-size: 11px;
font-family: verdana;
}

a { cursor: move; } /*stilizzazione del cursore al passaggio sui link*/

a:link { background: white} /* impostiamo i link affinchè cambiano colore di sfondo al passaggio del mouse*/
a:visited { background: white}
a:hover { background: blue}

/*formattazione generale della pagina*/
.main
{
text-align: left; /*allineamento del testo a destra*/
width: 750px; /*larghezza della pagina*/
border: solid 1px black; /*bordo della pagina*/
}
/*la grafica della testata (comunemente chiamata header)*/
.header
{
border-bottom: solid 1px black;
}
/*la grafica del box che contiene il menù*/
.colonna
{
float: left;
width: 146px;/*larghezza molto importante in considerazione di quella del contenitore*/
border-right: solid 1px black;
margin-bottom: 2px; /*spaziatura interna parte bassa*/
}
/*i nostri elenchi contenenti link compaino senza alcun stile*/
li
{list-style-type: none;}
/*la grafica vera e propria del contenuto*/
.contenitore
{
margin-left: 2px;
padding-bottom: 5px;

float: left;
width: 600px;
}
/*la grafica delle piè di pagina (comunemente chiamata footer)*/
.footer
{
clear: left;
border-top: solid 1px black;
}

Guarda l’esempio!

Ti è piaciuta questa guida?
Allora, perchè non scaricarla, nel formato universale per eccellenza, il PDF!
Clicca con il tasto destro del mouse sul link qui sotto e poi su salva oggetto con nome.
http://www.computereweb.net/guida-css.pdf

Computer e Web .net » css

EBOOK, libro elettronico

GUIDA CSS

… titolo 1 …

;

;

;

….

computereweb.net

Guarda l’esempio!