CSS
Corso di base
Prepara i tuoi esami
Studia grazie alle numerose risorse presenti su Docsity
Ottieni i punti per scaricare
Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium
Guide e consigli
Prepara i tuoi esami
Studia grazie alle numerose risorse presenti su Docsity
Cerca documenti
Prepara i tuoi esami con i documenti condivisi da studenti come te su Docsity
Cerca la tua università
Trova i documenti specifici per gli esami della tua università
Video Corsi
Preparati con lezioni e prove svolte basate sui programmi universitari!
Quiz
Rispondi a reali domande d’esame e scopri la tua preparazione
Docsity AINEW
Riassumi i tuoi documenti, fagli domande, convertili in quiz e mappe concettuali
Maturità 2026
Studia con prove svolte, tesine e consigli utili
Esplora domande
Togliti ogni dubbio leggendo le risposte alle domande fatte da altri studenti come te
Argomenti di studio
Esplora i documenti più scaricati per gli argomenti di studio più popolari
Ottieni i punti per scaricare
Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium
Guida al linguaggio CSS, per l'aspetto grafico delle pagine web.
Tipologia: Guide, Progetti e Ricerche
2019/2020
1 / 153
Questa pagina non è visibile nell’anteprima
Non perderti parti importanti!
Documenti correlati
Anteprima parziale del testo
Scarica IMPARA IL CSS: Concetti essenziali e più Guide, Progetti e Ricerche in PDF di Informatica solo su Docsity!
CSS
Corso di base
Sommario
Introduzione
Sintassi di base
Lo stile del testo
Le proprietà
Layout
CSS3: le basi
Gradienti
Sfondi
Transizioni
Trasformazioni
Perchè
utilizzarlo?
Il grande vantaggio del CSS è la
possibilità di definire lo stile e il
layout di N pagine web in un
unico codice sorgente.
● maggiore efficienza
● maggiore semplicità
● separazione tra struttura
(HTML) e stile (CSS)
Grazie al CSS, nel codice HTML
possiamo limitarci a definirne il
contenuto.
Esempio
body { background-color: yellow; } h1 { color: blue; text-align: center; } p { font-family: arial; font-size: 15px; }
Modalità di
inserimento CSS
- IN LINEA (INLINE)
- INCORPORATI (EMBEDDED o INTERNAL)
- ESTERNI (EXTERNAL)
Inline CSS
Inserendo il CSS in linea, andremo a definire
uno stile applicandolo ad un singolo
elemento.
Per inserire un inline CSS è possibile
aggiungere l’attributo style al tag su cui
vogliamo applicare lo stile.
La sintassi è la seguente:
..contenuto...
Embedded CSS
Il CSS incorporato viene definito nell’
elemento
Embedded CSS
Sintassi
External CSS
Il CSS esterno viene definito all’ interno di
un file di testo a parte, che viene salvato
con l’estensione .css.
Questa è ritenuta la modalità ottimale di
inserimento di un codice CSS.
Per utilizzare questo file CSS, nel
documento HTML utilizzeremo il tag
all’interno della sezione .
External CSS
Sintassi
...contenuto...
External CSS Esempio
-> pagina CSS
p {
color: blue;
background-color: yellow;
ID Selector
Il selettore in CSS può selezionare un elemento in base al suo ID, attraverso la seguente sintassi: #elemento { proprieta1: valore1; proprieta2: valore2; } esempio: #introduzione { color:blue; background-color: yellow; }
Class Selector
e ID Selector
Per selezionare l’elemento avente un determinato identificatore (ID) utilizziamo il cancelletto seguito dal suo nome. #intro { background-color: yellow; } Per selezionare elementi facenti parte di una specifica classe, utilizziamo il punto seguito dal nome di essa. .intro { background-color: yellow; }
Nota: Il nome di una classe o di un ID non deve iniziare con un numero.
Selettore
discendente
Il selettore discendente va a selezionare tutti gli elementi discendenti da uno specifico elemento. Osserva il seguente codice: #identificatore tipo_elemento { proprieta: valore; } .classeX tipo_elemento { proprieta: valore; }