LEZIONE 04 Riepilogo CSS. SELETTORI I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera.

Presentazione sul tema: "LEZIONE 04 Riepilogo CSS. SELETTORI I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera."— Transcript della presentazione:

1 LEZIONE 04 Riepilogo CSS

2 SELETTORI

3 I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera attribuire lo stile. Prova il codice

4 ELEMENTO body, html { height: 100%; } body { font-family: 'Titillium Web', sans-serif; font-size: 16px; font-weight: 300; color: #333333; background-color: #ffffff; } h1, h2, h3, h4, h5, h6 { font-weight:700; }

5 ELEMENTO Inserendo un selettore senza prefisso si identifica un elemento HTML. Se si inseriscono più selettori separati da virgola il gruppo di regole viene attribuito ad ogni selettore Prova il codice

6 CLASSE.red { color: #dd0000; }.text-center { text-align:center; }.text-right { text-align:right; }

7 CLASSE Un selettore preceduto da un punto identifica una classe. Una classe è un nome che identifica un gruppo di regole di stile. Gli elementi della pagina che contengono quel nome nell’attributo class seguono le regole di stile che la classe identifica Prova il codice

8 PSEUDO CLASSI nav.indice ol li a:hover { color: #dd0000; }.header-main.header-col:nth-child(2),.header-main.header-col:nth-child(3) { height:40%; text-align: right; }

9 PSEUDO CLASSI Quando si fa seguire un selettore da i due punti si identifica un determinato stato degli elementi identificati da quel selettore chiamato pseudo-classe. Usando le pseudoclassi posso attribuire un particolare aspetto ad un elemente quando si trova in un deteminata stato. Esempi: –:hover indica lo stato di un elemento quando il puntatore del mouse passa sopra all’elemeto stesso –:focus indica lo stato di un elemente quando ha il «il focus» –:nth-child(n) indica un elemento quando è l’ennesimo figlio del suo «parent». Prova il codice

10 SELETTORI COMPOSTI

11 UNIONE DI SELETTORI nav.indice { width:95%; position:static; text-align: left; transform: translate(0,0); margin: 40px auto 10px; }

12 UNIONE DI SELETTORI Quando viene seguito senza separatori da un selettore di classe, di id, di attributo o di pseudoclasse, vengono selezionati solo gli elementi che soddisfano ad entrambi i criteri. Esempi: –nav.indice: gli elementi nav il cui attributo class contiene indice –div#main: la div con id uguale a main –input[type=‘text‘]: tutti gli elementi input con l’attributo type uguale a text

13 SELEZIONARE UN ELEMENTO CHE È DENTRO UN ALTRO ELEMENTO nav.indice ol li a { color: #000; } Seleziona tutti gli elementi a che sono dentro un elemento li che a suo volta è dentro un elemento ol che è dentro un elemento nav con classe ‘indice’.

14 SELETTORI SelettoreEs.DescrizioneCSS.class.introSeleziona tutti gli elementi con class="intro"1 #id#firstnameSeleziona tutti gli elementi con id="firstname"1 **Seleziona tutti gli elementi2 elementopSeleziona tutti gli elementi 1 elemento, elementodiv, pSeleziona tutti gli elementi e tutti gli elementi 1 elemento div pSeleziona tutti gli elementi contenuti in un elemento 1

15 SELETTORI SelettoreEs.DescrizioneCSS elemento > elementodiv > pSeleziona tutti gli elementi figli di un elemento 2 elemento + elementodiv + pSeleziona tutti gli elementi che sono posizionati subito dopo ad un elemento 2 elemento ~ elementop ~ ulSeleziona tutti gli elementi che sono preceduti da un elemento 3 [attribute][target]Seleziona tutti gli elementi con un attributo target2 [attribute=value][target=_blank]Seleziona tutti gli elementi con target="_blank"2 [attribute~=value][title~=flower]Seleziona tutti gli elementi con un attributo title che continene la parola "flower" 2

16 SELETTORI SelettoreEs.Descrizione CS S [attribute|=value][lang|=en]Seleziona tutti gli elementi con un attributo lang che inizia con "en" 2 [attribute^=value]a[href^="https"]Seleziona tutti gli elementi il cui attributo href inizia con "https" 3 [attribute$=value]a[href$=".pdf"]Seleziona tutti gli elementi il cui attributo href termina con ".pdf" 3 [attribute*=value]a[href*="w3schools"]Seleziona tutti gli elementi il cui attributo href contiene la stringa "w3schools" 3 :activea:activeStato active di tutti gli elementi.1 ::afterp::afterInserisce testo dopo ogni elemento 2

17 PSEUDO-CLASSI Una pseudo-classe non definisce un elemento ma un particolare stato di quest'ultimo. In buona sostanza imposta uno stile per un elemento al verificarsi di certe condizioni. A livello sintattico le pseuso-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore. a:link {color: blue;} – La regola vuol dire: i collegamenti ipertestuali ( ) che non siano stati visitati (:link) avranno il colore blue.

18 SELETTORI SelettoreEs.Descrizione CS S :beforep::beforeInserisce testo prima di ogni elemento 2 :checkedinput:checkedSeleziona tutti gli elementi selezionati3 :disabledinput:disabledSeleziona tutti gli elementi disabilitati3 :emptyp:emptySeleziona tutti gli elementi che non hanno figli 3 :enabledinput:enabledSeleziona tutti gli elementi abilitati3 :first-childp:first-childSeleziona tutti gli elementi che sono I primi figli del loro parent

19 SELETTORI SelettoreEs.Descrizione CS S ::first-letterp::first-letterSeleziona la prima lettera di ogni elemento 1 ::first-linep::first-lineSeleziona la prima riga di ogni elemento 1 :first-of-typep:first-of-typeSeleziona ogni elemento che è il primo del suo parent. 3 :focusinput:focusSeleziona l'elemento input che ha il focus2 :hovera:hoverStato mouse hover di tutti gli elementi 1 :invalidinput:invlidSelezione gli elementi input con un valore no valido 3

20 SELETTORI SelettoreEs.DescrizioneCSS :lang(language)p:lang(it)Seleziona ogni elemento con l'attributo lang uguale a "it" (Italian) 2 :last-childp:last-childSeleziona ogni elemento che è ultimo figlio del suo parent 3 :last-of-typep:last-of-typeSeleziona ogni elemento che è ultimo elemento p del suo parent 3 :linka:linkTutti i link non visitati1 :not(selector):not(p)Seleziona tutti gli elementi che non sono.3 :nth-child(n)p:nth-child(2)Seleziona ogni elemento che è il secondo figlio del suo parent 3

21 SELETTORI SelettoreEs.DescrizioneCSS :nth-last-child(n)p:nth-last-child(2)Seleziona ogni elemento che è il secondo figlio del suo parent contando dalla fine. 3 :nth-last-of-type(n)p:nth-last-of-type(2)Seleziona ogni elemento che è il secondo elemento p del suo parent contando dalla fine. 3 :nth-of-type(n)p:nth-of-type(2)Seleziona ogni elemento che è il secondo elemento p del suo parent. 3 :only-of-typep:only-of-typeSeleziona ogni elemento che è l'unico elemento p del suo parent. 3 :only-childp:only-childSeleziona ogni elemento che è l'unico figlio del suo parent. 3 :optionalinput:optionalSeleziona ogni elemento input che non ha l'attributo "required". 3

22 SELETTORI SelettoreEs.Descrizione CS S :read-onlyinput:read-onlySeleziona ogni elemento input che ha l'attributo "read- only". 3 :read-writeinput:read-writeSeleziona ogni elemento input che NON ha l'attributo "read-only". 3 :requiredinput:requiredSeleziona ogni elemento input che ha l'attributo "required". 3 ::selection Porzione di un elemento selezionata dall'utente. :validinput:validSeleziona ogni elemento input con un valore non "invalid" 3 :visiteda:visitedTutti I link già visitati 3

23 DETTAGLI http://www.w3schools.com/cssref/css_selectors.asp

24 PROPRIETÀ

25 VALORI ValoreEsempio parola riservatadisplay: none; margin-left: auto; numeroline-height: 1.3; font-weight: 300; misuramargin-top: 20px; line-height: 24px; percentualewidth: 80%; margin-top: 2%; urlbackground-image: url(img/sfondo.jpg); colore colore predefinito, #RRGGBB, #RRGGBBAA, rgb(rrr,ggg,bbb), rgba(rrr,ggg,bbb,aaa), hsl(hhh,sss,lll), hsla(hhh,sss,lll,aaa) più valoribackground: url(img/sfondo.jpg) no-repeat center; margin: o auto;

26 CARATTERI body { font-family: 'Titillium Web', sans-serif; font-size: 16px; font-weight: 300; color: #333333; ………… } font-family: font principale, [elenco di font alternativi] font-size: misura+unità di misura (px, em, rem), percentuale o una tra (xsmal, small, large…) font-weight: normal, bold o un numero tra 100 e 900. color: colore; line-height: assoluta (misura+unità di misura) o relativa al carattere.

27 CARATTERI E FONT Fonti di sistema standard Colore testo letter-spacing line-height text-align text-transform font-family font-size font-weight

28 IL BOX MODEL E TRANSITION box-sizing display float height margin position padding transform translate transform scale transition

29 COLORI PREDEFINITI http://www.w3schools.com/cssref/css_colornames.asp

30 COLOR PICKER http://www.w3schools.com/tags/ref_colorpicker.asp

31 BACKGROUND background-color –Definisce il colore di sfondo di un elemento. selettore {background-color: #FFF;} selettore {background-color: transparent;} background-image –Definisce l'URL di un'immagine da usare come sfondo di un elemento. selettore { background-image: url(valore); } selettore { background-image: none} background-repeat –Consente di definire la direzione in cui l'immagine di sfondo viene ripetuta. selettore {background-repeat: valore;} –Valori: repeat, repeat-x, repeat-y, no-repeat background-attachment selettore {background-attachment: valore;} –Valori: scroll, fixed.

32 BACKGROUND background-position –Definisce il punto in cui verrà piazzata un'immagine di sfondo. selettore {background-position: valoreOriz | valoreVert;} –Valori: valori in percentuale, valori espressi con unità di misura, parole chiave top, left, bottom, right, center. background –Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo. selettore { background: background-color background-image background-repeat background-attachment background-position; }

33 BACKGROUND background-clip –Definisce l'are dello sfondo. selettore {background-clip: border-box|padding-box|content-box|initial|inherit;} background-origin –A cosa è relativa la posizione dell'immagine. selettore {background-origin: border-box|padding-box|content-box|initial|inherit;} background-size –Consente di definire la direzione in cui l'immagine di sfondo viene ripetuta. selettore {background-size: auto|larghezza altezza|cover|contain|initial|inherit;}

34 FONT e TESTO ProprietàDescrizioneValori font-familyFamiglia font da usare per il testo Nomi separati da virgole font-sizeLivello di opacità di un elemento medium|xx-small|x-small|small|large|x-large|xx- large|smaller|larger|misura|initial|inherit; font-styleStile del fontnormal|italic|oblique|initial|inherit; font-variantVariante del font normal|small-caps|initial|inherit font-weightPeso del fontnormal|bold|bolder|lighter|number|initial|inherit letter-spacingSpaziatura tra i caratterinormal|length|initial|inherit; line-heightAltezza della riganormal|numero|misura|percentuale|initial|inherit; text-alignAllineamento nel bloccoleft|right|center|justify|initial|inherit; text-indentIdentazione del testomisura|percentuale|initial|inherit;

35 FONT e TESTO ProprietàDescrizioneValori text-transformMaiuscole minuscolenone|capitalize|uppercase|lowercase|initial| inherit; white-spaceGestione degli spazinormal|nowrap|pre|pre-line| pre-wrap|initial|inherit; word-breakRegole con cui le parole vengono separatenormal|break-all|keep-all|initial|inherit; word-spacingDimensione dello spazio tra le parolenormal|misura|initial|inherit; word-wrapCome il testo va a caponormal|break-word|initial|inherit; text-decorationSottolineatura e testo barratonone|underline|overline|line-through|initial|inherit text-shadowObreggiatura del teso (o effetto 3D)

36 DIMENSIONI PrprietàDescrizioneValori heightSets the height of an elementauto, length, %, inherit max-heightSets the maximum height of an elementauto, length, %, inherit max-widthSets the maximum width of an elementauto, length, %, inherit min-heightSets the minimum height of an elementauto, length, %, inherit min-widthSets the minimum width of an elementauto, length, %, inherit widthSets the width of an elementauto, length, %, inherit

37 ALTRE PROPRIETÀ ProprietàDescrizioneValori bottomFissa la posizione inferiore di un blocco posizionatoauto, length, %, inherit clipDefinisce il reattangolo visibile di un elemento posizionato in modo assoluto rect(alto, destra, basso, sinistra), auto, inherit cursorSpecifica il tipo di cursore da visualizzareurl o uno dei nomi riservati leftFissa il margine sinistro di un blocco posizionatoauto, length, %, inherit overflowSpecifica che cosa accade se il contenuto supera le dimensioni di un elemento auto, hidden, scroll, visible, inherit positionSpecifica il tipo di posizionamento di un elementoabsolute, fixed, relative, static, inherit rightFissa il margine destro di un blocco posizionatoauto, length, %, inherit topFissa il margine superiore di un blocco posizionatoauto, length, %, inherit z-indexDetermina l'ordine di sovrapposizione degli elementi

38 FLOAT margin border padding widt h height margin border padding widt h height float:none margin border padding widt h height float:none

39 FLOAT margin border padding width height margin border padding widt h height margin border padding widt h height float:left

40 FLOAT margin border padding width height margin border padding widt h height margin border padding widt h height float:left float:none

41 FLOAT margin border padding width height margin border padding widt h height margin border padding widt h height float:left float:none; clear:both;

42 DISPLAY ValoreDescrizione inlineValore predefinito. Visualizza un elemento come elemento inline (es.: ) blockVisualizza un elemento come un elemento block (e.: ) flexVisualizza un elemento come un contenitore secondo il modello box-flex. Nuovo in CSS3 inline-block Visualizza un elemento come un contenitore di tipo inline block. Gli elemnti contenuti all'interno si comportano come in un blocco, ma l'elemento stesso si comporta come elemento inline inline-flex Visualizza un elemento Ma che si posiziona come inlinecome un contenitore secondo il modello box- flex. inline-tableL'elemento viene visualizzato come una tabella inline list-itemL'elemento si comporta come un elemento. tableL'elemento si comporta come un elemento. border-top-right- radius

43 DISPLAY ValoreDescrizione table-captionL'elemento si comporta come un elemento. table-column-groupL'elemento si comporta come un elemento. table-header-groupL'elemento si comporta come un elemento. table-footer-groupL'elemento si comporta come un elemento. table-row-groupL'elemento si comporta come un elemento. table-cellL'elemento si comporta come un elemento. table-columnL'elemento si comporta come un elemento. table-rowL'elemento si comporta come un elemento. noneL'elemento non viene visualizzato.