Archive for the ‘CSS Tools’ Category

Newer Entries »

Container id e class in CSS

Wednesday, October 14th, 2009

Un container non è altro che una descrizione in codice del bordo. Uno spazio vuoto nel quale il browser non riconosce niente. Come container si possono utilizzare i tag: <div>, <p> o <span>.

Un container viene identificato tramite un id, ha una larghezza (width:300px), un’altezza (height:140px) e un z-index (sequenza).

Il valore standard per la posizione e la grandezza è impostato in pixel (px). Si possono utilizzare anche altre unità: pc (pica), pt (point), in (inch), mm (millimetri), cm (centimetri) o % (percentuale) e em.

Esempio

<div id="layer1" style="position: absolute;
width: 300px;
height: 150px;
z-index:1;
background-color: #000000;
border: 1px solid #FFFFFF;"></div>

Con left: 60px e top: 40px si imposta il margine rispettivamente verso sinistra in alto. In questo modo un container può essere posizionato perfettamente.

Esempio

<div id="layer1" style="position: absolute;
width: 300px;
height: 150px;
z-index:1;
background-color: #000000;
border: 1px solid #FFFFFF; left: 60px; top: 40px;"></div>

Centrare: non vi è un comando diretto per centrare un layer in css. Però si può centrare un testo o un\’immagine. Quindi si introduce “text-align: center” nel tag “body“. In questo modo però tutti gli elementi nella pagina vengono centrati. Per evitare ciò si imposta che il contenuto del layer venga impostato a sinistra con “text-align: left“. Inoltre si impostano i margini della pagina (margin) su auto.

Codice per il tag “body”:

<body style="margin: 10px 0px;
padding: 0px;
text-align: center;">
<div id="layer" style="width: 500px;
height: 4000px;
border: 1px solid #FFFFFF;
margin: 0px auto;
text-align: left;
padding: 8px;">Contenuto del layer</div>

Una classe viene utilizzata in modo generico, può essere presente più volte in una pagina. Un id invece è più speciale, può essere presente solamente una volta in una pagina e nella gerarchia CSS sono più importanti. Un id può essere utilizzato con Javascript e hyperlinks.

<div style="width: 260px;
border: 1px solid black;
background-color: #DEDEDE;
font-family: verdana;
font-size: 12px;">

<div style="border: 0px solid black;
width: 16px;
height: 16px;
background-color: #FFCC00;
float: right;"> </div>
<div style="padding: 10px;">CONTENUTO</div>
</div>

La casella con testo bordo ed angolino viene visualizzata correttamente da tutti i browser.

Posted in CSS Tools | Comments Off

Raggruppamento definizioni di stile CSS

Wednesday, October 14th, 2009

Alcune istruzioni nel file CSS possono essere uguali in diverse sezioni, come per esempio il colore ed il font. Per non avere più istruzioni uguali in diverse righe queste possono venire raggruppate.

La soluzione per raggruppare le definizioni di stile sta nel raggrupparle e separarle tramite una virgola.

h1,h2,h3 {
font-family: Arial, Helvetica, helv, sans-serif, serif;
color: #39c;
text-align: center;
padding: 4px 4px 2px 0px;
margin-top: 20px;
}

oppure

a:link, a:visited, a:hover, a:active {
background-color: fff;
text-decoration: underline;
}

Poi si definiscono in un’altra sezione le definizioni particolari quali la grandezza della scrittura o il diverso colore di stato.

Posted in CSS Tools | Comments Off

Utilizzo di @import per il file CSS esterno

Wednesday, October 14th, 2009

Per collegare alla pagina HTML il file esterno CSS si utilizza la funzione:

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

Si potrebbe utilizzare anche la funzione: @import

<style type="text/css">
@import url("http://www.nomedomain.com/nome_file.css");
</style>
<style type="text/css">
@import url("nome_file_stampa.css") print;
@import url("nome_file_schermo.css") screen, handheld;
</style>

per definire all’interno della direttiva @import anche il supporto cui applicare il CSS.

Si potrebbe anche aggiungere:

@charset "iso-8859-1"

per specificare l’impostazione relativa alla codifica dei caratteri di un documento.

Queste funzioni di @ però non vengono interpretate correttamente da Netscape Navigator 4.x, per cui è consigliabile il non utilizzo della stessa.

In CSS2 è stato aggiunto l’utilizzo del carattere " e la possibilità di importare il file anche senza scrivere url().

Scrivere:

@import "http://www.nomedomain.com/nome_file.css"

è uguale a scrivere:

@import url("http://www.nomedomain.com/nome_file.css")

Inoltre è stato aggiunto che può essere notato anche il formato del foglio di stile da importare. Con formato si intende il tipo di dispositivo in cui viene elaborato. Così si può definire che un determinato foglio di stile venga utilizzato per la stampa della pagina ed un altro per la visione su di un dispositivo portatile.

@import url ("pda.css") handheld;
@import url ("speak.css") aural;
@import url ("print.css") print;

Nel caso non venga specificato il tipo di dispositivo vale automaticamente "all".

Posted in CSS Tools | Comments Off

Newer Entries »