Che materia stai cercando?

Anteprima

ESTRATTO DOCUMENTO

Css esterno

Può essere inserito utilizzando l'elemento <link>.

La dichiarazione va sempre collocata all'interno della sezione <head> del documento.

Ad esempio:

<html>

<head>

<title> Titolo di prova</title>

<link rel="stylesheet" type="text/css" href="stile.css">

</head>

<body>...

.rel: descrive il tipo di relazione tra il documento e il file collegato. E' obbligatorio.

Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.

.href: serve a definire l'URL assoluto o relativo del foglio di stile. E' obbligatorio.

.type: (già visto)

.media: (già visto) Css esterno­ esempio

Vediamo il solito esempio

(preso da http://www.w3schools.com/css/showit.asp?filename=ex1)

File html (mio.html)

<html>

<head>

<link rel="stylesheet" type="text/css" href="ex1.css" />

</head>

<body>

<h1>This header is 36 pt</h1>

<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p> </body> </html>

File css (ex1.css)

body { background-color:yellow; }

h1 { font-size:36pt; }

h2 { color:blue; }

p { margin-left:50px; } Css sintassi

A prescindere da come il css è inserito in pagina la sintassi utilizzata è:

Essa è composta da due blocchi principali:

• il selettore

• il blocco delle dichiarazioni

Il selettore serve a definire la parte del documento cui verrà applicata la regola.

In questo caso, ad esempio, verranno formattati tutti gli elementi

<h1>: lo sfondo sarà rosso, il colore del testo bianco.

Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da

due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni.

Esse sono sempre composte da una coppia:

• proprietà

• valore Elementi blocco

Alcuni dei selettori piu’ usati sono gli elementi blocco. Vengono

utilizzati per raggruppare degli elementi in pagina con delle

proprietà simili fra loro, creando delle zone di impaginazione

Alcuni esempi di contenitore blocco sono:

<div> <h1>..<h6> <p> <ul> <ol> <form> <table>

Tutti gli elementi blocco hanno le seguenti proprietà:

• Formano un blocco e si dispongono a capo

• Assumono le max lunghezza possibile rispetto al suo contenitore

• Modifica l’altezza in funzione del suo contenitore

• Puo’ contenere altri elementi di tipo block

Selettore: id e class

Un elemento html puo’ specificare dei propri selettori chiamati :

• id

• class

Il selettore id:

• Specifica lo stile di un singolo/unico elemento

• E’ definito con il # http://www.w3schools.com/css/css_id_class.asp

<html> <head>

<style type="text/css">

#para1 { text-align:center; color:red; }

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body> </html>

Selettore: class

Un selettore class :

• definisce lo stile di un insieme di elementi

• imposta in una sola volta lo stile di tutti gli elementi di quella classe

• si utilizzando il simbolo “.”

http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class

<html>

<head>

<style type="text/css">

.center { text-align:center;}

</style>

</head>

<body>

<h1 class="center">Center-aligned heading</h1>

<p class="center">Center-aligned paragraph.</p>

</body>

</html> Selettore: class (2)

E’ possibile specificare che un solo elemento html deve essere gestito

mediante una classe

http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_element_class

<html>

<head>

<style type="text/css">

p.center{ text-align:center; }

</style>

</head>

<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be center-aligned.</p>

</body>

</html> Background

http://www.w3schools.com/css/css_background.asp


PAGINE

19

PESO

233.19 KB

AUTORE

Atreyu

PUBBLICATO

+1 anno fa


DESCRIZIONE DISPENSA

Questa lezione fa riferimento alla terza parte del corso di Sistemi tecnologici e informazione online tenuto dal Prof. Ventriglia. Mentre l'Html definisce la struttura della pagina web (gli elementi presenti, la loro rilevanza, i raggruppamenti logici) i fogli di stile CSS si occupano degli aspetti legati alla presentazione di questi elementi. Essi vengono associati ad un documento html principalmente in due modi: con Css esterni ed interni.


DETTAGLI
Corso di laurea: Corso di laurea magistrale in editoria multimediale e nuove professioni dell'informazione
SSD:
A.A.: 2010-2011

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher Atreyu di informazioni apprese con la frequenza delle lezioni di SISTEMI TECNOLOGICI E INFORMAZIONE ONLINE e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università La Sapienza - Uniroma1 o del prof Ventriglia Domenico.

Acquista con carta o conto PayPal

Scarica il file tutte le volte che vuoi

Paga con un conto PayPal per usufruire della garanzia Soddisfatto o rimborsato

Recensioni
Ti è piaciuto questo appunto? Valutalo!

Altri appunti di Sistemi tecnologici e informazione online

Telefonia Mobile - Evoluzione
Dispensa
Web 2.0 - Definizioni, principi e strumenti
Dispensa
Ecosistema comunicativo
Dispensa
Web e Html
Dispensa