Downloaded 17 times
![Identificano solamente gli elementi che si
trovino in una particolare condizione di
discendenza nella struttura (X)HTML della
pagina.
Selettori
p span { […] } div > p { […] } h1 + p { […] }
selettore di discendenza
identifica solo gli
elementi contenuti in altri
elementi
selettore figlio identifica
invece solo gli elementi
che siano contenuti
direttamente nell'elemento
padre
selettore fratello
identifica il primo
elemento successivo ad
un altro con cui condivida
lo stesso padre
© Paolo Quartarone - CSS 12/20](https://image.slidesharecdn.com/css-150403052528-conversion-gate01/85/Introduzione-al-CSS-12-320.jpg)
Uploaded byPaolo Quartarone
Introduzione al CSS
Il CSS (Cascading Style Sheets) è un linguaggio utilizzato per definire la formattazione dei documenti HTML, XHTML e XML, migliorando la separazione tra contenuti e presentazione. Introdotto nel 1996, il CSS ha visto l'emergere di diverse versioni e include regole, selettori, proprietà e media queries per rendere le pagine web responsivi. È fondamentale rispettare le normative del consorzio per garantire la compatibilità e migliorare la visibilità nei motori di ricerca.
Introduzione al CSS
- 1. © Paolo Quartarone- CSS Introduzione al linguaggio CSS ITIS Zuccante 2014/2015 1/20
- 2. Il CSS (Cascading StyleSheets),è un linguaggio usato per definire la formattazione di documenti HTML, XHTML e XML come ad esempio per i siti web e relative pagine. Introduzione © Paolo Quartarone - CSS 2/20
- 3. L'uso del CSSè necessario per separare i contenuti dalla formattazione, migliorando la programmazione. Inoltre favorisce il riuso di codice ed una sua più facile manutenibilità. Perchè usare CSS? © Paolo Quartarone - CSS 3/20
- 4. CSS nasce ufficialmentenel 1996, ma fu ideato nel 1993. Nasce dalla esigenza di migliorare le pagine web, perchè all'epoca la formattazione era decisa dai browser. Da allora sono state pubblicate tre versioni, CSS1, CSS2 e l'attuale CSS3 Breve Storia © Paolo Quartarone - CSS 4/20
- 5. Il seguente, oltread essere il più semplice metodo per utilizzare un file CSS, è anche il migliore, in quanto segue le normative del consorzio Utilizzare i CSS (1) <html> <head> <title>Esempio</title> <link rel="stylesheet" type="text/css" href="foglio_di_stile.css"/> </head> © Paolo Quartarone - CSS 5/20
- 6. Nonostante la semplicità, nonè una tecnica molto diffusa, perchè non validabile dal consorzio Utilizzare i CSS (2) <html> <head> <title>Esempio</title> <style type="text/css"> @import url(foglio_di_stile.css); </style> </head> © Paolo Quartarone - CSS 6/20
- 7. Infine, il seguenteè, oltre ad uno dei metodi più usati, anche il peggiore, in quanto non favorisce il riutilizzo del codice e la manutenibilità. Utilizzare i CSS (3) <html> <head> <title>Esempio</title> <style type="text/css"> codice css </style> </head> © Paolo Quartarone - CSS 7/20
- 8. Il linguaggio CSSè caratterizzato da poche e semplici regole ed elementi: Regole © Paolo Quartarone - CSS 8/20
- 9. ●Selettore: indicazione dell'elementodella pagina cui verrà applicato lo stile impostato nella dichiarazione ●Classe:indentifica in maniera selettiva diversi Elementi ●Indentificatore: detto anche id, è usato per identificare in modo univoco un elemento Selettori, classi e identificatori © Paolo Quartarone - CSS 9/20
- 10. Una pseudo-classe èun particolare selettore che non definisce la presentazione di un elemento ma di un particolare stato di quest’ultimo Pseudo-classi selettore:pseudo-classe {dichiarazioni;} © Paolo Quartarone - CSS 10/20
- 11. Gli pseudoelementi identificanosolo una parte di un elemento, senza la necessità di utilizzare la marcatura (X)HTML. Pseudo-elementi p:first-line {dichiarazioni;} © Paolo Quartarone - CSS 11/20
- 12. Identificano solamente glielementi che si trovino in una particolare condizione di discendenza nella struttura (X)HTML della pagina. Selettori p span { […] } div > p { […] } h1 + p { […] } selettore di discendenza identifica solo gli elementi contenuti in altri elementi selettore figlio identifica invece solo gli elementi che siano contenuti direttamente nell'elemento padre selettore fratello identifica il primo elemento successivo ad un altro con cui condivida lo stesso padre © Paolo Quartarone - CSS 12/20
- 13. Proprietà Le proprietà CSS sononumerose, circa 60. © Paolo Quartarone - CSS 13/20 ● Background ● Border ● Color ● Float ● Font ● Margin e padding ● Text-align
- 14. 14/20 Valori Se non specificata, unaproprietà assume i valori predefiniti di ogni browser. © Paolo Quartarone - CSS ● Unherit ● Auto ● Numero ● Percentuale ● Colore ● Font
- 15. È possibile indicareun colore in più di un modo. ● #ff6600 ● #f60 ● rgb(255,102,0) ● rgb(100%, 40%, 0%) Colori © Paolo Quartarone - CSS 15/20
- 16. "Una media query consistenella dichiarazione di un tipo di media e di zero o più espressioni che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media" Media Queries © Paolo Quartarone - CSS 16/20
- 17. Le media queriesvengono utilizzate sopratutto per rendere una pagina web responsiva, ovvero che si adatta alle dimensioni dello schermo nel quale viene visualizzata, in maniera non casuale ma ben precisa e programmata, o per impostare un layout di stampa. Utilizzo delle Media Queries © Paolo Quartarone - CSS 17/20
- 18. Purtroppo queste tecnologienon sono sempre compatibili con tutti i browser (come ad esempio Internet Explorer 8 o inferiori), quindi, durante la programmazione bisogna tener conto di questo problema e risolverlo, in quanto il numero di utenti che utilizzano IE8 è ancora circa il 24% Compatibilità © Paolo Quartarone - CSS 18/20
- 19. È necessario rispettare lenormative emanate dal consorzio per avere la certificazione della propria pagina, in quanto pagine certificate salgono più in fretta nella lista dei risultati dei motori di ricerca Rispetto delle Normative © Paolo Quartarone - CSS 19/20
- 20.