Guida ai fogli Stile CSS. Lezione 2 la sintassi

Sintassi CSS

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

Sintassi 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

 

 

 

Guida ai CSS
Guida introduttiva ai fogli di stile CSS

 

Aprile 2024
L M M G V S D
1234567
891011121314
15161718192021
22232425262728
2930