CSS / PRIORITA E CASCADING. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1

Transcript

1 CSS / PRIORITA E CASCADING INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1

2 CSS / PRIORITA E PRECEDENZA NELLE DEFINIZIONI CSS Gli stili CSS si dicono a cascata perché lo stile di una pagina web è stabilito nell ordine da: 1. le definizioni dell autore della pagina (il nostro style.css) 2. le impostazioni e preferenze definite dall utente (se l utente ha impostato ad esempio il contrasto elevato) 3. le impostazioni di default del browser (il render di default del browser). Inoltre le varie definizioni possono sovrascriversi rispetto allo scorrere delle linee del file css INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 2

3 CSS / PRIORITA E PRECEDENZA NELLE DEFINIZIONI CSS Ad esempio, se nel medesimo file css definisco: linea 1 del css -> p{ color: red;}... altre definizioni... linea 200 del css -> p{ color: blue;} tutti i <p> del documento html saranno renderizzati con testo BLUE. Questo perche per cascata, l ultima (ri-)definizione è quella che conta. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 3

4 CSS / PRIORITA E PRECEDENZA NELLE DEFINIZIONI CSS Le classi hanno priorità maggiore rispetto ai selettori diretti linea 1 del css -> p { color: red;}... altre definizioni... linea 200 del css ->.blue { color: blue;} nel file HTML -> <p class= blue > testo del paragrafo </p> testo del paragrafo INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 4

5 CSS /!IMPORTANT A volte puo essere necessario definire delle proprietà che non devono essere sovrascritte da altre in cascata. la dichiarazione!important accanto ad una regola CSS assegna un valore di precedenza alla regola che prevale su tutte le altre specificità. linea 1 del css -> p{ color: green;}... altre definizioni... linea 100 del css -> p{ color: red!important;}... altre definizioni... linea 200 del css -> p{ color: blue;} tutti i <p> del documento html saranno renderizzati con testo RED. Questo perche la regola con priorità massima è quella dichiarata come!important INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 5

6 CSS / WRAPPING TECNIQUE INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 6

7 WRAPPER PROGENITORI E DIV FIGLI Per realizzare siti che si sviluppano a fasce è utile fare ricorso alla cosiddetta tecnica dei wrapper. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 7

8 progenitore wrapper : width 100% width 960 (oppure 1170px) INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 8

9 INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 9

10 CSS / E SE VOLESSI APPLICARE UN IMMAGINE AD UN HEADER FULL SCREEN? abbiamo due soluzioni. SOLUZIONE 1: Creo un DIV Wrapper, nel quale inserisco una immagine con il tag <img> e imposto la larghezza dell immagine con un width=100%. SOLUZIONE 2: Creo un DIV Wrapper, al quale applico un background image con background size cover. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 10

11 CSS / E SE VOLESSI APPLICARE UN IMMAGINE AD UN HEADER FULL SCREEN? abbiamo due soluzioni. SOLUZIONE 1: (nel codice html) <div id= header_wrapper > <img src= img/header.jpg width= 100% alt= header /> </div> SOLUZIONE 2: (nel codice css) width: 100%; /* i div wrapper devono estendersi all 100% dello schermo*/ height: 700px; position: relative; background-image:url(img/header.jpg); background-repeat:no-repeat; background-position:center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 11

12 CSS / PREGI E DIFETTI DELLE DUE SOLUZIONI abbiamo due soluzioni. SOLUZIONE 1: Utilizziamo una immagine che dovrebbe fare parte del layout come se fosse una immagine di contenuto. Tuttavia l immagine si ridimensiona senz aperdita di porzioni della stessa SOLUZIONE 2: Manteniamo la separazione netta fra contenuto e layout, tuttavia alcune porzioni dell immagine possono essere ritagliate, per questo è importante scegliere immagini con fucus attentivo al centro INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 12

13 INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 13

14 CSS / CENNI HTML 5 HTML 5 introduce un set di nuovi tag che enfatizzano la SEMANTICA. la semantica è quella parte della scienza linguistica che si occupa di studiare il significato delle singole parole e dei testi come un tutt uno. QUALE è la semantica del tag DIV? abbiamo detto che di fatto è un BOX contenitore. Uno dei primi problemi che abbimo incontrato è stato quello di differenziare i vari DIV nella stessa pagina, attribuendo loro un ID univoco. <div id= header ></div> } <div id= content ></div> <div id= footer ></div> formalmente questi tre div hanno la stessa semantica, cioe sono tutti box che hanno un nome diverso INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 14

15 CSS / CENNI HTML 5 Prima, con i classici tag HTML quali <div> o <span>, un motore non riusciva a capire se si trovava di fronte ad un testo, ad una data, ad un nome, ad un menù o cos altro. Ora, invece, ad ogni tipologia di testo corrisponde un tag HTML semantico, che aiuta pertanto il motore di ricerca ( e il programmatore) a capire quale è la struttura della pagina e quindi dare diversi pesi anche ai suoi contenuti. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 15

16 CSS / CENNI HTML 5 HTML / XHTML HTML5 INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 16

17 Ovviamente abbiamo i corrispondenti selettori in CSS header { definizioni... } nav { definizioni... } article { definizioni... } section { definizioni... } aside { definizioni... } footer { definizioni...} INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 17

18 »» Header - Il tag <header> va usato nella parte iniziale della pagina e racchiude il logo, un eventuale banner pubblicitario alto, il motore di ricerca interno e così via.»» Nav - Il tag <nav> si riferisce al menù principale del sito web. Solitamente si vede in alto, appena sotto l header, ma a seconda della grafica del sito web, può stare anche a sinistra o a destra.»» Article - uno dei più importanti tag HTML semantici in assoluto: <article>. Si tratta del tag che identifica il contenuto principale del sito web, l articolo. Qui vanno i vari H1, H2 e p»» Section - Il tag <section> viene spesso usato per definire una parte di articolo. Ad esempio, se avete un testo che parla di una città europea, potete magari usare la prima parte di testo per descriverla e racchiudere il tutto in un tag <section>, poi dedicare un altro tag a cosa vedere, un altro ancora a come arrivare e così via.»» Aside - E il tag HTML semantico che va usato per indicare la parte laterale del proprio sito web, quella dove ci sono di solito le pubblicità. Si scrive <aside> e non va confuso con il <nav>, che invece rappresenta il menù.»» Footer - L ultimo tag semantico, <footer>, chiude la pagina e contiene i link finali, il copyright, indicazioni sui cookie e così via. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 18

19 DOMANDE? INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 19