Selettori. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione

Transcript

1 Selettori Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it

2 CSS Sintassi valore valore h1 { color: blue; font-size: 2 px Times..; Selettore proprietà proprietà dichiarazione Elementi di Informatica e Reti di Calcolatori 2

3 Selettori Type selector: è costituito da uno qualsiasi degli elementi html h1 {color: #000000; p {background: white; font: 12px Verdana, arial, sans-serif; table {width: 200px; Raggruppare: è possibile raggruppare diversi elementi per semplificare il codice Gli elementi vanno separati da virgola h1 {background: white; h2 {background: white; h3 {background: white; h1, h2, h3 {background: white; versione compatta Elementi di Informatica e Reti di Calcolatori 3

4 Selettori Selettore universale: serve per selezionare tutti gli elementi di un documento Si esprime con * * {color: black; Selettore del discendente: Serve a selezionare tutti gli elementi che nella struttura ad albero di un documento siano discendenti di un altro elemento div p {color: black; Elementi di Informatica e Reti di Calcolatori 4

5 Classi Selettore di classe: per definire una classe si usa far precedere il nome da un semplice punto:.testorosso { font: 12px arial, Helvetica, sans-serif; color: red; <p class= testorosso >.</p> Selettore di classe : è possibile applicare la classe solo agli elementi di un determinato tipo (e.g., p) p.testorosso {color: red; Elementi di Informatica e Reti di Calcolatori 5

6 Id Selettore di id: per definire un id si usa far precedere il nome da un cancelletto #: #titolo {color: blue; <h1 id= titolo > </h1> Selettore di id: è possibile applicare l id solo agli elementi di un determinato tipo (e.g., p) p#nome_id {color: red; Elementi di Informatica e Reti di Calcolatori 6

7 Proprietà Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it

8 Indice Proprietà Sfondi Testo Font Link Liste Tabelle Elementi di Informatica e Reti di Calcolatori 8

9 Sfondi background-color: specifica il colore di sfondo di un elemento body {background-color: colore; table{background-color: colore; Il colore può essere specificato: mediante la codifica esadecimale body {background-color: #ff0000 Mediante la codifica RGB body {background-color: rgb(255,0,0) I primi due caratteri dopo # rappresentano il rosso i secondi due la componente verde gli ultimi due quella blu. Ognuna della componenti può variare fra un minimo di 0 ed un massimo di 255. Utilizzando il nome del colore body {background-color: red Elementi di Informatica e Reti di Calcolatori 9

10 Sfondi background-image: permette di inserire un immagine come sfondo di un elemento body {background-image:url('paper.gif'); Se l immagine non è sufficientemente grande viene ripetuta affinchè copre l intero elemento background-repeat: permette di decidere come andrà a ripetersi l immagine sulla nostra pagina body { background-image:url('gradient2.png'); background-repeat:repeat-x; La pagina si ripete solo sull asse x Elementi di Informatica e Reti di Calcolatori 10

11 Sfondi background-repeat: permette di decidere come andrà a ripetersi l immagine sulla nostra pagina body { background-image:url('gradient2.png'); background-repeat:repeat-y; L immagine si ripete solo sull asse y body { background-image:url('gradient2.png'); background-repeat:repeat-x; background-repeat:repeat-y; L immagine si ripete solo sull asse y body { background-image:url('gradient2.png'); background-repeat: repeat-x repeat-y; L immagine si ripete sia sull asse x che sull asse y Elementi di Informatica e Reti di Calcolatori 11

12 Sfondi background-repeat: permette di decidere come andrà a ripetersi l immagine sulla nostra pagina body { background-repeat: no-repeat; L immagine non si ripete ne sull asse x ne su y background-position: permette di specificare la posizione dell immagine all interno della pagina Body{ background-position: left top; Posssibili valori (left center; left bottom; right top; right center; right bottom center top; center; center bottom; etc) Elementi di Informatica e Reti di Calcolatori 12

13 Sfondi shorthand property body {background: red; url( myimg.jpg'); no-repeat; right top; Elementi di Informatica e Reti di Calcolatori 13

14 Testo Color : serve per cambiare il colore del testo body {color: red; h1 {color: #FF0000; h2 {color: rgb(255,0,0); Come prima i colori possono essere specificati utilizzando la codifica esadecimale, rgb o il loro nome Text-align: serve per allineare il testo h1 {text-align: right; h2 {text-align: left; h3 {text-align: justify; (giustificato, il testo va ad occupare l intera riga (come nei giornali) Elementi di Informatica e Reti di Calcolatori 14

15 Testo text-decoration : serve oer cambiare la decorazione del testo h1 {text-decoration:overline; linea sopra il testo h2 {text-decoration:line-through; serve per barrare il testo h3 {text-decoration:underline; sottolineato h4 {text-decoration:blink; lampeggiante non supportato da IE, chrome e safari text-trasformation: utilizzato per specificare il testo in upper case e in lower case p.uppercase {text-transform:uppercase; trasforma il testo in lettere maiuscole p.lowercase {text-transform:lowercase; traforma il testo in lettere minuscole p.capitalize {text-transform:capitalize; ogni parola del testo inizia con la lettera maiuscola text-indent: serve per indentare il testo p {text-indent:50px; Elementi di Informatica e Reti di Calcolatori 15

16 Font font-family: serve per cambiare il font. p{font-family:"times New Roman", Times, serif; È possibile specificare più font. Se il browser non supporta il primo font prova con il successivo e così via Se il nome del font è composto da più di una parola è necessario inserirlo tra virgolette font-style: viene utilizzato per modificare lo stile del testo p.normal {font-style:normal; testo normale p.italic {font-style:italic; testo italico p.oblique {font-style:oblique; testo obliquo (simile ad italic ma meno supportato) Elementi di Informatica e Reti di Calcolatori 16

17 Font font-size serve per impostare la dimensione del testo Attenzione non usare font-size per modificare del testo per farlo sembrare titolo o il viceversa (per questo agire sui tag h1, h2, e p E possibile specificare la dimensione del tag in modo assoluto o relativo h1 {font-size:40px; non funziona versioni precedenti IE9 h1 {font-size:2.5em; 1em è di solito uguale alla dimensione del font size corrente. Di solito il valore di default è 16 pixel. body {font-size:100%; percentuale rispetto al carattere di default dell elemento Elementi di Informatica e Reti di Calcolatori 17

18 Link I link possono essere in 4 stati: a:link il link non è visitato a:visited il link è stato visitato dall utente a:hover il mouse è sopra il link a:active il link è nel momento in cui viene cliccato Esempi a:link {color:#ff0000; a:hover {text-decoration:underline; a:active {background-color:#ff704d; Elementi di Informatica e Reti di Calcolatori 18

19 Liste list-style-type: servono per modificare i marcatori di ciascun link ul.a {list-style-type: circle; elenco puntato ul.b {list-style-type: square; quadrati ol.c {list-style-type: upper-roman; numeri romani ol.d {list-style-type: lower-alpha; lettere alfabeto Elementi di Informatica e Reti di Calcolatori 19

20 Tabelle border: serve per aggiungere un bordo alla tabella o ai suoi elementi table, th, td { border: 1px solid black; width: serve per modificare la larghezza della tabella o suoi elementi table { width:100%; height: serve per settare l altezza della tabella o suoi elementi th { height:50px; Elementi di Informatica e Reti di Calcolatori 20

21 Tabelle text-align : serve per allineare il testo orizzontalmente (possibili valori: left, right, center td { text-align:right; vertical-align : serve per allineare il testo verticalmente (possibili valori: top, bottom, middle td { height:50px; vertical-align:bottom; Elementi di Informatica e Reti di Calcolatori 21

22 Tabelle padding: indica la distanza tra il bordo della cella e il contenuto (viene usato sui tag td e th) td { padding:15px; Colore del bordo per modificare il colore del bordo aggiungere il colore all interno della proprietà border table, td, th{ border:1px solid green; th { background-color:green; color:white; Elementi di Informatica e Reti di Calcolatori 22

23 Tabelle Colore di testo e sfondo th { background-color:green; color:white; cambia il colore dello sfondo cambia il colore del testo border-collapse: collapse elimina spaziatura tra le celle della tabella Elementi di Informatica e Reti di Calcolatori 23