Menù Principale

il Webmaster

Politica a Latisana

Links e Banners

Pubblicità Amici

WebTools - Scripts

Chiudi Dossier Antivirus

Chiudi Grafica & Design

Chiudi Guida PHP

Chiudi Guida ai Css

Chiudi Guide al Javascript

Chiudi HTML - XHTML - XML

Chiudi Software Programmi Utili

Chiudi Tools Webmaster

Chiudi Utilità Varie

Chiudi Utilità e Script in Flash

Chiudi Video Guide Manuali

Altri Miei Siti

Pubblicità Amici !
LegaNord Latisana anclignano pertegada calcio yorkshire susy


Don.Severino Valvason
il vostro Webmaster
Webmaster - Infos
Mini Tchat
Entra in Chat
Photo Gallery

Guida ai Css - Css. nel foglio Esterno

Foglio di style esterno

Foglio di style esterno Abbiamo visto come definire uno   quando ci serve magari una veloce particolarità delimitata ad una sola zona del nostro documento.
Abbiamo visto anche come definire uno   stile ad inizio pagina al quale tutto il documento faceva riferimento ed uso.

Vediamo adesso quello che è in assoluto il più comodo e pratico dei sistemi, quello in cui esiste un foglio di stile esterno, separato dalla pagina web, che racchiude tutte le dichiarazioni di style, e che viene richiamato da tutte le pagine web che compongono il sito. In questo foglio, o fogli visto che possono essere più di uno solo, andremo a scrivere tutti gli stili che ci servono, comprese le "classi" e gli "id".

Anche nel caso di uno o più fogli di style esterni, sarà sempre possibile definire all'occorrenza stili ad inizio pagina e stili in linea, questi avrebbero priorità su quanto dichiarato nel foglio di style esterno.

Cosa significa foglio di stile esterno?

Significa che se gli stili da definire sono molti, se più di una sola pagina web ne farà uso, la cosa migliore da fare è sicuramente quella di creare una struttura esterna alla quale potranno accedere tutte le pagine interessate.

Questa struttura altro non sarebbe che il foglio di style, un documento di normalissimo testo con estensione finale .css dove al suo interno saranno contenute tutte le dichiarazioni valide per un foglio di style.

Valgono le stesse regole sintattiche viste fino ad ora per il foglio incorporato a inizio pagina. Unica differenza che non dovrà contenere al suo interno le dichiarazioni di style perché già presenti nella pagina html che lo richiama. 

Proviamo ad immaginare i vantaggi. Pensate di dover fare una modifica all'intero sito, magari semplicemente per cambiare un tipo di font che non vi piace più o sostituire un colore con un altro, sarà sufficiente apportare la modifica una sola volta a quel singolo foglio esterno per vedere poi immediatamente su tutte le pagine il risultato della modifica.

Comodo vero? Sono finiti i tempi in cui si passavano intere ore a rielaborare tutte le varie pagine per le modifiche e dove, immancabilmente, si finiva sempre col dimenticarne qualcuna.

Per creare questo foglio esterno sarà sufficiente ancora una volta un editor testuale, lo stesso che adoperate per html, meglio ancora se uno   specifico per css. Vi ricordo che il Wordpad, o Notepad, a corredo di windows andranno benissimo, l'importante sarà salvare sempre in formato ascii, cioè testo puro privo di particolari formattazioni, avendo cura di fare in modo che il file così salvato sia di tipo css e non txt come normalmente avviene. Se qualcuno avesse difficoltà con questo tipo di operazione (rinomina del file), potrà leggere come fare su --  questa pagina.

Esaminiamo più attentamente il nostro foglio di Stile esterno:

p{
text-align: justify;
text-indent: 12px;
}

Si noterà che praticamente è lo stesso usato nello "style incorporato" con la sola differenza che non ha più gli elementi iniziali che ne dichiaravano lo stile: <style type="text/css">, questo perché trattandosi di un foglio esterno la dichiarazione viene già messa nel documento HTML che lo richiama facendo uso della seguente sintassi:

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

