<tag style= dichiarazioni css >

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "<tag style= dichiarazioni css >"

Annunziata Masi
7 anni fa
Visualizzazioni

1 CSS 1. FOGLI DI STILE Per permettere di separare la forma dal contenuto, si usano i Fogli di Stile. Essi descrivono dettagliatamente lo stile di ogni elemento contenuto nel foglio html. I nomi dei fogli di stile hanno l estensione.css (Cascade Style Sheet) Fogli di stile a cascata. Essi possono stare in 3 punti diversi. (3 livelli di fogli di stile) 1. Livello esterno 2. Livello interno (o di pagina) 3. Livello in linea (dentro un tag) Si affiancano all html. Sono gerarchici (Cascade= a cascata). Ciò vuol dire che uno stile assegnato al livello esterno, ha validità anche al livello interno ed al livello in linea. Le dichiarazioni CSS si scrivono in un file a parte con estensione.css si importano nelle parti del foglio html, a seconda del livello che devono interessare, come di seguito descritto. Le dichiarazioni CSS di pagina sono riportate all interno di una pagina web (nella sezione<head>) e hanno validità solo sulla pagina dove sono definite INIZIAMO CON LO STILE DA APPLICARE AD UN TAG Inserimento di CSS in linea alla pagina STYLE 3. Livello in linea (dentro un tag) L ambito di validità è quello in cui sono applicate le dichiarazioni (nei tag in cui sono applicate). Descrizione: inserisce dichiarazioni CSS in linea (dentro un TAG ). Nel Livello in linea, dopo un tag, lo stile style è come un parametro, esso è riconosciuto da (quasi) tutti i TAG di html. e si scrive: <tag style= dichiarazioni css > esempio: <b style= color:red > testo </b> in linea ciò vuol dire che testo, sarà in grassetto e di colore rosso. quindi si eviterà di scrivere anche <font color=red></font>. se continuiamo a scrivere: <b>a</b> A sarà scritto in grassetto e di colore nero (A).

2 Inserimento dichiarazioni CSS interni alla pagina. 2. Livello interno (o di pagina) L ambito di validità è quello della pagina in cui sono applicate. Descrizione: inserisce dichiarazioni CSS interne alla pagina. si scrive nella sezione <HEAD>. Chiusura: Si Esempio: <style> elenco dichiarazioni css es. {b color:red ecc..} nella pagina Inserimento dichiarazioni CSS esterne 1. Livello esterno. L ambito di validità è quello dove sono lincate. Descrizione: Scrivere tutte le dichiarazioni CSS in un file e salvare il documento con estensione.css (utilizzare nomi brevi,carattere minuscolo e senza spazi). Inserimento: Per inserire il foglio di stile di livello esterno alla pagina, usare il tag <LINK> in ogni pagina web in cui si voglia rendere attivo tale foglio di stile. Sintassi: <link rel= stylesheet href= file.css type= text/css >.. esterno Quando si vuole definire lo stile di più tag e che tutti i tag dello stesso tipo eseguano le stesse operazioni, si ricorre ai fogli di stile, in tal modo non occorre ripetere lo stesso comando più volte nello stesso foglio. Nel contempo se nel foglio in cui è applicato tale foglio di stile, si scrive un tag dello stesso tipo ma che contiene istruzioni diverse da quelle scritte nel foglio di stile, allora quello specifico tag risponderà alle istruzioni contenute in esso più quelle contenute nel foglio di stile per lo stesso tag.

3 Cioè il comando del tag, viene effettuato a cascata, da qui deriva la denominazione Cascade Style Sheet Dichiarazioni CSS: Esse sono dirette ai tag In html abbiamo: Attributo= argomento _Attributo= argomento L uguale (=) serve per separare l Attributo dall argomento Lo spazio (_) serve per separare un altro Attributo. Nelle dichiarazioni CSS abbiamo invece: Attributo:argomento;Attributo:argomento* I due punti (:) servono per separare l Attributo dall argomento Il punto e virgola (;) serve per separare un altro Attributo. Più argomenti dello stesso attributo, sono separati da spazio ( _ ). I simboli in CSS si chiamano: (:) assegnamento (_ ) separatore di argomento (quando vi sono più argomenti per lo stesso attributo, es. border:1px solid black) (;) separatore di Attributo. In html Si scrive ogni singolo attributo seguito dal suo argomento scritto fra virgolette. In CSS dopo l assegnamento (:) le virgolette ( ) non si mettono mai, esse si mettono dopo l uguale (=) per contenere globalmente tutte le dichiarazioni css. COSÌ COME PER I PARAMETRI IN HTML ANCHE PER LE DICHIARAZIONO CSS SI AVRANNO LE SEGUENTI ESPRESSIONI: Dichiarazioni CSS: relative ai FONT per il testo - color:#ff0000 (definisce il colore rosso del testo) - font-family:verdina (Elenco famiglie dei font (definisce le varie famiglie dei font e si separano con la virgola; si mettono più famiglie in modo da poter essere interpretate da tutti i browser; esempio:verdina, comic serif,sans serif.). - Font-size:npx (dimensione del carattere (in pixel) dove con n si specifica il N dei pixel che si vogliono utilizzare Si può scrivere anche npt dove con pt si indicano i punti). - text-align:left center right justify Dichiarazioni CSS: relative al colore di sfondo - background-color:#00ff00 (specifica il colore dello sfondo verde) Dichiarazioni CSS: relative all immagine di sfondo

