Impostare le proprietà CSS

Potete definire le proprietà delle regole CSS quali il carattere del testo, il colore di sfondo e delle immagini, le impostazioni di spaziatura e di layout e l'aspetto delle voci di elenco. Per prima cosa, create una nuova regola, quindi impostate le proprietà richieste tra quelle indicate di seguito.

Di seguito è riportata una descrizione di alcune delle proprietà tipo CSS che potete impostare.

Imposta il tipo di carattere o le serie di tipi di carattere associate allo stile. I browser visualizzano il testo utilizzando il primo tipo di carattere del gruppo che risulta installato sul sistema dell'utente. Per questioni di compatibilità con Internet Explorer, indicate per primo un carattere Windows. L'attributo font è supportato da entrambi i browser.

Specifica lo stile del carattere: Normal (normale), Italic (corsivo) o Oblique (obliquo). L'impostazione predefinita è Normal. L'attributo Stile è supportato da entrambi i browser.

Imposta l'altezza della riga in cui viene collocato il testo. Questa impostazione viene in genere denominata interlinea. Selezionando Normal, l'altezza della riga viene calcolata automaticamente in base alla dimensione del carattere selezionata. In alternativa, inserite un valore esatto e selezionate un'unità di misura. L'attributo line height è supportato da entrambi i browser.

Consente di aggiungere al testo i seguenti effetti: sottolineatura, linea sopra, barrato e intermittente. L'impostazione predefinita per il testo normale è None (nessuno). L'impostazione predefinita per i collegamenti è Underline (sottolineato). Se l'impostazione per il collegamento è None, potete eliminare la sottolineatura definendo una classe speciale. L'attributo decoration è supportato da entrambi i browser.

Applica al carattere un valore di grassetto preciso o relativo. Normal equivale a uno spessore di 400; Bold corrisponde a 700. L'attributo weight è supportato da entrambi i browser.

Consente di impostare la variante maiuscoletto nel testo. Questo attributo non può essere visualizzato nella finestra del documento di Dreamweaver. L'attributo variant è supportato da Internet Explorer ma non da Navigator.

Rende maiuscola la prima lettera di ogni parola all'interno della selezione oppure consente di impostare tutto il testo in maiuscole o minuscole. L'attributo case è supportato da entrambi i browser.

Imposta il colore del testo. L'attributo color è supportato da entrambi i browser.

Definisce la dimensione del testo. Potete impostare una dimensione specifica, selezionandone il valore corrispondente e l'unità di misura, oppure una dimensione relativa. I pixel funzionano bene come unità di misura perché evitano la distorsione del testo all'interno del browser. L'attributo size è supportato da tutti i browser.

Definire le proprietà Sfondo degli stili CSS

Le proprietà dello sfondo possono essere applicate a qualsiasi elemento contenuto in una pagina Web. Potete creare uno stile che aggiunga un colore o un'ndo agli elementi della pagina, come ad esempio dietro al testo, a una tabella, alla pagina ecc. Potete anche impostare la posizione di un'immagine di sfondo.

Di seguito è riportata una descrizione di alcune delle proprietà sfondo CSS che potete impostare.

Imposta l'immagine dello sfondo per l'elemento. L'attributo background image è supportato da entrambi i browser.

Determina la modalità di ripetizione dell'immagine di sfondo. L'attributo Repeat è supportato da entrambi i browser.

• No Repeat visualizza l'immagine una sola volta all'inizio dell'elemento.

• Repeat affianca, orizzontalmente e verticalmente, più occorrenze dell'immagine dietro l'elemento.

• Repeat-x e Repeat-y riproducono, rispettivamente, una striscia di immagini orizzontali e verticali. Le immagini vengono tagliate e adattate al contorno dell'elemento.

Nota: usate questa proprietà per ridefinire il tag body e per impostare un'immagine di sfondo che non viene affiancata o ripetuta.

Determina se l'immagine dello sfondo deve rimanere fissa o scorrere attorno al contenuto. Alcuni browser interpretano l'opzione Fixed come Scroll. L'attributo attachment è supportato da Internet Explorer ma non da Netscape Navigator.

