CASCADING STYLE SHEETS. Prof. Rocco Ciurleo - ITIS "M. M. Milano" Polistena
|
|
|
- Cristoforo Caputo
- 7 anni fa
- Visualizzazioni
Transcript
1 CASCADING STYLE SHEETS
2 I fogli di stile o CSS (acronimo di Cascading Style Sheets) sono uno strumento di formattazione delle pagine web che consente di personalizzare l'aspetto della pagina senza agire direttamente sul codice HTML della stessa. E' il linguaggio standard per la stilizzazione di documenti HTML che supplisce ai tag di formattazione dell'html stesso e conferisce maggiore potenzialità di stilizzazione ad una pagina Web. L'introduzione dei fogli di stile si è resa necessaria per separare i contenuti dalla formattazione.
3 Grazie ai CSS è possibile: definire i margini del documento; definire lo stile del testo; dare l'allineamento al testo; gestire lo sfondo della pagina o di singoli elementi; gestire elementi testuali e d'immagine; creare effetti di transizione; rendere dinamici i link testuali; ecc. Grazie all'uso di CSS esterni, inoltre, si può modificare l aspetto di tutte le pagine web di un sito modificando il solo file di stile.
4 La più semplice regola css è composta di tre parti: un selettore, una proprietà ed un valore: selettore{proprietà: valore} Il selettore può essere l elemento html che si vuole definire La proprietà è l attributo che si vuole cambiare Alla proprietà è associato un valore La proprietà e il valore sono separati da due-punti : e racchiusi tra parentesi graffe body {color: black} Se ci sono più attributi sono separati da un punto e virgola ;
5 Fondamentalmente sono tre i modi di usare i css, quale sia il migliore dipende soltanto da voi, dalla vostra organizzazione mentale e dalle vostre reali esigenze: Fogli di stile esterni Fogli di stile interni Fogli di stile in linea (inline)
6 I fogli di stile esterni sono quelli più utilizzati in quanto meglio interpretano la filosofia dei fogli di stile. ideale se l applicazione ha molte pagine, in effetti si può cambiare l aspetto di un intero sito modificando un solo file Ogni pagina deve essere collegata al foglio di stile Si deve inserire il tag <link> all interno della sezione head della pagina HTML <head> <link rel="stylesheet" type="text/css href= miostile.css" /> </head> L attributo REL indica che il file collegato è un foglio di stile (stylesheet) L attributo HREF richiama il percorso del file esterno L attributo TYPE definisce il linguaggio del foglio di stile. Il browser leggerà le definizioni di stile dal file miostile.css, e formatterà il documento di conseguenza
7 Un foglio di stile esterno può essere scritto in qualsiasi editor di testo Il file non deve contenere alcun tag html Il foglio di stile deve essere salvato con estensione.css Un esempio di foglio di stile: body { background-image: url( immagini/miosfondo.gif") } p {margin-left: 20px}
8 Un foglio di stile interno può essere usato quando un documento html ha uno stile unico Si definisce nella sezione head con il tag <style> <head> <style type="text/css > hr {color: red} p {margin-left: 20px} body {background-image: url("immagini/foto.jpg")} </style> </head> Il browser leggerà le definizioni di stile, e formatterà il documento in accordo ad esse
9 Uno stile inline fa perdere molti dei vantaggi dei fogli di stile, perché mischia il contenuto con la presentazione Metodo da usare quando uno stile deve essere applicato ad una sola occorrenza di un elemento in un documento Per definire uno stile inline si usa l attributo style dell elemento da formattare L attributo style può contenere qualsiasi proprietà css L esempio mostra come cambiare il colore e il margine sinistro di un singolo paragrafo <p style="color: green; margin-left: 20px > Testo del paragrafo </p>
10 Se il valore è composto da più parole, bisogna racchiuderlo tra virgolette doppie Se si vuole specificare più di una proprietà, bisogna separarle con un punto-e-virgola ; L esempio mostra come definire un paragrafo con allineamento centrato e colore del testo rosso p { text-align: center; color: red; font-family: "sans serif"; }
11 Si possono raggruppare i selettori: bisogna separare i selettori con una virgola Nell esempio sotto, gli elementi di titolo sono raggruppati; ogni elemento di titolo sarà verde h1, h2, h3, h4, h5, h6 { color: green; }
12 Le classi servono per creare parametri alternativi a quelli indicati nei fogli di style. Un esempio pratico sono i titoli o gli esempi, che di solito hanno un formato diverso da quello scritto normalmente. Le classi si possono inserire in fogli esterni (richiamabili da ogni pagina), oppure in una sola pagina (fra i tag head). La sintassi per l'inserimento è uguale agli altri parametri di style
13 SINTASSI: Per creare una classe (sia in foglio esterno che interno) dobbiamo solo scrivere il nome della classe preceduto da un punto e seguito dalle parentesi graffe..esempi { font-family : Arial, verdana, Helvetica; font-size:12px; color:#031d81; font-weight:bold; font-style:italic; } Nota: i nomi delle classi devono iniziare con un carattere alfabetico e non con un numero e non devono contenere spazi vuoti. Per richiamare una classe dobbiamo solo scrivere: <font class="esempi"> Testo... </font>
14 L'uso degli ID, così come quello delle classi, può essere associato a qualsiasi elemento valido di HTML anche se di norma lo si adopera con l'elemento vuoto <div>. Un selettore ID può essere adoperato una sola volta all'interno della stessa pagina, mentre una classe non ha praticamente alcun limite.
15 La sintassi per il selettore id è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #: #nome_id Con questa regola #titolo {color: blue;} assegniamo il colore blue all elemento che presenti questa definizione nel codice HTML: <h1 id="titolo">...</h1> Per applicare l attributo ID ad un elemento basta inserirlo subito dopo il tag di apertura dell elemento stesso. L'uso degli ID, così come quello delle classi, può essere associato a qualsiasi elemento html valido anche se di norma lo si adopera con l'elemento <DIV>. L'elemento (div) non ha molto significato in html, ed infatti viene adoperato proprio con i css, specialmente per la gestione delle immagini e dei blocchi di testo.
16 Secondo questo meccanismo le impostazioni di stile applicate ad un elemento vengono ereditate anche dai suoi discendenti. Almeno fino a quando, per un elemento discendente, non si imposti esplicitamente un valore diverso per quella proprietà. Vediamo di chiarire con un esempio. Impostiamo il colore grigio scuro per il testo a livello dell elemento body: body {color: #222;} Tutti gli elementi discendenti di body, erediteranno questa impostazione. Ma se ad un certo punto definiamo nel codice del CSS un selettore con la proprietà color: white; l ereditarietà viene spezzata: body {color: #222;} li {color: white;} Gli elementi li avranno perciò il testo bianco.
17 In HTML un documento qualsiasi presenta una struttura fatta ad albero, il quale si compone di elementi "padre" e "figli"; Ci sono molte ragioni per avere i documenti così strutturati; nel caso particolare dei fogli di stile c'è una particolare ragione : "L'ereditarietà". Così come fanno nel mondo umano i figli ad ereditare determinate proprietà dai loro padri, allo stesso modo gli elementi in HTML ereditano determinate proprietà; lo stesso discorso vale per Css in questo caso ciò che viene ereditato sono delle proprietà stilistiche. Il meccanismo che consente questo passaggio di proprietà è proprio l'ereditarietà. Come si è potuto capire, l'ereditarietà è un veicolo di trasporto che distribuisce le proprietà stilistiche agli elementi discendenti.
18 Con peso si definisce la diversa importanza di una regola rispetto ad un'altra. Sono varie le cause del diverso peso delle regole. Origine Un criterio di importanza è dato dall'origine del foglio di stile: foglio dell'autore foglio dell'utente foglio predefinito del browser Il foglio dell'autore è più importante del foglio dell'utente che a sua volta prevale sul foglio predefinito del browser. Specificità Criteri di importanza in funzione della tipologia degli elementi, in ordine di importanza: id (#titolo) classi e pseudo-classi (.titolo) elementi (h1) Collocazione A secondo di dove la regola è definita, in ordine di importanza: in linea in CSS incorporati in CSS collegati Importanza La parola chiave!important applicata ad una dichiarazione la porta al primo posto nella gerarchia di importanza, a prescindere da origine, specificità e collocazione
19 Visto che siamo nel mondo dei fogli di stile a cascata, introduciamo adesso il concetto di cascade, o meglio tentiamo di capire il procedimento di un browser quando incontra un foglio di stile e lo fà visualizzare sul monitor del nostro computer. Il browser quando riceve una pagina dal server, esegue un "filtraggio" degli stili. Inizialmente valuta il valore dell attributo media (se è presente) e quindi imposta le prime regole di visualizzazione. Successivamente verifica la presenza di eventuali stili definiti dall utente, (come la stampa) e comincia ad ordinare i vari elementi in base al loro peso e alla loro origine. Infine ordina le varie dichiarazioni in questo modo: gli stili in linea hanno più importanza di quelli incorporati che a loro volta prevalgono su quelli collegati Bisogna inoltre sapere che se dopo la dichiarazione è presente la parola!important, essa balza al primo posto nell'ordine di applicazione a prescindere da peso, origine, specificità e ordine. In questo esempio è chiaro il concetto.
20 Si possono inserire nel css commenti che possono essere d aiuto quando il codice sorgente deve essere in seguito modificato I commenti vengono ignorati dal browser Un commento comincia con /* e termina con */ /* commento*/ p { text-align: center; /* altro commento */ color: black; font-family: arial; }
21 background-color Imposta il colore di sfondo di un elemento background-image Imposta un immagine come sfondo url( ) background-repeat Imposta la ripetizione di una immagine di sfondo repeat, repeat-x, repeat-y, no-repeat background-attachment Immagine di sfondo fissa o che scorre con il testo scroll, fixed background-position Posizione di partenza di una immagine di sfondo top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos
22 background-repeat: repeat repeat-x repeat-y no-repeat Questo attributo serve per specificare come disporre l'immagine di sfondo quando non si tratta di uno sfondo omogeneo a tinta unita che riempie tutta la pagina: repeat indica che l'immagine deve essere replicata in orizzontale ed in verticale. repeat-x deve essere replicata soltanto in orizzontale. repeat-y deve essere replicata soltanto in verticale. no-repeat indica che l'immagine non deve essere replicata. Logicamente questo attributo dovrà necessariamente essere adoperato in abbinamento con background-image es.: {background-image: url(logo.gif); background-repeat: repeat;}
23 background-position: coordinate Questo attributo definisce il punto da cui iniziare a posizionare l'immagine di sfondo e funziona se abbinato con backgroundimage e background-repeat. Si possono adoperare parole chiave per la posizione orizzontale: left, center, right e parole chiave per la posizione verticale: top, center, bottom. E' anche possibile esprimere valori percentuali, dove: 0% 0% indica l'angolo in alto a sinistra (default) e: 100% 100% indica l'angolo in basso a destra. Per maggior precisione si possono specificare anche coordinate espresse in mm, cm, inc. es.: {background-image: url(logo.gif); background-repeat: repeat-y; background-position: 50% 50%;}
24 background-attachment: scroll fixed Questo attributo definisce se l'immagine usata come sfondo deve scorrere sullo schermo insieme al testo (scroll) oppure restare fissa sullo sfondo (fixed) nel momento in cui si scorre la pagina verticalmente. Esempi: {background-image: url(logo.gif); backgroundattachment: scroll;} {background-image: url(logo.gif); backgroundattachment: fixed;}
25 color Colore del testo direction Direzione del testo ltr, rtl text-align Allineamento left, right, center, justify text-decoration Decorazione none, underline, overline, line-through, blink text-indent Indentazione della prima riga length, % text-shadow Ombra text-transform Controlla le lettere none, capitalize, uppercase, lowercase
26 text-align: left right center justify Allineamento del testo, valori possibili: sinistra, destra, centrato, giustificato. p {text-align: left;} p {text-align: right;} div {text-align: center;} div {text-align: justify;} esempi
27 text-align: left; paragrafo allineato a sinistra. text-align: right; paragrafo allineato a destra. text-align: center; paragrafo allineato al centro. text-align: justify; paragrafo giustificato. Che cosa è la giustificazione? Guardate attentamente i due margini: destro e sinistro, potrete notare che il testo è allineato sia a destra che a sinistra; per fare questo il comando aggiunge automaticamente degli spazi vuoti fra le parole.
28 L'elemento direction imposta la direzione con cui il testo dev'essere stampato a video (da sinistra verso destra o viceversa). La sintassi è la seguente: p { direction: valore; } I possibili valori che può assumere sono i seguenti: ltr - di default, da sinistra a destra; rtl - da destra a sinistra.
29 text-decoration: overline underline line-through blink none Decorazione del testo, valori possibili: overline= sopralineato, underline= sottolineato, line-through= sbarrato, none= nessuno. E' anche possibile combinarne più di uno, per esempio inserendo sia underline che overline. None lo si adopera in particolar modo con i link in quanto toglie la sottolineatura che altrimenti avrebbero per default. h1 {text-decoration: overline;} p {text-decoration: underline;} div {text-decoration: overline underline;} p {text-decoration: line-through;} p {text-decoration: blink;} p {text-decoration: none;}
30 text-decoration: overline; - sopralineato (qui non si vede perché non supportato da powerpoint) text-decoration: underline; - sottolineato text-decoration: overline underline; - sopra e sottolineato (qui non si vede perché non supportato da powerpoint) text-decoration: line-through; - barrato text-decoration: blink; - lampeggiante (non supportato da IE) text-decoration: none; - nessuna decorazione.
31 text-indent: lunghezza percentuale Indentazione, rientro della prima riga di un blocco di testo dal margine sinistro. E' possibile fare uso anche di numeri negativi per un rientro esterno. p {text-indent: 12px;} div {text-indent: 20%;} text-indent: 5px text-indent: 25px
32 text-transform: capitalize uppercase lowercase Capitalize trasforma in maiuscola la prima lettera di ogni parola, uppercase e lowercase trasformano in maiuscolo o minuscolo l'interno blocco di testo. P {text-transform: capitalize;} P {text-transform: uppercase;} P {text-transform: lowercase;} text-transform: capitalize; testo di prova TEXT-TRANSFORM: UPPERCASE; TESTO DI PROVA text-transform: lowercase; testo di prova
33 line-height: normal numero percentuale Interlinea, altezza della riga del testo, valori possibili: normal, numero, percentuale. Con il valore normal il testo non avrà alcuna variazione. Il numero può essere espresso in em (lunghezza lettera m) o in percentuale. p {line-height: 3em;} div {line-height: 50%;} line-height: 3em line-height: 50%
34 font-style Stile, corsivo normal, italic font-variant Maiuscoletto o normale normal, smallcaps font-weight Peso, grassetto normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 font-size Dimensione xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, % font-family Lista con priorità di nomi di famiglie di font e/o nomi di famiglie generiche family-name, generic-family (serif, sans-serif, cursive, fantasy, monospace) font Imposta tutte le proprietà del font
35 font-family: famiglia1, famiglia2, famiglia3; Si possono elencare più famiglie di caratteri per dare la possibilità al browser di selezionare quella presente sul PC del visitatore. Si tenterà di visualizzare la prima specificata per poi passare a quelle successive nel caso in cui non fossero presenti quelle precedenti. A questo proposito è opportuno chiudere la lista con una famiglia generica come sans-serif per essere certi di trovare un riscontro sempre e comunque. Le famiglie si separano da una virgola e da uno spazio vuoto opzionale. Nel caso in cui il nome del font fosse composto da più di una sola parola, per esempio MS Sans Serif, questo dovrà essere racchiuso fra doppie virgolette "MS Sans Serif" nelle dichiarazioni sul foglio esterno e nella pagina, e da singoli apostrofi nel caso di dichiarazione in linea che farebbe già uso di doppie virgolette per accettare la dichiarazione stessa di style. p {font-family: verdana, arial, sans-serif;} div {font-family: "MS Sans Serif", verdana, sans-serif;} <b style="font-family: 'MS Sans Serif', verdana, sans-serif;">... </b>
36 font-size: lunghezza valore assoluto valore relativo percentuale Si possono esprimere le dimensioni del font facendo riferimento ad uno dei quattro possibili attributi. Vedi anche diapositive 40, 41, 42 (controllare il numero). Di solito si adoperano i punti (pt) o i pixel (px), ma qualsiasi altro parametro andrà sintatticamente bene. p {font-size: 9pt;} i {font-size: larger;} b {font-size: 18px;} h1 {font-size: 150%;}
37 font-style: normal italic oblique Si può eseguire il rendering (resa grafica) dei caratteri in corsivo. h1 {font-style: normal;} p {font-style: italic;} b {font-style: oblique;}
38 font-variant: normal small-caps Assegna il maiuscoletto con small-caps mentre normal per rimuovere il tutto. p {font-variant: small-caps;} b {font-variant: normal;}
39 font-weight: bold bolder lighter normal Per impostare lo spessore del testo. Oltre alle parole riservate è possibile introdurre anche un valore numerico da 100 a 900 con incrementi di 100. Soltanto a partire dal valore 700 si avvertirà l'effetto grassetto. P {font-weight: bold;} h1 {font-weight: 700;}
40 Usando la proprietà font è possibile raggruppare tutte le diverse proprietà dei font in una sola. Per esempio immagina queste quattro linee di codice usate per descrivere le proprietà del font per il tag <p>: p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } Usando la proprietà per il raggruppamento il codice sarà semplificato: p { font: italic bold 30px arial, sans-serif; } L'ordine dei valori per font è: font-style font-variant font-weight font-size font-family
41 z-index Ordine nello stack (rilievo, valori più alti sono in primo piano) auto, number overflow Impostazione per contenuto più ampio dell area disponibile visible, hidden, scroll, auto visibility Visibilità visible, hidden (occupa spazio) display Visualizzazione none (non occupa spazio), block, inline,
42 I Parametri Sono quei valori che vanno specificati negli attributi e variano a seconda dell'attributo usato. Nelle tabelline riportate nelle pagine seguenti è possibile rendersi conto di come possono essere espressi, alcuni di essi sono equivalenti, producono cioè lo stesso risultato, in questo caso sarete voi a decidere quale adoperare in base ai vostri gusti necessità ed abitudini.
43 font-size: esempio;
44 font-size: valore;
45 font-size: valore;
46 color: valore;
47 Attributi e Parametri per definire e posizionare un box, esempio di riferimento: <div style="position: absolute; left: 100px; top: 50px; z-indez: 5;"> contenuto </div> con valori e parametri riportati nella tabella sotto.
48 Le pagine che seguono sono di chiarimento
49 Prima di analizzare il cascade, è bene vedere le possibili origini di un foglio di stile: autore: è lo stile definito nel sorgente HTML della pagina dal webmaster o dal grafico del sito browser: i browser conformi agli standard del World Wide Web Consortium devono avere un foglio di stile predefinito da assegnare alle pagine utente: taluni browser mettono a disposizione all'utente la possibilità di creare un foglio di stile personalizzato, magari tramite un'interfaccia grafica e traducendo poi le impostazioni dell'utente in dichiarazioni CSS È possibile quindi che questi fogli di stile si sovrappongano e in questo caso vengono applicati in base al cascade.
50 Ereditarietà In base al principio di ereditarietà le regole stilistiche applicate ad un elemento vengono ereditare dai suoi discendenti fino a quando non interviene una nuova regola. Esempio, se impostiamo il colore blu per il testo nell elemento BODY (color: 0000ff;), tutti gli altri elementi suoi discendenti erediteranno questa impostazione. Non tutte le proprietà però sono ereditate. L importanza di una regola CSS (CascadingStyleSheet) è data prima di tutto dall origine del foglio di stile, l ordine è il seguente: foglio dell autore foglio dell utente foglio predefinito del browser A seguire l ordine di importanza tra gli stili definiti dall autore è: stile in linea stile incorporato stile collegato A seguire l ordine di applicazione di una regola CSS viene influenzato da peso e specificità. La specificità descrive il peso relativo delle varie regole all interno di un foglio di stile, in
Cascading Style Sheet CSS. Sintassi Css. Come inserire un foglio di stile. Fogli di stile esterni. Separazione contenuto/layout
Cascading Style Sheet CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML. L'introduzione
Contenuto vs Stile: un esempio
I limiti dell HTML Il principale problema di HTML è la mancanza di separazione tra contenuto e stile all interno delle pagine. Molto spesso, invece degli appositi tag, si utilizzano le tabelle per posizionare
I CSS o Fogli di stile. Telematica per le arti e lo spettacolo a.a. 2006/07
I CSS o Fogli di stile Telematica per le arti e lo spettacolo a.a. 2006/07 Quando è nato il web il problema principale era semplicemente quello della gestione dei contenuti, dato anche il basso numero
WEB I FOGLI DI STILE. Gabriele Murara
WEB I FOGLI DI STILE Gabriele Murara 1 Cosa sono e a cosa servono HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento
Valori e unità di misura (1)
Valori e unità di misura (1) I valori di una proprietà non vanno mai messi tra virgolette. Uniche eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola (esempio:
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS) Gli stili rappresentano un metodo per definire come il browser debba visualizzare i tag HTML. Il loro vantaggio è che possono essere utilizzati a differenti
Come inserire un foglio di s=le
Cascading Style Sheet CASCADING STYLE SHEET I fogli di s=le a cascata (de? anche semplicemente fogli di s=le) vengono usa= per definire la rappresentazione di documen= HTML, XHTML e XML. L'introduzione
Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà
HTML e CSS Sommario HTML e CSS I fogli di stile cosa sono principali proprietà CSS CSS La specifica HTML elenca le linee guida su come i browser dovrebbero visualizzare i diversi elementi del documento
Architettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS - appendice) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in
Tutorial di HTML basato su HTML 4.0 e CSS 2
Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpi Docenti: Viviana Patti e Claudia Picardi Appendice B Proprietà CSS B.1 Font me della famiglia serif
Primi elementi di... Cascading Style Sheet (o Fogli di Stile)
ISIS Giordano Bruno - BUDRIO Primi elementi di... Cascading Style Sheet (o Fogli di Stile) Lezioni del Prof. Gianluigi Roveda Caratteristiche dei Fogli di Stile Divide la descrizione del contenuto del
CSS / TIPOGRAFIA WEB. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
CSS / TIPOGRAFIA WEB LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 GESTIRE I CARATTERI CON I CSS I CSS hanno dato un notevole impulso alla tipografia web visto che permettono di
Guida ai CSS. Introduzione
Guida ai CSS Introduzione... 1 Sintassi... 1 Stile in linea... 1 Stile incorporato... 2 Stile esterno... 2 Classi... 3 Selettori ID... 4 Grafica... 4 Link... 5 Attributi testo... 6 Attributi carattere...
INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere compilato
CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style
Introduzione a CSS. Prof. Ing. Andrea Omicini II Facoltà di Ingegneria, Cesena Alma Mater Studiorum, Università di Bologna
Introduzione a CSS Prof. Ing. Andrea Omicini II Facoltà di Ingegneria, Cesena Alma Mater Studiorum, Università di Bologna andrea.omicini@unibo.it Web Style Sheets Fogli di stile per il Web Scopi descrivere
Dare stile al testo significa impostare con i CSS:
1 Dare stile al testo significa impostare con i CSS: Il tipo di font Il colore del font La dimensione del font Grassetto e corsivo del font Allineamento Sottolineatura Ombre Spaziature, bordi, margini
Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2
Università degli Studi di Udine Facoltà di Ingegneria CORSO DI LAUREA IN SCIENZE dell ARCHITETTURA Elementi di Informatica HTML e CSS D. Gubiani HTML è l acronimo di HyperText Markup Language che tradotto
Introduzione ai Fogli di stile. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
Introduzione ai Fogli di stile Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Fogli di Stile CSS Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio usato per definire
Principali proprietà dei CSS Box Model e proprietà di base del testo
Principali proprietà dei CSS Box Model e proprietà di base del testo Sviluppo di siti web UD10 Fablab Design Il BOX MODEL Il BOX MODEL Se si vuole usare i CSS per scopi che vadano oltre la semplice gestione
Fogli di stile a cascata (CSS)
Fogli di stile a cascata (CSS) November 25, 2010 1 Definizione I fogli di stile a cascata (Cascading Style Sheets, CSS) sono una delle tecnologie introdotte dal W3C per la formattazione dei documenti HTML,
Copyright (c) 2008, 2009, 2010 Fabio Proietti
Copyright (c) 2008, 2009, 2010 Fabio Proietti Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version
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
I fogli di stile (CSS)
I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono
Fogli di stile CSS. Fogli di stile (2) Fogli di stile (3) Introduzione ai CSS. Regole
Fogli di stile CSS I fogli di stile permettono la separazione della forma dal contenuto. Il concetto di foglio di stile è quello di creare un documento separato che contenga tutte le informazioni necessarie
CSS. Cascading Style Sheets. Regola: selezionatore { proprietà : valore } h1 { color : green; } ul { font-style : italic; } H1 { color : green }
1 2 Foglio di stile Cascading Style Sheets CSS Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Regola: selezionatore
Appunti sui fogli di stile
Appunti sui fogli di stile CSS ( Cascading Style Sheets): Linguaggi di formattazione stilistica e strutturale di un documento HTML o di una serie di documenti in cascata. Può aggiornare lo stile di un
e il Giardino di Zen CSS ESTERNI CSS INTERNI
e il Giardino di Zen Per gli aggiornamenti consultare il sito del World Wide Web Consortium all'indirizzo. http://en.wikipedia.org/wiki/world_wide_web_consortium Inserimento CSS
Applicazioni web. Sommario DHTML - CSS CSS. Elementi di raggruppamento Markup semantico. Sintassi Proprietà. Applicazioni web.
Applicazioni web Parte 2 DHTML - CSS Sommario DHTML Elementi di raggruppamento Markup semantico CSS Sintassi Proprietà 1 DHTML Dynamic HTML Dynamic Html non è uno standard definito dal World Wide Web Consortium
Elementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
Elementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
CSS Cascading Style Sheets
CSS Cascading Style Sheets il linguaggio per modificare lo stile delle pagine web 1 Fogli di stile (CSS) Servono per facilitare la creazione di pagine HTML con un aspetto uniforme Permettono di separare
Cosa vuol dire HTML? Hyper Text Markup Language
IMPARIAMO Cosa vuol dire HTML? Hyper Text Markup Language PROGRAMMIAMO IN HTML? NO! L'HTML è un linguaggio di formattazione che descrive le modalità di impaginazione o visualizzazione grafica (layout)
Linguaggi ed Applicazioni mul1mediali
Linguaggi ed Applicazioni mul1mediali 06.07- CSS. Cascading Style Sheet Maurizio Maffi ISTI Informa1on Science and Technology Ins1tute A cosa servono I CSS vengono usati per definire la rappresentazione
CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS
CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti
CSS. Cascading Style Sheet
CSS Cascading Style Sheet CSS Il CSS è un linguaggio, di tipo dichiarativo, che serve per definire lo stile di presentazione degli elementi presenti in un documento HTML. Esso è inglobato all interno dell
Prof. Pagani Corrado FOGLI DI STILE CSS
Prof. Pagani Corrado FOGLI DI STILE CSS INTRODUZIONE L acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata) e rappresenta un linguaggio per definire lo stile degli ipertesti del web.
Corso di CSS. Prerequisiti. Modulo L2. 1-Background e font. Conoscenza di base linguaggio HTML. M.Malatesta 1-CSS-Background e font-08 23/01/2014
Corso di CSS Modulo L2 1-Background e font 1 Prerequisiti Conoscenza di base linguaggio HTML 2 1 Introduzione In questa Unità descriviamo l utilità dei CSS applicati ai vari elementi di una pagina web.
Silvia Likavec. Lezione 6
Silvia Likavec Lezione 6 2 ! Le principali proprietà che permettono di manipolare le immagini agiscono sul box model: " Border (o border-style; border-width; bordercolor); " Padding; " Margin; " Width;
Gestione del testo: proprietà di base
Gestione del testo: proprietà di base La gestione del testo e della tipografia è un aspetto essenziale dei CSS. Le proprietà che definiscono il modo in cui il testo appare sullo schermo sono tante e abbiamo
CSS: HTML: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli. Le immagini mappate
CSS: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli HTML: Le immagini mappate 1 Le principali proprietà che permettono di manipolare le immagini agiscono sul box mode
CSS: CASCADING STYLE SHEETS MODULO 8
CSS: CASCADING STYLE SHEETS MODULO 8 CSS È il linguaggio standard per la stilizzazione di documenti HTML Assolve al compito di informare il browser circa l'aspetto da conferire ai vari tag presenti nel
CSS: Colori, testo, caratteri, liste e link
CSS:, testo, caratteri, liste e link Università di Pisa pievatolo@dsp.unipi.it 13 aprile 2014 Sommario 1 2 Famiglia Dimensioni Corsivo e maiuscoletto Peso: quanto dev essere grasso il grassetto? 3 4 5
INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere inserito
CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style
CSS 1 CSS. In breve. Fogli di stile a cascata. Introduzione a CSS: Cascading Style Sheets
CSS 1 Introduzione a CSS: Cascading Style Sheets CSS CSS è l acronimo di Cascading Style Sheets Fogli di stile in cascata Un foglio di stile specifica come un browser deve posizionare, formattare e visualizzare
Selettori. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
Selettori Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola CSS Sintassi valore valore h1 { color: blue;
I fogli di stile (CSS)
I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono
Riassunto CSS Tutorial
Colori e sfondi color background-color h1 { color: #ff0000; body { background-color: #FFCC66; Riassunto CSS Tutorial Per uno sfondo trasparente: body { background-color: transparent; background-image background-repeat
CSS 1. Introduzione a CSS: Cascading Style Sheets
CSS 1 Introduzione a CSS: Cascading Style Sheets CSS CSS è l acronimo di Cascading Style Sheets Fogli di stile in cascata Un foglio di stile specifica come un browser deve posizionare, formattare e visualizzare
CSS (Cascading Style Sheets)
Foglio di stile CSS (Cascading Style Sheets) Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Vedi http://www.w3schools.com/css/demo_default.htm
Corso di CSS. Prerequisiti. Modulo L2 1.2-CSS e HTML. Conoscenza di base del linguaggio HTML. M.Malatesta 1.2-CSS-CSS e HTML-05 12/01/2014
Corso di CSS Modulo L2 1.2-CSS e HTML 1 Prerequisiti Conoscenza di base del linguaggio HTML 2 1 Introduzione In questa Unità vediamo come si collegano i fogli di stile con il codice contenuto in una pagina
Introduzione ai Cascading Style Sheets
Introduzione ai Cascading Style Sheets Università di Pisa pievatolo@dsp.unipi.it 6 aprile 2014 Sommario 1 2 CSS esterni CSS interni CSS inline 3 4 Confondere fra struttura e presentazione Il mega
Approfondimento: CSS - Gestione del Testo I (1/16)
Approfondimento: CSS - Gestione del Testo I (1/16) Vediamo prima le proprietà di base che sono anche le più comunemente utilizzate nella manipolazione di testi: font-family* Font da usare font-size La
Basi di Dati. Programmazione e gestione di sistemi telematici
Basi di Dati. Programmazione e gestione di sistemi telematici Coordinatore: Prof. Paolo Nesi Docenti: Prof. Paolo Nesi Dr.sa Michela Paolucci Dr. Emanuele Bellini Introduzione CSS Cascading Style Sheets
Corso di Web Programming
Corso di Web Programming 5. Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica
Introduzione ai CSS. CSS esterni e interni. Proprietà di base. selettore { proprietà: valore } selettore { proprietà1: valore1; proprietà2: valore2 }
Introduzione ai CSS I Cascade Style Sheets (CSS), noti in Italia come "Fogli di stile a cascata", sono lo strumento definito dal W3C per definire l'aspetto delle pagine web. Prima dell'introduzione dei
layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto
Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding
Introduzione ai Fogli di Stile Cascading Stile Sheet (CSS) logica e sintassi
Introduzione ai Fogli di Stile Cascading Stile Sheet (CSS) logica e sintassi UD09 Fablab Design Cascading Style Sheet - CSS Dietro il semplice acronimo CSS (Cascading Style Sheets - Fogli di stile a cascata)
Laboratorio di reti I: Cascading Style Sheets
Laboratorio di reti I: Cascading Style Sheets Stefano Brocchi brocchi@dsi.unifi.it 10 novembre, 2009 Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, 2009 1 / 45 Cascading Style Sheets Un Cascading
Riassunto CSS Tutorial Colori e sfondi
Proprietà Esempio Descrizione color background-color background-image background-repeat background-attachment background-position h1 { color: #ff0000; body { background-color: #FFCC66; body { background-image:
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/ HTML e Cascading Style Sheets > L
Web Design. Media Dream Academy. Stefano Gaborin
Web Design Media Dream Academy Stefano Gaborin stefano.gaborin@above.company www.above.company I Fogli di stile: CSS CSS è l acronimo di Cascading Style Sheets, ovvero fogli di stile a cascata. Il CSS
Dispensa CSS (estratto da HTML.it)
Dispensa CSS (estratto da HTML.it) Separare il layout dal contenuto L'HTML in origine è nato come linguaggio per formattare i documenti presenti sul Web. Proprio per questo motivo il contenuto (ad esempio
CSS. Esercizi CC BY ALESSANDRO URSOMANDO DIAPOSITIVA 2 CSS PROPRIETÀ
CSS Esercizi CSS PROPRIETÀ DIAPOSITIVA 2 Corredare l esercizio precedentemente realizzato di un file.css che presenti delle dichiarazioni per impostare: l ampiezza del body a 800 pixel a giallo chiaro
Fogli di stile: introduzione. Fabio Fioravanti
Fogli di stile: introduzione Fabio Fioravanti Introduzione dei fogli di stile 1996: definizione dei fogli di stile da parte del W3C (CSS Level 1 o CSS-1) Dal 1996 al 2000: scarso supporto da parte dei
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2007 2008 Corso di Tecnologie Web CSS http://www lia.deis.unibo.it/courses/tecnologieweb0708/ HTML e Cascading Style Sheets > L
CSS 1. CSS - Cascading Style Sheets. Introduzione a CSS: Cascading Style Sheets
CSS 1 Introduzione a CSS: Cascading Style Sheets CSS - Cascading Style Sheets! Lo stile definisce le regole che guidano il browser nella visualizzazione del contenuto di un tag suggerisce come posizionare,
CSS / CASCADING STYLE SHEETS. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
CSS / CASCADING STYLE SHEETS INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1 INFORMAZIONE: CONTENUTO + PRESENTAZIONE Lo scopo di una pagina web è la trasmissione di un informazione.
Gli stili. Lo stile si può applicare in quattro modi diversi ad un elemento HTML: I. Fuori tag La sintassi per lo stile fuori tag è la seguente:
Gli stili Lo strumento degli stili sta piano piano soppiantando tutta una serie di attributi non solo per la formattazione del testo ma anche per l'aspetto estetico di tutti gli elementi di HTML, dalle
CSS: stili e layout BOX MODEL. Prof.ssa Cristina Gena
CSS: stili e layout BOX MODEL Prof.ssa Cristina Gena Box model In questa lezione vedremo la differenza tra gli elementi blocco e gli elementi in linea e scopriremo le caratteristiche del box model. In
4 Estensioni proprietarie. 4 Conversione del testo in immagini. 4 Uso di immagini per il controllo degli spazi bianchi
Universita degli Studi di Bologna - Facolta di Ingegneria HTML e Cascading Style Sheets > L HTML è nato in ambienti scientifici Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/
Introduzione ai fogli di stile CSS
CdL in Ingegneria Elettronica e Informatica Modulo di Fondamenti di Informatica D Introduzione ai fogli di stile CSS Ing. Maurizio Vincini a.a. 2000/2001 Programmazione CGI - 1 Fogli di stile CSS Il Web
Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine
Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare
Web Coding Prototipazione di ipertesti e siti web in HTML ed introduzione alla creazione di stili grafici con fogli di stile CSS.
Prototipazione di ipertesti e siti web in HTML ed introduzione alla creazione di stili grafici con fogli di stile CSS. Unità Didattica UD03: Introduzione ai fogli di stile CSS: box model, colori e sfondi
HTML 4.01 Seconda lezione
HTML 4.01 Seconda lezione A cura di Ivano Stranieri 0 Lezione precedente Cos è internet browser editor di testo HTML: cos è e cosa non è i marcatori i tag di struttura: DOCTYPE HTML HEAD TITLE META BODY
HTML. Hyper Text Markup Language
HTML Hyper Text Markup Language IL WEB Le componenti principali del web sono: HTML: definizione del contenuto delle pagine CSS: definizione dell aspetto delle pagine Javascript: definizione del comportamento
CSS. <html> <body bgcolor="blue"> <html> <body bgcolor= red"> <html> <body bgcolor="blue"> <html> <body bgcolor="red "> </body> </html>
I fogli di stile 1 Css CSS è l acronimo di Cascading Style Sheets Fogli di stile in cascata Un foglio di stile specifica come un browser deve posizionare, formattare e visualizzare i vari elementi che
CSS. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
CSS Politecnico di Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola I cascading style sheet I CSS permettono
Linguaggi per il Web Linguaggi di markup: CSS
Linguaggi per il Web Linguaggi di markup: CSS Fogli di stile (CSS) Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme permettono di separare il contenuto
INTRODUZIONE AI FOGLI DI STILE CASCADING STYLE SHEET
INTRODUZIONE AI FOGLI DI STILE CASCADING STYLE SHEET 1 Aspetto delle pagine Web miglioriamo la rappresentazione su browser - Definizione dello STILE- Colore, dimensione e stile del font, colore sfondo,
<tag style= dichiarazioni css >
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
Linguaggi e tecnologie per il Web. Parte 5 CSS
Sapienza Università di Roma corso di laurea in Ingegneria informatica e automatica Linguaggi e tecnologie per il Web a.a. 2016/2017 Parte 5 CSS Riccardo Rosati Fogli di stile In HTML non c è separazione
Indice delle proprietà. Valori speciali. Compatibilità
CSS: sintassi, e valori 29 Valore: 'fontstyle'? 'fontsize' [ /'lineheight' ]? Valore: Valori speciali Nei valori, caratteri come, e / devono essere riportati letteralmente.
CSS / GESTIONE DEL COLORE E DEI BACKGROUND. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
CSS / GESTIONE DEL COLORE E DEI BACKGROUND INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1 CSS / DEFINIRE IL COLORE SECONDO IL MDELLO RGB Modello Additivo del colore Le lunghezze
CSS 2. I selettori e le classi
CSS 2 I selettori e le classi Tipi di selettori Selettore generale Selettori tipo (quelli singoli) Selettori di gruppo (raggruppamento) Selettori contestuali Selettori figli Selettori fratelli adiacenti
CSS 4. Tipi di dati, lunghezze ed unità di misura
CSS 4 Tipi di dati, lunghezze ed unità di misura Tipi di dati in CSS Esistono i seguenti tipi di dati Tecnologie di Sviluppo per il WEB 2 Numeri
APPUNTI DI HTML (QUINTA LEZIONE)
APPUNTI DI HTML (QUINTA LEZIONE) Cascade style sheets II Web, ai tempi della sua nascita, doveva preoccuparsi maggiormente dei contenuti che diffondeva, piuttosto che allo stile con il quale esso venivano
Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row
TAG FONDAMENTALI Tag : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row Tag , tag ,.tag : per definire le intestazioni (i titoli) e la loro
CSS 4. Tipi di dati in CSS. Numeri <number> Lunghezze <length> Tipi di dati, lunghezze ed unità di misura. Esistono i seguenti tipi di dati
CSS 4 Tipi di dati, lunghezze ed unità di misura Tipi di dati in CSS Esistono i seguenti tipi di dati 2 Numeri Interi Cifre comprese
Web Design & Technologies
1 Comunicazione, Innovazione, Multimedialità Web Design & Technologies Cascading Style Sheets Level 2 2 Cosa sono i Cascading Style Sheet? Gli style sheet rappresentano un metodo semplice (ma potente)
DREAMWEAVER CS6: STILI CSS
DREAMWEAVER CS6: STILI CSS Durante la progettazione di siti, una parte cruciale del progetto è il layout. CSS (Cascading Style Sheets) è la principale tecnologia che permetterà di posizionare e disporre
2.3 Cenni sui fogli di stile CSS per XML
Fondamenti di Informatica Sistemi di Elaborazione delle Informazioni Informatica Applicata 2.3 Cenni sui fogli di stile CSS per XML Antonella Poggi Anno Accademico 2012-2013 DIPARTIMENTO DI SCIENZE DOCUMENTARIE
Tabella 2.2 Indice delle proprietà Nome Valori Pr El Er Cp
Tabella 2.2 Indice delle background ['background-color' 'background-image' 'background-repeat' 'background-attachment' 'background-position'] background-attachment scroll fixed scroll background-color
Tecnologie di Sviluppo per il Web
Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Dettagli e Approfondimenti versione 1.2 G. Mecca mecca@unibas.it Università della Basilicata CSS >> Sommario Dettagli e Approfondimenti Sintassi
Corso di Informatica
Corso di Informatica Modulo L2 1.1-Concetti generali 1 Prerequisiti Conoscenza di base del linguaggio HTML 2 1 Introduzione In questa Unità si inizia a presentare la tecnologia CSS, un evoluzione del codice
Metalinguaggi di marcatura Materiale didattico di supporto. Indice 6. HTML (CONTINUA)...2
Indice 6. HTML (CONTINUA)...2 6.1 FOGLI DI STILE (CSS- CASCADING STYLESHEET)...2 6.1.1 Regole dello stile...6 6.1.2 Classi...6 6.1.3 Esempi di proprietà modificabili e relativi valori....9 6.2 DIVISIONS
CSS 6. Il modello contenitore (box model) Elementi flottanti
CSS 6 Il modello contenitore (box model) Elementi flottanti Il modello contenitore Tecnologie di Sviluppo per il WEB 2 BOX MODEL CSS assume che ogni elemento genera uno o più box rettangolari, chiamati
CSS 2. Tipi di selettori. Raggruppamento di selettori. Selettore generale. I selettori e le classi
CSS 2 I selettori e le classi Tipi di selettori Selettore generale Selettori tipo (quelli singoli) Selettori di gruppo (raggruppamento) Selettori contestuali Selettori figli Selettori fratelli adiacenti