Pagina aggiornata... Venerdì, 03 maggio 2024 * Tempo di caricamento 0.26 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » CSS o foglio di style - File esterno

..:: CSS o foglio di stile in file esterno ::..

CSS è la sigla di Cascading Style Sheets ovvero foglio di stile a cascata,
"stile" perché è il linguaggio che ci permette di realizzare il design di una pagina web,
"a cascata" perché le classi con i parametri si scrivono una di seguito all'altra

I CSS sostituiscono i parametri scritti in linea in tutti i contenuti di una pagina web,
dall'aspetto della pagina, la struttura (layout), il testo, contenitori, immagini, ecc. ecc...

Esempio pratico, per definire il tipo (font), il colore e la misura per la scrittura di
un testo/paragrafo occorre inserire i parametri necessari al tag che lo racchiude, <p>[...]</p> se
si procede in linea si avranno righe di codice simili a questa, da riscrivere in ogni testo/paragrafo

<p style="text-align:center; font-family:Verdana; font-size:12px; color:#af757d;">Testo</p>

Con una classe CSS si semplifica il lavoro e il codice della pagina che sarà più leggero e pulito

[...]
.testo_verde {
text-align:center;
font-family: 'Verdana';
font-size: 12px;
color : #af757d;
margin: 0px;
}

Per richiamare la classe nella pagina basterà scrivere:
<p class="testo_verde">Testo</p>
e si potrà utilizzare tutte le volte che sarà necessario

Nel tutorial Basi CSS pagina web ho spiegato quali siano le classi indispensabili per realizzare
e personalizzare una pagina web, se avete dato un'occhiata vi sarete accorti che le classi da scrivere
sono molte, si inizia dal body ovvero l'aspetto principale della pagina, poi i titoli, i paragrafi,
i link, e per un sito un po' elaborato serviranno classi per i contenitori della struttura/layout
per i contenitori dei contenuti, i menu per la navigazione delle pagine e via dicendo...

Man mano che si procede con la realizzazione di una pagina o meglio ancora di un sito web,
i CSS si arricchiranno di classi ovvero tante righe di codice che occuperanno parecchio spazio,
in questo esempio ho inserito solo le voci principali

<style type="text/css"> o <style>
body { background-color :#d6e8f4;
text-align:center;
font-family: "Georgia";
font-size:14px;
color:#1b72ab;
}
/* Classi per titoli e titoletti */
h1,h2,h3{margin: 0; color: #105d96;}
... parametri ...

/* Classe per testo paragrafo */
.testo_verde {
... parametri ...
}
/* Classi per i link */
a:link {
... parametri ...
}
a:visited {
... parametri ...
}
a:hover {
... parametri ...
}
a:active {
... parametri ...
}

/* Classi layout */
div#header {
... parametri ...
}
div#corpo {
... parametri ...
}
div#footer {
... parametri ...
}

/* Classi per Table */
table.base{
... parametri ...
}
table.bordo{
... parametri ...
}
table.rossa{
... parametri ...
}

/* Classe menu barra */
.menu_barra {
... parametri ...
}
/* Classe menu colonna */
.menu_colonna {
... parametri ...
}
/* Classe ..... */

</style>

Per alleggerire le pagine del sito e semplificare il lavoro si possono scrivere i CSS in un'altra pagina,
una pagina/file dedicata che deve avere come estensione .css da richiamare con una riga di codice

In una nuova pagina, che non abbia nessun altro codice si scrivono o incollano le classi
senza il tag dello stile che lo racchiude, <style type="text/css"> o <style>[...]</style>
si salva la pagina/file inserendo un nome tipo style.css - style_home.css - style_pagine.css si carica
nel proprio spazio web e si richiama nella pagina/e, sopra il tag </head> con questo codice

<link rel="stylesheet" type="text/css" href="style.css">

Con i CSS scritti in un unico file sarà più semplice apportare modifiche
in tutte le pagine del sito senza doverle rieditare singolarmente

