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 - introduzione ai Css

I Css3 ovvero Cascading Style Sheets

Guida CSS di base

I CSS servono per gestire tutto il layout di un sito Web. Grazie ad essi è possibile intervenire sulla formattazione del testo, sul posizionamento degli elementi grafici e sulla disposizione che questi elementi avranno rispetto ai diversi dispositivi. Questa guida permette di comprendere le nozioni più importanti per la creazione di layout, sfruttando caratteristiche universalmente condivise da tutti i browser.

Vari sono i modi per inserire i fogli di stile CSS in un documento. Per capire il meccanismo è necessario chiarire preliminarmente la fondamentale distinzione tra fogli esterni e interni.

Inserire i fogli di stile CSS in un documento
Vari sono i modi per inserire i fogli di stile CSS in un documento. Per capire il meccanismo è necessario chiarire preliminarmente la fondamentale distinzione tra fogli esterni e interni.
CSS esterni e interni
È esterno un foglio di stile definito in un file separato dal documento. Si tratta di semplici documenti di testo modificabili anche con un editor di testo ai quali si assegna l’estensione .css.

Un foglio di stile si dice invece interno quando il suo codice è compreso in quello del documento. A seconda che si lavori con un CSS esterno o interno variano sintassi e modalità di inserimento. Rispetto a queste diverse modalità si parla di fogli di stile collegati, incorporati o in linea.

Fogli di stile collegati
Per caricare un foglio di stile esterno in un documento esistono due possibilità. La prima è quella che fa uso dell’elemento HTML <link> La dichiarazione va sempre collocata all’interno della sezione <head>  del documento HTML:

<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
</head>
<body>
[...]
</html>

L’elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione:

Attributo Descrizione
rel descrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.
href serve a definire l’URL assoluto o relativo del foglio di stile. È obbligatorio
type identifica il tipo di dati da collegare. Per i CSS il valore da usare è text/css. L’attributo non è più obbligatorio a partire dalla versione 5 del linguaggio HTML.
media con questo attributo si identifica il supporto (schermo, stampa, etc.) cui applicare un particolare foglio di stile. È un attributo opzionale. Per i dettagli implementativi si veda la lezione 6 della guida.

Usare @import per caricare un CSS esterno

Un altro modo per caricare CSS esterni è usare la direttiva @import all’interno dell’elemento <style>:

<html>
<head>
<style>
@import url(stile.css);
</style>
</head>
<body>
[...]
</html>

Il CSS va collegato definendo un URL assoluto o relativo da racchiudere tra parentesi tonde (ma vedremo che altri modi sono accettati) e che la dichiarazione deve chiudersi con un punto e virgola. Questa modalità di inserimento di CSS esterni è comunque ormai in disuso. Il metodo da prediligere è quello basato sull’elemento link.

Fogli incorporati CSS

I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite il tag <style>. Anche in questo caso la dichiarazione va posta all’interno della sezione <head>:

<html>
<head>
<style type="text/css">
body {background: white;}
p {color: black;}
[...]
</style>
</head>
<body>
[...]
</html>

Come si vede, la parte di codice che ci interessa inizia con l’apertura del tag <style>. Esso può avere due attributi:

  1. type (opzionale);
  2. media (opzionale).

Per entrambi gli attributi valgono le osservazioni viste in precedenza. Seguono le regole del CSS e la chiusura di </style>.

CSS in linea

L’ultimo modo per formattare un elemento con i CSS consiste nell’uso dell’attributo HTML style. Esso fa parte della collezione di attributi HTML definiti globali: si tratta di quegli attributi applicabili a tutti gli elementi. La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente:

<elemento style="regole_di_stile">

Se, ad esempio, si vuole formattare un titolo h1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo:

<h1 style="color: red; background: black;">...</h1>

Le cose da osservare nel codice sono due. Come valore di style si possono dichiarare più regole di stile. Esse vanno separate dal punto e virgola. I due punti si usano invece per introdurre il valore della proprietà da impostare. Esattamente come si fa con i CSS esterni e incorporati.

Consigli sui fogli di stile CSS

A questo punto è giusto chiedersi: quando usare l’una o l’altra soluzione? Il punto di partenza nella risposta deve essere questo: i risultati nella formattazione del documento non cambiano. Una cosa è però facilmente intuibile: l’uso estensivo di fogli in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine più leggere e facili da gestire. Intervenire nei meandri di una pagina per andare a modificare uno stile e ripetere l’operazione per quante sono le pagine del nostro sito può diventare davvero frustrante. Del resto, il loro uso è considerato deprecato anche dal W3C. Nelle più moderne pratiche di sviluppo, l’uso di CSS in linea è quasi sempre limitato a regole inserite dinamicamente tramite Javascript.

Dunque, usare sempre fogli di stili esterni. Ricorrere a quelli incorporati per particolari esigenze di formattazione su elementi specifici di una certa pagina. Rifuggire fin quando è possibile dall’uso di CSS in linea.


 




Data creazione : 03/01/2011 @ 15:17
Ultima modifica : 08/11/2021 @ 09:40
Categoria : Guida ai Css
Pagina letta 6296 volte


Stampa pagina Stampa pagina

 
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: 5

Visite totali Visite totali: 2002271  

Webmaster - Infos

Ip: 18.97.14.84

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 ^