CSS « ValCon >> WWW

Category Archives: CSS

Riepilogo stili

Posted on 15/01/2019 by admin

Comments off

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

Posted on 24/02/2016 by admin

Comments off

Foglio collegato

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

p {color:blue}

1	p {color:blue}

collegato al documento con il tag LINK

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

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

all’interno della sezione HEAD

<html>
   <head>
      <title>Stile collegato</title>
      <link rel="stylesheet" type="text/css" href="collegato1.css">
   </head>
   <body>
      <p>Il testo di questo paragrafo è di colore blu</p>
      <p>Anche questo...</p>
   </body>
</html>

<html>

<head>

<title>Stile collegato</title>

</head>

<body>

<p>Il testo di questo paragrafo è di colore blu</p>

<p>Anche questo...</p>

</body>

</html>

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

<style type="text/css">...</style>

1	<style type="text/css">...</style>

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

<style type="text/css">p {color:blue}</style>

1	<style type="text/css">p {color:blue}</style>

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

<html>
   <head>
      <title>Stile incorporato</title>
      <style type="text/css">p {color:blue}</style>
   </head>

   <body>
      <p>Il testo di questo paragrafo è di colore blu</p>
      <p>Anche questo...</p>
   </body>
</html>

<html>

<head>

<title>Stile incorporato</title>

</head>

<body>

<p>Il testo di questo paragrafo è di colore blu</p>

<p>Anche questo...</p>

</body>

</html>

Foglio in linea

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

<p style="color:blue">Il testo di questo paragrafo è di colore blu</p>

1	<p style="color:blue">Il testo di questo paragrafo è di colore blu</p>

<p style="color:blue;text-align:center">Il testo di questo paragrafo è blu e centrato</p>

1	<p style="color:blue;text-align:center">Il testo di questo paragrafo è blu e centrato</p>

Riepilogo

<html>
    <head>
        <title>Associare lo stile</title>
        <link rel="stylesheet" type="text/css" href="...">
        <style type="text/css">...</style>
    </head>
    <body>
        <style type="text/css">...</style>
        ...
        <p style="...">Paragrafo di colore verde</p>
    </body>
</html>

<html>

<head>

<title>Associare lo stile</title>

</head>

<body>

...

<p style="...">Paragrafo di colore verde</p>

</body>

</html>

Attributo media

Posted on 06/02/2016 by admin

Comments off

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

Posted on 26/12/2014 by admin

Comments off

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

<div id="intestazione">...</div>
<div id="contenuto">
     <div id="menu">...</div>
     <div class="info">...</div>
     ...
     <div class="info">...</div>
</div>

...

</div>

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

body
{
   margin: 0px;
   padding: 0px;
}
#intestazione
{
   margin:20px;            padding:20px;
                           background-color:#DDFFFF;                    
}
#contenuto
{
   position:relative;
   margin:20px;
}
#menu
{
   position:absolute;
   top:0px;          
   right:0px; 
   width:180px;            background-color:#FFFFDD;                    
}
.info
{
   margin:0 200px 20px 0;  background-color:#FFDDFF;
}

body

{

margin: 0px;

padding: 0px;

}

#intestazione

{

margin:20px; padding:20px;

background-color:#DDFFFF;

}

#contenuto

{

position:relative;

margin:20px;

}

#menu

{

position:absolute;

top:0px;

right:0px;

width:180px; background-color:#FFFFDD;

}

.info

{

margin:0 200px 20px 0; background-color:#FFDDFF;

}

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

body
{
   margin: 0px;
   padding: 0px;
}
#intestazione
{
   margin:20px;          padding: 20px;
                         background-color:#DDFFFF;                    
}
#contenuto
{
   position:relative;
}
#menu
{
   position:absolute;
   top:0px;          
   right:20px;
   width:180px;          background-color:#FFFFDD;                    
}
.info
{
   position:relative;
   left:20px;
   margin-right: 240px;  background-color:#FFDDFF;
}

