Guida ai fogli Stile CSS. Lezione 2 la sintassi

I fogli di stile non sono altro che un modo di definere le caratteristiche di un documento, separando quelle che sono le regole di visualizzazione e permettendo di avere un controllo maggiore e realizzando moduli che poi sono riutilizzabili anche in altre pagine web, cioe’ andando a costiture dei veri e propri template. In termini pratici i fogli di stile sono delle dichiarazioni , scritte secondo determinate regole e una determinata sintassi che vedremo , che vengono inserite in una pagina web o meglio ancora vengono messe direttamente dentro dei fogli di stile con estensibile file css e da qui collegati alla pagina html. I Fogli di stile hanno il vantaggio di dare molto piu’ controllo sul comportamento grafico , si possono per esempio creare stili per i titolo, per i link di navigazione o per quelli nel testo , per le note. Ma di preciso cos’e’ uno stile? Uno stile è l’insieme di caratteristiche di un elemento della pagina ossia colore e dimensione del font, tipo di bordi, allinemaento e cosi via… I Fogli di stile possono essere interni o esterni alla pagina i fogli di stile interni si fanno con text e css. Volendo fare un esempio di codice avremo

<head>

<style type ="text/css" media="screen">

//esempio di stile per il video

<style type ="text/css" media="print">

//stile per la stampa

</head>

La solutizione ideale pero’ quando si lavora con i CSS è proprio quella di definire uno o piu’ file css esterni che contengano tutti gli stili in uso all’interno del sito.

All’interno dell’head del file andra’ poi inserito un elemento link con i seguenti attributi

rel serve a definire il tipo di relazione che intercorre tra il documento e il file collegato, per indicare un foglio di stile si usa il valore stylesheet
type specifica il tipo di dati del file da collegare in questo caso si usa la dicitura text/css
href indica la posizione del foglio di stile , puo’ assumere come valore un percorso, assoluto o relativo, o un url;
media permette di definire un foglio di stile differente che si sta utilizzando per la visualizzazione. Quindi un possiible link esterno potrebbe essere composto nella seguente maniera

<link href=”dsafa.sas” rel=”stylesheet” type=”text/css” />

Se utilizzate un editor visuale come per esempio dreamweaver questo avviene in maniera quasi automatica senza cioe’ che il programmatore quasi se ne accorga, è possibile utilizzare quindi questi tipi di programma come dreamweaver, komposer e altri che facilitano e non poco la vita del programmatore, ma che purtruppo sono quasi tutti a pagamento.

Sintassi dei vogli di Stile CSS

Veniamo adesso a parlarvi della codifica dei fogli di stile sintassi che è fondamentalmente data da

Selettore aperta dichiarazioni chiusa

Vediamo subito un esempio

<style>

< font-family: Arial, Helvetica, sans-serif; background-color: #000FF

Quelli che abbiamo visto si chiamano selettori e possono avere le seguenti tipologie

elementi HTML quindi si puo’ definire tutte le occorrenze di un determinato elemento devono avere un determinato stile
ID un identificatore univoco nel documento, ossia il nome di un’istanza di un elemento all’interno del testo, si inserisce con un attributo del tipo id=”valore”
Classi le classi vengono richiamate con la seguente metodologia class= nome della classe.

Vediamo adesso le pseudoclassi, ossia quelle che permettono di impostare la visualizzazione di un elemento in un ben determinato stato, probabilmente le avete gia’ riviste , l’elemento tipico infatti è l’elmento A che impostate nelle proprietà di pagina di Dreamweaver per permettere ai visitatori di accedere ai vari link in diverse modalità per esempio

a:link aperta color:#CC3366; chiusa
a:hover aperta : #669933; chiusa
a:visited aperta color: @000000; chiusa

dove

link è il collegamento alla pagina web che ancora si deve visitare
visited indica lo stato di collegamento gia’ visitato
hover lo stato del collegamento quando ci passiamo sopra con il mouse
active definisce il collegamento attivo ossia nel momento stesso in cui l’utente ci fa click sopra.

Vediamo adesso come è possibile agire sui Font tramite i CSS

Innanzitutto vediamo qual’e’ la dichiarazione dei font disponibili.

font-family segue uno o piu’ tipi di font
font-size per la dimensione
font-style puo’ assumere valore italic o oblique
font-weight sta ad indicare lo spessore i suoi valori sono bold, bolder, lighter
font-variant definisce una variante come il maiuscoletto
text-transform puo’ avere valori come capitalize , ossia le iniziali maisucole, uppercase tutto maiuscolo, lowercase tutto minuscolo
color da il colore del testo
text-decoration assume valori come inderline sottolineato, overline linea appoggiata, line.through per il barrato, blink per il lampeggiante
lette spacing e word spacing la spaziatura tra lettere e tra parole espressa in em

L	M	M	G	V	S	D
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

L	M	M	G	V	S	D
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Dedicato ai WebMaster

Guida ai fogli Stile CSS. Lezione 2 la sintassi

Sintassi dei vogli di Stile CSS

Creare un Blog Modello Wordpress

Guida al Posizionamento SEO nei motori di ricerca

Guida ai Feed Rss

Recensione Cellulari

Guida su Aspnet

Lo studio della Semantica SEO

Creare Blog Modello Wordpress

Articoli Recenti

Calendario

Guida Turorial su Wordpress1

Sicurezza Informatica

Seo Guida Definitiva

Materiale Didattico Metodi Matematici per l’Ingegneria

Materiale didattico Lezioni di Elettrotecnica

Materiale Didattico il WWW

Guida al linguaggi di programmazione PHP

Guida RSS

Guida ai CSS

Guida Linguaggio di programmazione Aspnet

Guida linguaggio di programmazione Ajax

Materiale Didattico di Fisica

Composer

Guida Server Apache

Google Api Key

Guida alla Monetizzazione Adsense

Lezioni di Elettrotecnica

Rete Web Funzionamento e Definizioni

Guida su Action Script

Guida Agli Action Script

Guida al Posizionamento SEO nei motori di ricerca

Guida ai fogli Stile CSS. Lezione 2 la sintassi

Sintassi dei vogli di Stile CSS

Creare un Blog Modello Wordpress

Guida al Posizionamento SEO nei motori di ricerca

Guida ai Feed Rss

Recensione Cellulari

Guida su Aspnet

Lo studio della Semantica SEO

Creare Blog Modello Wordpress

Articoli Recenti

Calendario

Guida Turorial su Wordpress1

Sicurezza Informatica

Seo Guida Definitiva

Materiale Didattico Metodi Matematici per l’Ingegneria

Materiale didattico Lezioni di Elettrotecnica

Materiale Didattico il WWW

Guida al linguaggi di programmazione PHP

Guida RSS

Guida ai CSS

Guida Linguaggio di programmazione Aspnet

Guida linguaggio di programmazione Ajax

Materiale Didattico di Fisica

Composer

Guida Server Apache

Google Api Key

Guida alla Monetizzazione Adsense

Lezioni di Elettrotecnica

Rete Web Funzionamento e Definizioni

Guida su Action Script

Guida Agli Action Script

Guida al Posizionamento SEO nei motori di ricerca

Legge sui Cookies