Pagina aggiornata... Lunedì, 12 febbraio 2024 * Tempo di caricamento 0.23 secondi
Link navigazione : Home telaioHome ~ 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 2560 utenti


 H: 
Buon Autunno !





Segui il telaio su Facebook

* 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...

Sari
28/09/2024 11:38:22
Buongiorno Penelope,è sempre interessante passare dalle tue pagine e scoprire il frutto del tuo lavoro. L'autunno è già felicemente iniziato ma ne prenderò ugualmente uno... sono così carini.Grazie.
ೡ Scritto in... Countdown stagioni e feste
 
Gabriella
19/09/2024 11:36:38
Penny sono bellissimi ! Complimenti
ೡ Scritto in... Countdown stagioni e feste
 
Elise
08/09/2024 18:17:18
Ciao Penelope, sono ancora qui, mi piace il tuo Countdown di Halloween e l'ho inserito nel mio blog.Grazie , un abbraccione e buona domenica!!!Baci Elise
ೡ Scritto in... Countdown stagioni e feste
 
Elise
05/09/2024 17:06:43
Ciao Penelope, ho prelevato due adottini "amo l'Inverno", come sempre sei bravissima!!!!!Grazie un abbraccione e buona serataElise
ೡ Scritto in... I love Winter...
 
DanyGraphic
31/08/2024 05:19:19
Sono passata per un saluto ....è sempre un piacere navigare nel tuo sito. Buon fine settimana
ೡ Scritto in... Home
 
Elise
02/08/2024 09:42:01
Ciao Penelope, sono contenta che ti ricordi di me, ti dirò anche io sto poco al PC è un caldo veramente esagerato!!! Continuerò a seguirti , troppo belle le tue creazioni.Grazie un abbraccione e buona estate anche a te
ೡ Scritto in... Home
 
Elise
20/07/2024 16:43:26
Ciao Penelope, ho preso un tuo bellissimo bottone top Home, spero non ti dispiaccia.Ti ringrazio.Un abbraccioneElise
ೡ Scritto in... Bottoni top page tag e pixel
 
Elise
19/07/2024 12:02:47
Ciao Penelope, non so se ti ricordi di me, io è un pò che non vado sul blog, volevo solo dirti che che ho preso la stagione estate, sei bravissima Grazie e alla prossimaElise
ೡ Scritto in... Stagione attuale vintage...
 
Grazia
18/07/2024 19:42:31
Ciao Penelope carissima, sono passata per un salutino ♥ Qui sempre bellissimo :) Sto lavorando al sitino in HTML nuovo ma fa caldissimo e mi sciolgo davanti al pc. Spero di metterlo online presto, tra i lavori handmade e la scrittura è arduo ma ci tengo a ritornare più attiva online♥ Smackete e buonissima estate a te ed ai ragazzi, dolce amica storica :D
ೡ Scritto in... Home
 
Miryam
07/06/2024 15:32:30
Ciao Penelope, sono venuta a sbirciare il tuo sito dopo aver visto un tuo commento sul blog di Arwen. Penso proprio che userò qualcuna delle tue fatine per uno dei miei siti prossimamente... Ti terrò informata! Torno a trovarti... Buon weekend!
ೡ Scritto in... Home