ELEMENTI BASE

COSTRUISCI LA TUA PAGINA
Cosa si intende per CSS? Perché sono diventati così importanti?
Vediamoli per categorie di tag fondamentali e dove si inseriscono nella pagina HTML leggi ancora...
css - definizione
In informatica il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio usato per definire la formattazione di documenti HTML.
Una pagina web è formata fondamentalmente da due elementi: i contenuti veri e propri e la formattazione, ovvero l'aspetto con cui i contenuti sono mostrati all'utente. I browser che interpretano il codice HTML mostrano all'utente formattazioni predefinite per ogni tag che incontrano. Tuttavia questa formattazione è completamente sotto il controllo dell'utente che può modificarla nelle impostazioni del suo browser o tramite le indicazioni definite nei file CSS
Css per categorie di tag fondamentali :
Colori e sfondo
        h1 { color: #990000; //colore testo 
         background-color: #FC9804; // colore sfondo 
         } 
         
        body { background-image: url("butterfly.gif"); // imm. di sfondo 
         } 
        E’ possibile aggiungere queste indicazioni: 
         
        background-repeat: repeat-x; // L'immagine viene ripetuta orizzontalmente 
         
        background-repeat: repeat-y; // L'immagine viene ripetuta verticalmente 
         
        background-repeat: repeat; // L'immagine viene ripetuta sia 
        orizzontalmente che verticalmente 
         
        background-repeat: no-repeat; // L'immagine non viene ripetuta 
         
        background-attachment: scroll; // L’immagine di sfondo scorre nella pagina 
         
        background-attachment: fixed; // L’immagine di sfondo rimane fissa nella pagina 
         
         
        background-position: 2cm 2cm; //L'immagine è posizionata a 2 cm dalla sinistra 
        e a 2 cm dal basso della pagina 
         
        background-position: 50% 25%; //L'immagine è centrata ad un quarto della pagina 
        dal basso 
         
        background-position: top right; //L'immagine è posizionata nell'angolo in alto a 
        destra della pagina 
         
        Esempio di raggruppamento: 
        background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; 
        

Font
        p { font-style: italic; 
	
	font-size: 30px; 
	 font-family: arial, sans-serif;  } 
 
	Usando la proprietà per il raggruppamento il codice sarà semplificato: 
 	p { font: italic bold 30px arial, sans-serif; } 
        

Testo
        p { 
 text-indent: 30px; 
 text-align: right; 
 text-decoration: underline; 
 letter-spacing: 6px; 
 text-transform: uppercase; 
 }
        

Link
        a{ color: blue; //colore del generico link 
 		} 
	a:link { 
 	color: blue; // colore del generico link 
	} 
	a:visited { 
	color: red; // colore del link visitato 
 	} 
	a:active { background-color: #FFFF00; //colore di sfondo del link attivo 
	} 
	a:hover { color: orange; //colore e stile del link su cui passa in mouse 
	 font-style: italic; 
 	} 
    
Posizionamento delle indicazioni di stile all’interno della pagina HTML
CLASS e ID

Creare categorie con i CSS: Class e ID.
In che modo? Quali sono i vantaggi?
Vedi esempio...
css - class e id
Classe e id nei css
Quando più parti della pagina devono assumere lo stesso stile conviene usare l’attributo CLASS che specifica che quella sezione di HTML ricade sotto una determinata categoria:





Nel foglio di stile dovrà esserci un selettore chiamato GRANDE che dovrà iniziare con un punto per indicare che definisce una classe:




Sia il contenuto del paragrafo che quello del titolo h1 saranno visualizzati con dimensione 30px Il selettore ID va usato allo stesso modo di CLASS ma serve per identificare in modo univoco un solo elemento. Il sul prefisso è #. Ad esempio:



STATICITA’ E FLUTTUAZIONE

Cosa può succedere alla pagina web quando cambia la dimensione del monitor?
L’uso di cellulari per la navigazione ha imposto la creazione di pagine dai contenuti liquidi.
Cosa sono? leggi ancora...
css - staticità e fluttuazione
SITUAZIONE DI STATICITA' NEL CASO DI VARIAZIONE DELLA DIMENSIONE DEL MONITOR
Il contenuto di un DIV potrebbe essere non visualizzabile per la ridotta dimensione del monitor. La fluttuazione dei contenuti ottimizza l'aspetto della pagina e migliora la leggibilità. Nella prima immagine sopra il testo che non rientra nel monitor viene tagliato e sarà leggibile solo attraverso la barra di scorrimento
SITUAZIONE DI FLUTTUAZIONE NEL CASO DI VARIAZIONE DELLA DIMENSIONE DEL MONITOR
Al variare della dimensione del monitor i contenuti di un DIV si posizionano automaticamente a sinistra, a destra o in basso rispetto all'immagine. Ne guadagna sicuramente la leggibilità della pagina.
Esempio di fluttuazione preparare immagine
        #contenitore{ 
         color:green; 
         margin: 100px 5px 5px5px; 
         background:yellow; 
         border: 5px; 
         border-style:dashed; 
         border-color:black; 
         } 
        #picture{ 
         float:left; 
         } 
         
        .parole{ 
         margin:0px; 
         clear:right; 
        } 

        

Per visualizzare un esempio clicca qui

- float prevede che venga eseguita una fluttuazione a sinistra nel caso che l'immagine (ID PICTURE) si trovi all'interno di un DIV molto grande.
- clear prevede che il testo (CLASS PAROLE) si inserisca a destra della foto se entrambi sono contenuti in un DIV molto grande.