Specificano la posizione iniziale dell'immagine di sfondo rispetto all'elemento che la contiene. Queste due opzioni possono essere utilizzate per centrare l'immagine di sfondo in mezzo alla pagina, sia rispetto all'asse orizzontale (X) che rispetto a quello verticale (Y). Se la proprietà attachment è impostata su Fixed, la posizione dell'immagine viene calcolata rispetto alla finestra del documento e non rispetto all'elemento che la contiene.

Imposta il colore di sfondo dell'elemento. L'attributo background color è supportato da entrambi i browser.

Definire le proprietà Blocco di testo degli stili CSS

Potete definire le impostazioni di spaziatura e allineamento di tag e proprietà.

Aumenta o riduce lo spazio tra le lettere o i caratteri. Per ridurre lo spazio tra i caratteri, specificate un valore negativo, ad esempio (-4). Le impostazioni della spaziatura tra lettere prevalgono su quelle del testo giustificato. L'attributo Letter-spacing è supportato da Internet Explorer 4 e versioni successive e da Netscape Navigator 6.

Specifica di quanto deve essere rientrata la prima riga di testo. Potete utilizzare un valore negativo per creare uno spostamento verso sinistra della prima riga, ma la modalità di visualizzazione dipende dal browser. Questo attributo può essere visualizzato nella finestra del documento di Dreamweaver solo se il tag viene applicato a elementi a livello di blocco. L'attributo Text-indent è supportato da entrambi i browser.

Specifica l'allineamento verticale dell'elemento al quale viene applicato. Questo attributo può essere visualizzato nella finestra del documento di Dreamweaver solo se applicato al tag <img>.

Imposta la modalità di allineamento del testo all'interno dell'elemento. L'attributo Text Align è supportato da entrambi i browser.

Determina in che modo viene gestito lo spazio vuoto all'interno dell'elemento. Le tre opzioni disponibili sono: Normal comprime lo spazio vuoto; Pre tratta lo spazio come se il testo fosse racchiuso tra tag pre (ovvero, lo spazio vuoto, compreso lo spazio tra le parole, le tabulazioni e i ritorni a capo viene rispettato); Nowrap indica che viene inserito un ritorno a capo solamente in corrispondenza del tag br. Questo attributo non può essere visualizzato nella finestra del documento di Dreamweaver. L'attributo White-space è supportato da Netscape Navigator ma non da Internet Explorer 5.5.

Specifica se un elemento viene visualizzato o meno con relativa modalità di visualizzazione. Se selezionate la voce None, viene disattivata la visualizzazione dell'elemento in questione.

Imposta lo spazio tra le parole del testo. Per impostare un valore specifico, selezionate Valore dal menu a comparsa, quindi inserite un valore numerico. Nel secondo menu a comparsa, selezionate l'unità di misura (ad esempio, pixel, punti e così via).

Nota: i valori negativi sono accettati, ma la modalità di visualizzazione dipende dal browser. Questo attributo non può essere visualizzato nella finestra del documento di Dreamweaver.

Definire le proprietà Elementi di pagina degli stili CSS

Utilizzate la categoria Elementi di pagina della finestra di dialogo Definizione regola CSS per definire le impostazioni dei tag e delle proprietà che controllano il posizionamento degli elementi sulla pagina.

Quando applicate le impostazioni di padding (spazio dall'elemento al bordo) e margin (margine), potete selezionare un solo lato dell'elemento oppure potete utilizzare l'impostazione Uguale per tutto per applicare le medesime impostazioni a tutti i lati di un elemento.

Specifica il lato dell'elemento float attorno al quale scorrono gli altri elementi. L'elemento float è fisso sul lato float e gli altri contenuti scorrono attorno all'elemento sul lato opposto.

Ad esempio, un'immagine con float a destra è fissa sul lato destro, e il contenuto aggiunto successivamente scorre sul lato sinistro dell'immagine.

Per ulteriori informazioni, consultate http://css-tricks.com/all-about-floats/

Specifica i lati di un elemento che non consentono altri elementi mobili.

Specifica la quantità di spazio che deve intercorrere tra il contenuto dell'elemento e il suo bordo (o margine, se l'elemento è sprovvisto di bordo). Per impostare la spaziatura interna per singoli lati dell'elemento, deselezionate l'opzione Uguale per tutto.

