css

Umbriaway Consulting e i Cascade Style Sheet 1

css3-nFogli di stile a cascata che saranno mai si chiede introspettivo web marketing Umbria! Controllare il look and feel di un documento, roba da grafici? Che ci fai della struttura HTML se non la rivesti con orpelli di presentazione? Separtare lo stile dai contenuti che figata pazzesca. Un lavoro ben fatto dovrebbe essere quello che hai i contenuti da una parte e i css dall’ altra separati in maniera ordinata! Vediamo i fogli di stile inline. Hai un singolo stile da applicare a un unico elenmento direttamente sulla parte interessata:

<p style=”color:white;background-color:gray;”>

Questo é un esempio di style in linea Umbriaway!

Vediamo adesso i fogli di stile incorporati, definiti nell’ head:

<HTML>

<HEAD>

<TITLE>Umbriaway the best!</TITLE>

<style>

p {

color:white;

background-color:gray;

}

</style>

</HEAD>

<BODY>

<p>questo é il paragrafo della formazione umbriaway</p>

</BODY>

</HTML>

Fogli di stile esterni.

<HTML>

<HEAD>

<TITLE>Umbriaway the best!</TITLE>

<link rel=”stylesheet” href=”umbriaway.css”>

</HEAD>

<BODY>

<p>questo é il paragrafo della formazione umbriaway</p>

</BODY>

</HTML>

il file umbriaway.css conterrà al suo interno:

p {

color:white;

background-color:gray;

}

programming-in-cssCSS é composto da un insieme di regole di stile che il browser interpreta e che applica in corrispondenza dell’ elemento presente nel tuo documento. Per esempio per definire una headline H1 potremmo scrivere h1 {color:orange;}. In dettaglio h1 viene definito SELETTORE la PROPRIETA’ è COLORE e il VALORE arancione. Il blocco istruzioni che può definire più dichiarazioni é separato da un punto e virgola ma in alcune dichiarazioni abbiamo anche una lista di proprietà –>valore separate da virgole. Il selettore serve a definire l’elemento dove verrà applicato lo stile. Un tipo di selettore che marca un paragrafo lo abbiamo visto anche in precedenza:

p {

color:red;

font-size:130%;

}

Le singole dichiarazioni finiscono sempre con ; mentre un gruppo di dichiarazioni compare sempre tra i blocchi graffa {}

Un ID selettore serve a contrassegnare una istruzione presente nel CSS che ha un ID attributo in modo da definire le aree di applicazione dello stile:

esempio di superparagrafo umbriaway

<p>paragrafo fuori marcatura selettore ID</p>

Il CSS avrà al suo interno:

#intro

{

color:white:

background-color:gray;

}

Selezionare un elemento con specifico ID di riconoscimento e usare un carattere hash per seguire l’ID dell’ area da stilizzare.

Un CLASS selettore é molto simile con la differenza che l’identificazione univoca data da un ID qui ha il vantaggio di avere una porzione di codice che lavora su più pagine essendo il classo applicabile ovunque senza univocità dell’ elemento:

esempio di superparagrafo umbriaway

paragrafo normale

esempio di nuova stilizzazione umbriaway

il css:

.uwfirst

{font-size:200%;}

Poi ci sono i selettori a cascata. Nel senso che devo intervenire all’ interno di un area univoca che ha elementi interni da stilizzare:

esempio di superparagrafo umbriaway

paragrafo normale

esempio di nuova stilizzazione umbriaway

il css:

#umbriaway.uwfirst em {

color:white:

background-color:gray;

}

se avessi voluto modificare tutti i paragrafi di quel div specifico avrei scritto:

#umbriaway.p {

color:white:

background-color:gray;

}

Per fare in modo che i browser ignorino cose scritte si usa il commento multiriga: /* questo é un supercommento umbriaway che non verrà visualizzato */

Per ereditarietà si intende un elemento figlio che prende le caratteristiche del genitore ossia se definisco nell’ head una porzione di style dove dico che il colore del testo sarà fucsia e il font-family:Gothic 456, quando scriverò nel body un paragrafo marcato <p> figlio del parent lo vedrò con le caratteristiche definite nel body inserito in head. Se nel body definisco anche un class con .pippo assegnando colore blue e sotto avrò un div marcato class=”pippo” avrò lo stesso colore anche se il body é magari genericamente settato su colore green. La prima sessione di allenamento targata web marketing Umbria é conclusa, alla prossima!

 

Annunci