Sintesi della lezione

CSS

I FOGLI DI STILE 

HTML serve ad informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici.

  • I fogli di stile (Cascading Style Sheets) definiscono come i vari elementi che compongono un documento verranno mostrati su un media specifico (schermo, stampante, dispositivo mobile).
  • CSS è il linguaggio che usa il web designer per realizzare un interfaccia.
  • La prima fase di un design è la progettazione.

COME SI COLLEGA UN FOGLIO DI STILE A UNA PAGINA WEB

Un foglio di stile può essere esterno e interno:

  • È esterno un foglio di stile definito in un file separato dal documento.
  • Un foglio di stile si dice interno quando il suo codice è compreso in quello del documento.

FOGLI COLLEGATI

Uso dell'elemento <link>

  • La dichiarazione va sempre collocata all'interno della sezione <head> del documento:
	<html> 
		<head> 
			. . . . 
			<link rel="stylesheet" type="text/css" href="stile.css"> 
		</head> 
	<body>
    . . . .
  • L'elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione:
    • rel descrive il tipo di relazione tra il documento e il file collegato. È sempre obbligatorio. Per i CSS due sono i valori possibili: stylesheet alternate stylesheet.
    • href serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio.
    • type identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css.
    • media con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.

FOGLI INCORPORATI

I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite l'elemento <style>. Anche in questo caso la dichiarazione va posta all'interno della sezione <head>:

	<html>    
		<head>        
			<title>Inserire i fogli di stile in un documento</title>     
			<style type="text/css">           
				body {                   
					background: #FFFFCC;           
				}      
			</style>     
		</head> 
		<body>
        ..........

STILI IN LINEA

  • L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo 'style'.
  • Esso fa parte della collezione di attributi HTML definita Common: si tratta di quegli attributi applicabili a tutti gli elementi.
  • La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente: <elemento style="regole_di_stile">

COME SONO COSTRUITE LE REGOLE

Un foglio di stile è costituito da una serie di regole che stabiliscono come un gruppo di elementi html (identificati da un selettore) viene reso su un media.

selettore {
    proprietà1: valore; 
    proprietà2: valore;
}

}

  • selettore: definisce a quali elementi si applicano le regole che seguono
  • {...} Parentesi graffe: racchiudono l'elenco delle regole 
  • Regola: è composta dal nome di una proprietà e da un valore: color:#333333;
  • proprietà: indica l'elemento visuale che viene modificato
  • : [due punti]: è l'operatore che collega la proprietà al valore che le viene assegnato.
  • valore: determina quale sarà l'aspetto dell'elemento per quanto riguarda la caratteristica controllata dalla proprietà a cui è stato assegnato.

MPORTANZA DELLA SINTASSI

  • Un linguaggio è l’insieme di regole (sintassi, ortografia, punteggiatura) che fa si che il codice (istruzioni) che scrivo siano correttamente interpretate dal computer
  • In CSS l’elemento sintattico principale è la punteggiatura: h2{ color:#333333; font-weight: bold;font-size: 40px; }
  • Se sbaglio il nome di una proprietà o un valore, semplicemente la regola verrà ignorata
  • Se sbaglio o tralascio la punteggiatura potrebbe non essere interpretato l’intero codice. Se tralascio, ad esempio, la parentesi graffa chiusa, tutto il codice che segue non verrà interpretato.

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>
		<ul>
			<li><a href="#titoli">Titoli</a></li>
			<li><a href="#paragrafi">Paragrafi</a></li>
			<li><a href="#liste">Liste</a></li>
		</ul>
	</nav>
	<section id="titoli" class="contenitore" >
		<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">
		<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">
		<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"> 
		<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">
		<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 */
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.3;
}
h1,h2,h3,h4 {
	line-height: 1.1;
}

.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%;
}

 

Torna all'inizio