Category Archives: CSS

Riepilogo stili


Tag


Tag Per esteso Attributi ?
class | style
DIV division class | style
LINK
  • href
  • media
  • rel=“stylesheet”
  • type=“text/css”
Singolo
SPAN class | style
STYLE type

Proprietà


Per esteso Valori TAG
background
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
BODY DIV H1 P …
background-attachment
  • fixed
  • scroll
BODY DIV H1 P …
background-color
  • colore
  • transparent
BODY DIV H1 P …
background-image
  • none
  • url(…)
BODY DIV H1 P …
background-position
  • …% …%
  • …px …px
  • left top
  • left center
  • left bottom
  • center top
  • center center
  • center right
  • right top
  • right center
  • right bottom
BODY DIV H1 P …
background-repeat
  • no-repeat
  • repeat
  • repeat-x
  • repeat-y
BODY DIV H1 P …
border
  • border-collapse
  • border-color
  • border-width
DIV TABLE
border-collapse
  • collapse
border-color

  • border-bottom-color
  • border-left-color
  • border-right-color
  • border-top-color
TABLE
border-style

  • border-bottom-style
  • border-left-style
  • border-right-style
  • border-top-style
  • dashed
  • dotted
  • double
  • groove
  • hidden
  • inset
  • none
  • outset
  • ridge
  • solid
TABLE
border-width

  • border-bottom-width
  • border-left-width
  • border-right-width
  • border-top-width
TABLE
box-sizing border-box DIV
color text color colore BODY H1 …
direction
  • ltr
  • rtl
display
  • inline-block
font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
font-family
  • cursive (?)
  • fantasy (?)
  • monospace
  • sans-serif
  • serif
font-height
font-size
  • …%
  • 100 … 900
  • initial
  • inherit
  • xx-small x-small smaller small medium large larger x-large xx-large
font-style
  • italic
  • normal
  • oblique
font-variant
  • normal
  • small-caps
font-weight
  • 100 … 900
  • lighter normal bold bolder
height DIV
letter-spacing
  • normal
line-height
list-style
  • list-style-image
  • list-style-position
  • list-style-type
list-style-image
  • none
  • url
list-style-position
  • inside
  • outside
list-style-type
  • circle
  • decimal
  • disc
  • lower-alpha lower-roman
  • none
  • square
  • upper-alpha upper-roman
margin

  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • auto
DIV
max-height maximum height
max-width maximum width
min-height minimum height
min-width minimum width
padding

  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
DIV
outline-style
outline-width
text-align
  • center
  • justify
  • left
  • right
text-decoration
  • blink (?)
  • line-through
  • none
  • overline
  • underline
A
text-indent
  • …%
text-transform
  • capitalize
  • lowercase
  • none
  • uppercase
width DIV
word-spacing
  • normal
white-spacing
all
  • initial
  • inherit
  • unset
empty-cells
  • hide
  • show
TABLE
Per esteso Valori TAG

Valori


Per esteso Nelle proprietà
Altro…
auto
  • cursor
  • margin
bold font-weight
border-box box-sizing
border-collapse collapse
bottom background-position
capitalize text-transform
center text-align
dashed border-style…
dotted border-style…
double border-style…
fixed background-attachment
groove border-style…
hidden border-style…
inherit
inline-block display
inset border-style…
inside
italic font-style
justify text-align
left
  • background-position
  • text-align
line-through text-decoration
lowercase text-transform
ltr left to right direction
monospace font-family
none
  • background-image
  • border-style…
  • text-decoration
  • text-transform
normal
  • font-style
  • font-weight
  • text-variant
no-repeat background-repeat
oblique font-style
outset border-style…
overline text-decoration
repeat background-repeat
repeat-x background-repeat
repeat-y background-repeat
ridge border-style…
right
  • background-position
  • text-align
rtl right to left direction
sans-serif font-family
scroll background-attachment
serif font-family
small-caps text-variant
solid border-style…
top background-position
transparent background-color
underline text-decoration
uppercase text-transform
url()
  • background-image
  • cursor
  • list-style-image
