Sintesi della lezione
PROPRIETÀ CSS
FONT E TESTO
font-family
- La famiglia di font di un testo viene impostato con la proprietà
font-family
- La proprietà font-family può contenere diversi nomi dei font. Se il browser non supporta la prima font, cercherà la successiva, e così via.
- Il tipo di carattere preferito sarà il promo della lista, e la famiglia generica, l'ultima e verrà utilizzata se nessun altra font è disponibile.
- Nota : Se il nome di una famiglia di font è più di una parola, deve essere tra virgolette, come: "Times New Roman".
- L'elenco delle font è separato da virgole:
body {
font-family: "Times New Roman", Times, serif;
}
font-style
- La proprietà
font-style
è principalmente utilizzato per specificare il testo corsivo.
- Tre valori possibili:
normal
- Il testo viene visualizzato normalmente
italic
- Il testo viene mostrato in corsivo
oblique
- Simile al corsivo
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
font-size
La proprietà font-size
è determina il corpo del font. Posso assegnare: •
- una misura –
16px
, 1.2em
- una percentuale –
100%
- una parola riservata –
small
, large
Le misure più utilizzate sono i pixel (suffisso px) e em (suffisso em). Nel primo caso viene indicata una misura assoluta (l'altezza che ha, in pixel, il carattere sullo schermo). L'unità di misura em è relativa alla dimensione di default che è stata assegnata al carattere.
p {
font-size: 18px;
}
h1 {
font-size: 2.4em; /* Equivalente a (2.4 * 18) 43px */
}
font-weight
La proprietà font-weight
è determina il peso del font. Posso assegnare:
- una misura da
100
a 900
- una parola riservata:
bold
, normal
, lighter
, bolder
p {
font-weight: normal;
}
strong {
font-weight: 900;
}
font-variant
La proprietà font-variant
è determina se il font è reso in maiuscoletto. Posso assegnare:
p {
font-variant: normal;
}
h1 {
font-variant : small-caps;
}
color
La proprietà color
è determina il colore del testo. Posso assegnare:
- Il nome di un colore come
red
- Un valore esadecimale (usando il prefisso #) come
#ff0000
- Le funzioni rgb e rgba come
rgb(255,0,0)
body {
color: #333333;
}
h1 {
color : darkblue;
}
text-align
La proprietà text-align
è determina l'allineamento del testo. Posso assegnare i valori left
, right
, center
e justified
.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
text-decoration
La proprietà text-decoration
aggiunge o elimina la sottolineatura e altre decorazioni. Posso assegnare i valori none
, underline
, overline
e line-through
.
.errore {
text-decoration: line-through;
}
a {
text-decoration: none;
}
text-transform
La proprietà text-transform
determina se il testo viene reso in maiuscolo, minuscolo o normale. Posso assegnare i valori none
, lowercase
, uppercase
e capitalize
.
.h1 {
text-transform: upercase;
}
.lowercase {
text-transform: lowercase;
}
text-indentation
La proprietà text-indentation
determina l'ammontare del rientro della prima riga del testo. Posso assegnare una misura (px, em, % ecc).
p{
text-indentation: 30px;
}
letter-spacing
La proprietà letter-spacing
determina l'ammontare dello spazio tra i caratteri. Posso assegnare una misura (normalmente pixel) . 0 indica la distanza normale, una misura positiva aumenta, una negativa diminuisce.
h1{
letter-spacing: 3px;
}
line-height
La proprietà line-height
determina l'interlinea utilizzata per il testo Posso assegnare:
- una misura assoluta (es.
20px
)
- una misura relativa al corpo del carattere (es:
1.4
)
h1{
line-height: 1.1;
}
text-direction
La proprietà text-direction
determina la direzione di scrittura Posso assegnare rtl
(right to left) o ltr
(left to right):
body{
text-direction: rtl;
}
word-spacing
La proprietà word-spacing
determina l'ammontare dello spazio tra le parole. Posso assegnare una misura (normalmente pixel) . 0 indica la distanza normale, una misura positiva aumenta, una negativa diminuisce.
h1{
word-spacing: -2px;
}
text-shadow
La proprietà text-shadow
aggiunge un ombreggiatura al testo. Posso assegnare tre misure e un colore:
h1{
text-shadow: 2px 2px 5px red;
}
crea un ombra spostata a destra di 2px
, in basso di 2px
, sfumata per 5px
di colore red
.
LISTE
In HTML, ci sono due tipi principali di liste:
- liste non ordinate (
<ul>
) (gli elementi della lista sono contrassegnati con bullets)
- liste ordinate (
<ol>
) (gli elementi della lista sono contrassegnati da numeri o lettere)
Con i fogli di stile però posso modificarne completamente l'apparenza. In particolare:
- Personalizzare il modo in cui vengono presentati gli elenchi ordinati
- Personalizzare i bullets delle liste non ordinate
- Sostituire gli indicatori con un immagine personalizzata
list-style-type
La proprietà list-style-type
definisce l’aspetto del marcatore di lista .
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
La scelta dei valori possibili è lunghissima. La tabelle che segue illustra i principali:
Valore |
Descrizione |
disc |
un cerchietto pieno colorato; il colore può essere modificato per tutti i tipi con la proprietà color |
circle |
un cerchietto vuoto |
square |
un quadratino |
decimal |
sistema di conteggio decimale 1, 2, 3, … |
decimal-leading-zero |
sistema di conteggio decimale ma con la prima cifra preceduta da 0 (01, 02, …) |
lower-roman |
cifre romane in minuscolo (i, ii, iii, iv, …) |
upper-roman |
cifre romane in maiuscolo (I, II, III, IV, …) |
lower-alpha |
lettere ASCII minuscole (a, b, c, …) |
upper-alpha |
lettere ASCII maiuscole (A, B, C, …) |
lower-greek |
Lettere minuscole dell'alfabeto greco |
Impostando la proprietà list-style-type a none vene eliminata l'impostazione di default.
ul.unstyled {
list-style-type: none;
padding: none;
margin: 0;
}
list-style-image
La proprietà list-style-image
consente di utilizzare un'immagine personalizzata al posto del marcatore.
ul {
list-style-image: url(square.gif);
}
POSIZIONAMENTO
position
La proprietà position specifica il metodo di posizionamento utilizzato per un elemento.
position
può assumere quattro diversi valori:
static
relative
fixed
absolute
La posizione degli elementi è determinata dalle proprietà top
, right
, bottom
e left
.
- Modificare i valori di queste proprietà ha effetto solo se position è diversa da static.
- L'effetto sulla posizione cambia a secondo dell'impostazione di position.
static
Gli elementi HTML sono posizionati così per impostazione predefinita.
- Un elemento con position:static non è posizionato in modo speciale, ma secondo il normale flusso della pagina
- La posizione non è influenzata dalle proprietà top, right, bottom e left.
div.normale
{
position: static;
border: 3px solid #73AD21;
}
relative
- La posizione di un elemento con position:relative è calcolata in maniera relativa rispetto alla sua posizione naturale secondo il normale flusso della pagina
- Le proprietà top, right, bottom e left causeranno uno scostamento dell'elemento rispetto alla sua posizione naturale.
div.relativa {
position: relative;
left: 50px;
}
fixed
- La posizione di un elemento con position:fixed è calcolata in relazione alla finestra del browser il che significa che rimane sempre nello stesso posto, anche se la pagina viene fatto scorrere.
- Le proprietà top, right, bottom e left determinano la posizione dell'elemento.
div.fissa {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
absolute
- La posizione di un elemento con position:absolute è calcolata in relazione all'elemento che lo contiene se questo non è position:static, altrimenti in relazione al documento.
- Le proprietà top, right, bottom e left determinano la posizione dell'elemento.
- L'elemento position:absolute quando la pagina scrolla, scrolla insieme all'elemento relativamente al quale è posizionato.
div.realtiva {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.assoluta {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
z-index
- Quando un elemento è posizionato (cioè non è position:static) può sovrapporsi ad altri elementi-
- La proprietà z-index determina l'ordine di questa sovrapposizione è può avere sia un valore positivo che uno negativo.
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Pagine create durante la lezione
tipografia.html
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Tipografia</title>
<link href="css/stile.css" rel="stylesheet">
</head>
<body>
<nav class="navbar fixed-top">
<div class="contenitore">
<ul>
<li><a href="#titoli">Titoli</a></li>
<li><a href="#paragrafi">Paragrafi</a></li>
<li><a href="#liste">Liste</a></li>
<li><a href="#immagini">Immagini</a></li>
<li><a href="#video">Video</a></li>
</ul>
</div>
</nav>
<section id="titoli" class="contenitore sezione-main" >
<h1>Titolo 1 </h1>
<h2>Titolo 2 </h2>
<h3>Titolo 3</h3>
<h4>Titolo 4</h4>
<h5>Titolo 5</h5>
<h6>Titolo 6</h6>
</section>
<section id="paragrafi" class="contenitore sezione-main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam tenetur aliquam asperiores beatae, eos ex enim, nesciunt esse libero quo ullam ab dicta fugit sed. Dicta tempora quas possimus dolorum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id adipisci tempora, perferendis assumenda consectetur, soluta explicabo consequatur magni corrupti minima deserunt enim fugit necessitatibus vero temporibus ipsam repellat voluptatem tenetur.é</p>
</section>
<section id="liste" class="contenitore sezione-main">
<ul>
<li>Primo elemento</li>
<li>Secondo</li>
<li> Sottolista
<ul>
<li>Sottolista</li>
<li>Sotto sotto</li>
</ul>
</li>
<li>Quarto</li>
</ul>
<ol>
<li>Primo</li>
<li>Secondo</li>
</ol>
</section>
<section id="elemento_vari" class="contenitore">
<div>Lorem <strong>ipsum dolor sit amet</strong>, consectetur adipisicing elit. Accusantium molestiae eius facilis temporibus similique. Incidunt impedit error in cumque. Saepe dicta obcaecati fugiat quasi, quod, provident inventore. Ea, reiciendis, veritatis.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <em>Maiores facilis </em>hic maxime vitae magni, nisi repellendus non animi nesciunt, perspiciatis, cupiditate eius! Reprehenderit explicabo, doloremque doloribus rerum, illum quis alias!</div>
<p style="text-align: right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis voluptates, reiciendis. Voluptatum dolores iure natus sed inventore omnis placeat autem eligendi eveniet, fugit, amet, tempore blanditiis assumenda esse quo quos!</p>
<p>code: <code>Questo è codice</code><br>
sample: <samp>Questo e un test</samp><br>
var: <var>Variabile</var><br>
keyboard:<kbd>Comninazione di tasti</kbd> </p>
<p>© 2018 Ifts Tectnici Multimediali per Cultura e per l'Arte</p>
</section>
<section id="elementi_form" class="contenitore">
<h1>Form</h1>
<form>
<label>Nome</label>
<input type="text" value="" placeholder="Inserisci il tuo nome" maxlength="10" required>
<br>
<label>Password</label>
<input type="password" maxlength="6">
<br>
<label for="sesso">Seleziona</label>
<input type="checkbox" value="maschio" id="sesso">
<br>
<label for="maschio">Maschio</label>
<input type="radio" id="maschio" name="scelta
sesso">
<label for="femmina">Femmina</label>
<input id="femmina" type="radio" name="sceltasesso">
</form>
</section>
<section id="immagini" class="contenitore sezione-main"> <img src="immagini/um7buv3a.jpg" alt="Immagine di prova"> <br>
<img src="immagini/C- logo-bandiera-01.svg" alt="Logo di prova" style="width:50%; height:auto"> </section>
<section id="video" class="contenitore sezione-main">
<video controls>
<source src="media/mov_bbb.mp4" type="video/mp4">
<source src="media/mov_bbb.ogg" type="video/ogg">
</video>
</section>
<section id="audio">
<audio controls>
<source src="media/horse.mp3" type="audio/mp3">
</audio>
</section>
<section id="frame" class="contenitore">
<iframe width="640" height="360" src="https://www.youtube.com/embed/eU7V4GyEuXA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</section>
</body>
</html>
/css/stile.css
@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,700|Roboto+Slab');
/* Impostazioni generali */
body {
font-family: 'Quicksand', sans-serif;
font-size: 16px;
line-height: 1.3;
font-style: normal;
font-weight: 300;
color: #222222;
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6 {
line-height: 1.1;
font-family: 'Roboto Slab', serif;
font-weight: 400;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.7em;
}
h3 {
font-size: 2.2em;
}
h4 {
font-size: 1.7em;
}
h5 {
font-size: 1em;
}
h6 {
font-size: 0.8em;
}
/* contenitore */
.contenitore {
max-width: 1140px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
.contenitore img {
max-width: 100%;
height: auto;
}
.contenitore video, .contenitore iframe {
width: 100%;
}
/* Ippostazione sezione */
.sezione-main {
padding-top: 60px;
}
/* Barra di navigazione */
.navbar {
background-color: #333333;
color: white;
}
.fixed-top {
position: fixed;
top:0;
left: 0;
width: 100%;
}
.navbar a {
color: #eeeeee;
text-decoration: none;
}
.navbar a:hover {
color: #ffffaa;
}
.navbar ul {
margin: 0;
padding:0;
list-style: none;
}
.navbar ul > li {
display: inline-block;
}
.navbar ul > li > a {
display: block;
padding: 10px 20px;
}
.navbar ul > li > a:hover {
background-color: rgba(255,255,255,0.5);
color: black;
}