Si possono scrivere più file .css dedicati ad esempio a menu particolari, alla struttura o
per gli script e si richiamano tutti nella pagina/e scrivendo sempre prima del tag </head>
sarà ancora più semplice fare delle modifiche e/o aggiornamenti

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="menu.css">

* Per scrivere in modo corretto i CSS affinché siano "compresi" dai vari browser
vi consiglio di consultare w3schools.com/css/ con spiegazioni dettagliate ed esempi live

Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^
100%
Voti totali: 2
Rating... 5





Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* ♥ Gif...

  


~ Pagina visitata da 2245 utenti


 H: 
Buona Primavera e ...buon weekend!





Segui il telaio su Facebook

Privacy Policy Cookie Policy

* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥

..:: Basi ::..



..:: html ::..





..:: Script page ::..



..:: Script gadget ::..


Accessori e gadget del telaio...


Spazio web...

Realizzare e gestire un sito web
nell'hosting free più famoso...

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

Grazia
09/03/2025 18:13:32
Ciao Penny, sono passata a lasciarti un salutino di buona domenica ed anche a ringraziarti per aver inserito il mio bannerino. Un abbraccio forte ed alla prossima :) Ciaooo
ೡ Scritto in... Home
 
Gabriella
07/03/2025 12:04:36
Ciao Penny, visto che usufruisco spesso delle tue lezioni di codici e html ho preso i tuoi banner ;) Grazie e un abbraccio
ೡ Scritto in... Banner link del telaio ^_^
 
Mamyr
06/03/2025 13:34:06
Ciao Penelope, grazie per questo tuo sito meraviglioso e molto utile, ho prelevatoL'almanacco in table -blu- per inserirlo nel mio blog. Inserirò anche il tuo banner, grazie ancora e buona giornata.
ೡ Scritto in... Almanacco in table
 
Pinalie
03/03/2025 01:38:03
Oh sweet Penelope .. im sorry you can make no comment yet on my pageim still working to make it fit to goi hope end summer it will be done, i hope whoo!i instalt a new clock from you.. love your clocks so much thank you so much again for your lovley giftmy derest greetings ♥♥♥
ೡ Scritto in... Orsetti...
 
Grazia
26/02/2025 09:43:32
Ciao carissima Penelope, come stai? E' da tanto che non ci sentiamo. Qui è sempre tutto meraviglioso! Sono passata a prelevare un tuo banner da inserire nel mio nuovo spazio web, alla fine sono riuscita ad inaugurare quel "famoso" sito statico in cui offro piccole utilità grafico/digitali agli utenti e l'ho chiamato Dreamland...mi ci è voluto un po' ma sono partita col progetto...dai che così magari ci sentiamo più spesso. Ancora complimenti, un abbraccio e sereno proseguimento di giornata ♥
ೡ Scritto in... Home
 
ೡPenelope ♥
18/02/2025 20:27:41
Dear Pinalie thank you so much, I couldn't leave a message in your space, a big hug ♥
ೡ Scritto in... Orsetti...
 
ೡPenelope ♥
18/02/2025 20:16:52
Cara Filo d'arianna ti ringrazio tanto, fammi sapere quando avrai un tuo spazio così da poter ricambiare, una abbraccio forte ♥
ೡ Scritto in... Banner link del telaio ^_^
 
Antonella
13/02/2025 01:00:16
ciao Penelope ho prelevato uno dei tuoi almanacchi e l'ho inserito nel mio blog.Complimenti per il tuo sito sempre ricco e interessante.[Link]
ೡ Scritto in... Almanacco soft
 
Vale
02/02/2025 06:15:22
carinissimi!!♥
ೡ Scritto in... Mini cursori
 
Pinalie
19/01/2025 22:47:05
Deer Penelope i love and instal your sweet little bear Date Time on my pageThank you so much for your work
ೡ Scritto in... Orsetti...