body

{

margin: 0px;

padding: 0px;

}

#intestazione

{

margin:20px; padding: 20px;

background-color:#DDFFFF;

}

#contenuto

{

position:relative;

}

#menu

{

position:absolute;

top:0px;

right:20px;

width:180px; background-color:#FFFFDD;

}

.info

{

position:relative;

left:20px;

margin-right: 240px; background-color:#FFDDFF;

}

Layout 2 colonne

Posted on 26/12/2014 by admin

Comments off

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…

body
{
    margin: 0px;
    padding: 0px;
}

body

{

margin: 0px;

padding: 0px;

}

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

#menu
{
    position:absolute;
    top:20px;          
    right:20px;
    width: 180px;                  background-color:#FFFFDD;                    
}

#menu

{

position:absolute;

top:20px;

right:20px;

width: 180px; background-color:#FFFFDD;

}

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

.info
{
     margin:20px 220px 20px 20px;  background-color:#FFDDFF;
}

.info

{

margin:20px 220px 20px 20px; background-color:#FFDDFF;

}

Forse il menu più diffuso è quello a sinistra…

Layout Position

Posted on 26/12/2014 by admin

Comments off

Si possono specificare le distanze del box dai vicini con

top, sopra
left, da sinistra
right, da destra

L’attributo

position: absolute

1	position: absolute

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

100 pixel dal bordo superiore

<div style="position:absolute; top:100px; width:50%; background-color:#FFFFDD">...</div>

1	<div style="position:absolute; top:100px; width:50%; background-color:#FFFFDD">...</div>

100 pixel dal bordo sinistro

<div style="position:absolute; left:100px; width:50%; background-color:#FFFFDD">...</div>

1	<div style="position:absolute; left:100px; width:50%; background-color:#FFFFDD">...</div>

100 pixel dal bordo destro

<div style="position:absolute; right:100px; width:50%; background-color:#FFFFDD">...</div>

1	<div style="position:absolute; right:100px; width:50%; background-color:#FFFFDD">...</div>

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

Layout al centro

Posted on 26/12/2014 by admin

Comments off

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

div
{
   width:80%;
   margin: auto;
   ...
}

div

{

width:80%;

margin: auto;

...

}

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

body
{
   text-align:center;
   ...
}
div
{
   width:80%;
   margin: auto;
   text-align:left;
   ...
}

body

{

text-align:center;

...

}

div

{

width:80%;

margin: auto;

text-align:left;

...

}

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

Box model

Posted on 26/12/2014 by admin

Comments off

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

div { border: 4px dashed #000080; margin: 40px; padding: 10px; }

1	div { border: 4px dashed #000080; margin: 40px; padding: 10px; }

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

.centrato     { margin:50;               ... }
.giustificato { margin-left:100;         ... }
.adestra      { margin: 100 150 200 250; ... }

.centrato { margin:50; ... }

.giustificato { margin-left:100; ... }

.adestra { margin: 100 150 200 250; ... }

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

Posted on 26/12/2014 by admin

Comments off

DIV

Il tag

<div>...</div>

1	<div>...</div>

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

<div class="adestra">
   <h1>...</h1>
   <p>...</p>
   <p>...</p>
</div>
<div class="asinistra">
   <h1>...</h1>
   <p>...</p>
   <p>...</p>
</div>

</div>

</div>

SPAN

Con

<span>...</span>

1	<span>...</span>

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

Immagini di sfondo

Posted on 26/12/2014 by admin

Comments off

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%)

TD { background-color: ... }

1	TD { background-color: ... }

background-image

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

TD { background-image: url(...)}

1	TD { background-image: url(...)}

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 right, in alto a destra
center left, al centro a sinistra
center center center, al centro al centro
center right, al centro a destra
bottom left, in basso a sinistra
bottom center, in basso al centro
bottom right, in basso a destra
...% ...%, scostamenti in percentuale
...px ...px, scostamenti in pixel

background-attachment

fixed
scroll