4 - background-image:url(nomefile) (specifica quale immagine applicare come sfondo all intero documento). Dichiarazioni CSS: relative alle linnee e ai bordi - Border:npx inset outset solid dotted back #rrggbb (dove con npx si indica lo spessore del bordo, con inset (incassato), outset (in rilievo), solid (linea continua), dotted (tratteggiato). -Linea-height:npx - Linea-height:npt (specificano le dimensioni verticali della linea, in pixel, in punti, EM=1,6 fisso) - Linea-height:nEM Esempio: border:1px solid blank;color:red Dichiarazioni css relative allo stile di linee e bordi che contengono un testo distanziato dai bordi: <div style= border:2px outset dotted back; padding:5px>testo </div> COME PROGRAMMARE UN FOGLIO DI STILE Consideriamo di voler programmare un foglio di stile rivolto ai tag: H1, DIV, I con le dichiarazioni sotto elencate. Scriviamo in un foglio che nomineremo css.css le seguenti dichiarazioni CSS: H1 { font-family:arial;font-size:18pt; color:#ff0000; border:2px outset #00ff00; background:#ffeeaa; padding:10px; text-align:center } DIV { font-family:verdana;font-size:9pt; text-align:justify; border:1px dotted #808080; line-height:1.8em } I { color:#abcde;

5 text-decoration:underline (corsivo, celeste, sottolineato) } Altro foglio in html con dichiarazioni CSS esterne, interne ed in linea: <html> <title>applica stile </title> <link href="css.css" rel="stylesheet" type="text/css"> <style> h2{font-size:20pt} i{color:#abefcd} <body> <h1>benvenuti</h1> <div> prova prova prova prova prova <i>provasottolineato provasottolineato provasottolineato provasottolineato </i> </div> <h2>sottotitolo</h2> <h1 style="color:yellow"> ribenvenuti </h1> </body> </html> I tag scritti in html risponderanno prima ai rispettivi comandi elencati dentro: <style> h2{font-size:20pt} i{color:#abefcd} poi anche agli altri specificati: <h1 style="color:yellow"> ribenvenuti </h1> e poi ai comandi specificati nei rispettivi tag del foglio di stile linkato: <link href="css.css" rel="stylesheet" type="text/css"> Se in questo foglio inseriamo, nei tag opportuni, ciò che vogliamo rappresentare nel sito web che vogliamo realizzare; otterremo raffigurate tutte le diciture e gli stili sanciti in questa pagina html e per quelli non sanciti, quelli dichiarati nel foglio css.css

6 Si ribadisce che per inserire un unica immagine di sfondo a tutte le pagine web, si scrive e si importa in di tutte le pagine html, il seguente comando di stile CSS: body {background-image:url(prova.jpg)} (comprese le parentesi tonde). dove prova.jpg è il nome del file che si vuole inserire come immagine. Mentre si ricorda che in html il comando è: <body background= prova.jpg > -RAGGRUPPAMENTO: FOGLI DI STILE CSS Tecniche avanzate Consente di applicare un elenco di dichiarazioni css a più tag contemporaneamente. Sintassi: tag 1,tag 2,tag 3,.tag n {Dichiarazioni css}. Esempio: b, td, div{font-family:arial} -INCAPSULAMENTO: Consente di applicare le dichiarazioni css ad un tag che sia annidato in altri tag. Sintassi: tag1 tag2 tag3 tagn{dichiarazioni css} (senza scrivere la virgola fra un tag e l altro). Esempio: d td div{dichiarazioni css}. Esempio: <html> <title>applica stile </title> <style> div b{color:red}(< questo dichiara che tutte le scritte che si trovano dentro div devono essere di colore rosso) <body> <div> <b>benvenuti</b> (< quindi benvenuti sarà scritto in rosso) </div> <b> prova prova prova prova </b> (< mentre prova prova prova prova sarà scritto in nero) </body> </html>

Documenti analoghi

Sistemi Di Elaborazione Dell informazione

Sistemi Di Elaborazione Dell informazione Dott. Antonio Calanducci Lezione XV: Cenni su CSS Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010 Fogli di stile (CSS) Cascade Style Sheets