Linguaggi di markup: CSS Linguaggi per il Web Linguaggi di markup: CSS

Cascading Style Sheets Fogli di stile sovrapposti DEFINIZIONE Il CSS è l’insieme delle regole che definiscono l’aspetto grafico (lo stile) degli elementi delle pagine web a cui si applicano. Breve storia Il sistema dei tag definito in html era originariamente progettato per definire il contenuto di un documento, si pensava che il layout fosse totalmente a carico del browser e non si dovessero inserire tag di formattazione. Poiché i due browser più diffusi continuavano ad aggiungere nuovi tag e nuovi attributi alle specifiche originali di html, si è presentata la necessità di separare il contenuto di documenti html dal loro layout di presentazione

A COSA SERVONO I CSS Hanno lo scopo fondamentale di separare contenuto e presentazione nelle pagine Web. Facilitano la creazione di pagine HTML con un aspetto uniforme (il codice sorgente è più pulito). Lo stesso stile può essere applicato a più documenti. Può essere presentato correttamente in modo ottimale su dispositivi diversi (es. PC e palmari) o addirittura su media diversi (es. video e carta). Accessibilità ad utenti che hanno difficoltà ad utilizzare lo schermo (i non vedenti) che utilizzano software che traducono il codice html e di conseguenza anche l’aspetto grafico che è irrilevante per questa categoria di utenti Si può dividere il lavoro fra chi gestisce il contenuto e chi si occupa della parte grafica

ALTRI OBIETTIVI DEI CSS Ridurre i tempi di scaricamento delle pagine: una pagina che usa i CSS è meno della metà di una pagina che usa la formattazione con tag HTML, inoltre se il file CSS è condiviso da più pagine viene scaricato una volta sola Vi sono notevoli vantaggi di risparmio di tempo sia nella stesura delle pagine che nelle operazioni di modifica dello stile di un elemento che compare in una o più pagine web. Si possono progettare le pagine HTML per più browser Rendere le pagine visualizzabili con dispositivi non convenzionali: palmari, smartphone, ecc.

SELETTORE {PROPRIETA’:VALORE} SINTASSI IN GENERALE DEI CSS Ogni regola CSS è costituita da 3 parti Selettore, Proprietà e Valore la cui sintassi è:   SELETTORE {PROPRIETA’:VALORE} Body {color: red} Il selettore o elemento è l’oggetto Html   La proprietà è l’attributo che si intende associare all’elemento e quelle di base sono: sfondo, testo, carattere, lista Il valore è la specifica della proprietà assunta dalla proprietà; il valore numerico può essere assoluto o relativo

Esistono 3 diversi casi di variazione della sintassi: Più elementi con la stessa proprietà H1,P {color:red} H1,H2,H3,H4,H5,H6 {color:blue} Un elemento con più proprietà P {text-align:center; color:green} due proprietà separate da un ; è comunque meglio scrivere: P { text-align:center; color:green } 3. una proprietà con più valori P { font-family:”courier new, arial, times new roman”

CSS: proprietà per lo sfondo valori ammessi background-color: color transparent background-image: url(nome.jpg) none background-repeat: repeat repeat-x repeat-y no-repeat background-position: combinazioni di top, left. right, center, bottom background-attachment: scroll fixed per il testo valori ammessi text-align: left, right, center, justify text-transform: capitalize,uppercase, lowercase, none text-color: color text-decoration: none, underline, blink text-indent: valore in px Background è la proprietà di sintesi per impostare tutte le proprietà in un’unica dichiarazione

CSS: proprietà per il font valori ammessi per le liste valori ammessi font-style: normal, italic, oblique font-variant: normal, small-caps font-weight:normal, bold, valori da 100 a 900, 400 è normale, 700 è grassetto font-size: valore in px font-family: serif, sans-serif, cursive Font: style variant weight size family per le liste valori ammessi List-style-type: none, circle, disc, square List-style-position: inside, outside List-style-image: url(file.jpg) List-style: type position image Proprietà di sintesi Proprietà di sintesi

CSS: proprietà delle tabelle Border-width:valore in px, thin, medium, thick Border-style:solid, dashed, double Border-color: colore Border-collapse: collapse ( il bordo della cella è condiviso), separate ( ogni cella ha il suo bordo separato dalle altre) Esempio Table { border: 2px solid red border-collapse: collapse background-color: blue width: 100% font-size:18px} Th, td, caption: utilizzano tutte le proprietà assegnate al testo oltre a border e a background-color

Tipi di selettori Selettore di tipo (o selettore di elementi) È il più semplice dei selettori. È costituito dal nome di uno specifico elemento HTML. Serve a selezionare tutti gli elementi di quel tipo presenti in un documento. Selettori di classe. Primo caso: quando nello stesso tag si applicano caratteristiche stilistiche diverse ( es. due paragrafi p.uno e p.secondo ) Secondo caso: quando si vogliono applicare a più tag. le stesse caratteristiche di stile ( es. h1,h2,p con stesse caratteristiche in css si dichiara .centro) In Html nel primo caso <p class=“uno>……..</p> nel secondo caso <p class=“centro”>…..</p> Pseudoselettori. Si applicano ai link per dichiarare lo stile dei link Nel Css a:link per la dichiarazione del link a:visited per il link visitato a: hover quando l’utente si posiziona sul link a: active quando si fa click sul link Proprietà dei link: color, background-color, text-decoration)

I box

I box La struttura del box è costituita da quattro aree disposte una nell’altra: un’area per il contenuto che può essere testo o un’immagine, da una spaziatura (padding) che racchiude l’area del contenuto, da un bordo e da un margine. Le dimensioni dell’area dipendono da diversi fattori: la larghezza (e l’altezza) del box è data dalla somma dell’ampiezza del contenuto e dell’ampiezza di sinistra e di destra del margine, del bordo e del padding. Margin e padding vengono indicati con quattro valori che corrispondono a top, right, bottom e left. Margin { 20px 10px 20px 10px} Padding { 20px 10px 20px 10px}

Applicare gli stili ad una pagina-1 Stile interno Nella parte <HEAD> si scrive il seguente codice: <style type="text/css"> H1 { color: blue } </style> Stile in linea Può anche essere usato come tag HTML all’interno del <BODY> <H1 STYLE="color:red; text-transform:capitalize;"> Prova CSS per H1 </H1> NB: ci vogliono gli apici " … " e non le parentesi graffe!

Applicare gli stili ad una pagina-2 Stile esterno Per inserire un file esterno nel file HTML si deve usare il tag <LINK> nel seguente modo: <head> < link rel =“stylesheet” Type= “text/css” Href=“stile.css”> </head> “Stile.css” è il file di testo, creato con un editor testuale, che contiene le caratteristiche stilistiche della pagina web

Qual è la scelta migliore? E’ preferibile usare gli stili esterni perché: È facile applicare diversi stili alla stessa pagina Si ottimizza il trasferimento delle pagine perché il foglio di stile rimane nella cache del browser L’uso degli stili inline è da evitare perché: Non c’è separazione fra contenuto e presentazione Le modifiche sono molto complicate