Avendo cura di posizionare questa riga di richiamo fra gli elementi (tags) <head> e </head> del file html. Per essere certi di non sbagliare mettetela come ultima riga di head. praticamente prima di </head><body>. Il nome_assegnato.css sarà il nome esatto che avrete deciso di usare per il vostro foglio di stile esterno. Evitate nomi lunghi e complessi ed evitate anche spazi vuoti e caratteri riservati quali: £ $ % & / ( ? nel nome che deciderete di usare.

Oltre al type è possibile specificare anche il media al quale si fa riferimento, dove all per tutti i dispositivi di visualizzazione, screen è usato per il browser sullo schermo, print per la  stampante, handheld per dispositivi come i palmari. Volendo si possono specificare più di un solo media separandoli da virgole.

<link rel="stylesheet" href="nome_assegnato.css" type="text/css" media="screen">

Si possono avere più fogli di style esterni, è sufficiente richiamarli dalla pagina web allo stesso modo descritto sopra, uno di seguito all'altro:

<link rel="stylesheet" href="foglio_uno.css" type="text/css">
<link rel="stylesheet" href="foglio_due.css" type="text/css">
<link rel="stylesheet" href="foglio_tre.css" type="text/css">

Oppure dall'interno del foglio di style, sia interno che esterno, facendo uso di import ad inizio foglio, prima di definire qualsiasi altra regola e facendo precedere import dal simbolo chiocciola @.

@import "foglio_due.css";
@import "foglio_tre.css";

Un foglio di style esterno tipo potrebbe essere questo:

html, body{
margin-left: .5cm;
margin-right: .5cm;
color: #000099;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
}
a:link{
text-decoration: none;
color: #009900 ;
}
a:visited{
text-decoration: none;
color: Gray;
}
a:hover{
color: #ff0000;
text-decoration: none;
}
td{
font-family: "MS Sans Serif";
font-size: 12pt;
} p{
text-align: justify;
text-indent: 12px;
}

Vediamo cosa è stato ridefinito, in modo da capire meglio e cominciare a familiarizzare con le varie sigle:

html, body tutto quello dichiarato all'interno di questo elemento { ... } sarà esteso a tutto il documento, per cui tutta la pagina web farà uso di:

font-family: VerdanaArialsans-serif;
font verdana, nel caso in cui questo non fosse installato nel PC del visitatore si cercherà di usare Arial, se anche questo dovesse mancare allora un font generico della famiglia sans-serif, dopo di che sarà assunto il font di default. 

margin-left: .5cm; margin-right: .5cm;
Margine laterale dai bordi destro e sinistro: 0,5cm

color:#000099;
Colore del testo blu scuro

font-size: 10pt;
Dimensione del font 10 punti

a:link{text-decoration: none; color: #009900;}
Link da visitare non sottolineati e di colore verde

a:visited{text-decoration: none; color: Gray;}
Link visitati non sottolineati e di colore grigio

a:hover{text-decoration: none; Color: #ff0000;}
Cambio colore al passaggio del mouse sopra il link, non sottolineati e di colore rosso

td{font-family: "MS Sans Serif"; font-size: 12pt;}
Celle di tabelle con font Ms Sans Serif dimensione 12 punti

p{text-align: justify; text-indent: 12px;}
Paragrafo con allineamento giustificato, indentizione 12 pixel

NOTA: un parametro composto da due o più parole come in questo esempio il nome del font, deve essere racchiuso da virgolette, font-family: "MS Sans Serif"; Quando si propone una scelta fra diversi tipi di fonts (uso di font-family), l'ultima scelta deve essere di una famiglia di fonts, in questo caso sans-serif.

In questa fase di apprendimento non si dovrebbe badare troppo al significato di tutte le varie sigle usate per l'esempio, meglio concentrarsi sul metodo di utilizzo, una volta capito il meccanismo le sigle da adoperare si vanno a leggere e si possono copiare dalla tabella dei --
Parametri. Continua: --► Le Classi

Data creazione : 27/11/2021 @ 18:49
Ultima modifica : 28/11/2021 @ 01:50
Categoria : Guida ai Css
Pagina letta 977 volte

 
Opinioni su questo articolo

Nessuno ha lasciato un commento.
Diventa il primo a farlo!

 
Comunicazioni del Webmaster !
 
Slideshow notice
  • 2x1000.jpg
  • foghera-pertegada-33.jpg

    MTB Pertegrava

  • tesseramento-online.jpg

    Tesseramento 2015 Lega Nord online

  • santo-antonio.jpg

    Ferragostana - Festa di Santo Antonio

 
Contatteci
Connessione...
 Lista utenti registrati Utenti : 116

Username:

Password:

[ Registrazione ]


Utente online:  Utente online:
Anonimi online:  Anonimi online: 4

Visite totali Visite totali: 1988409  

Webmaster - Infos

Ip: 44.200.94.150

NewsLetters
Per ricevere informazioni sulle novità di questo sito, puoi iscriverti alla nostra Newsletter.
Captcha
Ricopia il codice :
Traduction Site
Eventi Calendario
Sondaggio
cosa pensi del Sito ?
 
Eccellente !
Ottimo
nella Media
Boh.....
C'è di Meglio
Risultati
Visites

   visitatori

   visitatori online

^ Torna in alto ^