Pagina aggiornata... Lunedì, 12 febbraio 2024 * Tempo di caricamento 0.56 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » Basi css pagina web

..:: Basi css per una pagina web ::..

I css sono indicazioni che possiamo inserire in una pagina web affinché ciò che
pubblichiamo abbia un determinato aspetto, ci permettono di personalizzare ogni singolo elemento,
il colore o lo sfondo grafico della pagina, tipo, colore e misura del font per il testo dei contenuti
e per il testo di titoli e paragrafi, i contenitori (div, table, celle), i link, le immagini, ecc., ecc.,

Possiamo scrivere i parametri per le indicazioni in linea cioè man mano in ogni elemento
e/o testo che inseriamo o scrivere le classi css da richiamare dove e quando servono
L'insieme di classi (style css) necessarie si può scrivere nella pagina o in un file esterno
così da poterlo richiamare in tutte le pagine del sito

Questo è un esempio per un paragrafo con lo style css in linea

<p style="text-align:center; font-family:Verdana; font-size:12px; color:#af757d;">Testo</p>
Soluzione veloce ma poco pratica perché occorrerà scriverlo così ogni volta e causerà confusione
nel codice della pagina che man mano sarà piena di tag simili, quindi opzione sconsigliata

Vediamo come scrivere le classi da richiamare nei vari elementi

Lo style css di una pagina web si scrive tra i tag <head> e </head>
e si racchiude tra i tag <style type="text/css"></style>

Si possono scrivere classi generiche "class" da richiamare in qualunque elemento, ovviamente
considerando l'elemento e i parametri inseriti o classi con identificatore unico "id" dedicate
ad un singolo elemento e che si possono richiamare una sola volta nella pagina

Per scrivere una classe generica si utilizza il punto e un nome .mia_classe
e il tag di richiamo in un elemento nella pagina è: class="mia_classe"

Per un identificatore unico id invece si utilizza il cancelletto e un nome #mia_classe
e il tag di richiamo nell'elemento per cui è stata scritta è: id="mia_classe"

In entrambi i casi si possono scrivere precedute dall'elemento che si vuole personalizzare
table.mia_classe ma essendo una classe generica si può richiamare anche in un paragrafo,
div#mia_classe sarà comunque possibile attribuire questa classe ad un unico elemento

Per l'aspetto generale della pagina, colore/sfondo, testo, posizione e margini
si scrive una classe apposita per il body e non occorrerà richiamarla, stessa cosa
per i link a meno che non si facciano delle classi specifiche

Iniziamo quindi con la classe per la pagina (body)


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Titolo pagina</title>

<style type="text/css">
body { background-color :#d6e8f4;
text-align:center;
font-family: "Georgia";
font-size:14px;
color:#1b72ab;
}
</style>

</head>

<body>

</body>

</html>

background-color :#d6e8f4; è il parametro per impostare il colore di sfondo della pagina,
per un'immagine grafica si utilizza background-image: url('url pagina immagine');

* Proseguiamo con le classi per i titoli e i paragrafi

I titoli scritti utilizzando questi tag hanno determinate regole, per maggiori info
leggete anche la guida dettagliata qui -> w3schools tag titoli

In sostanza <h1> si può utilizzare una sola volta nella pagina, per intestazione/titolo
e bisogna poi proseguire in ordine <h2>, <h3>, ecc., ecc.

[...]

