XI Lezione - Arabo LAR Giath Rammo @ Libera Accademia Romana
I fogli di stile css
1. I fogli di stileI fogli di stile CSSCSS
Il CSS (Cascading Style Sheets), è un linguaggio usato per
definire la formattazione di documenti HTML, XHTML e XML.
L'uso del CSS è necessario per separare i contenuti
dalla formattazione, migliorando la programmazione.
stile.css
2. Collegare un foglio stile a unCollegare un foglio stile a un
documento htmldocumento html
<html>
<head>
<title>Esempio</title>
<link rel="stylesheet" type="text/css” href=“stile.css” />
</head>
Metodo standard
4. Selettore: indica l'elemento della pagina cui verrà applicato lo stile
Classe: identifica in maniera selettiva diversi elementi
Indentificatore: usato per identificare in modo univoco un
elemento
Selezionare l’elementoSelezionare l’elemento
html css
<div> testo</div> div {…….…}
html css
<div class=”testo”> testo</div> .testo {…………}
html css
<div id=“testo”> testo</div> #testo {…………}
5. SelettoriSelettori
Identificano solamente gli elementi che si trovino in una particolare
condizione di discendenza nella struttura 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
6. ProprietàProprietà
Le proprietà CSS sono numerose, circa 60.
Determinano i colori, le dimensioni, le posizioni,
ecc.
● Background
● Border
● Color
● Float
● Font
● Margin e
padding
● Text-align
● Position
7. ValoriValori
Possono essere espressi con diverse misure: pixel,
ems, cm. Se non specificata, una proprietà assume
i valori predefiniti di ogni browser.
● Unherit
● Auto
● Numero
● Percentuale
● Colore
● Font
8. Una mediaquery consiste nella dichiarazione cheUna mediaquery consiste nella dichiarazione che
specifica i valori per quel particolare tipo di mediaspecifica i valori per quel particolare tipo di media
Media QueriesMedia Queries
Le media queries vengono utilizzate soprattutto per rendere
una pagina web responsiva, ovvero che si adatta alle
dimensioni dello schermo nel quale viene visualizzata, in
maniera non casuale ma ben programmata.
@media (max-width: 320px) { [..] }