initial
inherit
cursor
  • auto crosshair default help pointer text wait
  • url(…)
auto
  • cursor
blink
  • text-decoration
crosshair
  • cursor
default
  • cursor
help
  • cursor
normal
pointer
  • cursor
text
  • cursor
transparent
  • background-color
wait
  • cursor
cursive
  • font-family
red
#f00
#ff0000
rgb(255,0,0)
rgb(100%,0%,0%)
  • background-color
  • color

Associare lo stile

Foglio collegato

Lo stile è scritto in un file di testo con estensione .css

collegato al documento con il tag LINK

all’interno della sezione HEAD

Un gruppo di pagine (tutte?) di un ipertesto utilizzeranno lo stesso foglio di stile per avere un aspetto uniforme.


L’elemento LINK ha i seguenti attributi

  • rel type href, obbligatori
  • media, facoltativo

Foglio incorporato

Lo stile può essere inserito all’interno della coppia di tag

in modo che influenzi tutte le occorrenze all’interno del singolo documento

In un documento ben strutturato le direttive per lo stile saranno incluse nella sezione HEAD


Foglio in linea

Lo stile può essere inserito all’interno del tag che si vuole influenzare


Riepilogo

Attributo media

L’attributo media permette di specificare a quale dispositivo deve essere applicato il foglio di stile (può essere utilizzato anche come attributo di STYLE).

I valori ammessi sono

  • all, il valore di default
  • screen, browser web
  • projection, dispositivo di proiezione
  • print, stampante
  • aural, browser a sintesi vocale
  • braille, browser con traduzione in Braille
  • embossed, stampante Braille
  • tty, dispositivo con carattere monospazio
  • tv, web tv

Nella sezione HEAD possono comparire più LINK con valore diverso dell’attributo media

Il foglio collegato2.css è stato associato sia a print che a tv.

Layout con intestazione

Le due colonne sono quasi sempre precedute da una sezione di intestazione comune contenente logo, titolo, sottotitolo, …

La sezione #contenuto semplifica il posizionamento delle due colonne precedenti rispetto all’intestazione

Bisogna utilizzare una combinazione appropriata di position, margin, left, right... ma con MS IE non da i risultati attesi.

Una nuova combinazione… porta a risultati omogenei con i due browser di riferimento

Layout 2 colonne

Un layout di un certo successo comprende, oltre alle normali informazioni dall’alto verso il basso, una colonna a sinistra con l’elenco dei link principali, il menu …

Meglio resettare le distanze del browser…

Il menu è largo 180 pixel e distante 20 px da destra

Le informazioni hanno un margine di 220 px (180+20+20) dal bordo destro

Forse il menu più diffuso è quello a sinistra…

Layout Position

Si possono specificare le distanze del box dai vicini con

  • top, sopra
  • left, da sinistra
  • right, da destra

L’attributo

specifica che la distanza si riferisce alla finestra del browser (piuttosto che all’elemento parent)

100 pixel dal bordo superiore

100 pixel dal bordo sinistro

100 pixel dal bordo destro

Un secondo blocco senza il posizionamento assoluto rimane sotto… image e con differenze se scritto prima o dopo…

Layout al centro

Una disposizione dei blocchi comune è al centro, cioè con spazio sia a destra che a sinistra

Rimane il 10% di spazio automaticamente sia a destra che a sinistra. Purtroppo funziona con Mozilla* ma non con MS IE per il quale è necessario ricorrere a un artificio

Si specifica che in body il contenuto è centrato ma poi in div, almeno il testo, ritorna a sinistra!

Box model

Intervenendo sulla cornice, spazio intorno, distanza tra, … di ogni sezione si crea l’effetto box molto interessante

Si ottiene che ogni sezione è incorniciata con

  • border: 4px dashed #000080, bordo tratteggiato blu di 4 pixel
  • margin: 40px, margine di 40 pixel (distanza della sezione dai vicini)
  • padding: 10px, spaziatura di 10 pixel (distanza del contenuto dal bordo)