/* Classi per titoli e titoletti */
h1,h2,h3{margin: 0; color: #105d96;}
h1{margin-bottom: 5px;font-size:110%}
h2{margin-bottom: 8px;font-size: 100%;text-align:center;}
h3{margin-bottom: 5px;font-size: 100%;font-style: oblique;text-align:center;}

/* Classe per testo paragrafo */
.testo_piccolo {
font-family : "Georgia";
color : #8aa616;
font-size : 11px;
margin: 0;
}

Queste classi vanno richiamate dove occorre nella pagina
- I titoli: <h1>Titolo </h1> - <h2>Titolo </h2> - <h3>Titolo </h3>
- Un paragrafo: <p class="testo_piccolo">Testo </p>

I font che si possono utilizzare in una pagina web che non creano problemi con i vari sistemi
operativi sono relativamente pochi, spesso risultano "freddi" ma sono leggibili perché non hanno
esagerazioni grafiche, in alcuni casi però occorre intervenire sullo spazio tra le linee di testo altrimenti
risulta troppo fitto, ad esempio, il font per il testo del telaio è il Georgia, molto elegante e armonioso
ma ho dovuto inserire il parametro line-height impostato a 1.5 (line-height: 1.5;) affinché le righe
di testo non risultassero troppo appiccicate e faticose da leggere, con altri font invece è meglio
impostare una misura più grande perché i caratteri risultano molto piccoli

- Questi sono i font consigliati in rete:

Arial - Brush Script MT - Comic Sans - Courier New - Garamond - Georgia - Helvetica - Impact
Lucida Console - Palatino - Tahoma - Times New Roman - Trebuchet MS - Verdana

C'è anche la possibilità di utilizzare dei font personalizzati, con il codice fornito da Google font
o scaricati in rete, free o a pagamento e importati nel proprio spazio hosting da richiamare nei css
se vi può interessare leggete il tutorial Font personalizzato

* Aggiungiamo le classi per i link

Come tutto il testo che scriveremo nella pagina anche i link si visualizzeranno con il font impostato
ma di default sono di colore blu e sottolineati, caratteristica pensata probabilmente perché devono
attirare l'attenzione e far capire che è un testo che permette di accedere ad altro contenuto

Per renderli coordinati ai colori delle nostre pagine si può intervenire con una classe che funzionerà
senza richiamo e come per il body scriviamo le personalizzazioni direttamente nel tag a, per il colore,
eliminare la sottolineatura, il font e/o la misura, uno sfondo, il tipo di cursore che si deve visualizzare
al passaggio del mouse, insomma si può aggiungere qualsiasi proprietà css

[...]

/* Classe per i link */
a {
text-decoration: none;
cursor:nw-resize;
font-family : "Georgia";
color : #8aa616;
font-size : 12px;
}

Oppure possiamo inserire queste 4 proprietà ognuna con la sua funzione specifica

a:link - Contiene i parametri con cui si vuole far visualizzare i link nella pagina,
font, colore e misura possono essere differenti da quello impostato nel body per la pagina

a:visited - Se si imposta un colore differente da quello inserito nella classe link mostra all'utente i link che ha già cliccato

a:hover - In base ai parametri inseriti si modifica al passaggio del mouse

a:active - Visualizza un collegamento nel momento in cui viene cliccato

- Esempio di classi per i link


[...]

/* Classi per i link */
a:link {
text-decoration: none;
cursor:nw-resize;
font-family: "Georgia";
font-size: 14px;
color:#3a2427;
}
a:visited {
text-decoration:none;
cursor:nw-resize;
font-family: "Georgia";
font-size: 14px;
color:#a27279;
}
a:hover {
text-decoration: line-through;
color: #909753;
}
a:active {
font-family: "Georgia";
font-size: 14px;
color: #c3070a;
}

Ecco come si visualizzeranno i link
a:link Nome Link       a:visited Nome Link
a:hover Nome Link       a:active Nome Link

Queste classi saranno attive in ogni link che si scrive nella pagina,
per link particolari o comunque differenti se ne possono aggiungere altre impostando
anche un font personalizzato, queste classi extra andranno richiamate nel codice

- Esempio classi extra per i link


[...]

/* Classi extra per i link */
a.nome_classe:link{
font-family: "Verdana";
color : #909753;
font-size : 12px;
text-decoration: none
}
a.nome_classe:visited {
text-decoration:none;
cursor:nw-resize;
font-family: "Verdana";
font-size: 12px;
color:#464d0b;
}
a.nome_classe:hover{
color: #5f6339;
text-decoration: underline
}
a.nome_classe:active {
font-family: "Verdana";
font-size: 12px;
color: #dca328;
}

Questa classe deve essere richiamata nei link così:
<a class="nome_classe" href="url pagina">Nome link</a>

Ecco come si visualizzeranno i link
a:link Nome Link       a:visited Nome Link
a:hover Nome Link       a:active Nome Link

In questa pagina ho inserito in modo completo gli esempi delle classi css
che ho descritto, Pagina css completo ricapitolando, abbiamo visto come si scrivono
le classi per il body (pagina), i titoli e i paragrafi, ed infine per i link, e questi sono solo degli esempi
che si possono arricchire, in base alle esigenze, con altri parametri ma sono le basi che ci servono
per iniziare a scrivere i css, per lo meno in modo ordinato, così sarà sicuramente
più semplice apportare modifiche e aggiornamenti futuri

Attenzione ai nomi che inserite nelle classi, se sono doppi verrà presa
in considerazione la prima classe scritta quindi vi potreste ritrovare una table
che si visualizza con i parametri inseriti per un paragrafo

Ora possiamo proseguire con i parametri per i contenitori dei vari spazi della pagina,
per gli elementi grafici, menu di navigazione e via dicendo, si possono fare delle aggiunte e/o modifiche
in qualsiasi momento per ottenere esattamente ciò che vogliamo in maniera semplice e veloce

Nel menu html in colonna trovate i tutorial specifici per approfondire su questi elementi base
e per aggiungere eventualmente gli altri elementi necessari in una pagina/sito web

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 ^_^
90%
Voti totali: 4
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 2723 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...