Definisce gli stessi attributi di spaziatura dal bordo (Superiore, Destro, Inferiore e Sinistro) per l'elemento a cui si applica l'impostazione.

Specifica la quantità di spazio da interporre tra il bordo di un elemento (o la spaziatura interna, se l'elemento è sprovvisto di bordo) e un altro elemento. Questo attributo può essere visualizzato nella finestra del documento di Dreamweaver solamente se applicato a elementi a livello di blocco di testo (paragrafi, intestazioni, elenchi, ecc.). Per impostare il margine per singoli lati dell'elemento, deselezionate l'opzione Uguale per tutto.

Impostano la larghezza e l'altezza dell'elemento.

Definire le proprietà Bordo degli stili CSS

La categoria Bordo della finestra di dialogo Definizione regola CSS consente di definire le impostazioni (larghezza, colore e stile) dei bordi intorno agli elementi.

Imposta lo spessore del bordo dell'elemento. L'attributo Width è supportato da entrambi i browser. Per impostare lo spessore del bordo per singoli lati dell'elemento, deselezionate l'opzione Uguale per tutto.

Definisce le stesse proprietà di stile del bordo (Superiore, Destra, Inferiore e Sinistra) per l'elemento a cui si applica l'impostazione.

Imposta il colore del bordo. Potete impostare il colore del bordo di ogni lato in modo indipendente, ma la modalità di visualizzazione dipende dal browser. Per impostare il colore del bordo per singoli lati dell'elemento, deselezionate l'opzione Uguale per tutto.

Imposta lo stile visivo del bordo, il cui aspetto può variare in base al browser. Per impostare lo stile del bordo per singoli lati dell'elemento, deselezionate l'opzione Uguale per tutto.

Definire le proprietà Elenco degli stili CSS

La categoria Elenco della finestra di dialogo Definizione regola CSS consente di definire le impostazioni degli elenchi (dimensione e tipo di punto) per i tag di elenco.

Imposta l'aspetto dei punti elenco o dei numeri di un elenco. L'attributo type è supportato da entrambi i browser.

Specifica se applicare al testo della voce di elenco un a capo automatico o un rientro (verso l'esterno) o un a capo automatico verso il margine sinistro (interno).

Consente di impostare un'immagine personalizzata da utilizzare per i punti elenco. Fate clic sul pulsante Sfoglia (Windows) o Scegli (Macintosh) per individuare l'immagine oppure digitatene il percorso.

Definire le proprietà Posizione degli stili CSS

Le proprietà di stile Posizione determinano come viene posizionato sulla pagina il contenuto associato allo stile CSS selezionato.

Se non sono rilevanti per lo stile, lasciate vuote le seguenti proprietà:

Determina la modalità di posizionamento dell'elemento selezionato nel browser in base alle seguenti opzioni:

• Absolute Colloca il contenuto in base alle coordinate inserite nelle caselle Posizione rispetto all'elemento antenato più vicino (con posizione assoluta o relativa) oppure, in mancanza di esso, rispetto all'angolo superiore sinistro della pagina.

• Relative Colloca il blocco di contenuto in base alle coordinate inserite nelle caselle Posizione rispetto alla posizione del blocco all'interno del flusso di testo del documento. Ad esempio, se assegnate a un elemento una posizione relativa e un valore di 20 pixel per le coordinate superiore e sinistra, l'elemento viene spostato di 20 pixel a destra e di 20 pixel in basso rispetto alla sua posizione normale all'interno del flusso del documento. Gli elementi possono essere posizionati anche in modo relativo, con o senza coordinate (In alto, In basso, Sinistra, Destra), in modo da definire un contesto per gli elementi secondari con posizione assoluta.

• Fixed Colloca il contenuto in base alle coordinate inserite nelle caselle Posizione, rispetto all'angolo superiore sinistro del browser. Il contenuto rimane fisso in questa posizione quando l'utente fa scorrere la pagina.

• Static Colloca il contenuto nella posizione che gli è propria all'interno del flusso del testo. Si tratta della posizione predefinita di tutti gli elementi HTML posizionabili.

Determina l'ordine di sovrapposizione del contenuto. Gli elementi con un ordine superiore appaiono sopra quelli con un valore di ordine inferiore (o privi di un valore). I valori possono essere positivi o negativi. Se il contenuto ha una posizione assoluta, risulta più facile modificarne l'ordine di sovrapposizione utilizzando il pannello Elementi PA.

Determina l'effetto che si produce se il contenuto di un contenitore (ad esempio, un elemento DIV o P) supera le dimensioni definite. Queste proprietà controllano l'espansione nel modo seguente:

• visible Aumenta le dimensioni del contenitore in modo da rendere visibile tutto il contenuto. Il contenitore viene espanso verso il basso e verso destra.

• hidden Le dimensioni del contenitore rimangono invariate e la parte di contenuto in eccesso rimane nascosta. Non vengono visualizzate barre di scorrimento.

• scroll Al contenitore vengono aggiunte delle barre di scorrimento, indipendentemente dal fatto che le dimensioni del contenuto siano superiori o meno a quelle del contenitore. Il fatto che siano sempre disponibili delle barre di scorrimento evita la confusione derivante dall'apparire e scomparire delle barre di scorrimento in un ambiente dinamico. Questa opzione non può essere visualizzata nella finestra del documento.

• auto Visualizza le barre di scorrimento solo quando il contenuto supera le dimensioni del contenitore. Questa opzione non può essere visualizzata nella finestra del documento.

Definisce la parte del contenuto che è visibile. Potete accedere all'area di ritaglio con un linguaggio di script, ad esempio JavaScript, e modificarne le proprietà per creare effetti speciali, come gli effetti wipe. Questi effetti possono essere impostati utilizzando il comportamento Cambia proprietà.

Specifica la posizione e le dimensioni del blocco di contenuto. La posizione viene interpretata dal browser sulla base dell'impostazione di Tipo. Se il contenuto del blocco supera le dimensioni specificate, i valori delle dimensioni vengono ignorate.

Le unità predefinite per posizione e dimensione sono i pixel. Potete utilizzare anche le seguenti unità di misura: pc (pica), pt (punti), in (pollici), mm (millimetri), cm (centimetri), (ems), (exs) e % (percentuale del valore principale). Le abbreviazioni devono seguire il valore senza spazi intermedi, ad esempio 3mm.

Determina la condizione iniziale di visualizzazione del contenuto. Se non specificate un'impostazione per la proprietà Visibility, il contenuto utilizza per impostazione predefinita il valore del tag superiore. L'impostazione di Visibility predefinita del tag body è visible. Selezionate una delle seguenti opzioni di Visibility:

• Inherit Utilizza la proprietà di visibilità del tag superiore del contenuto.

• Visible Visualizza il contenuto indipendentemente dal valore del tag superiore.

• Hidden Nasconde il contenuto indipendentemente dal valore del tag superiore.

Definire le proprietà Estensioni degli stili CSS

Le proprietà degli stili delle estensioni includono opzioni per filtri, interruzioni di pagina e puntatori.

Cambia l'immagine del puntatore quando la sua icona si trova sopra a un oggetto controllato dallo stile. Selezionate l'opzione che desiderate impostare nel menu a comparsa. Questo attributo è supportato da Internet Explorer 4.0 e versioni successive e da Netscape Navigator 6.

Applica degli effetti speciali, come la sfocatura o l'immagine negativa, all'oggetto controllato dallo stile. Selezionate un effetto dal menu a comparsa.

Aggiunge un'interruzione pagina forzata durante la stampa prima o dopo l'oggetto gestito dallo stile. Selezionate l'opzione che desiderate impostare nel menu a comparsa. Nessuna versione 4.0 dei browser supporta questa opzione, ma le versioni future potrebbero offrire tale supporto.