Margin

Con margin si specifica la distanza della sezione dagli elementi contigui

  • margin, distanza unica
  • margin-top margin-left margin-bottom margin-right, specifica della singola distanza
  • margin: ... ... ... ..., distanze top, right, bottom, left rispettivamente

Si potrebbe, al limite, scegliere una distanza diversa da ogni vicino


Padding

Con padding si specifica la distanza del contenuto dalla cornice con le stesse possibilità di margin

  • padding, distanza unica
  • padding-top padding-left padding-bottom padding-right, specifica della singola distanza
  • padding ... ... ... ..., distanze top, right, bottom, left rispettivamente

Si possono anche specificare 2 distanze (top-bottom, left-right) o 3 (top, left-right, bottom)


Border

Per il bordo di un blocco ci sono infinite possibilità di personalizzazione!

Stile

  • border-top-style border-right-style border-bottom-style border-left-style
  • border-style, none, dotted, dashed, solid, double, groove, ridge, inset, outset

Spessore

  • border-top-width border-right-width border-bottom-width border-left-width
  • border-width, thin, medium, thick, ...

Colore

  • border-color, da 1 a 4 colori (come padding)

Insieme


Dimensioni

Anche le dimensioni della sezione sono configurabili tramite

  • width, larghezza
  • height, altezza

sia con valori assoluti, px, che relativi, %.

Annidando le sezioni e cambiando colore di fondo/dimensioni si ottengono risultati interessanti.
Ma ci sono differenze tra i browser!


Overflow

Quando l’altezza o la larghezza della sezione è insufficiente per il contenuto i browser adattano la dimensione al contenuto in modo arbitrario.
Con overflow si può stabilire quale sarà il trattamento di questa situazione

Le opzioni sono

  • visible, le dimensioni devono essere cambiate affinché …
  • hidden, le dimensioni rimangono fisse e quindi…
  • scroll, compare una barra di scorrimento
  • auto, comportamento di default del browser

Ci sono differenze tra MS IE e Firefox!

DIV e SPAN

DIV

Il tag

permette di dividere il documento in sezioni indipendenti sulle quali è possibile intervenire con lo stile in linea o tramite classi, identificatori…

È simile al tag <p> ma in più è un contenitore, quindi è possibile condizionare lo stile di un gruppo di elementi image


SPAN

Con

si agisce su una parte del documento, al limite un carattere .

Immagini di sfondo

Una sezione (… o l’intero corpo) del documento può essere arricchita con un colore di sfondo e/o con un’immagine di sfondo

Le proprietà disponibili sono

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment

Utilizzando queste proprietà, con immagini appropriate, si possono ottenere effetti molto interessanti di decorazione della pagina.


background-color

Ci sono più possibilità per esprimere lo stesso colore 

  • aqua#00ffff, #0ff, rgb(0,255,255), rgb(0%,100%,100%) 


background-image

L’immagine si specifica tramite l’URL corrispondente (senza virgolette o apostrofi…)

L’immagine piastrellerà tutta la sezione interessata.


background-repeat

Con background-repeat si specifica se l’immagine di sfondo deve essere ripetuta e come

  • repeat, di default, l’immagine piastrella tutta la sezione
  • repeat-x, … solo orizzontalmente
  • repeat-y, … solo verticalmente
  • no-repeat, nessuna ripetizione

background-position

Se l’immagine di sfondo non copre tutta la sezione allora con background-position si specifica come deve essere allineata orizzontalmente e verticalmente 

  • top left, di default, in alto a sinistra
  • top center, in alto al centro
  • top rightin alto a destra
  • center left, al centro a sinistra
  • center
    center center
    , al centro al centro
  • center right, al centro a destra
  • bottom leftin basso a sinistra
  • bottom center, in basso al centro
  • bottom rightin basso a destra
  • ...% ...%, scostamenti in percentuale
  • ...px ...px, scostamenti in pixel

background-attachment

  • fixed
  • scroll