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 – 16px1.2em
  • una percentuale – 100%
  • una parola riservata – smalllarge

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: boldnormallighterbolder
p {
    font-weight: normal;
}
strong {
    font-weight: 900;
}

font-variant

La proprietà font-variant è determina se il font è reso in maiuscoletto. Posso assegnare:

  • normal
  • small-caps
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 leftrightcenter 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 noneunderlineoverline 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 nonelowercaseuppercase 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à toprightbottom 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 &nbsp;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.&eacute;</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>&copy; 2018 Ifts Tectnici Multimediali per Cultura&nbsp;e&nbsp;per&nbsp;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;
}

 

Torna all'inizio