Linguaggi per il Web Linguaggi di markup: CSS

Fogli di stile 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.

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: 1.Più elementi con la stessa proprietà H1,P {color:red} H1,H2,H3,H4,H5,H6 {color:blue} 2.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” }

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 CSS : proprietà B ACKGROUND È LA PROPRIETÀ DI SINTESI PER IMPOSTARE TUTTE LE PROPRIETÀ IN UN ’ UNICA DICHIARAZIONE

CSS : proprietà per il font 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

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 1.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. 2.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 …….. nel secondo caso ….. 3.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

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}

Stile interno Nella parte si scrive il seguente codice: H1 { color: blue } Stile in linea Può anche essere usato come tag HTML all’interno del Prova CSS per H1 NB: ci vogliono gli apici " … " e non le parentesi graffe! Applicare gli stili ad una pagina-1

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

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