En aquest document es recullen totes les propietats de CSS2 i les seves respectives definicions. El comportament descrit en aquestes definicions no es garanteix en els diferents navegadors. Per conèxer el comportament concret de les diferents propietats en MSIE i NS cal que es consulti el document comparatiu sobre el suport de les característiques CSS2 implementat per aquests dos navegadors.
Propietat azimuth
Tema associat: Fulls d'estil audibles.

Valor:<angle> | [[ left-side | far-left | left | center-left | center | center-right | right
| far-right | right-side ] || behind ] | leftwards | rightwards | inherit
Valor inicial:center
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

És una propietat de so espaial (com també ho és elevation). L'audio espaial és una característica estilística important per a la presentació acústica; azimuth proporciona una manera natural de fer parlar vàries veus separadament, tal com a la vida real (la gent rarament es troba en el mateix punt dins d'una habitació).

El valors tenen els següents significats:

La posició es descriu en termes d'un angle de dins del rang '-360deg' a '360deg' (-360 graus a 360 graus). El valor '0deg' significa directament davant en el centre de l'escena d'audició. El valor '90deg' és a la dreta, '180deg' és darrera, i '270deg' (o, equivalentment i més convenientment, '-90deg') és a l'esquerra.


left-side
El mateix que '270deg'. Amb 'behind', '270deg'.


far-left
El mateix que '300deg'. Amb 'behind', '240deg'.


left
El mateix que '320deg'. Amb 'behind', '220deg'.


center-left
El mateix que '340deg'. Amb 'behind', '200deg'.


center
El mateix que '0deg'. Amb 'behind', '180deg'.


center-right
El mateix que '20deg'. Amb 'behind', '160deg'.


right
El mateix que '40deg'. Amb 'behind', '140deg'.


far-right
El mateix que '60deg'. Amb 'behind', '120deg'.


right-side
El mateix que '90deg'. Amb 'behind', '90deg'.


leftwards
Mou el so cap a l'esquerra, relativament a l'angle actual. Més precisament, n'hi substrau 20 graus. L'aritmètica es duu a terme mòdul 360 graus. Cal notar que 'leftwards' es descriu més exactament com a girar "en contra de les agulles del rellotge", ja que sempre substrau 20 graus, encara que l'azimut (azimuth) heretat ja es trobi darrere l'oient (en tal cas el so realment sembla que es mogui cap a la dreta).


rightwards
Mou el so cap a la dreta, relativament a l'angle actual. Més precisament, n'hi afegeix 20 graus. Veieu 'leftwards' pel què fa a l'aritmètica.


El més provable és que aquesta propietat sigui implementada mesclant el mateix senyal en diversos canals a diferents volums. També pot utilitzar desplaçament de fase, retard digital i altres tècniques similars per a proporcionar la il·lusió d'una escena sonoritzada. Els mitjans exactes utilitzats per a assolir aquest efecte i el nombre d'altaveus utilitzats per a fer-ho són depenents de l'agent d'usuari, aquesta propietat merament identifica el resultat final desitjat.

Si s'especifica azimut espaial i el dispositiu de sortida no pot produir sons darrera de la posició d'audició, els agents d'usuari haurien de convertir els valors de l'hemisfera de reraguarda a valors de l'hemisfera d'avantguarda. Un mètode seria el següent:
   if 90deg < x <= 180deg then x := 180deg - x 
   if 180deg < x <= 270deg then x := 540deg - x
Ex.:
   H1   { azimuth: 30deg }
   TD.a { azimuth: far-right }        /*  60deg */
   #12  { azimuth: behind far-right } /* 120deg */
   P.comment { azimuth: behind }      /* 180deg */
Propietat background
Tema associat: Colors i fons.

Valor:[<background-color> || <background-image> || <background-repeat>
|| <background-attachment> || <background-position> ] | inherit
Valor inicial:no es defineix per a les propietats drecera
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:només a background-position
Grups de mitjans:visuals

Propietat drecera per a fixar les propietats de fons individuals (és a dir, background-color, background-image, background-repeat, background-attachment i background-position) en el mateix lloc dins del full d'estil.

Aquesta propietat primer fixa totes les propietats de fons individuals als seus valors inicials, i després els assigna els valors explícits donats en la declaració.
Ex.:
En la primera regla només ha estat donat un valor per a background-color i les altres propietats individuals s'inicialitzen al seu valor inicial. En la segona regla, totes les propietats individuals han estat especificades.
   BODY { background: red }
   P { background: url("quad.gif") gray 50% repeat fixed }
Propietat background-attachment
Tema associat: Colors i fons.

Valor:scroll | fixed | inherit
Valor inicial:scroll
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Si s'ha especificat una imatge de fons (via la propietat background-image), aquesta propietat especifica si es fixa respecte el viewport o bé es desplega al llarg de tot el document.

Encara que la imatge estigui fixa, segueix sent només visible quan es troba en l'àrea de fons o de farciment de l'element. D'aquesta manera, a no ser que la imatge es disposi en forma de mosaic ('background-repeat: repeat'), és possible que sigui invisible.

Els agents d'usuari pot ser que tractin 'fixed' com si fos 'scroll'. Tanmateix, es recomana que interpretin 'fixed' correctament, al menys pels elements HTML i BODY, ja que no hi ha cap manera perquè un autor proporcioni una imatge només per als navegadors que suporten 'fixed'. Per més informació, consulteu la "Introducció a CSS2".

Els valors tenen els següents significats:

fixed
La imatge es fixa respecte el viewport.


scroll
La imatge es desplega al llarg de tot el document.
Ex.:
Aquest exemple crea una banda vertical infinita que roman "enganxada" al viewport quan l'element és va desplegant.
	BODY { 
         background: url('img/o.gif');
         background-color: yellow;
         background-repeat: repeat-y;
         background-attachment: fixed;
   }
[Resultat]

(NS no implementa correctament la propietat background-attachment.)
Propietat background-color
Tema associat: Colors i fons.

Valor:<color> | transparent | inherit
Valor inicial:transparent
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Assigna el color de fons d'un element.

Els valors tenen els següents significats:

Color que es desitja.


transparent
Fa que els color subjacents es vegin a través.
Exs.:
Exemples de definicions de colors de fons:
/* el color de fons de la pantalla serà vermell */
	BODY { background-color: red; } 

/* el color de fons dels elements P serà blau clar */
	P { background-color: aqua; } 

/* el fons dels elements EM serà transparent (valor per defecte) */
	EM { background-color: transparent; } 
Aprofitant aquestes declaracions de fulls d'estil veieu una mostra de com representa aquesta propietat el vostre navegador.
Propietat background-image
Tema associat: Colors i fons.

Valor:<uri> | none | inherit
Valor inicial:none
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Assigna la imatge de fons per a un element. Quan s'assigna una imatge de fons, els autors haurien també d'especificar un color de fons el qual serà utilitzat quan la imatge no estigui disponible. Quan la imatge es troba disponible, es presenta a sobre del color de fons (així, el color és visible en les parts transparents de la imatge).

Els valors per a aquesta propietat són:

Per a especificar la imatge.


none
Quan no es fa servir cap imatge.
Ex.:
Aquesta regla farà que els elements P tinguin com a imatge de fons la que està designada per la URI:
	P { background-image: url('img/marga.gif');
            background-color: white;
	}
Veieu el resultat que genera el vostre navegador.
Propietat background-position
Tema associat: Colors i fons.

Valor:[ [<percentatge> | <longitut> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Valor inicial:0% 0%
S'aplica a:elements block-level i reemplaçats
S'hereta?:no
Admet valors percentuals?:sí, referits a la mida de la mateixa caixa
Grups de mitjans:visuals

Si s'ha especificat una imatge de fons (via la propietat background-image), aquesta propietat especifica la seva posició inicial. Els valors tenen els següents significats:

Amb una parella '0% 0%' com a valor, la cantonada superior esquerra de la imatge s'alinea amb la cantonada superior esquerra del límit del farciment de la caixa. Amb una parella '100% 100%' com a valor, es situa la cantonada inferior dreta de la imatge en la cantonada inferior dreta de l'àrea de farciment. Amb una parella '14% 84%' com a valor, el punt 14% horitzontal i 84% vertical de la imatge es situa en el punt 14% horitzontal i 84%vertical de l'àrea de farciment.


Amb una parella '2cm 2cm' com a valor, la cantonada superior esquerra de la imatge es situa 2cm a la dreta i 2cm per sota de la cantonada superior esquerra de l'àrea de farciment.


top left i left top
El mateix que '0% 0%'.


top, top center i center top
El mateix que '50% 0%'.


right top i top right
El mateix que '100% 0%'.


left, left center i center left
El mateix qeu '0% 50%'.


center i center center
El mateix que '50% 50%'.


right, right center i center right
El mateix que '100% 50%'.


bottom left i left bottom
El mateix que '0% 100%'.


bottom, bottom center i center bottom
El mateix que '50% 100%'.


bottom right i right bottom
El mateix que '100% 100%'.


Si només es dóna un valor (percentual o de longitut) només es fixa la posició horitzontal, la posició vertical serà '50%'. Si es donen dos valors, el primer és la posició horitzontal. Es permeten les combinacions de valors de longitut i de percentatge (per ex., '50% 2cm'). També es permeten els valors negatius (posicions negatives). Les paraules clau no poden combinar-se amb cap tipus de valor (percentual o de longitut); totes les combinacions possibles estan donades en aquesta definició.

Si la imatge de fons està fixada al viewport (veieu la propietat background-attachment), la imatge es situa relativament al viewport i no a l'àrea de farciment de l'element.
Ex.:
Proveu com suporta el vostre navegador els diferents valors:
	BODY { 
           background: url("banner.jpeg") right top 
	} /* 100% 0% */
[Resultat]

	BODY { 
           background: url("banner.jpeg") top center
	} /* 50% 0% */
[Resultat]

	BODY { 
	   background: url("banner.jpeg") center
	} /* 50% 50% */
[Resultat]

	BODY { 
           background: url("banner.jpeg") bottom
        } /* 50% 100% */
[Resultat]


Ex.:
	BODY {     
           background-image: url('insolent.gif');
           background-attachment: fixed;
           background-position: 100% 100%;
           background-repeat: no-repeat;
 	   background-color: #8080FF;  
     } 
Aquí la imatge es situa en la cantonada inferior dreta del viewport.

[Resultat]

(NS no implementa correctament les propietats background-position i background-attachment.)
Propietat background-repeat
Tema associat: Colors i fons.

Valor:repeat | repeat-x | repeat-y | no-repeat | inherit
Valor inicial:repeat
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Si s'ha especificat una imatge de fons (via la propietat background-image), aquesta propietat especifica si aquesta imatge es repeteix (en mosaic) i de quina manera. El mosaic sencer cobreix les àrees de contingut i de farciment d'una caixa.

Els valors tenen els següents significats:

repeat
La imatge es repetix tant verticalment com horitzontal.


repeat-x
La imatge només es repeteix horitzontalment.


repeat-y
La imatge només es repeteix verticalment.


no-repeat
La imatge no es repeteix, només es dibuixa una còpia de la imatge.
Ex.:
Diferents exemples amb una mateixa imatge. Una única imatge en el fons de la pantalla:
	BODY { 
	   background-image: url('img/marga.gif');
	   background-repeat: no-repeat;
	}
[Resultat]

La mateixa imatge de fons repetida per tota la pantalla:
	BODY {
	   background-image: url('img/marga.gif');
	   background-repeat: repeat;
	}
[Resultat]

La mateixa imatge de fons repetida horitzontalment:
	BODY {
	   background-image: url('img/marga.gif');
	   background-repeat: repeat-x;
	}
[Resultat]

La mateixa imatge de fons repetida verticalment:
	BODY {
	   background-image: url('img/marga.gif');
	   background-repeat: repeat-y;
	}
[Resultat]
Propietat border


Temes associats: Taules, Model de caixa.

Valor:[ <border-width> || <border-style> || <color> ] | inherit
Valor inicial:veieu les propietats individuals
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Propietat drecera per a assignar la mateixa amplada, color i estil per a totes quatre vores d'una caixa. A diferència de les propietats drecera margin i padding, aquesta propietat no pot tenir valors diferents per a cada vora. Per a fer això, s'han d'utilitzar una o més de les altres propietats de vora.

Com que, per a algunes extensions, les propietats tenen funcionalitats solapades, l'ordre en què s'especifiquen les regles és important.
Ex.:
	P { border: solid red }

	és idèntic a:

	P { border-top: solid red; 
	    border-right: solid red; 
	    border-bottom: solid red; 
	    border-left: solid red; 
	}


Ex.:
	BLOCKQUOTE {
		border-color: red;
		border-left: double;
		color: black;
	}
En aquest exemple, la vora esquerra serà de color negre mentre que les altres vores seran vermelles. Això és degut a que s'ha assignat una amplada, un estil i un color en la propietat border-left. Com que el valor del color no ve donat per la propietat border-left, s'agafarà de la propietat color. El fet que color estigui inicialitzada després de border-left no és rellevant.
Propietats border-bottom, border-left, border-right i border-top
Temes associats: Taules, Model de caixa.

Valor:[ <border-width> || <border-style> || <color> ] | inherit
Valor inicial:veieu les propietats individuals
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Propietats drecera per assignar l'amplada, l'estil i el color de les vores inferior, esquerra, dreta i superior, respectivament, d'una caixa.
Ex.:
	H1 { border-bottom: thick solid red }
Aquesta regla fixa una vora gruixuda, sòlida i de color vermell per sota de les caixes generades pels elements H1. Als valors omesos se'ls assignen els seus valors inicials.


Ex.:
	H1 { border-bottom: thick solid }
En aquesta regla, com que no s'hi especifica border-color, el color de la vora vindrà donat per la propietat color de l'element.
Propietat border-collapse
Tema associat: Taules.

Valor:collapse | separate | inherit
Valor inicial:collapse
S'aplica a:elements 'table' i 'inline-table'
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Selecciona un model de vora per a una taula.

Els valors tenen els següents significats:

separate
Selecciona el model de vores separades.


collapse
Selecciona el model de vores col·lapsades.
Propietats border-bottom-color, border-left-color, border-right-color i border-top-color
Temes associats: Taules, Model de caixa.

Valor:<color> | transparent | inherit
Valor inicial:el valor de la propietat color
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifiquen el color de les vores inferior, esquerra, dreta i superior, respectivament, d'una caixa.

Els valors tenen el següent significat:

Especifica el valor del color.


transparent
La vora és transparent (encara que pot tenir amplada).
Ex.:
L'element o elements als quals s'apliquin les següents regles CSS2 presentaran una vora superior de color blau, i una vora inferior d'un color vermellós (les altres vores seran del color de la propietat color de l'element o elements en qüestió):
	border-top-color: blue;
	border-bottom-color: #CC0000;
Propietats border-bottom-style, border-left-style, border-right-style i border-top-style
Temes associats: Taules, Model de caixa.

Valor:<estil-vora> | inherit
Valor inicial:none
S'aplica a:tots
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifiquen l'estil de línia de les vores inferior, esquerra, dreta i superior, respectivament, d'una caixa.

Aquestes propietats fan referència al tipus de valor <estil-vora> el qual pot prendre un dels següents valors:

<estil-vora>

none
No hi ha vora. Aquest valor força el valor computat de border-width a '0'.


hidden
El mateix que 'none', excepte en termes de resolució de conflictes de vores per a elements de taula.


dotted
La vora és una sèrie de punts.


dashed
La vora és una sèrie de segments de línia curts.


solid
La vora és un sol segment de línia.


double
La vora és dues línies sòlides. La suma de les dues línies i de l'espai que hi ha entre elles és igual al valor de border-width.


groove
La vora sembla que estigui escarvada en el llenç.


ridge
És l'oposat a 'groove'. La vora sembla que sobresurti del llenç.


inset
La vora fa que la caixa sencera sembli que està incrustada en el llenç.


outset
L'oposat a 'inset'. La vora fa que la caixa sencera sembli com si anés a sortir del llenç.


Totes les vores es dibuixen a sobre del fons de la caixa. El color de les vores dibuixades amb els valors de 'groove', 'ridge', 'inset' i 'outset' depenen de la propietat color de l'element.

Alguns agents d'usuari conformats poden interpretar 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' i 'outset' com a 'solid'. Veieu la definició de la propietat border-style pels exemples.
Propietats border-bottom-width, border-left-width, border-top-width i border-right-width
Temes associats: Taules, Model de caixa.

Valor:<amplada-vora> | inherit
Valor inicial:medium
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Fixen l'amplada de les vores inferior, esquerra, dreta i superior, respectivament, d'una caixa.

Aquestes propietats fan referència al tipus de valor <amplada-vora>, el qual pot prendre qualsevol d'aquests valors:

<amplada-vora>

thin
Una vora prima.


medium
Una vora mitjana.


thick
Una vora gruixuda.

El gruix de la vora té un valor específic. Aquests valors explícits d'amplada de vora no poden ser negatius.




La interpretació de 'thin', 'medium' i 'thick' depèn de l'agent d'usuari. No obstant, s'han de mantenir les següents relacions:

   'thin'  <--  'medium'  <--  'thick'
A més, aquestes amplades han de ser constants al llarg del document.
Ex.:
Aquesta regla de full d'estil:
	H3 { 
	     border-style: solid;  
	     border-top-width: 10px;
	     border-bottom-width: 10px;
	}
farà que les caixes que generen els elements H3 tinguin unes vores superior i inferior de 10px d'amplada, mentre que les vores esquerra i dreta seran d'un gruix mitjà ('medium', valor per defecte).
Propietat border-color
Temes associats: Taules, Model de caixa.

Valor:<color>{1,4} | transparent | inherit
Valor inicial:veieu les propietats individuals
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Propietat drecera per a fixar border-top-color, border-left-color, border-right-color i border-bottom-color en el mateix lloc dins un full d'estil.

Els valors tenen el següent significat:

Especifica el valor del color.


transparent
La vora és transparent (encara que pot tenir amplada).


En ser una propietat drecera per a quatre subpropietats se li poden especificar 1, 2, 3 o 4 valors, els quals s'apliquen de la manera explicada en la següent taula:

Núm. de valors especificatsVores a les quals s’apliquen
  superiordretainferioresquerra
11r1r1r1r
21r2n1r2n
31r2n3r2n
41r2n3r4rt


Si el color de vora d'un element no s'ha especificat amb una propietat de vora, els agents d'usuari han d'utilitzar el color de la propietat color de l'element com a valor calculat per al color de la vora.
Ex.:
Aquest document HTML:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   <HTML>
   <HEAD> 
      <TITLE>Test de border-color</TITLE> 
   <STYLE type="text/css"> 
      H3 {  border-style: solid;
            border-color: red aqua yellow blue;
      }
   </STYLE> 
   </HEAD> 
   <BODY> 
      <H3>Caixa de test</H3> 
   </BODY>
   </HTML>
donarà com a resultat una cosa semblant a:



Propietat border-spacing
Tema associat: Taules.

Valor:<longitut> <longitut> ? | inherit
Valor inicial:0
S'aplica a:elements 'table' i 'inline-table'
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

En una taula, en el model de vores separades, cada cel·la té una vora individual. La propietat border-spacing especifica la distància que hi ha d'haver entre les vores de cel·les adjacents. L'espai s'omple amb el fons de l'element de taula. En aquest model les files, columnes, grups de files i grups de columnes no poden tenir vores (és a dir, els agents d'usuari han d'ignorar les propietats de vora per a aquells elements).

Els valors tenen els següents significats:

Especifica la distància que separa les vores adjacents de les cel·les. Si només s'especifica una distància aquesta serveix tant per l'espaiat vertical com per l'horitzontal. Si se n'ha especificat dues, la primera dóna la distància horitzontal i la segona, la distància vertical. Aquestes longituts no poden ser negatives.
Ex.:
Un full d'estil com aquest:
   TABLE { 
	border: outset 10pt; 
	border-collapse: separate; 
	border-spacing: 15pt
   } 
   TD { border: inset 5pt } 
   TD.special { border: inset 10pt } /* Cel·la superior esquerra */
podria donar com a resultat aquesta taula:

Propietat border-style
Temes associats: Taules, Model de caixa.

Valor:<estil-vora>{1,4} | inherit
Valor inicial:veieu les propietats individuals
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Propietat drecera per a fixar border-top-style, border-right-style, border-bottom-style i border-left-style en un mateix lloc dins el full d'estil.

Aquesta propietat fa referència al tipus de valor <estil-vora> el qual pot prendre qualsevol d'aquests valors:

<estil-vora>

none
No hi ha vora. Aquest valor força el valor computat de border-width a '0'.


hidden
El mateix que 'none', excepte en termes de resolució de conflictes de vores per a elements de taula.


dotted
La vora és una sèrie de punts.


dashed
La vora és una sèrie de segments de línia curts.


solid
La vora és un sol segment de línia.


double
La vora és dues línies sòlides. La suma de les dues línies i de l'espai que hi ha entre elles és igual al valor de border-width.


groove
La vora sembla que estigui escarvada en el llenç.


ridge
És l'oposat a 'groove'. La vora sembla que sobresurti del llenç.


inset
La vora fa que la caixa sencera sembli que està incrustada en el llenç.


outset
L'oposat a 'inset'. La vora fa que la caixa sencera sembli com si anés a sortir del llenç.


Totes les vores es dibuixen a sobre del fons de la caixa. El color de les vores dibuixades amb els valors de 'groove', 'ridge', 'inset' i 'outset' depenen de la propietat color de l'element.

Alguns agents d'usuari conformats poden interpretar 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' i 'outset' com a 'solid'. Veieu la definició de la propietat border-style pels exemples. En ser una propietat drecera per a quatre subpropietats se li poden especificar 1, 2, 3 o 4 valors, els quals s'apliquen de la manera explicada en la següent taula:

Núm. de valors especificatsVores a les quals s’apliquen
  superiordretainferioresquerra
11r1r1r1r
21r2n1r2n
31r2n3r2n
41r2n3r4rt


Com que el valor inicial dels estils de vora és 'none', cap vora serà visible a menys que es fixi l'estil de la vora.
Ex.:
Proveu l'aspecte que tenen els diferents valors de "estil" en el vostre navegador (nota: és possible que el vostre navegador no reconegui la majoria d'aquests efectes):
      H3 { border-style: estil; }
on estil és:

dotted
dashed
solid
double
groove
ridge
inset
outset


Ex.:
Aquesta regla farà que les vores superior i inferior siguin dobles i que les vores dreta i esquerra siguin discontínues:
	P { border-style: double dashed; }
Propietat border-width
Temes associats: Taules, Model de caixa.

Valor:<amplada-vora>{1,4} | inherit
Valor inicial:veieu les propietats individuals
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Propietat drecera per a fixar border-top-width, border-left-width, border-right-width i border-bottom-width en el mateix lloc dins un full d'estil.

Aquesta propietat fa referència al tipus de valor <amplada-vora> el qual pot prendre un dels següents valors:

<amplada-vora>

thin
Una vora prima.


medium
Una vora mitjana.


thick
Una vora gruixuda.


El gruix de la vora té un valor específic. Aquests valors explícits d'amplada de vora no poden ser negatius.




La interpretació de 'thin', 'medium' i 'thick' depèn de l'agent d'usuari. No obstant, s'han de mantenir les següents relacions:

   'thin'  <--  'medium'  <--  'thick'
A més, aquestes amplades han de ser constants al llarg del document.

En ser una propietat drecera per a quatre subpropietats se li poden especificar 1, 2, 3 o 4 valors, els quals s'apliquen de la manera explicada en la següent taula:

Núm. de valors especificatsVores a les quals s’apliquen
  superiordretainferioresquerra
11r1r1r1r
21r2n1r2n
31r2n3r2n
41r2n3r4rt
Ex.:
Totes quatre vores primes:
	H1 { border-width: thin}
Superior: prima; Inferior: prima; Esquerra: gruixuda; Dreta: gruixuda
	H1 { border-width: thin thick}
Superior: prima; Esquerra i dreta: gruixuda; Inferior: mitjana
	H1 { border-width: tihin thick medium }


Ex.:
Aquest codi HTML:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   <HTML>
   <HEAD> 
      <TITLE>Test de border-width</TITLE> 
   <STYLE type="text/css"> 

      H3 {  border-style: solid;
            border-width: thin thick medium 50px; 
      }
   </STYLE> 
   </HEAD> 
   <BODY> 
      <H3>Caixa de test</H3> 
   </BODY>
   </HTML>
hauria de donar com a resultat una cosa semblant a:

[Resultat]
Propietat bottom
Tema associat: Model de formatat visual.

Valor:<longitut> | <percentatge> | auto | inherit
Valor inicial:auto
S'aplica a:elements posicionats
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'alçada del bloc contenidor
Grups de mitjans:visuals

Aquesta propietat, juntament amb top, left i right, disposa les caixes posicionades generades per elements posicionats (un element es diu que està posicionat si la seva propietat position té un valor diferent de 'static'). bottom especifica a quina distància per sobre del límit inferior del bloc contenidor d'una caixa es troba el límit del marge inferior de la caixa.

Els valors tenen els següents significats:

El desplaçament és una distància fixa des del límit de referència.


El desplaçament és un percentatge de l'alçada del bloc contenidor. Si l'alçada del bloc contenidor no està especificada explícitament (és a dir, depèn de l'alçada del contingut) el valor percentual s'interpreta com 'auto'.


auto
L'efecte d'aquest valor depèn de quines de les propietats relacionades (top, left, right) també tenen aquest valor. Veieu els apartats sobre l'amplada i l'alçada dels elements block-level absolutament posicionats, per més detalls.


Per a les caixes posicionades absolutament els desplaçaments són respecte el bloc contenidor de la caixa. Per a les caixes posicionades relativament els desplaçaments són respecte els límits exteriors de la caixa en sí (és a dir, a la caixa se li ha donat una posició en el fluxe normal, i després se l'ha desplaçada d'aquesta posició d'acord amb aquestes propietats top, left, right i bottom).
Propietat caption-side
Tema associat: Taules.

Valor:top | bottom | left | right | inherit
Valor inicial:top
S'aplica a:elements 'table-caption'
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica la posició de la caixa del títol respecte la caixa de la taula.

Els valors tenen els següents significats:

top
Posiciona la caixa del títol al capdamunt de la caixa de la taula.


bottom
Posiciona la caixa del títol al capdavall de la caixa de la taula.


left
Posiciona la caixa del títol a l'esquerra de la caixa de la taula.


right
Posiciona la caixa del títol a la dreta de la caixa de la taula.
Ex.:
Aquí la propietat caption-side situa els títols al capdavall de les taules. El títol serà tan ample com el pare de la taula, i el text del títol estarà justificat a l'esquerra:
	CAPTION { caption-side: bottom; 
                  width: auto;
                  text-align: left }

Veieu el resultat que genera el vostre navegador (ni NS ni MSIE suporten la propietat caption-side).


Ex.:
Aquí es mostra com posar un títol en el marge esquerre. La taula en sí està centrada, fixant els seus marges dret i esquerre a 'auto', i la caixa sencera amb la taula i el títol es situa al marge esquerre en la mateixa quantitat que l'amplada del títol:
	BODY {
	    margin-left: 8em
	}

	TABLE {
	    margin-left: auto;
	    margin-right: auto
	}

	CAPTION {
	    caption-side: left;
	    margin-left: -8em;
	    width: 8em;
	    text-align: right;
	    vertical-align: bottom
	}
suposant que l'amplada de la taula és menor que l'amplada disponible, el format serà semblant a aquest:



aquest diagrama mostra una taula centrada amb el títol que s'extén cap al marge esquerre, com a resultat d'una propietat margin-left negativa.
Propietat clear
Tema associat: Model de formatat visual.

Valor:none | left| right | both | inherit
Valor inicial:none
S'aplica a:elements block-level
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Aquesta propietat serveix per a controlar el fluxe prop dels floats. La propietat clear indica quins costats de la/es caixa/es d'un element no poden ser adjacents a una caixa flotant existent (pot ser que l'element en sí tingui descendents flotants; la propietat clear no té efecte sobre aquells).

Aquesta propietat només pot ser especificada per a elements block-level (incloent-hi els floats). Per a caixes compact i run-in, aquesta propietat s'aplica a la última caixa de bloc a la qual la caixa compact o run-in pertany.

Els valors tenen els següents significats quan s'apliquen a caixes de bloc no flotants:

left
El marge superior de la caixa generada s'incrementa el suficient per tal que el límit de la vora superior estigui per sota del límit inferior més exterior de qualsevol caixa flotant esquerra que sigui el resultat d'algun element present abans en el document font.


right
El marge superior de la caixa generada s'incrementa el suficient per tal que el límit de la vora superior estigui per sota del límit inferior més extern de qualsevol caixa flotant dreta que sigui el resultat d'algun element present abans en el document font.


both
La caixa generada es trasllada a sota de totes les caixes flotants d'elements ja existents en el document font.


none
No hi ha restriccions sobre la posició de la caixa respecte els floats.


Quan la propietat es fixa sobre elements flotants resulta en una modificació de les regles per a posicionar el float (consulteu el control del fluxe prop dels floats).
Propietat clip
Tema associat: Efectes visuals.

Valor:<forma> | auto | inherit
Valor inicial:auto
S'aplica a:elements block-level i reemplaçats
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

S'aplica a elements que tenen la propietat overflow amb un valor diferent de 'visible'.

Els valors tenen els següents significats:

auto
La regió de retallat té el mateix tamany i localització que la/es caixa/es de l'element.


<forma>
En CSS2, l'únic valor vàlid per a <forma> és:
		rect (<top>,<right>,<bottom>,<left>)
on <top>, <right>, <bottom> i <left> especifiquen desplaçaments (offsets) des dels costats respectius de la caixa. <top>, <right>, <bottom> i <left> poden tenir un d'aquests valors:


Quan les coordenades estan arrodonides a coordenades de píxel, s'ha de tenir en compte que cap píxel roman visible quan <left> + <right> és igual a l'amplada de l'element (o <top> + <bottom> és igual a l'alçada de l'element), i a la inversa, que cap píxel roman ocult quan aquests valors són '0'.


Els ancestres de l'element també poden tenir regions de retall (en el cas que la seva propietat overflow no sigui 'visible'); el que es presenta és la intersecció de les diferents regions de retall.

Si la regió de retall excedeix els límits de la finestra de document de l'agent d'usuari, el contingut pot ser retallat a aquella finestra mitjançant l'entorn operatiu nadiu.
Ex.:
	P { clip: rect(5px, 10px, 10px, 5px); }
	P { clip: rect(5px, -5px, 10px, 5px); }
Aquestes regles crearan regions de retall rectangulars, delimitades per línies discontínues en les següents figures:



Nota. En CSS2 totes les regions de retall són rectangulars. Futures versions de CSS2 permetran regions de retall no rectangulars.
Propietat color
Tema associat: Colors i fons.

Valor:<color> | inherit
Valor inicial:depèn de l'agent d'usuari
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Descriu el color de primer pla del text del contingut d'un element.

Els valors tenen el següent significat:

El color desitjat.
Ex.:
Aquí s'assigna el color del text del contingut dels elements EM i P:
	EM { color: red }  /* nom predefinit del color */
	P { color: rgb(255,0,0) }  /* RGB rang 0-255 */
Propietat content
Tema associat: Contingut generat, numeració automàtica i llistes.

Valor:[<cadena> | <uri> | <comptador> | attr(X) | open-quote
| close-quote | no-open-quote | no-close-quote ]+ | inherit
Valor inicial:cadena buida
S'aplica a:pseudo-elements :before i :after; elements amb "display: marker"
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:tots

S'utilitza amb els pseudo-elements :before i :after i als elements amb "display: marker" per a generar contingut dins un document.

Els valors tenen els següents significats:

Contingut del text.


El valor és una URI que designa un recurs extern. Si un agent d'usuari no pot suportar el recurs a causa dels tipus de mitjans que suporta, ha d'ignorar el recurs. Nota. CSS2 no ofereix cap mecanisme per a canviar la mida de l'objecte inserit, o per a proporcionar una descripció textual com fan els atributs "alt" o "longdesc" per a les imatges en HTML. Això pot canviar en futurs nivells de CSS.


Els comptadors poden especificar-se amb dues funcions diferents: 'counter()' o 'counters()'. La primera té dues formes: 'counter(nom)' o 'counter(nom, estil)'. El text generat és el valor del comptador anomenat en aquest punt de l'estructura del formatat; està formatat en l'estil indicat ('decimal' per defecte). La segona funció també té dues formes: 'counters(nom, cadena)' o 'counters(nom, cadena, estil)'. El text generat és el valor de tots els comptadors amb el nom donat en aquest punt de l'estructura del formatat, separat per la cadena especificada. Els comptadors es presentan en l'estil indicat ('decimal' per defecte). Veieu l'apartat "Comptadors i numeració automàtica" del tema "Contingut generat, numeració automàtica i llistes" per a més informació.


Aquests valors es reemplacen per la cadena apropiada de la propietat quotes.


El primer valor no insereix res però incrementa el nivell d'aniuament de les cometes.
El segon valor insereix la cadena buida i decrementa el nivell d'aniuament de les cometes.


attr(X)
Aquesta funció retorna en forma de cadena el valor de l'atribut X per al subjecte del selector. La cadena no és analitzada gramaticalment pel processador de CSS. Si el subjecte del selector no té un atribut X, es retorna una cadena buida. La case-sensibilitat dels noms d'atribut depèn del llenguatge del document. Nota. En CSS2, no és possible fer referència a valors d'atribut per a altres elements del selector.


La propietat display controla si el contingut es situa en una caixa de bloc, una caixa inline o bé una caixa de marcador.

Els autors haurien de posar les declaracions de content dins de regles @media quan el contingut sigui sensible de mitjà. Per exemple, el text literal pot utilitzar-se per a qualsevol grup de mitjans, però les imatges només s'apliquen als grups de mitjans visuals + bitmap, i els arxius de so només s'apliquen als grups de mitjans acústics.

El contingut generat no altera l'arbre del document. En particular, no genera informació per al processador del llenguatge del document (per ex., per a una reanàlisi gramatical).

Nota. En futurs nivells de CSS, la propietat content podrà acceptar valors addicionals, permetent que variï l'estil de part del contingut generat, però en CSS2 tot el contingut del pseudo-element :before o :after té el mateix estil.
Ex.:
La següent regla fa que es reprodueixi un arxiu de so al final d'una cita (veieu el tema "Fulls d'estil audibles" per a mecanismes adicionals):
	@media aural {
	   BLOCKQUOTE:after { content: url("musica.wav") }
	}
Aquesta altra insereix el text de l'atribut HTML "alt" abans de la imatge. Si la imatge no es visualitza el lector encara veurà el text de l'"alt".
	IMG:before { content: attr(alt) }
Els autors poden incloure salts de línia en el contingut generat escrivint la seqüència d'escape "\A" en una de les cadenes després de la propietat content. Això insereix un trencament de línia forçat, similar al de l'element BR de l'HTML. Consulteu "Cadenes" i "Caràcters i case" del tema "Sintaxi i tipus bàsics de dades" per a més informació sobre la seqüència d'escape "\A":
	H1 :before {
	   display: block;
	   text-align: center;
	   content: "capítol\A capítulo\A chapitre"
	}
Propietat counter-increment
Tema associat: Contingut generat, numeració automàtica i llistes.

Valor:[ <identificador> <enter>? ]+ | none | inherit
Valor inicial:none
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:tots

És una de les dues propietats (l'altra és counter-reset) amb les quals CSS2 controla la numeració automàtica del contingut.

Els comptadors definits per mitjà d'aquestes propietats s'utilitzen amb les funcions counter() i counters() de la propietat content.

Aquesta propietat accepta un o més noms de comptadors (identificadors), cada un seguit opcionalment per un enter.

Si counter-increment fa referència a un comptador que no es troba dins l'abast de cap counter-reset, s'assumeix que el comptador ha estat reiniciat a 0 per l'element arrel.

Si un element incrementa/reinicia un comptador i també utilitza (en la propietat content dels pseudo-elements :before i :after de l'element), el comptador s'utilitza després de ser incrementat/reiniciat.

Si un element reinicia i també incrementa un comptador, el comptador primer és ressetejat i després incrementat.

Els valors tenen els següents significats:

Nom del comptador.


Raó per la qual s'incrementa el comptador per a cada ocurrència de l'element. L'increment per defecte és 1. Es permeten el zero i els enters negatius.
Ex.:
Aquest exemple mostra una manera d'enumerar capítols i seccions amb "Capítol 1", "1.1", "1.2", etc.
   H1 :before {
	content: "Capítol" counter(capitol) ".";
	counter-increment: capitol;  /* Afegeix 1 a capitol */
	counter-reset: seccio;  /* Inicialitza seccio a 0 */
   }

   H2 :before {
	content: counter(capitol) "." counter(seccio) " ";
	counter-increment: seccio;
   }


Ex.:
El següent és suficient per enumerar ítems de llista aniuats:
   OL { counter-reset: item }
   LI { display: block }
   LI:before { content: counter(item) ". "; counter-increment: item }
Propietat counter-reset
Tema associat: Contingut generat, numeració automàtica i llistes.

Valor:[ <identificador> <enter>? ]+ | none | inherit
Valor inicial:none
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:tots

És una de les dues propietats (l'altra és counter-increment) amb les quals CSS2 controla la numeració automàtica del contingut.

Els comptadors definits per mitjà d'aquestes propietats s'utilitzen amb les funcions counter() i counters() de la propietat content.

Aquesta propietat conté una llista d'un o més noms de comptadors, cada un seguit opcionalment per un enter.

Si un element incrementa/reinicia un comptador i també l'utilitza (en la propietat content dels pseudo-elements :before i :after de l'element), el comptador s'utilitza després de ser incrementat/reiniciat.

Si un element reinicia i també incrementa un comptador, el comptador primer és reiniciat i després incrementat.

Els valors tenen els següents significats:

Nom del comptador.


Dóna el valor amb el qual s'inicialitza el comptador en cada ocurrència de l'element. El valor per defecte és 0.
Ex.:
Aquest exemple mostra una manera de numerar els capítols i les seccions amb "Capítol 1", "1.1", "1.2", etc.:
   H1:before {
      content: "Capítol " counter(capitol) ". ";
      counter-increment: capitol;  /* Afegeix 1 a capitol */
      counter-reset: seccio;      /* Inicialitza la secció a 0 */
   }

   H2:before {
      content: counter(capitol) "." counter(seccio) " ";
      counter-increment: seccio;
   }


Ex.:
Aquesta propietat segueix les regles de la cascada. Així, degut a l'efecte cascada, el següent full d'esil:
	H1 { counter-reset: seccio -1 }
	H1 { counter-reset: imagenum 99 }
només reiniciarà 'imagenum'. Per a reiniciar ambdós comptadors, han d'estar especificats conjuntament:
	H1 { counter-reset: seccio -1 imagenum 99 }
Propietat cue
Tema associat: Fulls d'estil audibles.

Valor:[ <cue-before> || <cue-after> ] | inherit
Valor inicial:no està definit per a les propietats drecera
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:acústics

Propietat drecera per a fixar cue-before i cue-after en el mateix lloc d'un full d'estil. Si es dónen dos valors, el primer valor és cue-before i el segon és cue-after. Si només es dóna un valor aquest s'aplica a totes dues propietats.

Si un agent d'usuari no pot presentar una icona auditiva (per ex., l'entorn de l'usuari no ho permet), es recomana que produeixi un senyal sonor alternatiu (per ex., fent sonar un avís, emetre un so d'alarma, etc.).
Ex.:
Aquestes dues regles són idèntiques, i faran que s'emeti el so de l'arxiu "pop.au" abans i després que es reciti el contingut dels elements H1:
	H1 { cue-before: url("pop.au"); cue-after: url("pop.au");

	H1 ( cue: url("pop.au"); }
Propietats cue-after i cue-before
Tema associat: Fulls d'estil audibles.

Valor:<uri> | none | inherit
Valor inicial:none
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:acústics

Les icones auditives (senyals sonors) són una altra manera de distingir els elements semàntics en una presentació acústica. Els sons es poden reproduir abans o després d'un element per a delimitar-lo. Aquestes propietats emeten un so acústic abans (cue-before) o després (cue-after) que el contingut d'un element sigui recitat.

Els valors tenen els següents significats:

Aquesta URI ha de designar el recurs d'una icona auditiva. Si la URI es resol en un fitxer que no sigui audio, com per exemple una imatge, el recurs s'hauria d'ignorar i la propietat s'hauria de tractar com si tingués el valor 'none'.


none
No s'especifica cap icona auditiva (senyal sonor).
Ex.:
Aquesta regla fa que es reprodueixi el so "popa.au" abans i després que es reciti el contingut dels elements H1:
	H1 { cue-before: url("pop.au"); cue-after: url("pop.au") }
Propietat cursor
Tema associat: Interfície d'usuari.

Valor:[ [<uri>,]* [ auto | crosshair | default | pointer | move | e-resize
| ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize
| w-resize | text | wait | help ] ] | inherit
Valor inicial:auto
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals, interactius

Especifica el tipus de cursor que s'ha de visualitzar per al dispositiu apuntador.

Els valors tenen els següents significats:

auto
L'agent d'usuari determina el cursor que ha de ser visualitzat basant-se en el context actual.


crosshair
Una creu simple (per ex., segments curts de línia representant un signe '+').


default
El cursor per defecte depenent de la plataforma. Sovint és representat com una fletxa.


pointer
El cursor és un apuntador que indica un link.


move
Indica que alguna cosa s'ha de moure.


e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Indica que alguna vora s'ha de moure. Per exemple, el cursor 'sw-resize' s'utilitza quan el moviment comença des de la cantonada sud-oest de la caixa.


text
Indica que es pot seleccionar text. Sovint es presenta com una barra I.


wait
Indica que el programa està ocupat i que l'usuari ha d'esperar. Sovint es presenta com un rellotge de pulsera o com un rellotge de sorra.


help
Indica que hi ha ajuda disponible per a l'objecte que es troba sota el cursor. Sovint es presenta com un signe d'interrogació o un globus.


L'agent d'usuari recupera el cursor des del recurs designat per la URI. Si l'agent d'usuari no pot suportar el primer cursor d'una llista de cursors, ha d'intentar-ho amb el segon, etc. Si l'agent d'usuari no pot suportar cap cursor dels definits per l'usuari, ha d'utilitzar el cursor genèric del final de la llista.
Ex.:
L'agent d'usuari anirà a buscar el cursor "elmeu.cur"; si no el pot suportar anirà a buscar el cursor "segon.csr", i si tampoc el pot suportar farà servir el cursor genèric del text:
	P { cursor: url("elmeu.cur"), url("segon.csr"), text; }


Ex.:
Aquesta regla farà que, passant el cursor per sobre del contingut de l'element P, el cursor es transformi en un rellotge:
	P { cursor: wait; }
Veieu el resultat que genera el vostre navegador.
Propietat direction
Tema associat: Model de formatat visual.

Valor:ltr | rtl | inherit
Valor inicial:ltr
S'aplica a:tots els elements, però cal veure l'explicació
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica el sentit bàsic d'escriptura dels blocs i el sentit de les insercions i sobreescriptures o invalidacions (veieu unicode-bidi i l'algorisme bidireccional d'Unicode).

A més a més, especifica el sentit de la disposició de les columnes de les taules, el sentit del desbordament (overflow) horitzontal i la posició d'una última línia incompleta dins d'un bloc en cas que "text-align: justify".

Els valors tenen els següents significats:

ltr
Sentit d'esquerra a dreta.


rtl
Sentit de dreta a esquerra.


Perquè la propietat direction tingui algun efecte sobre els elements inline-level, el valor de la propietat unicode-bidi ha de ser 'embed' o 'override'.

Nota. La propietat direction, quan està especificada per a elements de columna de les taules, no és heretada per les cel·les de dins de la columna ja que les columnes no existeixen dins l'arbre del document. Així, CSS no pot capturar fàcilment les regles d'herència de l'atribut "dir" descrites en aquest Manual d'HTML Dinàmic dins el manual d'HTML 4.0, tema "Informació de l'idioma i sentit del text" (o en la secció 11.3.2.1 de l'especificació de l'HTML 4.0).
Propietat display
Tema associat: Model de formatat visual.

Valor:inline | block | list-item | run-in | compact | marker | table | inline-table
| table-row-group | table-header-group | table-footer-group | table-row
| table-column-group | table-column | table-cell | table-caption | none | inherit
Valor inicial:inline
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:tots

Transforma el funcionament normal d'un element, al que també li pot afegir capacitats i funcionalitats addicionals.

Els valors d'aquesta propietat tenen els següents significats:

block
Força que un element generi una caixa de bloc principal.


inline
Força que un element generi una o més caixes inline.


list-item
Força que un element (per ex., LI en HTML) generi una caixa de bloc principal i una caixa inline d'ítem de llista (consulteu l'apartat sobre les llistes del tema "Contingut generat, numeració automàtica i llistes").


marker
Declara que el contingut generat abans o després d'una caixa sigui un marcador. Aquest valor només s'hauria d'utilitzar amb els pseudo-elements :before o :after associats a elements block-level. En altres casos, aquest valor s'interpreta com 'inline'. (Consulteu l'apartat sobre marcadors per més informació.)


none
Força que un element no generi cap caixa en l'estructura de formatat (és a dir, l'element no té cap efecte sobre el disseny, la disposició). Els elements descendents tampoc no generen cap caixa; aquest comportament no pot ser invalidat fixant la propietat display en els descendents.
Cal remarcar que el fet d'especificar "display: none" no crea una caixa invisible: no crea cap caixa en absolut. CSS inclou mecanismes que capaciten un element per a generar caixes dins el model de formatat que afecten la disposició però que no són visibles en sí mateixes. (Consulteu l'apartat sobre visibilitat del tema "Efectes visuals".)


run-in i compact
Creen tant caixes de block com caixes inline, depenent del context. Les propietats s'apliquen a les caixes compact i run-in basant-se en el seu estat final (inline-level o block-level). Per exemple, la propietat white-space només s'aplica si la caixa esdevé una caixa de bloc.


table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell i table-caption
Forcen que un element es comporti com un element de taula (subjecte a les restriccions descrites en el tema sobre les taules).


Cal notar que encara que el valor inicial de display és 'inline', les regles del full d'estil per defecte de l'agent d'usuari poden invalidar aquest valor.

Els agents d'usuari d'HTML conformats pot ser que ignorin la propietat display.
Ex.:
Exemples de declaracions de la propietat display:
   P { display: block }  /* Els elements P generen caixes de bloc */
   EM { display: inline }  /* Els elements EM generen caixes inline */
   LI { display: list-item }  /* Els elements LI es comporten
                                 com ítems de llista */
   IMG { display: none }  /* No mostrar imatges */
Propietat elevation
Tema associat: Fulls d'estil audibles.

Valor:<angle> | below | level | above | higher | lower | inherit
Valor inicial:level
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

És una propietat de so espaial (com també ho és azimuth). L'audio espaial és una característica estilística important per a la presentació acústica; elevation especifica el grau d'elevació (direcció) del so en una escena sonoritzada. Els mitjans precisos utilitzats per a assolir aquest efecte i el nombre d'altaveus utilitzats per a fer-ho són indefinits. Aquesta propietat merament identifica el resultat final desitjat.

Els valors d'aquesta propietat tenen els següents significats:

Especifica l'elevació com un angle, entre '-90deg' i '90deg'. '0deg' significa sobre l'horitzó del davant, que significa més o menys anivellat amb l'oient. '90deg' significa directament cap amunt i '-90deg' significa directament cap avall.


below
Igual que '-90deg'.


level
Igual que '0deg'.


above
Igual que '90deg'.


higher
Agefeix 10 graus a l'elevació actual.


lower
Substrau 10 graus de l'elevació actual.
Ex.:
   H1 { elevation: above }  /* 90deg d'elevació 
                              (pel damunt de l'oient)*/
   TR.a { elevation: 60deg }  /* pel damunt de l'oient */
   TR.b { elevation: 30deg }  /* per sota del nivell de l'oient */
   TR.c { elevation: level }  /* al nivell de l'oient */
Propietat empty-cells
Tema associat: Taules.

Valor:show | hide | inherit
Valor inicial:show
S'aplica a:elements 'table-cell'
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

En les taules, en el model de vores separades, aquesta propietat controla la presentació de les vores del voltant de les cel·les que tenen contingut no visible. Les cel·les buides i les cel·les amb la propietat visibility inicialitzada a 'hidden' es considera que tenen contingut no visible. El contingut visible inclou "&nbsp;" i altres espais blancs excepte l'ASCII CR ("\0D"), LF ("\0A"), tab ("\09"), i l'espai ("\20").

Els valors tenen els següents significats:

show
Les vores es dibuixen al voltant de les cel·les buides (com en les cel·les normals).


hide
No es dibuixa cap vora la voltant de les cel·les buides. A més, si totes les cel·les d'una fila tenen aquest valor i no tenen cap contingut visible, aleshores la fila sencera es comporta com si tingués "display: none".
Ex.:
Aquesta regla fa que es dibuixin les vores de totes les cel·les d'una taula:
	TABLE { empty-cells: show; }
Propietat float
Tema associat: Model de format visual.

Valor:left | right | none | inherit
Valor inicial:none
S'aplica a:tots els elements excepte els elements posicionats i el contingut generat
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica si una caixa hauria de flotar cap a l'esquerra, cap a la dreta o no flotar en absolut. Aquesta propietat es pot inicialitzar sobre elements que generen caixes que no estan posicionades absolutament.

Els valors tenen els següents significats:

left
L'element genera una caixa de bloc que és flotada cap a l'esquerra. El contingut es troba al costat dret de la caixa, començant per la part superior (subjecte a la propietat clear). La propietat display s'ignora, a no ser que tingui el valor 'none'.


right
El mateix que 'left' però ara el contingut es troba al costat esquerre de la caixa, començant per la part superior.


none
La caixa no és flotada.


Consulteu les regles precises que governen el comportament dels floats.
Propietat font
Tema associat: Fonts.

Valor:[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size>
[ / <line-height> ]? <font-family> ] | caption | icon | menu
| message-box | small-caption | status-bar | inherit
Valor inicial:veure propietats individuals
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:permesos per a font-size i line-height
Grups de mitjans:visuals

La propietat font és, excepte en el cas que s'explica més avall, una propietat drecera per a assignar valors a les propietats individuals font-style, font-variant, font-weight, font-size, line-height i font-family en el mateix lloc d'un full d'estil. La sintaxi d'aquesta propietat es basa en una tradicional notació tipogràfica drecera per fixar múltiples propietats relacionades amb les fonts.

Totes les propietats relacionades amb les fonts (totes les citades en el paràgraf anterior més font-stretch i font-size-adjust) primer se les reinicia als seus valors inicials. Aleshores, a aquelles propietats a les quals se'ls ha donat un valor explícit en la propietat drecera font, se'ls assignen aquests valors. Per raons de compatibilitat retroactiva, no és possible assignar valors diferents dels seus valors inicials a les propietats font-stretch i font-size-adjust mitjançant la propietat font; els valors per a aquestes dues propietats s'han d'assignar individualment.

La propietat font és "quasi" una propietat drecera ja que les fonts del sistema només es poden especificar mitjançant aquesta propietat, i no amb font-family en sí, per tant, font permet als autors fer alguna cosa més que assignar valors a les seves subpropietats. No obstant, a les propietats individuals com font-weight encara se'ls dónen valors presos de la font del sistema, els quals poden ser més tard variats de manera independent.

Els valors que pot prendre la propietat font per a les fonts del sistema són els següents:

caption
La font utilitzada per a controls amb títol (per ex., botons, etc.).


icon
La font utilitzada per a etiquetar icones.


menu
La font utilitzada en els menús (per ex., menús desplegables i llistes de menú).


message-box
La font utilitzada en les caixes de diàleg.


small-caption
La font utilitzada per a etiquetar petits controls.


status-bar
La font utilitzada en les barres d'estat de les finestres.


Les fonts del sistema només poden ser fixades com a una unitat; això és, la família de fonts, la mida, el pes, l'estil, etc., tot es fixa al mateix temps. Aquests valors poden més tard ser alterats individualment si es desitja. Si una font amb les característiques indicades no existeix en una plataforma donada, l'agent d'usuari hauria de substituir-la intel·ligentment (per ex., es pot utilitzar una versió més petita de la font 'caption' per a la font 'smallcaption') o bé substituir una de les fonts per defecte de l'agent d'usuari. Tal com passa amb les fonts regulars, si, per a una font del sistema, alguna de les propietats individuals no forma part de les preferències disponibles de l'usuari pel sistema operatiu, aquelles propietats haurien de ser fixades als seus valors inicials.
Ex.:
   P { font: 12pt/14pt sans-serif }
   P { font: 80% sans-serif}
   P { font: x-large/110% "new century schoolbook", serif }
   P { font: bold italic large Palatino, serif }
   P { font: normal small-caps 120%/120% fantasy }
   P { font: oblique 12pt "Helvetica Nue", serif;
       font-stretch: condensed }
En la segona regla, el valor percentual de la mida de la font ('80%') es refereix a la mida de la font de l'element pare.

En la tercera regla, el percentatge de line-height ('110%') es refereix a la mida de la font del mateix element.

Les primeres tres regles no especifiquen font-variant ni font-weight explícitament, per tant aquestes propietats reben els seus valors inicials ('normal'). Cal observar que el nom de la família de fonts "new century schoolbook", el qual conté espais, es troba tancat entre cometes.

La quarta regla fixa font-weight a 'bold', font-style a 'italic', i implícitament fixa font-variant a 'normal'.

La cinquena regla fixa font-variant ('small-caps'), font-size (120% de la mida de font del pare), line-height (120% de la mida de la font) i font-family ('fantasy'). També en resulta que la paraula clau 'normal' s'aplica a les dues propietats restants: font-style i font-weight.

La sisena regla fixa font-style, font-size i font-family, les altres propietats de font són inicialitzades als seus valors inicials. Després, fixa font-stretch a 'condensed' ja que aquesta propietat no pot ser fixada a aquell valor utilitzant la propietat drecera font.


Exs.:
   BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
   BUTTON P { font: menu }
   BUTTON P EM { font-weight: bolder }
Si la font utilitzada pels menús desplegables en un sistema particular fos, per exemple, 9-point Charcoal, amb un pes de 600, aleshores els elements P que fossin descendents de BUTTON es visualitzarien tal com si aquesta regla fons en efecte:

	BUTTON P { font: 600 9pt Charcoal }
Com que la propietat drecera font restaura al seu valor inicial qualsevol propietat a la qual no se li ha donat explícitament un valor, això té el mateix efecte que aquesta declaració:
	BUTTON P {
         font-style: normal;
         font-variant: normal;
         font-weight: 600;
         font-size: 9pt;
         line-height: normal;
         font-family: Charcoal
	}
Propietat font-family
Tema associat: Fonts.

Valor:[[ <nom-de-família> | <família-genèrica> ],]* [<nom-de-família> | <família-genèrica>] | inherit
Valor inicial:depèn de l'agent d'usuari
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica una llista prioritaritzada de noms de famílies de fonts i/o de noms de famílies genèriques.

Els valors tenen els següents significats:

Nom d'una família de fonts.


Nom d'una família de fonts genèrica.


Per a tractar amb el problema que una sola font pot no contenir glyphs per a visualitzar tots els caràcters d'un document, o que no totes les fonts estan disponibles en tots els sistemes, aquesta propietat permet als autors especificar una llista de fonts, totes del mateix estil i mida, que es proben en seqüència per a veure si contenen un glyph per a un cert caràcter. Aquesta llista s'anomena conjunt de fonts.

Per exemple, un text que contingui paraules angleses amb símbols matemàtics pot necessitar un conjunt de dues fonts, una que contingui lletres i dígits llatins, i una altra que contingui símbols matemàtics.
Ex.:
   BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
Aquest conjunt de fonts va bé per a un text que s'espera que contingui text amb caràcters llatins, caràcters japonesos i símbols matemàtics. Els glyphs disponibles en la font "Baskerville" (una font que conté només caràcters llatins) seran trets d'aquesta font, els glyphs japonesos seran trets de "Heisi Mincho W3", i els glyphs de símbols matemàtics vindran de "Symbol". Qualsevol altre glyph serà tret de la família de fonts genèrica "serif".

La família de fonts genèrica s'utilitzarà si una o més de les altres fonts d'un conjunt de fonts es troba indisponible. Encara que moltes fonts proporcionen el glyph del "caràcter perdut", tal com el seu nom indica això no hauria de ser considerat una unificació excepte per a l'última font d'un conjunt de fonts.
Ex.:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   <HTML>
   <HEAD>
      <TITLE>Test de fonts</TITLE>
   <STYLE type="text/css">
      BODY { font-family: "new century schoolbook", serif }
   </STYLE>
   </HEAD>
   <BODY>
      <H1 style="font-family: 'La meva pròpia font', fantasy">Test</H1>
      <P>Si la font "new century schoolbook" no està
	disponible això es veurà amb una font 'serif'.
   </BODY>
   </HTML>
[Resultat]
Propietat font-size
Tema associat: Fonts.

Valor:<mida-absoluta> | <mida-relativa> | <longitut> | <percentatge> | inherit
Valor inicial:medium
S'aplica a:tots els elements
S'hereta?:sí, el valor calculat s'hereta
Admet valors percentuals?:sí, fent referència a la mida de font de l'element pare
Grups de mitjans:visuals

Descriu la mida de la font quan està fixada de manera sòlida.

Els valors tenen els següents significats:

<mida-absoluta>
Una paraula clau de <mida-absoluta> fa referència a una entrada a una taula de mides de fonts computada i guardada per l'agent d'usuari. Els seus possibles valors són:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

Sobre una pantalla d'ordinador es suggereix un factor d'escalatge de 1.2 entre índexs adjacents; si la font 'medium' és de 12pt, la font 'large' podria ser de 14.4pt (12 x 1.2 = 14.4). Els diferents mitjans poden necessitar diferents factors d'escalatge. A més, l'agent d'usuari hauria de tenir en compte la qualitat i la disponibilitat de les fonts quan es calculi la taula. La taula pot ser diferent d'una família de fonts a una altra.

Nota. En CSS1 el factor d'escalatge suggerit entre índexs adjacents era de 1.5, però l'experiència dels usuaris ha provat que era un factor massa gran.


<mida-relativa>
Una paraula clau de <mida-relativa> s'interpreta relativament a la taula de mides de fonts i a la mida de la font de l'element pare. Els valors possibles són:

[ larger | smaller ]

Per exemple, si l'element pare té una mida de font de 'medium', un valor de 'larger' faria que la mida de la font de l'element actual fos 'large'. Si la mida de l'element pare no es troba propera a una entrada de la taula, l'agent d'usuari és lliure d'interpolar entre les entrades de la taula o arrodonir a la més propera. L'agent d'usuari pot haver d'extrapolar els valors de la taula si el valor numèric va més enllà de les paraules clau.


Un valor de longitut especifica una mida de font absoluta (la qual és independent de la taula de fonts de l'agent d'usuari). Les longituts negatives són il·legals.


Un valor de percentatge especifica una mida absoluta de font que pren com a referència la mida de font de l'element pare. L'ús de valors percentuals, o de valors en 'em', porta cap a uns fulls d'estil més robustos i susceptibles de suportar bé l'efecte cascada.


El valor real d'aquesta propietat pot diferir del valor computat degut a un valor numèric de font-size-adjust i de la indisponibilitat de certs tamanys de font.

Els elements fills hereten el valor computat de font-size (d'altra manera, l'efecte de font-size-adjust es complicaria).
Ex.:
Exemples de definicions de tamanys de font:
   P { font-size: 12pt; } /* font de mida 12pt */
   BLOCKQUOTE { font-size: larger } /* font de mida igual al valor
                                       que representa la paraula
                                       clau següent més gran que
                                       la de l'element pare */
   EM { font-size: 150% } /* font de mida un 15% més gran que la
                             de l'element pare */
   EM { font-size: 1.5em } /* font 1.5 vegades més gran que la de
                              l'element pare */
Propietat font-size-adjust
Tema associat: Fonts.

Valor:<número> | none | inherit
Valor inicial:none
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

En escriptures bicamerals, la mida i la legibilitat subjectiva aparents d'una font no depenen tant del seu valor de font-size com del valor de la seva x-height, o, més útilment, del rati d'aquests dos valors, anomenat valor d'aspecte (mida de la font dividit per la x-height). Per exemple, la popular font Verdana té un valor d'aspecte de 0.58; quan la mida de la font Verdana és de 100 unitats la seva x-height és de 58 unitats. Com més alt és el valor d'aspecte, més provable és que una font sigui llegible a mides petites. Inversament, les cares amb un valor d'aspecte més baix esdevindran il·legibles més ràpidament sota una mida llindar donada que les fonts amb un valor d'aspecte més alt. La substitució directa de la font depenent només de la mida pot conduir a caràcters il·legibles.

La propietat font-size-adjust permet als autors especificar un valor d'aspecte per a un element que preservarà la x-height de la primera font escollida en la font substituta.

Els ajustaments de la mida de la font tenen lloc quan es calcula el valor real de font-size. Com que l'herència es basa en el valor computat, els elements fills heretaran els valors no ajustats.

Els diferents valors que pot prendre aquesta propietat tenen els següents significats:

none
No preserva la x-height de la font.


Especifica el valor d'aspecte. El número fa referència al valor d'aspecte de la primera font escollida. El factor d'escalatge per a les fonts disponibles es calcula d'acord amb la següent fórmula:
   y(a/a') = c

   on:

   y  =  font-size de la font que s'ha escollit primer
   a  =  valor d'aspecte per a la font que s'ha escollit primer
   a' =  valor d'aspecte per a la font disponible
   c  =  font-size que s'ha d'aplicar a la font disponible
Ex.:
Si la Verdana 14px (amb un valor d'aspecte de 0.58) no estigués disponible i una font disponible tingués un valor d'aspecte de 0.46, la mida de la font substituta seria 14 x (0.58/0.46) = 17.65px.

La següent imatge mostra diversos tipus de fonts representades amb una mida de font comuna (11pt. a 72 ppi), juntament amb els seus valors d'aspecte. Observeu que les fonts amb un valor d'aspecte més alt apareixen més grans que aquelles que tenen un valor d'aspecte més baix. Les cares amb un valor d'aspecte molt baix són illegibles a la mida que es mostra:




Ex.:
La propera imatge mostra els resultats de font-size-adjust, on Verdana ha estat presa com a "primera tria", juntament amb el factor d'escalatge aplicat. Tal com està ajustat, les mides aparents són gairebé linials a través de les diferents cares, encara que les mides reals (em) varien en més del 100%. Observeu que, així mateix, font-size-adjust tendeix a estabilitzar la mètrica horitzontal de les línies.

Com a comparació, la Times New Roman té un valor d'aspecte de 0.46. La Verdana aleshores tendirà a ser més llegible a mides petites que la Times New Roman. A la inversa, la Verdana es veurà sovint massa grossa si es substitueix per al Times New Roman a una mida determinada:




Propietat font-stretch
Tema associat: Fonts.

Valor:normal | wider | narrower | ultra-condensed | extra-condensed
| condensed | semi-condensed | semi-expanded | expanded
| extra-expanded | ultra-expanded | inherit
Valor inicial:normal
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Selecciona una cara normal, condensada o extesa d'una família de fonts.

Les paraules clau dels valors absoluts tenen la següent ordenació, de la més estreta a la més ampla:

  1. ultra-condensed
  2. extra-condensed
  3. condensed
  4. semi-condensed
  5. normal
  6. semi-expanded
  7. expanded
  8. extra-expanded
  9. ultra-expanded

Els valors relatius tenen els següents significats:

wider
Fixa el valor al proper valor expandit per sobre del valor heretat (mentre no s'incrementi per sobre de 'ultra-expanded')
narrower
Fixa el valor al proper valor condensat per sota del valor heretat (mentre no es decrementi per sota de 'ultra-condensed').
Ex.:
Per exemple, aquest full d'estil:
	.condensat { font-family: arial; font-stretch: condensed; }
	.expandit { font-family: arial; font-stretch: wider; }
amb aquest fragment de codi HTML:
   <div class="condensat">Aquestes lletres són una mica estretes.</div>
   <div class="expandit">Aquestes lletres són una mica més amples.</div>
farà que la primera frase aparegui en Arial amb les lletres 'condensed', i la segona frase en Arial amb les lletres 'semi-condensed'.

Propietat font-style
Tema associat: Fonts.

Valor:normal | italic | oblique | inherit
Valor inicial:normal
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Busca les cares normal (algunes vegades referides com a "roman" o "upright"), itàlica (italic) i oblíqua (oblique) dins d'una família de fonts.

Els valors tenen els següents significats:

normal
Especifica una font que està classificada com a "normal" en la base de dades de fonts de l'agent d'usuari.


oblique
Especifica una font que està classificada com a "oblique" en la base de dades de fonts de l'agent d'usuari. Les fonts amb Oblique, Slanted o Incline en el seu nom típicament estaran etiquetades com a "oblique" en al bd de fonts de l'agent d'usuari. Una font etiquetada com a "oblique" en la bd de l'agent d'usuari pot realment ser generada per mitjà de la inclinació electrònica d'una font normal.


italic
Especifica una font que està classificada com a "italic" en la base de dades de fonts de l'agent d'usuari, o, si aquesta no es troba disponible, una que estigui etiquetada com a "oblique". Les fonts amb Italic, Cursive o Kursiv en el seu nom, seran etiquetades típicament com a "italic".
Ex.:
	H1, H2, H3 { font-style: italic }
	H1 EM { font-style: normal }
Aquí, el text normal d'un element H1, H2 o H3 serà visualitzat amb una font itàlica. No obstant, el text emfatitzat (EM) dins d'un H1 apareixerà en una cara normal.
Propietat font-variant
Tema associat: Fonts.

Valor:normal | small-caps | inherit
Valor inicial:normal
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

En una font de majúscules petites (small-caps) els glyphs per a lletres en minúscula es veuen similars a les majúscules, però en una mida més petita i proporcions lleugerament diferents. La propietat font-variant busca una font per a bicameral (amb dos tipus de lletres tal com en l'escriptura llatina). Aquesta propietat no té cap efecte visible per a escriptures que siguin unicamerals (amb només un tipus de lletres, tal com en la majoria dels sistemes d'escriptura del món).

Els valors tenen els següents significats:

normal
Especifica una font que no està etiquetada com a font 'small-caps'.


small-caps
Especifica una font etiquetada com a font 'small-caps'. Si una font genuïna de majúscules petites (small-caps) no es troba disponible, els agents d'usuari haurien de simular una font small-caps, per ex., agafant una font normal i reemplaçant les lletres en minúscula per caràcters en majúscula escalats. Com a últim recurs els glyphs de lletres en majúscula no escalades en una font normal poden reemplaçar els glyphs d'una font de majúscules petites (small-caps) per tal que el text aparegui tot en lletres majúscules.
Ex.:
Els elements H3 amb 'class="petites"' apareixeran en majúscules petites:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
   <HTML>
   <HEAD> 
      <TITLE>Test de font-variant</TITLE> 
   <STYLE type="text/css"> 
	H3.petites { font-variant: small-caps }
   </STYLE> 
   </HEAD> 
   <BODY> 
      <H3>ELEMENT H3 NORMAL.</H3> 
      <H3>Element H3 normal.</H3> 
      <H3 class="petites">ELEMENT H3 AMB MAJÚSCULES PETITES.</H3> 
      <H3 class="petites">Element H3 amb majúscules petites.</H3> 
   </BODY>
   </HTML>
Veieu el resultat que genera el vostre navegador (NS no implementa correctament la propietat font-variant).


En la mesura en que aquesta propietat força que el text es transformi a majúscules, es poden aplicar les mateixes consideracions que per a text-transform.
Propietat font-weight
Tema associat: Fonts.

Valor:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700
| 800 | 900 | inherit
Valor inicial:normal
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica el pes (gruix) de la font.

Els valors tenen els següents significats:

100 ... 900
Aquests valors formen una seqüència ordenada on cada número indica un pes que és al menys tan fosc com el seu predecessor.


normal
El mateix que '400'.


bold
El mateix que '700'.


bolder
Especifica el proper pes que s'asigna a una font que és més fosca que l'heretat. Si no hi ha tal pes, simplement resulta en el proper valor numèric més fosc (i la font roman inalterada), a no ser que el valor heretat fos '900', en tal cas el pes resultant seria també '900'.


lighter
Especifica el proper pes que s'assigna a una font que és més fluixa (prima) que l'heretat. Si no hi ha tal pes, simplement resulta en el proper valor numèric més fluix (i la font roman inalterada), a no ser que el valor heretat fos '100', en tal cas el pes resultant seria també '100'.


Els elements fill hereten el valor computat del pes.
Ex.:
	P { font-weight: normal }  /* 400 */
	H1 { font-weight: 700 }    /* bold */
	BODY { font-weight: 400 }  /* normal */ 
	STRONG { font-weight: bolder }  /* 500 si es troba disponible */
Propietat height
Tema associat: Detalls del model de formatat visual.

Valor:<longitut> | <percentatge> | auto | inherit
Valor inicial:auto
S'aplica a:tots els elements excepte els elements inline no reemplaçats, les columnes
de taula i els grups de columnes
S'hereta?:no
Admet valors percentuals?:veure explicació
Grups de mitjans:visuals

Especifica l'alçada del contingut de les caixes generades per elements block-level i reemplaçats.

Aquesta propietat no s'aplica a elements inline-level no reemplaçats. L'alçada de les caixes d'un element inline no reemplaçat ve donada pel valor (provablement heretat) de la propietat line-height de l'element.

Els valors tenen els següents significats:

Especifica una alçada fixa.


Especifica una alçada percentual. El percentatge es calcula respecte l'alçada del bloc contenidor de la caixa generada. Si l'alçada del bloc contenidor no està explícitament especificada (és a dir, depèn de l'alçada del contingut), el valor és interpretat com a 'auto'.


auto
L'alçada depèn dels valors d'altres propietats. Veieu l'apartat "Calcular alçades i marges" del tema "Detalls del model de formatat visual".


Els valors negatius per a height no estan permesos.
Ex.:
La següent regla fixa l'alçada dels paràgrafs a 100 píxels:
	P { height: 100px; }
i els paràgrafs que requereixin més de 100 píxels d'alçada es desbordaran d'acord amb la propietat overflow.
Propietat left
Tema associat: Model de formatat visual.

Valor:<longitut> | <percentatge> | auto | inherit
Valor inicial:auto
S'aplica a:elements posicionats
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'amplada del bloc contenidor
Grups de mitjans:visuals

Aquesta propietat, juntament amb top, right i bottom, disposa les caixes posicionades generades per elements posicionats (un element es diu que està posicionat si la seva propietat position té un valor diferent de 'static'). left especifica a quina distància a la dreta del límit esquerre del bloc contenidor d'una caixa es troba el límit del marge esquerre de la caixa.

Els valors tenen els següents significats:

El desplaçament és una distància fixa des del límit de referència.


El desplaçament és un percentatge de l'amplada del bloc contenidor. Si l'alçada del bloc contenidor no està especificada explícitament (és a dir, depèn de l'alçada del contingut) el valor percentual s'interpreta com 'auto'.


auto
L'efecte d'aquest valor depèn de quines de les propietats relacionades (top, right, bottom) també tenen aquest valor. Veieu els apartats sobre l'amplada i l'alçada dels elements block-level absolutament posicionats, per més detalls.


Per a les caixes posicionades absolutament els desplaçaments són respecte el bloc contenidor de la caixa. Per a les caixes posicionades relativament els desplaçaments són respecte els límits exteriors de la caixa en sí (és a dir, a la caixa se li ha donat una posició en el fluxe normal, i després se l'ha desplaçada d'aquesta posició d'acord amb aquestes propietats top, left, right i bottom).
Propietat letter-spacing
Tema associat: Text.

Valor:normal | <longitut> | inherit
Valor inicial:normal
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica el comportament de l'espaiat entre els caràcters del text.

Els valors tenen els següents significats:

normal
L'espaiat és l'espaiat normal per a la font actual. Aquest valor permet que l'agent d'usuari alteri l'espai entre caràcters a fi de justificar el text.


Aquest valor indica l'espai inter-caràcter que hi ha d'haver a més a més de l'espai per defecte entre caràcters. Els valors poden ser negatius, però hi pot haver límits específics de la implementació. Els agents d'usuari no poden incrementar o decrementar posteriorment l'espai inter-caràcter a fi d'alinear el text.


Els algorismes d'espaiat són depenents de l'agent d'usuari. L'espaiat dels caràcters pot estar influenciat també per la justificació (veieu la propietat text-align).

Quan l'espai resultant entre dos caràcters no és el mateix que l'espai per defecte, els agents d'usuari no haurien d'utilitzar lligadures.

Els agents d'usuari conformats poden considerar el valor de la propietat letter-spacing com a 'normal'.
Ex.:
L'espai entre caràcters en els elements BLOCKQUOTE s'ha incrementat en '0.1em':
	BLOCKQUOTE { letter-spacing: 0.1em }


Ex.:
Aquí no es permet a l'agent d'usuari alterar l'espai inter-caràcter:
	BLOCKQUOTE { 
         letter-spacing: 0cm 
	}  /* El mateix que '0' */
Propietat line-height
Tema associat: Detalls del model de formatat visual.

Valor:normal | <número> | <longitut> | <percentatge> | inherit
Valor inicial:normal
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:sí, fan referència a la mida de la font del mateix element
Grups de mitjans:visuals

Si està inicialitzada en un element block-level el contingut del qual està composat per elements inline-level, aleshores aquesta propietat especifica l'alçada mínima de cada caixa inline generada.

Si està inicialitzada en un element inline, especifica l'alçada exacta de cada caixa generada per l'element. (Excepte per a elements inline reemplaçats, on l'alçada de la caixa ve donada per la propietat height.)

Els valors per a aquesta propietat tenen els següents significats:

normal
Li diu a l'agent d'usuari que fixi el valor computat a un valor "raonable" basant-se en la mida de la font de l'element. El valor té el mateix significat que <número>. Es recomana un valor computat per a 'normal' d'entre 1.0 i 1.2.


L'alçada de la caixa s'inicialitza a aquesta longitut. Els valors negatius no hi són permesos.


El valor computat de la propietat és aquest número multiplicat per la mida de la font de l'element. Els valors negatius no hi són permesos. No obstant, el número, no el valor computat, és heretat.


El valor computat de la propietat és aquest percentatge multiplicat per la mida computada de la font de l'element. Els valors negatius no hi són permesos.


Quan un element conté un text que es presenta en més d'una font, els agents d'usuari haurien de determinar el valor de line-height d'acord amb la mida de la font més gran.

Generalment, quan només hi ha un valor de line-height per a totes les caixes inline d'un paràgraf (i no hi ha cap imatge alta), això assegurarà que les línies base de les línies successives estiguin separades per una distància exactament igual al valor de line-height. Això és important quan s'han d'alinear columnes de text en diferents fonts, per exemple, en una taula.

Cal observar que els elements reemplaçats tenen una propietat font-size i una line-height fins i tot si no s'utilitzen directament per a determinar l'alçada de la caixa. La font-size s'utilitza, no obstant, per a definir les unitats 'em' i 'ex', i la line-height té un rol en la propietat vertical-align.
Ex.:
Aquestes tres regles tenen la mateixa alçada de línia resultant:
   DIV { line-height: 1.2; font-size: 10pt } /* número */
   DIV { line-height: 1.2em; font-size: 10pt } /* longitut */
   DIV { line-height: 120%; font-size: 10pt } /* percentatge */
Propietat list-style
Tema associat: Contingut generat, numeració automàtica i llistes.

Valor:[<list-style-type> || <list-style-position> || <list-style-image> ] | inherit
Valor inicial:no està definit per a les propietats drecera
S'aplica a:elements amb "display: list-item"
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Notació drecera per a fixar les tres propietats list-style-type, list-style-image i list-style-position en el mateix lloc del full d'estil.

Encara que els autors poden especificar la informació de list-style directament en els elements d'ítems de llista (per ex., LI en HTML), ho haurien de fer amb cura.
Ex.:
Les següents regles es veuen de manera similar però la primera declara un selector de descendent i la segona un (més específic) selector de fill:
   /* Qualsevol LI descendent d'un OL */
        OL.alpha LI   { list-style: lower-alpha } 

   /* Qualsevol LI fill d'un OL */
        OL.alpha > LI { list-style: lower-alpha } 


Ex.:
Els autors que utilitzin només el selector de descendent pot ser que no assoleixin els resultats desitjats. Considereu les següents regles:
<HTML>
  <HEAD>
    <TITLE>ALARMA: Resultats inesperats deguts a l'efecte cascada</TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>nivell 1
      <UL>
         <LI>nivell 2
      </UL>
    </OL>
  </BODY>
</HTML>
La presentació desitjada tindria ítems de nivell 1 amb les etiquetes 'lower-alpha' i els ítems de nivell 2 amb etiquetes 'disc'. No obstant, l'ordre de cascada causarà que la primera regla d'estil (la qual inclou informació específica de classe) enmascari la segona. Les següents regles resolen el problema tot utilitzant un selector de fill en el seu lloc:
        OL.alpha > LI  { list-style: lower-alpha }
        UL LI   { list-style: disc }


Ex.:
Una altra solució seria especificar la informació de list-style només en els elements de tipus de llista:
        OL.alpha  { list-style: lower-alpha }
        UL        { list-style: disc }
L'herència transferirà els valors de list-style dels elements OL i UL als elements LI. Aquesta és la manera recomanada per a especificar informació d'estil de llista.


Ex.:
Un valor d'una URI es pot combinar amb qualsevol altre valor, com en:
	UL { list-style: url("http://png.com/ellipse.png") disc }
on el "disc" s'utilitzarà quan la imatge no es trobi disponible.


Ex.:
Un valor de 'none' per a list-style assigna les dues propietats list-style-type i list-style-image a 'none':
	UL { list-style: none; }
el resultat és que no es visualitza cap marcador d'ítem de llista.
Propietat list-style-image
Tema associat: Contingut generat, numeració automàtica i llistes.

Valor:<uri> | none | inherit
Valor inicial:none
S'aplica a:elements amb "display: list-item"
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Assigna la imatge que s'utilitzarà com a marcador dels ítems d'una llista. Quan la imatge es trobi disponible reemplaçarà el marcador que ha estat fixat amb la propietat list-style-type. D'altra banda, si la imatge no es troba disponible el marcador serà el definit pel valor de la propietat list-style-type.

Els valors tenen els següents significats:

Designa la localització de la imatge.


none
No s'assigna cap imatge. S'utilitzarà el marcador definit pel valor de la propietat list-style-type.
Ex.:
Es fixa la imatge "ellipse.png" perquè faci de marcador al començament de cada ítem de llista:
	UL { list-style-image: url("http://png.com/ellipse.png") }
Propietat list-style-position
Tema associat: Contingut generat, numeració automàtica i llistes.

Valor:inside | outside | inherit
Valor inicial:outside
S'aplica a:elements amb "display: list-item"
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica la posició de la caixa del marcador respecte la caixa del bloc principal.

Els valors tenen els següents significats:

outside
La caixa del marcador es troba fora de la caixa del bloc principal. Nota. CSS1 no especificava la localització precisa de la caixa de marcador per raons de compatibilitat, CSS2 roman igualment ambigua. Per a un control més precís de les caixes de marcador, utilitzeu el nou mecanisme de marcadors de CSS2.


inside
La caixa de marcador és la primera caixa inline de la caixa de bloc principal, després de la qual es troba el contingut de l'element.
Ex.:
<HTML>
  <HEAD>
    <TITLE>Comparació de les posicions inside/outside</TITLE>
    <STYLE type="text/css">
      UL          { list-style: outside }
      UL.compacte { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>el primer ítem de llista va primer
      <LI>el segon ítem de llista va segon
    </UL>

    <UL class="compacte">
      <LI>el primer ítem de llista va primer
      <LI>el segon ítem de llista va segon
    </UL>
  </BODY>
</HTML>
Aquest codi HTML podria donar un resultat així:



(En la segona llista els costats esquerres de les caixes dels ítems de la llista no estan afectats per la situació dels marcadors.)

En text de dreta a esquerra, els marcadors estarien al costat dret de la caixa.
Propietat list-style-type
Tema associat: Contingut generat, numeració automàtica i llistes.

Valor:disc | circle | square | decimal | decimal-leading-zero | lower-roman
| upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha
| upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana
| katakana | hiragana-iroha | katakana-iroha | none | inherit
Valor inicial:disc
S'aplica a:elements amb "display: list-item"
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica l'aparença dels marcadors dels ítems d'una llista si list-style-image té el valor 'none' o si la imatge apuntada per la URI a list-style-image no pot ser visualitzada. Hi ha tres tipus de marcadors: glyphs (la presentació exacta depèn de l'agent d'usuari), sistemes de numeració i sistemes alfabètics. Cal observar que l'alineació dels marcadors (esquerra, dreta, central) depèn dels agents d'usuari. Nota. Les llistes numerades milloren l'accessibilitat del document fent que les llistes siguin més fàcils de navegar.

Els valors tenen els següents significats:

none
No s'especifica cap marcador.


Glyphs:

disc
En general es representa com una petita circumferència plena.


circle
En general es representa com una petita circumferència buida.


square
En general es representa com un petit quadrat ple.


Sistemes de numeració:

decimal
Números decimals, començant per 1.


decimal-leading-zero
Números decimals acompanyats de zeros inicials (per ex., 01, 02, 03, ..., 98, 99).


lower-roman
Números romans en minúscula (i, ii, iii, iv, v, etc.).


upper-roman
Números romans en majúscula (I, II, III, IV, V, etc.).


hebrew
Numeració hebrea tradicional.


georgian
Numeració georgiana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...).


armenian
Numeració armènia tradicional.


cjk-ideographic
Números ideogràfics simples.


hiragana
a, i, u, e, o, ka, ki, ...


katakana
A, I, U, E, O, KA, KI, ...


hiragana-iroha
i, ro, ha, ni, ho, he, to, ...


katakana-iroha
I, RO, HA, NI, HO, HE, TO, ...


Sistemes alfabètics:

lower-latin o lower-alpha
Lletres ascii en minúscula (a, b, c, ..., z).


upper-latin o upper-alpha
Lletres ascii en majúscula (A, B, C, ..., Z).


lower-greek
Les lletres gregues (alfa, beta, gamma, ...) en minúscules.


Un agent d'usuari que no reconegui un sistema de numeració hauria d'utilitzar 'decimal'.

Nota. No s'especifica el mecanisme exacte de cada sistema de numeració (per ex., com es calculen els números romans). Una nota futura del W3C és possible que proporcioni més clarificacions.

L'especificació de CSS2 (i, per tant, aquest manual) no defineix quà passa quan els sistemes arriben al final de l'alfabet. Per exemple, després de 26 ítems de llista, la presentació 'lower-latin' està indefinida. Per tant, per a llistes llargues, es recomana que els autors especifiquin números. Nota. Futures versions de CSS poden proveir mecanismes més complets per a estils de numeració internacionals.
Ex.:
Per exemple, el següent exemple il·lustra com els marcadors poden utilitzar-se per a afegir punts després de cada ítem de la llista numerada. Aquest programa HTML i full d'estil:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Creació d'una llista amb marcadors</TITLE>
     <STYLE type="text/css">
          LI:before { 
              display: marker;
              content: counter(elmeucomptador, lower-roman) ".";
              counter-increment: elmeucomptador;
          }   
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Aquest és el primer ítem.
      <LI> Aquest és el segon ítem.
      <LI> Aquest és el tercer ítem.
    </OL>
  </BODY>
</HTML>

haurien de produir una cosa semblant a aquesta:
      i. Aquest és el primer ítem.
     ii. Aquest és el segon ítem.
    iii. Aquest és el tercer ítem.
Propietat margin
Tema associat: Model de caixa.

Valor:<amplada-marge>{1,4} | inherit
Valor inicial:no està definit per a les propietats drecera
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'amplada del bloc contenidor
Grups de mitjans:visuals

Propietat drecera per a fixar margin-top, margin-right, margin-left i margin-bottom en el mateix lloc dins un full d'estil.

Aquesta propietat fa referència al tipus de valor <amplada-marge> el qual pot prendre un dels següents valors:

<amplada-marge>


Especifica una amplada fixa.


El percentatge es calcula respecte l'amplada del bloc contenidor de la caixa generada. Això és cert per a margin-top i margin-bottom excepte en el context de la pàgina, on els percentatges fan referència a l'alçada de la caixa de pàgina.


auto
Veieu l'apartat sobre calcular amplades i marges per veure'n el comportament.


En ser una propietat drecera per a quatre subpropietats se li poden especificar 1, 2, 3 o 4 valors, els quals s'apliquen de la manera explicada en la següent taula:

Núm. de valors especificatsMarges als quals s’apliquen
  superiordretinferioresquerre
11r1r1r1r
21r2n1r2n
31r2n3r2n
41r2n3r4rt
Ex.:
Exemples de declaracions d'amplades de marge:
   H1 {margin: 2em} /* Tots els marges a '2em' */

   /* superior i inferior: 15px; dret i esquerre: 2px }
   P { margin: 15px 2px } 
La segona regla és equivalent a la concatenació de les quatre següents:
   P { margin-top: 15px; }
   P { margin-bottom: 15px; }
   P { margin-right: 2px; }
   P { margin-left: 2px; }
Propietats margin-bottom, margin-left, margin-right i margin-top
Tema associat: Model de caixa.

Valor:<amplada-marge> | inherit
Valor inicial:0
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'amplada del bloc contenidor
Grups de mitjans:visuals

Especifiquen l'amplada de l'àrea de marge d'una caixa pels costats inferior, esquerre, dret i superior, respectivament.

Aquestes propietats fan referència al tipus de valor <amplada-marge> el qual pot prendre un dels següents valors:

<amplada-marge>


Especifica una amplada fixa.


El percentatge es calcula respecte l'amplada del bloc contenidor de la caixa generada. Això és cert per a margin-top i margin-bottom excepte en el context de la pàgina, on els percentatges fan referència a l'alçada de la caixa de pàgina.


auto
Veieu l'apartat sobre calcular amplades i marges per veure'n el comportament.


Els valors negatius per a les propietats de marge són permesos, però hi pot haver límits específics de la implementació.
Ex.:
El marge superior serà de '6em' pels elements H1 (els marges sempre són transparents, per tant el resultat serà que el text dels elements H1 es trobarà desplaçat cap abaix respecte la caixa de pàgina):
	H1 { margin-top : 6em }
[Resultat]
Propietat marker-offset
Tema associat: Contingut generat, numeració automàtica i llistes.

Valor:<longitut> | auto | inherit
Valor inicial:auto
S'aplica a:elements amb "display: auto"
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica la distància que hi ha dels límits de les vores més properes d'una caixa de marcador a la seva caixa principal associada.

Els valors tenen els següents significats:

Distància especificada per l'usuari. Les longituts poden ser negatives, però hi poden haver límits específics de cada implementació.


auto
L'agent d'usuari tria la distància.
Ex.:
Aquí s'il·lustra com els marcadors poden utilitzar-se per a afegir punts després de cada ítem d'una llista numerada.
Aquest programa HTML i full d'estil:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>Exemple de marcadors</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /* Crea espai pels comptadors */
           LI:before { 
               display: marker;
               marker-offset: 3em;
               content: counter(elmeucomptador, lower-roman) ".";
               counter-increment: elmeucomptador;
           }   
      </STYLE>
   </HEAD>
   <BODY>
     <P> Això és un llarg paràgraf precedent ...
     <OL>
       <LI> Aquest és el primer ítem.
       <LI> Aquest és el segon ítem.
       <LI> Aquest és el tercer ítem.
     </OL>
     <P> Això és un llarg paràgraf conseqüent ...
   </BODY>
 </HTML>
hauria de produir una cosa semblant a :
        Això és un llarg paràgraf
        precedent ...
      
   i.   Aquest és el primer ítem.
  ii.   Aquest és el segon ítem.
 iii.   Aquest és el tercer ítem.

        Això és un llarg paràgraf
        conseqüent ...
Propietat marks
Tema associat: Mitjans paginats.

Valor:[ crop || cross ] | none | inherit
Valor inicial:none
S'aplica a:context de la pàgina
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals, paginats

En la impressió d'alta qualitat sovint s'afegeixen marques fora de la caixa de pàgina. La propietat marks especifica quines marques, les d'intersecció, les de retall o ambdues, s'haurien de presentar just a fora del límit de la caixa de pàgina.

Les marques només són visibles en caixes de pàgina absolutes (veieu la propietat size). En les caixes de pàgina relatives la caixa de pàgina s'alinearà amb l'objectiu i les marques es trobaran fora de l'àrea d'impressió.

La mida, l'estil i la posició de les marques d'intersecció depenen de l'agent d'usuari.

Els valors tenen els següents significats:

none
No es presenta cap de les marques.


crop
Marques de retall. Presenta les marques que indiquen on s'hauria de tallar la pàgina.


cross
Marques d'intersecció (també conegudes com a marques de registre). Presenta les marques que s'utilitzen per a alinear els fulls.
Ex.:
En el següent exemple s'imprimiran les marques de retall de la pàgina:

	@page { 
           size: 12cm;
           marks: crop; 
	}
Propietat max-height
Tema associat: Detalls del model de formatat visual.

Valor:<longitut> | <percentatge> | none | inherit
Valor inicial:none
S'aplica a:tots els elements excepte els elements inline no reemplaçats i els elements de taula
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'alçada del bloc contenidor
Grups de mitjans:visuals

Aquesta propietat i min-height permeten als autors restringir les alçades de les caixes a un cert rang; max-height restringeix per una alçada màxima.

Els diferents valors tenen els següents significats:

Especifica una alçada calculada màxima fixa.


Especifica un percentatge per a determinar el valor calculat. El percentatge es calcula respecte l’alçada del bloc contenidor de la caixa generada. Si l’alçada del bloc contenidor no està especificada explícitament (és a dir, depèn de l’alçada del contingut), el valor del percentatge s’interpreta com a ‘auto’.


none
No hi ha límit en l’alçada de la caixa.


Consulteu l'apartat sobre les alçades mínima i màxima del tema "Detalls del model de formatat visual" per veure com aquesta propietat, juntament amb min-height, influencia en el valor calculat de la propietat height.
Propietat max-width
Tema associat: Detalls del model de formatat visual.

Valor:<longitut> | <percentatge> | none | inherit
Valor inicial:none
S'aplica a:tots els elements excepte els elements inline no reemplaçats i els elements de taula
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'amplada del bloc contenidor
Grups de mitjans:visuals

Aquesta propietat i min-width permeten als autors restringir les amplades de les caixes a un cert rang; max-width restringeix a una amplada màxima.

Els valors tenen els següents significats:

Especifica una amplada computada màxima fixa.


Especifica un percentatge per a determinar el valor computat. El percentatge es calcula respecte l’amplada del bloc contenidor de la caixa generada.


none
No hi ha límit en l'amplada de la caixa.


Consulteu l'apartat sobre les amplades mínima i màxima del tema "Detalls del model de formatat visual" per veure com aquesta propietat, juntament amb min-width, influencia en el valor calculat de la propietat width.
Propietat min-height
Tema associat: Detalls del model de formatat visual.

Valor:<longitut> | <percentatge> | inherit
Valor inicial:0
S'aplica a:tots els elements excepte els elements inline no reemplaçats i els elements de taula
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'alçada del bloc contenidor
Grups de mitjans:visuals

Aquesta propietat i max-height permeten als autors restringir les alçades de les caixes a un cert rang; min-height restringeix per una alçada mínima.

Els diferents valors tenen els següents significats:

Especifica una alçada calculada mínima fixa.


Especifica un percentatge per a determinar el valor calculat. El percentatge es calcula respecte l’alçada del bloc contenidor de la caixa generada. Si l’alçada del bloc contenidor no està especificada explícitament (és a dir, depèn de l’alçada del contingut), el valor del percentatge s’interpreta com a ‘auto’.


Consulteu l'apartat sobre les alçades mínima i màxima del tema "Detalls del model de formatat visual" per veure com aquesta propietat, juntament amb max-height, influencia en el valor calculat de la propietat height.
Propietat min-width
Tema associat: Detalls del model de formatat visual.

Valor:<longitut> | <percentatge> | inherit
Valor inicial:depenent de l'agent d'usuari
S'aplica a:tots els elements excepte els elements inline no reemplaçats i els elements de taula
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'amplada del bloc contenidor
Grups de mitjans:visuals

Aquesta propietat i max-width permeten als autors restringir les amplades de les caixes a un cert rang; min-width restringeix a una amplada mínima.

Els valors tenen els següents significats:

Especifica una amplada computada mínima fixa.


Especifica un percentatge per a determinar el valor computat. El percentatge es calcula respecte l’amplada del bloc contenidor de la caixa generada.


Consulteu l'apartat sobre les amplades mínima i màxima del tema "Detalls del model de formatat visual" per veure com aquesta propietat juntament amb max-width influencien en el valor calculat de la propietat width.

L'agent d'usuari és possible que defineixi un valor mínim no negatiu per a la propietat min-width, el qual pot variar d'element en element i fins i tot dependre d'altres propietats. Si min-width està per sota d'aquest límit, tant si és perquè va ser fixada explícitament o bé perquè era 'auto' i les regles de l'apartat sobre les amplades mínima i màxima la fan massa petita, l'agent d'usuari pot utilitzar el valor mínim com a valor computat.
Propietat orphans
Tema associat: Mitjans paginats.

Valor:<enter> | inherit
Valor inicial:2
S'aplica a:elements block-level
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals, paginats

Especifica el mínim nombre de línies d'un paràgraf que s'han de deixar al capdavall de la pàgina. Per més informació consulteu els apartats sobre els trencaments de pàgina dins d'elements.
Ex.:
La següent regla aplica la propietat orphans a tots els elements amb 'class="inici"':
	.inici { orphans: 7 }  //7 línies
Propietat outline
Tema associat: Interfície d'usuari.

Valor:[ <outline-color> || <outline-style> || <outline-width> ] | inherit
Valor inicial:veure propietats individuals
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals, interactius

Propietat drecera per a definir les propietats outline-style, outline-width, i outline-color en el mateix lloc d'un full d'estil.

De vegades els autors de fulls d'estil poden desitjar crear contorns al voltant d'objectes visuals tals com botons, camps actius de formularis, mapes d'imatges, etc., per a fer l'efecte que sobresurten de l'entorn. Els contorns CSS2 difereixen de les vores de les següents maneres:

  1. Els contorns no ocupen espai.
  2. Els contorns poden no ser rectangulars.

Les propietats de contorn controlen l'estil d'aquests contorns "dinàmics". Cal remarcar que, a diferència de les vores, el contorn és el mateix en tots els costats. El contorn es dibuixa començant just per fora de la vora del límit.
Ex.:
El contorn dels elements BUTTON serà blau, format per una línia contínua i tindrà 10 píxels d'amplada:
	BUTTON { outline: blue solid 10px }
Propietat outline-color
Tema associat: Interfície d'usuari.

Valor:<color> | invert | inherit
Valor inicial:invert
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals, interactius

Especifica el color del contorn d'un element.

Els valors tenen els següents significats:

El color desitjat pel contorn.


invert
Duu a terme una inversió de color sobre els píxels de la pantalla. Aquest és un truc comú per a assegurar que la vora del focus és visible, independentment de quin sigui el color del fons.
Ex.:
El color del contorn dels elements P serà l'invers del color del fons (vermell):
	P {
	   background-color: red; 
	   outline-color: invert;
	}
Propietat outline-style
Tema associat: Interfície d'usuari.

Valor:<estil-vora> | inherit
Valor inicial:none
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals, interactius

Especifica l'estil del contorn d'un element.

Aquesta propietat pren els mateixos valors que les propietats d'estil de vora, excepte que el valor 'hidden' no és un estil legal de contorn.
Ex.:
El contorn dels elements BUTTON estarà format per una línia discontínua:
	P { outline-style: dashed; }
Propietat outline-width
Tema associat: Interfície d'usuari.

Valor:<amplada-vora> | inherit
Valor inicial:medium
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals, interactius

Especifica l'amplada del contorn d'un element.

Aquesta propietat pren els mateixos valors que les propietats d'amplada de vora.
Ex.:
El contorn dels elements P serà de 3 píxels d'amplada:
	P { outline-width: 3px; }
Propietat overflow
Tema associat: Efectes visuals.

Valor:visible | hidden | scroll | auto | inherit
Valor inicial:visible
S'aplica a:elements block-level i reemplaçats
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica si el contingut d'un element block-level ha de ser retallat quan es desborda de la caixa de l'element (la qual actua com a bloc contenidor per al contingut).

Els valors tenen els següents significats:

visible
Indica que el contingut no és retallat, és a dir, que pot presentar-se fora de la caixa de bloc.


hidden
Indica que el contingut és retallat i que no s'ha de proporcionar cap mecanisme d'scroll per a veure el contingut de fora de la regió de retall; els usuaris no tindran accés al contingut retallat. La mida i forma de la regió de retall s'especifica amb la propietat clip.


scroll
Indica que el contingut és retallat i que si l'agent d'usuari utilitza un mecanisme d'scroll que sigui visible en la pantalla (com una barra d'scroll o algun altre) el mecanisme hauria de visualitzar-se per a una caixa, es retalli o no part del seu contingut. Això evita qualsevol problema amb les barres d'scroll que apareixen i desapareixen en un entorn dinàmic. Quan s'especifica aquest valor i el tipus mitjà objectiu és 'print' o 'projection', el contingut que es desborda s'ha d'imprimir.


auto
El comportament d'aquest valor és depenent de l'agent d'usuari, però hauria de provocar que es facilités un mecanisme d'scroll per a les caixes que pateixin desbordament.


Fins i tot si overflow està inicialitzada a 'visible' el contingut pot ser retallat a una finestra de document de l'agent d'usuari pel sistema operatiu.
Ex.:
Considerem el següent exemple de la cita d'un bloc (BLOCKQUOTE) que és massa gran pel seu bloc contenidor (establert per un DIV). El document font és:
   <DIV CLASS="ext">
      <BLOCKQUOTE>
         <P>Dos cossos s'atrauen amb una força directament 
         proporcional al producte de les seves masses i inversament
         porporcional al quadrat de la distància que els separa.
         <DIV class="atribuit-a">- Isaac Newton</DIV>
      </BLOCKQUOTE>
   </DIV>
el full d'estil que controla les mides i l'estil de les caixes generades:
	DIV.ext { 
                     width : 100px; height: 100px;
                     border: thin solid red;
        }

	BLOCKQUOTE { 
                     width : 125px; height : 100px;
                     margin-top: 50px; margin-left: 50px; 
                     border: thin dashed black
        }

	DIV.atribuit-a { text-align : right; }

com que el valor inicial de overflow és 'visible' aleshores el BLOCKQUOTE es formataria sense retallat, i quedaria una cosa semblant a això:



però si fixem overflow a 'hidden' per a l'element DIV, per altra banda, faria que el BLOCKQUOTE fos retallat pel bloc contenidor:



Ex.:
Ara veurem un exemple de l'ús d'aquesta propietat amb una imatge. Suposem que en la nostra pàgina hi volem tenir visible una imatge però només disposem d'un espai reduit, i la imatge és de tamany més gran. Per solucionar aquest problema farem que es visualitzin mecanismes d'scroll per tal de poder veure tota la imatge:
	<div style="overflow: scroll; width: 50px; height: 100px">
		<img src="img/imgoverflow.gif">
	</div>
Veieu el resultat que genera el vostre navegador (NS no implementa correctament la propietat overflow).
Propietat padding
Tema associat: Model de caixa.

Valor:<amplada-farciment>{1,4} | inherit
Valor inicial:no es defineix per a les propietats drecera
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'amplada del bloc contenidor
Grups de mitjans:visuals

Propietat drecera per a fixar padding-bottom, padding-left, padding-right i padding-top en el mateix lloc dins un full d'estil.

Aquesta propietat fa referència al tipus de valor <amplada-farciment>, el qual pot prendre un dels següents valors:

<amplada-farciment>

Especifica una amplada fixa.


El percentatge es calcula respecte l'amplada del bloc contenidor de la caixa generada, fins i tot per a padding-top i padding-bottom.


En ser una propietat drecera per a quatre subpropietats se li poden especificar 1, 2, 3 o 4 valors, els quals s'apliquen de la manera explicada en la següent taula:

Núm. de valors especificatsFarciments als quals s’apliquen
  superiordretinferioresquerre
11r1r1r1r
21r2n1r2n
31r2n3r2n
41r2n3r4rt


El color o la imatge de la superfície de l'àrea de farciment s'especifica via la propietat background.
Ex.:
Aquest fragment d'HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD> 
<TITLE>Test de marges</TITLE> 
<STYLE type="text/css"> 
	H1 { background: aqua;
           padding: 1em 3em 
	 }
</STYLE> 
</HEAD> 
<BODY> 
<H1>Text d'una caixa amb farciment superior
i inferior ('1em'), i farciment esquerre i dret ('3em').</H1>
</BODY>
</HTML>
hauria de donar com a resultat una cosa semblant a:



La unitat 'em' és relativa a la mida de la font de l'element: '1em' és igual a la mida de la font en ús.
Propietats padding-bottom, padding-left, padding-right i padding-top
Tema associat: Model de caixa.

Valor:<amplada-farciment> | inherit
Valor inicial:0
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'amplada del bloc contenidor
Grups de mitjans:visuals

Aquestes propietats especifiquen l'amplada de l'àrea de farciment d'una caixa pels seus costats inferior, esquerre, dret i superior, respectivament.

Cada una d'aquestes propietats fa referència al tipus de valor <amplada-farciment>, el qual pot prendre un dels següents valors:

<amplada-farciment>

Especifica una amplada fixa.


El percentatge es calcula respecte l'amplada del bloc contenidor de la caixa generada, fins i tot per a padding-top i padding-bottom.


A diferència de les propietats de marge, els valors per a les propietats de farciment no poden ser negatius.

El color o la imatge de la superfície de l'àrea de farciment s'especifica via la propietat background.
Ex.:
El farciment superior de les caixes generades pels elements BLOCKQUOTE serà de '0.3em':
	BLOCKQUOTE { padding-top: 0.3em }
Propietat page
Tema associat: Mitjans paginats.

Valor:<identificador> | auto
Valor inicial:auto
S'aplica a:elements block-level
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals, paginats

Es pot utilitzar per a especificar un tipus particular de pàgina on s'ha de visualitzar un element.

Aquesta propietat funciona tal com segueix: si una caixa de bloc amb contingut inline té una propietat page que és diferent de la de la precedent caixa de bloc amb contingut inline, aleshores s'insereixen un o dos trencaments de pàgina entre elles, i les caixes de després del trencament es presenten en una caixa d'una pàgina del tipus anomenat.
Ex.:
	@page rotada { size: landscape }
	TABLE { page: rotada; page-break-before: right }
Aquest exemple situarà totes les taules en una pàgina de la dreta i apaisada (anomenada "rotada").


Ex.:
Aquest full d'estil:
	@page estreta { size: 9cm 18cm }
	@page rotada { size: landscape }
	DIV { page: estreta }
      TABLE { page: rotada }
amb aquest document:
	<DIV>
	   <TABLE>...</TABLE>
	   <TABLE>...</TABLE>
	</DIV>
presenten les dues taules sobre pàgines apaisades (per suposat, si hi caben, es presenten sobre la mateixa pàgina), i el tipus de pàgina "estreta" no s'utilitza en absolut, a pesar de ser inicialitzat en el DIV.
Propietat page-break-after
Tema associat: Mitjans paginats.

Valor:auto | always | avoid | left | right | inherit
Valor inicial:auto
S'aplica a:elements block-level
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals, paginats

Aquesta propietat més les propietats page-break-before i page-break-inside indiquen on pot o on té obligació l'agent d'usuari de trencar les pàgines, i en quina pàgina (esquerra o dreta) ha de continuar el contingut subseqüent. Cada trencament de pàgina finalitza amb una presentació dins la caixa de la pàgina actual i fa que els troços restants de l'arbre del document es representin dins una nova caixa de pàgina.

La localització d'un trencament de pàgina potencial es troba típicament sota la influència de la propietat page-break-inside de l'element pare, la propietat page-break-after de l'element precedent i la propietat page-break-before de l'element següent. Quan aquestes propietats tenen valors diferents de 'auto', els valors 'always'. 'left' i 'right' prenen precedència per davant de 'avoid'. Els valors per a aquesta propietat tenen els següents significats:

auto
Ni es força ni es prohibeix un trencament de pàgina després de la caixa generada.


always
Sempre es força un trencament de pàgina després de la caixa generada.


avoid
Evita un trencament de pàgina després de la caixa generada.


left
Força un o dos trencaments de pàgina després de la caixa generada per tal que la propera pàgina sigui formatada com a pàgina de l'esquerra.


right
Força un o dos trencaments de pàgina després de la caixa generada per tal que la propera pàgina sigui formatada com a pàgina de la dreta.
Ex.:
El següent full d'estil forçarà que abans de cada element block-level amb 'class="np"' sempre hi hagi un trencament de pàgina (és a dir, sempre s'inicïi una pàgina nova):
	.np { page-break-after: always; }
Propietat page-break-before
Tema associat: Mitjans paginats.

Valor:auto | always | avoid | left | right | inherit
Valor inicial:auto
S'aplica a:elements block-level
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals, paginats

Aquesta propietat més les propietats page-break-after i page-break-inside indiquen on pot o on té obligació l'agent d'usuari de trencar les pàgines, i en quina pàgina (esquerra o dreta) ha de continuar el contingut subseqüent. Cada trencament de pàgina finalitza amb una presentació dins la caixa de la pàgina actual i fa que els troços restants de l'arbre del document es representin dins una nova caixa de pàgina.

La localització d'un trencament de pàgina potencial es troba típicament sota la influència de la propietat page-break-inside de l'element pare, la propietat page-break-after de l'element precedent i la propietat page-break-before de l'element següent. Quan aquestes propietats tenen valors diferents de 'auto', els valors 'always'. 'left' i 'right' prenen precedència per davant de 'avoid'. Els valors per a aquesta propietat tenen els següents significats:

auto
Ni es força ni es prohibeix un trencament de pàgina abans de la caixa generada.


always
Sempre es força un trencament de pàgina abans de la caixa generada.


avoid
Evita un trencament de pàgina abans de la caixa generada.


left
Força un o dos trencaments de pàgina abans de la caixa generada per tal que la propera pàgina sigui formatada com a pàgina de l'esquerra.


right
Força un o dos trencaments de pàgina abans de la caixa generada per tal que la propera pàgina sigui formatada com a pàgina de la dreta.
Propietat page-break-inside
Tema associat: Mitjans paginats.

Valor:avoid | auto | inherit
Valor inicial:auto
S'aplica a:elements block-level
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals, paginats

Aquesta propietat més les propietats page-break-before i page-break-after indiquen on pot o on té obligació l'agent d'usuari de trencar les pàgines, i en quina pàgina (esquerra o dreta) ha de continuar el contingut subseqüent. Cada trencament de pàgina finalitza amb una presentació dins la caixa de la pàgina actual i fa que els troços restants de l'arbre del document es representin dins una nova caixa de pàgina.

La localització d'un trencament de pàgina potencial es troba típicament sota la influència de la propietat page-break-inside de l'element pare, la propietat page-break-after de l'element precedent i la propietat page-break-before de l'element següent. Quan aquestes propietats tenen valors diferents de 'auto', els valors 'always'. 'left' i 'right' prenen precedència per davant de 'avoid'.

Els valors per a aquesta propietat tenen els següents significats:

auto
Ni es força ni es prohibeix un trencament de pàgina enmig de la caixa generada.


avoid
Evita un trencament de pàgina enmig de la caixa generada.
Propietat pause
Tema associat: Fulls d'estil audibles.

Valor:[[<temps> | <percentatge>]{1,2} ] | inherit
Valor inicial:depèn de l'agent d'usuari
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:veure pause-before i pause-after
Grups de mitjans:acústics

Propietat drecera per a fixar pause-before i pause-after en el mateix lloc dins un full d'estil. Si es dónen dos valors, el primer és per a pause-before i el segon és per a pause-after. Si només es dóna un valor, aquest s'aplica a ambdues propietats.

Els valors tenen els següents significats:

Expressa la pausa en unitats de temps absolutes (segons i milisegons).


Es refereix a la inversa del valor de la propietat speech-rate. Per exemple, si la freqüència de la parla és de 120 paraules per minut (és a dir, una paraula dura mig segon, o 500ms), aleshores una pause-before del 100% significa una pausa de 500ms i una pause-before del 20% significa 100ms.
Ex.:
pause-before: 20ms; pause-after: 20ms
	H1 { pause: 20ms }		
pause-before: 30ms; pause-after: 40ms
	H2 { pause: 30ms 40ms }
Propietats pause-after i pause-before
Tema associat: Fulls d'estil audibles.

Valor:<temps> | <percentatge> | inherit
Valor inicial:depèn de l'agent d'usuari
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:veure explicació
Grups de mitjans:acústics

Especifiquen una pausa que ha de ser observada abans (pause-before) o després (pause-after) que el contingut d'un element hagi estat recitat.

La pausa s'insereix entre el contingut de l'element i qualsevol contingut de cue-before o cue-after.

Els autors haurien d'utilitzar unitats relatives per a crear fulls d'estil audibles més robustos a fi d'evitar grans canvis en la freqüència de la parla.

Els valors tenen els següents significats:

Expressa la pausa en unitats de temps absolutes (segons i milisegons).


Es refereix a la inversa del valor de la propietat speech-rate. Per exemple, si la freqüència de la parla és de 120 paraules per minut (és a dir, una paraula dura mig segon, o 500ms), aleshores una pause-before del 100% significa una pausa de 500ms i una pause-before del 20% significa 100ms.
Ex.:
pause-before: 100%; pause-after: 10ms
	H3 { pause-after: 10ms; pause-before: 100% }
Propietat pitch
Tema associat: Fulls d'estil audibles.

Valor:<freqüència> | x-low | low | medium | high | x-high | inherit
Valor inicial:medium
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

Especifica el to de veu mitjà (una freqüència) de la veu que parla (veu que és emesa pel mitjà acústic). El to de veu mitjà d'una veu depèn de la família de veus. Per exemple, el to de veu mitjà per a una veu masculina estàndard es troba al voltant dels 120Hz, però per a una veu femenina es troba al voltant dels 210Hz.

Els valors tenen els següents significats:

Especifica el to de veu mitjà de la veu que parla en hertz (Hz).


x-low, low, medium, high, x-high
Aquests valors no corresponen a freqüències absolutes ja que depenen de la família de veus. Els agents d'usuari haurien de fer correspondre aquests valors a les freqüències apropiades basant-se en la família de veus i en l'entorn d'usuari. No obstant, els agents d'usuari han de fer correspondre aquests valors en ordre (és a dir, 'x-low' és una freqüència més baixa que 'low', etc.).


Propietat pitch-range
Tema associat: Fulls d'estil audibles.

Valor:<número> | inherit
Valor inicial:50
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

Especifica la variació en el to de veu mitjà. El to de veu (freqüència) que es percep d'una veu humana ve determinat per la freqüènica fonamental, i generalment té un valor de 120Hz per a una veu masculina i 210Hz per a una veu femenina. Els idiomes humans (languages) es parlen amb infleccions i tons de veu variables; aquestes variacions comuniquen un ènfasi i un significat addicionals. D'aquesta manera, una veu molt animada, és a dir, una veu que estigui molt infleccionada dibuixa un alt rang de to de veu. La propietat pitch-range especifica el rang dins el qual tenen lloc aquestes variacions, és a dir, quant pot arribar a variar la freqüència fonamental del to de veu mitjà.

Els valors tenen els següents significats:

Un valor entre '0' i '100'. Un rang de variació del to de veu de '0' produeix una veu plana, monòtona. Un rang de variació del to de veu de '50' produeix una inflecció normal. Els rangs de variació del to de veu més grans que '50' produeixen veus animades.
Propietat play-during
Tema associat: Fulls d'estil audibles.

Valor:<uri> mix? repeat? | auto | none | inherit
Valor inicial:auto
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:acústics

És similar a les propietats cue-before i cue-after. Especifica un so que ha de ser reproduit de fons mentre el contingut d'un element està sent recitat.

Els valors tenen els següents significats:
El so designat per aquesta URI és reproduit com a fons mentre el contingut de l'element és recitat.


mix
Quan es troba present, aquesta paraula clau significa que el so heretat de la propietat play-during de l'element pare continua sonant i que el so designat per la <uri> es mescla amb ell. Si 'mix' no es troba present, el so de fons de l'element reemplaça el del pare.


repeat
Quan es troba present, aquesta paraula clau significa que el so es repetirà si és massa curt com per a omplir la durada sencera de l'element. Si no s'hi troba present, el so es reprodueix només un cop i després s'atura. Això és similar a la propietat background-repeat. Si el so és massa llarg per a l'element, aquest s'interromp (es talla) un cop l'element ha estat recitat.


auto
El so de l'element pare continua reproduint-se (no és reiniciat, que hagués estat el cas si aquesta propietat hagués estat heretada).


none
Aquesta paraula clau significa que hi ha silenci. El so de l'element pare (si n'hi ha) se silencia durant l'element actual i continua sonant després de l'element actual.
Ex.:
/* Els violins sonen durant la lectura dels elements BLOCKQUOTE amb 'class="sad"' */
	BLOCKQUOTE.sad { play-during: url("violins.aiff") }
/* El so "harp.wav" sona mentre dura la lectura dels elements BLOCKQUOTE i Q i a més es mescla amb el so heretat de l'element pare */
	BLOCKQUOTE Q { play-during: url("harp.wav") mix }
/* Mentre duren els elements SPAN amb 'class="quiet"' hi haurà silenci */
	SPAN.quiet { play-during: none }
Propietat position
Tema associat: Model de formatat visual.

Valor:static | relative | absolute | fixed | inherit
Valor inicial:static
S'aplica a:tots els elements, però no al contingut generat
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Aquesta propietat, juntament amb la propietat float, determina quin dels algorismes CSS2 de posicionament s'utilitza per a calcular la posició d'una caixa.

Els valors d'aquesta propietat tenen els següents significats:

static
La caixa és una caixa normal, disposada d'acord amb el fluxe normal. Les propietats top, right, bottom i left no s'hi apliquen.


relative
La posició de la caixa es calcula d'acord amb el fluxe normal (això s'anomena "la posició en el fluxe normal"). Després, la caixa es desplaça relativament a la seva posició normal. Quan una caixa C està posicionada relativament, la posició de la següent caixa es calcula com si C no estigués desplaçada.


absolute
La posició de la caixa (i possiblement la mida) s'especifica amb les propietats left, right, top i bottom. Aquestes propietats especifiquen desplaçaments respecte el bloc contenidor de la caixa. Les caixes absolutament posicionades es treuen del fluxe normal. Això significa que no tenen cap impacte sobre la disposició dels germans posteriors. A més, encara que les caixes absolutament posicionades tinguin marges, no es col·lapsen amb cap altre marge.


fixed
La posició de la caixa es calcula d'acord amb el model de 'absolute', però a més, la caixa es fixa respecte alguna referència. En el cas dels mitjans continus la caixa es fixa respecte el viewport (i no es mou quan es fa scroll). En el cas dels mitjans paginats la caixa es fixa respecte la pàgina, inclús si aquesta pàgina es veu a través d'un viewport (en el cas d'una presentació preliminar, per exemple). Els autors poden desitjar especificar 'fixed' d'una manera depenent de mitjà.
Ex.:
Per il·lustrar els valors 'static', 'absolute' i 'relative' s'utilitzen quatre quadrats cada un d'un color diferent i s'anirà variant el valor de la propietat position en cada un dels següents exemples.

1) El següent full d'estil:
	.quadrat {
	   top: 0px;
	   width: 75px;
	   height: 75px;
	   font-size: 12px;
	   font-weight: bold;
	}

	#q1 {
	   position: absolute;
	   left: 0px;
	   background-color: yellow;
	   color: black;
	}

	#q2 {
	   position: absolute;
	   left: 125px;
	   background-color: fuchsia;
	   color: black;
	}

	#q3 {
	   position: absolute;
	   left: 250px;
	   background-color: red;
	   color: white;
	}

	#q4 {
	   position: absolute;
	   left: 375px;
	   background-color: blue;
	   color: white;
	}
combinat amb les següents definicions d'elements en el BODY:
	<DIV class="quadrat" id="q1">(0,0)</DIV>
	<DIV class="quadrat" id="q2">(125,0)</DIV>
	<DIV class="quadrat" id="q3">(250,0)</DIV>
	<DIV class="quadrat" id="q4">(375,0)</DIV>
haurien de presentar una disposició semblant a:



2) Ara, tots tindran 'position: relative'. En aquest subexemple s'afegeix un DIV (de 200px d'amplada) que contindrà els dos primers quadrats, a fi d'il·lustrar millor el comportament del valor 'relative'. El següent full d'estil:
	.quadrat {
	   top: 0px;
	   width: 75px;
	   height: 75px;
	   font-size: 12px;
	   font-weight: bold;
	}

	#q1 {
	   position: relative;
	   left: 0px;
	   background-color: yellow;
	   color: black;
	}

	#q2 {
	   position: relative;
	   left: 125px;
	   background-color: fuchsia;
	   color: black;
	}

	#q3 {
	   position: relative;
	   left: 250px;
	   background-color: red;
	   color: white;
	}

	#q4 {
	   position: relative;
	   left: 375px;
	   background-color: blue;
	   color: white;
	}
combinat amb les següents definicions d'elements en el BODY:
	<DIV style="margin-top: 50px; margin-left: 50px;
		    background-color: silver; width: 200px;">
	   <DIV class="quadrat" id="q1">(0,0)</DIV>
	   <DIV class="quadrat" id="q2">(125,0)</DIV>
	</DIV>	
	<DIV class="quadrat" id="q3">(250,0)</DIV>
	<DIV class="quadrat" id="q4">(375,0)</DIV>
haurien de presentar una disposició semblant a:



on el límit del bloc contenidor inicial (bc inicial) depèn de l'agent d'usuari.

3) I ara, tots els quadrats tenen 'position: static': si agafem el full d'estil anterior (canviant 'top' i 'left' per 'margin-top' i 'margin-left', respectivament, ja que 'static' no accepta les propietats top, right, left i bottom) i les declaracions de dins del BODY anterior, el resultat generat serà el mateix que a 2.


Ex.:
Un autor pot voler que una caixa (en aquest cas, la caixa de l'element H1 amb 'id = "primera"') romangui al capdamunt del viewport en una pantalla, però no al capdamunt de cada pàgina impresa. Les dues especificacions poden separar-se utilitzant una regla @media, així:
	@media screen { 
	   H1#primera { position: fixed } 
	}
	@media print { 
	   H1#primera { position: static }
	}
Propietat quotes
Tema associat: Contingut generat, numeració automàtica i llistes.

Valor:[<cadena> <cadena>]+ | none | inherit
Valor inicial:depèn de l'agent d'usuari
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica les cometes (o signes de cita) per a qualsevol nombre de cites inserides.

Els valors tenen els següents significats:

none
Els valors 'open-quote' i 'close-quote' de la propietat content no produeixen cap signe de cita.


Llista de parelles de signes de cita (d'obertura i de tancament) d'on es treuen els valors per als valors 'open-quote' i 'close-quote' de la propietat content. La primera parella (començant per l'esquerra) representa el nivell més exterior de cita, la segona parella representa el primer nivell d'inserció, etc. L'agent d'usuari ha d'aplicar la parella de cometes més apropiada d'acord amb cada nivell d'inserció.
Ex.:
L'aplicació del següent full d'estil:

/* Especifica parelles de cometes per a dos nivells en dues llengües (idiomes) diferents, */
   :lang(en) { quotes: '"' '"' "'" "'" }
   :lang(no) { quotes: "«" "»" "<" ">" }
/* insereix cometes abans i després del contingut de l'element Q */
   Q:before { content: open-quote }
   Q:after{ content: close-quote }
al següent fragment HTML:
   <HTML lang="en">
   <HEAD>
   <TITLE>Cometes</TITLE>
   </HEAD>
   <BODY>
      <P><Q>Poseu-me entre cometes!</Q>
   </BODY>
   </HTML>
permetria que un agent d'usuari produïs:
	"Poseu-me entre cometes!"
mentre que aquest fragment d'HTML:
   <HTML lang="no">
   <HEAD>
   <TITLE>Cometes</TITLE>
   </HEAD>
   <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan
   	 på kaia</Q> blir deklamert.</Q>
   </BODY>
   </HTML>
produïria:
	«Trøndere gråter når <Vinsjan på kaia> blir deklamert.»

Nota. Encara que les marques de cita especificades per quotes en els exemples previs es troben convenientment situades en el teclat dels ordinadors, una tipografia d'alta qualitat requerirà diferents caràcters de la ISO 10646. Consulteu en el tema sobre el contingut generat la taula informativa que llista alguns dels caràcters de marques de cita de la ISO 10646.
Propietat richness
Tema associat: Fulls d'estil audibles.

Valor:<número> | inherit
Valor inicial:50
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

Especifica la riquesa, o brillantor, de la veu que es produeix. Una veu rica se sentirà bé en una habitació gran, una veu suau no. (El terme "suau" fa referència a com es veu la forma de la funció d'ona quan es dibuixa.)

Els valors tenen els següents significats:

Un valor entre '0' i '100'. Com més alt sigui el valor més se sentirà la veu. Un valor més baix produirà una veu suau i dolça.
Propietat right
Tema associat: Model de formatat visual.

Valor:<longitut> | <percentatge> | auto | inherit
Valor inicial:auto
S'aplica a:elements posicionats
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'amplada del bloc contenidor
Grups de mitjans:visuals

Aquesta propietat, juntament amb top, left i bottom, disposa les caixes posicionades generades per elements posicionats (un element es diu que està posicionat si la seva propietat position té un valor diferent de 'static'). right especifica a quina distància a l'esquerra del límit dret del bloc contenidor d'una caixa es troba el límit del marge dret de la caixa.

Els valors tenen els següents significats:

El desplaçament és una distància fixa des del límit de referència.


El desplaçament és un percentatge de l'amplada del bloc contenidor. Si l'alçada del bloc contenidor no està especificada explícitament (és a dir, depèn de l'alçada del contingut) el valor percentual s'interpreta com 'auto'.


auto
L'efecte d'aquest valor depèn de quines de les propietats relacionades (top, left, bottom) també tenen aquest valor. Veieu els apartats sobre l'amplada i l'alçada dels elements block-level absolutament posicionats, per més detalls.


Per a les caixes posicionades absolutament els desplaçaments són respecte el bloc contenidor de la caixa. Per a les caixes posicionades relativament els desplaçaments són respecte els límits exteriors de la caixa en sí (és a dir, a la caixa se li ha donat una posició en el fluxe normal, i després se l'ha desplaçada d'aquesta posició d'acord amb aquestes propietats top, left, right i bottom).
Propietat size
Tema associat: Mitjans paginats.

Valor:<longitut>{1,2} | auto | portrait | landscape | inherit
Valor inicial:auto
S'aplica a:context de la pàgina
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals, paginats

Especifica la mida i orientació de la caixa de la pàgina.

La mida de la caixa d'una pàgina pot ser "absoluta" (mida fixa) o bé "relativa" (escalable, és a dir, s'ajusta a les mides de full disponibles). Les caixes de pàgina relatives permeten que els agents d'usuari escalin un document i facin un ús òptim de la mida de l'objectiu.

Els valors tenen els següents significats:

Mida absoluta de la caixa de pàgina.


auto
A la caixa de pàgina se li assignarà la mida i orientació del full objectiu.


landscape
Invalida la orientació de l'objectiu. La caixa de pàgina és de la mateixa mida que l'objectiu, i els costats més llargs són horitzontals.


portrait
Invalida la orientació de l'objectiu. La caixa de pàgina és de la mateixa mida que l'objectiu, i els costats més curts són horitzontals.
Ex.:
	@page {
           size: auto;   /* auto és el valor inicial */
           margin: 10%;
	}
Els límits més externs de la caixa de pàgina s'alinearan amb l'objectiu. El valor percentual de la propietat margin és relatiu a la mida de l'objectiu, per tant, si les dimensions del full objectiu són 21.0cm x 29.7cm (és a dir, A4), els marges són de 2.10cm i de 2.97cm.


Ex.:
	@page {
           size: 8.5in 11in;   /* amplada i alçada */
	}
Aquí es fixa l'amplada de la caixa de pàgina per a ser de 8.5in i l'alçada per a ser de 11in. La caixa de pàgina d'aquest exemple requereix una mida de full objectiu de 8.5x11in o més gran.
Propietat speak
Tema associat: Fulls d'estil audibles.

Valor:normal | none | spell-out | inherit
Valor inicial:normal
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

Especifica si el text es presentarà acústicament i, si és així, de quina manera.

Cal observar la diferència entre un element la propietat volume del qual té un valor de 'silent' i un element la propietat speak del qual té el valor 'none'. El primer pren el mateix temps que si l'element hagués estat recitat (incloent-hi qualsevol pausa d'abans o de després de l'element), però no es genera cap so. El segon no requereix cap intèrval de temps i no es presenta (encara que els seus descendents sí que poden ser presentats).

Els valors tenen els següents significats:

none
Suprimeix el presentació acústica i per tant l'element no requereix cap temps per a ser presentat. Cal observar, no obstant, que els descendents poden sobreescriure aquest valor i ser recitats. (Per a assegurar-se que es suprimeix la presentació d'un element i dels seus descendents cal utilitzar la propietat display.)


normal
Utilitza unes regles de pronunciació depenents de la llengua (idioma) per a presentar un element i els seus fills.


spell-out
Deletreja el text (és útil pels acrònims i les abreviacions).
Propietat speak-header
Temes associats: Taules, Fulls d'estil audibles.

Valor:once | always | inherit
Valor inicial:once
S'aplica a:elements amb informació de capçalera d'una taula
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

En una presentació acústica, aquesta propietat especifica si les capçaleres de les taules es reciten abans de cada cel·la, o només abans d'una cel·la quan aquella cel·la està associada amb una capçalera diferent que la cel·la prèvia.

Quan una taula és recitada per un generador de parla, la relació entre les cel·les de dades i les de capçalera ha de ser expressada d'una manera diferent que amb l'alineació vertical i horitzontal. Alguns navegadors de parla poden permetre que un usuari es mogui en l'espai bidimensional, i així donar-li la oportunitat de projectar les relacions representades espaialment. Quan això no sigui possible, el full d'estil ha d'especificar en quins punts són recitades les capçaleres.

Els valors tenen els següents significats:

once
La capçalera és recitada una vegada, abans d'una sèrie de cel·les.


always
La capçalera és recitada abans de cada cel·la pertinent.
Ex.:
Aquesta regla farà que les capçaleres d'una taula es recitin cada vegada que una cel·la estigui associada a una capçalera diferent que la cel·la prèvia:
	TH { speak-header: always; }
Propietat speak-numeral
Tema associat: Fulls d'estil audibles.

Valor:digits | continuous | inherit
Valor inicial:continuous
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

En una presentació acústica aquesta propietat controla com es reciten els valors numèrics.

Els valors tenen els següents significats:

digits
Els valors numèrics es reciten com a dígits individuals. Així, "237" es recitarà "Dos Tres Set".


continuous
Els valors numèrics es reciten com a un número sencer. Així, "237" es recitarà "Dos-cents trenta-set".
Propietat speak-punctuation
Tema associat: Fulls d'estil audibles.

Valor:code | none | inherit
Valor inicial:none
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

En una presentació acústica, aquesta propietat especifica com es recita la puntuació.

Els valors tenen els següents significats:

code
La puntuació com punts i comes, comes, claus, etc., s'han de dir literalment.


none
La puntuació no ha de dir-se, sinó que s'ha de recitar naturalment com a diferents pauses.
Propietat speech-rate
Tema associat: Fulls d'estil audibles.

Valor:<número> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit
Valor inicial:medium
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

Especifica la freqüència de la parla. Cal observar que es permeten valors de paraules clau tant absolutes com relatives (compareu amb font-size).

Especifica la freqüència de parla en paraules per minut, una quantitat que varia un tant per cada llengua (idioma) però que així i tot està àmpliament suportada pels sintetizadors de veu.


x-slow
El mateix que 80 paraules per minut.


slow
El mateix que 120 paraules per minut.


medium
El mateix que 180 - 200 paraules per minut.


fast
El mateix que 300 paraules per minut.


x-fast
El mateix que 500 paraules per minut.


faster
Afegeix 40 paraules per minut a la freqüència actual de parla.


slower
Substrau 40 paraules per minut de la freqüència actual de parla.


Els noms de les veus específiques poden anar entre cometes, però han d'anar entre cometes si alguna de les paraules que conformen el nom no segueix les regles sintàctiques dels identificadors. Es recomana, també, que que es posin entre cometes els noms de veus específiques que consisteixen en més d'una paraula. Si s'ometen les cometes, tots els caràcters d'espai blanc que hi hagi abans i després de la família de veus seran ignorats i qualsevol seqüència d'espais blancs dins del nom de la família de veus serà convertida a un sol espai.
Ex.:
Aquestes dues regles són equivalents, i les dues fan que el contingut dels elements H1 es reciti a una freqüència de parla de 120 paraules per minut:
	H1 { speech-rate: slow; }

	H1 { speech-rate: 120; }
Propietat stress
Tema associat: Fulls d'estil audibles.

Valor:<número> | inherit
Valor inicial:50
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

Especifica l'alçada dels "pics locals" en el contorn d'entonació de la veu. Per exemple, l'anglès és una llengua estressada, i a diferents parts d'una frase se'ls assigna un estrès primari, secundari o terciari. El valor de stress controla la quantitat d'inflecció que resulta d'aquests marcadors d'estrès. Aquesta propietat complementa la propietat pitch-range i és expressa per explotar el potencial dels displays auditius més avançats.

Els valors tenen els següents significats:

Un valor entre '0' i '100'. El significat dels diferents valors depèn de la llengua en que s'està parlant. Per exemple, un nivell '50' per a una veu femenina que parla un anglès estàndard (freqüència mitjana = 122Hz) amb entonació i ènfasi normals, tindria un significat diferent del '50' per a una veu italiana.
Propietat table-layout
Tema associat: Taules.

Valor:auto | fixed | inherit
Valor inicial:auto
S'aplica a:elements 'table' i 'inline-table'
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Controla l'algorisme utilitzat per a presentar les cel·les, les files i les columnes d'una taula.

Els valors tenen els següents significats:

fixed
Utilitza l'algorisme de disseny fixe de taules.


auto
Utilitza qualsevol algorisme de disseny automàtic de taules.


Propietat text-align
Tema associat: Text.

Valor:left | right | center | justify | <cadena> | inherit
Valor inicial:depèn de l'agent d'usuari i del sentit de l'escriptura
S'aplica a:elements block-level
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Descriu com s'alinea el contingut inline d'un bloc.

Els valors tenen els següents significats:

left, right, center i justify
Alineen el text a l'esquerra, a la dreta, al centre o bé el justifiquen doblement, respectivament.


Especifica una cadena respecte la qual s'alinearan les cel·les d'una columna d'una taula. Veieu l'apartat "Alineació horitzontal en una columna" del tema "Taules" per a més detalls i exemples. Aquest valor s'aplica només a les cel·les de les taules. Si s'aplica a altres elements es tractarà com 'left' o 'right', depenent de si la direction és 'ltr' o 'rtl', respectivament.


Un bloc de text és una pila de caixes de línia. En el cas de 'left', 'right' i 'center', aquesta propietat especifica com les caixes inline dins de cada caixa de línia s'alineen respecte els costats esquerre i dret de la caixa de línia; l'alineació no és respecte el viewport. En el cas de 'justify', l'agent d'usuari pot allargar i escurçar les caixes inline a més d'ajustar les seves posicions. (Veieu també letter-spacing i word-spacing.)
Ex.:
En aquest exemple cal observar que text-align és heretada, tots els elements block-level de dins de l'element DIV amb "class=center" tindran el seu contingut inline centrat:
	DIV.center { text-align: center }

Nota. L'algorisme real de justificació utilitzat és depenent de l'agent d'usuari i de l'idioma escrit. Els agents d'usuari conformats és possible que interpretin el valor 'justify' com a 'left' o 'right', depenent de si el sentit per defecte de l'escriptura és d'esquerra a dreta o bé de dreta a esquerra, respectivament.
Propietat text-decoration
Tema associat: Text.

Valor:none | [ underline || overline || line-through || blink ] | inherit
Valor inicial:none
S'aplica a:tots els elements
S'hereta?:no (veure explicació)
Admet valors percentuals?:no
Grups de mitjans:visuals

Descriu les decoracions que s'afegeixen al text d'un element. Si la propietat s'especifica per a un element block-level afecta tots els descendents inline-level de l'element. Si s'especifica per a (o afecta) un element inline-level afecta totes les caixes generades per l'element. Si l'element no té contingut o no té contingut en forma de text (per ex., l'element IMG de l'HTML) els agents d'usuari han d'ignorar aquesta propietat.

Els valors tenen els següents significats:

none
No produeix cap decoració en el text.


underline
Cada línia de text es subratlla.


overline
Cada línia de text té una línia al capdamunt.


line-through
Cada línia de text està atravessada pel mig per una línia.


blink
El text parpalleja (alterna els estats visible i invisible). Els agents d'usuari conformats no estan obligats a suportar aquest valor.


El color o colors requerits per a la decoració del text haurien de derivar del valor de la propietat color.

La propietat text-decoration no s'hereta però les caixes descendents d'una caixa de bloc haurien d'estar formatades amb la mateixa decoració (per ex., haurien d'estar totes subratllades). El color de les decoracions hauria de ser sempre el mateix fins i tot si els elements descendents tenen diferents valors per a color.
Ex.:
Aquí el contingut text de tots els elements A que actuen com a hiperlinks hauria d'estar subratllat:
	A[href] { text-decoration: underline }
Propietat text-indent
Tema associat: Text.

Valor:<longitut> | <percentatge> | inherit
Valor inicial:0
S'aplica a:elements block-level
S'hereta?:
Admet valors percentuals?:sí, fent referència a l'amplada del bloc contenidor
Grups de mitjans:visuals

Especifica la indentació de la primera línia de text d'un bloc. Més precisament, especifica la indentació de la primera caixa que es troba dins de la primera caixa de línia del bloc. La caixa s'indenta respecte el límit esquerre (o el dret, en la disposició de dreta a esquerra) de la caixa de línia. Els agents d'usuari haurien de presentar aquesta indentació com un espai en blanc.

Els valors tenen els següents significats:

La indentació com a una longitut fixa.


La indentació com a un percentatge de l'amplada del bloc contenidor.


El valor de text-indent pot ser negatiu, però hi pot haver límits específics de la implementació (un valor negatiu farà que enlloc d'indentar la primera línia de text aquesta sobresurti de la resta de línies del text).
Ex.:
Aquesta regla fa que la primera línia de text estigui indentada '3em':
 
	P { text-indent: 3em } 
[Resultat]

Aquesta altra regla fa que la primera línia de text sobresurti de la resta:
	P { text-indent: -3em } 
[Resultat]
Propietat text-shadow
Tema associat: Text.

Valor:none | [<color> || <longitut> <longitut> <longitut>? ,]* [<color>
|| <longitut> <longitut> <longitut>?] | inherit
Valor inicial:none
S'aplica a:tots els elements
S'hereta?:no (veure explicació)
Admet valors percentuals?:no
Grups de mitjans:visuals

Accepta una llista d'efectes d'ombra separats comes que han de ser aplicats al text de l'element. Aquests efectes s'apliquen en l'ordre especificat i d'aquesta manera poden solapar-se entre ells, però mai taparan el text en sí. Els efectes d'ombra no alteren la mida d'una caixa, però es poden extendre més enllà dels seus límits. El nivell d'apil·lament dels efectes d'ombra és el mateix que el que té l'element.

Cada efecte d'ombra ha d'especificar un desplaçament de l'ombra i opcionalment pot especificar un radi de borrositat i un color d'ombra.

El significat dels valors que es poden especificar en aquesta propietat és el següent:



Les ombres del text es poden utilitzar amb els pseudo-elements :first-letter i :first-line.
Ex.:
Definició d'una ombra de text a la dreta i per sota del text de l'element. Com que no s'ha especificat cap color, la ombra tindrà el mateix color que té l'element en sí, i com que no s'ha especificat cap radi de borrositat, l'ombra del text no serà borrosa:
       H1 { text-shadow: 0.2em 0.2em }


Ex.:
Definició d'una ombra de text a la dreta i per sota del text de l'element. L'ombra tindrà un radi de 5px de borrositat i serà de color vermell:
	H2 { text-shadow: 3px 3px 5px red }


Ex.:
Especificació d'una llista d'efectes d'ombra. La primera ombra estarà a la dreta i per sota del text de l'element i serà vermella sense borrositat. La segona ombra solaparà el primer efecte d'ombra i serà groga, borrosa i es situarà a l'esquerra i per sota del text. El tercer efecte d'ombra es situarà a la dreta i per sobre del text. Com que no hi ha cap color especificat per al tercer efecte d'ombra, s'utilitzarà el valor de la propietat color de l'element:
   H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

   3px 3px red  --> primer efecte d'ombra
   yellow -3px 3px 2px  --> segon efecte d'ombra
   3px -3px --> tercer efecte d'ombra


Ex.:
	SPAN.glow { 
         background: white; 
         color: white;
         text-shadow: black 0px 0px 5px;
	}
Aquí, les propietats background i color tenen el mateix valor i la propietat text-shadow s'utilitza per a crear un efecte d'"eclipse solar":



Nota. Aquesta propietat no està definida en CSS1. Alguns efectes d'ombra (tals com el de l'últim exemple) poden presentar text invisible en agents d'usuari que només suporten CSS1.
Propietat text-transform
Tema associat: Text.

Valor:capitalize | uppercase | lowercase | none | inherit
Valor inicial:none
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Controla els efectes de capitalització del text d'un element.

Els valors tenen els següents significats:

capitalize
Posa el primer caràcter de cada paraula en majúscules.


uppercase
Posa tots els caràcters de cada paraula en majúscules.


lowercase
Posa tots els caràcters de cada paraula en minúscules.


none
No té efectes de capitalizació.


La transformació real en cada cas s'escriu de manera dependent del llenguatge. Veieu la RFC 2070 per veure les maneres de trobar el llenguatge d'un element.

Els agents d'usuari conformats és possible que considerin el valor de text-transform com a 'none' per a caràcters que no són del repertori de Latin-1 i per a elements en llenguatges pels quals la transformació és diferent de la que està especificada en les taules case-conversion de la ISO 10646.
Ex.:
Tot el text d'un element H1 és transformat a text en majúscules:
	H1 { text-transform: uppercase }
Propietat top
Tema associat: Model de formatat visual.

Valor:<longitut> | <percentatge> | auto | inherit
Valor inicial:auto
S'aplica a:elements posicionats
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'alçada del bloc contenidor
Grups de mitjans:visuals

Aquesta propietat, juntament amb left, right i bottom, disposa les caixes posicionades generades per elements posicionats (un element es diu que està posicionat si la seva propietat position té un valor diferent de 'static'). top especifica a quina distància per sota del límit superior del bloc contenidor d'una caixa es troba el límit del marge superior de la caixa.

Els valors tenen els següents significats:

El desplaçament és una distància fixa des del límit de referència.


El desplaçament és un percentatge de l'alçada del bloc contenidor. Si l'alçada del bloc contenidor no està especificada explícitament (és a dir, depèn de l'alçada del contingut) el valor percentual s'interpreta com 'auto'.


auto
L'efecte d'aquest valor depèn de quines de les propietats relacionades (left, right, bottom) també tenen aquest valor. Veieu els apartats sobre l'amplada i l'alçada dels elements block-level absolutament posicionats, per més detalls.


Per a les caixes posicionades absolutament els desplaçaments són respecte el bloc contenidor de la caixa. Per a les caixes posicionades relativament els desplaçaments són respecte els límits exteriors de la caixa en sí (és a dir, a la caixa se li ha donat una posició en el fluxe normal, i després se l'ha desplaçada d'aquesta posició d'acord amb aquestes propietats top, left, right i bottom).
Propietat unicode-bidi
Tema associat: Model de formatat visual.

Valor:normal | embed | bidi-override | inherit
Valor inicial:normal
S'aplica a:tots els elements, però cal veure l'explicació
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Aquesta propietat està relacionada amb l'Algorisme bidireccional d'Unicode.

Els valors tenen els següents significats:

normal
L'element no obre un nivell addicional d'inserció respecte l'algorisme bidireccional. Per a elements inline-level, la reordenació implícita funciona a l'altre costat dels límits dels elements.


embed
Si l'element és inline-level, aquest valor obre un nivell addicional d'inserció respecte l'algorisme bidireccional. El sentit d'aquest nivell d'inserció ve donat per la propietat direction. Dins l'element, la reordenació es fa de manera implícita. Això correspon a afegir un LRE (U+202A; per a "direction: ltr") o un RLE (U+202B; per a "direction: rtl") al principi de l'element i un PDF (U+202C) al final de l'element.


bidi-override
Si l'element és inline-level o un element block-level que conté només elements inline-level, aquest valor crea una invalidació. Això significa que dins l'element, la reordenació es fa estríctament en seqüència d'acord amb la propietat direction; la part implícita de l'algorisme bidireccional s'ignora. Això correspon a afegir un LRO (U+202D; per a "direction: rtl") al principi de l'element i un PDF (U+202C) al final de l'element.
Propietat vertical-align
Temes associats: Detalls del model de formatat visual, Taules.

Valor:baseline | sub | super | top | text-top | middle | bottom | text-bottom
| <percentatge> | <longitut> | inherit
Valor inicial:baseline
S'aplica a:elements inline-level i elements 'table-cell'
S'hereta?:no
Admet valors percentuals?:sí, fan referència a la line-height del mateix element
Grups de mitjans:visuals

Afecta el posicionament vertical dins d'una caixa de línia de les caixes generades per un element inline-level. Els següents valors només tenen significat respecte un element pare inline-level (o respecte un element pare block-level si l'element sobre el qual es fixa la propietat vertical-align genera caixes inline anònimes); no tenen efecte si no existeix un pare d'aquest tipus:

baseline
Alinea la línia base de la caixa amb la línia base de la caixa del pare. Si la caixa no té cap línia base, aleshores alinea la part inferior de la caixa amb la línia base del pare.


middle
Alinea el punt mitjà vertical de la caixa amb la línia base de la caixa del pare més la meitat de la x-height del pare.


sub
Abaixa la línia base de la caixa fins a la posició adient per als subíndexs de la caixa del pare. (Aquest valor no té cap efecte en la mida de font del text de l'element.)


super
Apuja la línia base de la caixa fins a la posició adient per als superíndexs de la caixa del pare. (Aquest valor no té cap efecte en la mida de font del text de l'element.)


text-top
Alinea la part superior de la caixa amb la part superior de la font de l'element pare.


text-bottom
Alinea la part inferior de la caixa amb la part inferior de la font de l'element pare.


Apuja (valor positiu) o abaixa (valor negatiu) la caixa per aquesta distància (un percentatge del valor de line-height). El valor '0%' significa el mateix que 'baseline'.


Apuja (valor positiu) o abaixa (valor negatiu) la caixa per aquesta distància. El valor '0cm' significa el mateix que 'baseline'.

Els valors restants fan referència a la caixa de línia dins la qual apareix contingut generat:

top
Alinea la part superior de la caixa amb la part superior de la caixa de línia.


bottom
Alinea la part inferior de la caixa amb la part inferior de la caixa de línia.


Nota. Els valors d'aquesta propietat tenen significats lleugerament diferents en el context de les taules. Counsulteu l'apartat sobre els algorismes d'alçada de les taules del tema "Taules" per més detalls.
Propietat visibility
Tema associat: Efectes visuals.

Valor:visible | hidden | collapse | inherit
Valor inicial:inherit
S'aplica a:tots els elements
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica si es presentaran o no les caixes generades per un element. Les caixes invisibles encara afecten la disposició (cal assignar 'none' a la propietat display per a suprimir, a més, la generació de caixes).

Els valors tenen els següents significats:

visible
La caixa generada és visible.


hidden
La caixa generada és invisible (totalment transparent), però encara afecta la disposició.


collapse
Consulteu l'apartat sobre els efectes dinàmics de files i columnes en les taules. Si s'utilitza en elements diferents de files o columnes, 'collapse' té el mateix significat que 'hidden'.


Aquesta propietat es pot utilitzar en conjunció amb els scripts per a crear efectes dinàmics.
Ex.:
Aquest document HTML fa que el fet de prémer qualsevol dels botons del formulari invoca una funció d'script definida per l'usuari que fa que la caixa corresponent esdevingui visible i les altres s'ocultin. Com que les caixes tenen la mateixa mida i posició, l'efecte és que una reemplaça l'altra. (El codi d'script és en un llenguatge hipotètic. Pot tenir o no efecte en un agent d'usuari capaç d'entendre CSS.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in } //visibility = visible;
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Tria un sospitós:</P>
<DIV id="container1">
   <IMG alt="Al Capone" 
        width="100" height="100" 
        src="sospitos1.jpg">
   <P>Nom: Al Capone</P>
   <P>Residència: Chicago</P>
</DIV>

<DIV id="container2">
   <IMG alt="Lucky Luciano" 
        width="100" height="100" 
        src="sospitos2.jpg">
   <P>Nom: Lucky Luciano</P>
   <P>Residència: New York</P>
</DIV>

<FORM method="post" 
      action="http://www.sospitos.org/processar-criminals">
   <P>
   <INPUT name="Capone" type="button" 
          value="Capone" 
          onclick='mostra("container1");oculta("container2")'>
   <INPUT name="Luciano" type="button" 
          value="Luciano" 
          onclick='mostra("container2");oculta("container1")'>
</FORM>
</BODY>
</HTML>
Propietat voice-family
Tema associat: Fulls d'estil audibles.

Valor:[[ <veu-específica> | <veu-genèrica> ],]* [<veu-específica> | <veu-genèrica> ] | inherit
Valor inicial:depèn de l'agent d'usuari
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:acústics

És d'alguna manera anàloga a la propietat font-family per al formatat visual. El seu valor és una llista prioritaritzada de noms de famílies de veus separats per comes.

Els valors tenen els següents significats:

<veu-genèrica>
Els valors són famílies de veus. Els valors possibles són:


<veu-específica>
Els valors són instàncies específiques (per ex., comediant, carles, nuria).
Ex.:
Exemples de declaracions de veus de família:
	H1 { voice-family: narrador, male }
	P.part.romeo  { voice-family: romeo, male }
	P.part.julieta { voice-family: julieta, female }
Propietat volume
Tema associat: Fulls d'estil audibles.

Valor:<número> | <percentatge> | silent | x-soft | soft | medium | loud | x-loud | inherit
Valor inicial:medium
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:sí, fan referència al valor heretat
Grups de mitjans:acústics

El volum fa referència al volum mitjà de la funció d'ona. En altres paraules, una veu molt infleccionada a un volum de 50 pot ser que el seu volum punta sigui bastant més alt. Tot el conjunt de valors és susceptible de ser ajustat pel confort humà, per exemple amb un control físic del volum (el qual incrementaria tant el valor 0 (mínim) com el 100 (màxim) proporcionalment); el que fa la propietat volume és ajustar el rang dinàmic.

Els valors tenen els següents significats:

Qualsevol número entre '0' i '100'. '0' representa el nivell de volum mínim audible i '100' correspon al màxim nivell confortable.


Els valors percentuals es calculen en relació al valor heretat, i després es retallen al rang de '0' a '100'.


silent
Cap so en absolut. El valor '0' no significa el mateix que 'silent'.


x-soft
El mateix que '0'.


soft
El mateix que '25'.


medium
El mateix que '50'.


loud
El mateix que '75'.


x-loud
El mateix que '100'.


Els agents d'usuari haurien de permetre que els valors corresponents al '0' i al '100' els fixés l'oient (l'usuari). Encara que cap de les configuracions d'aquesta propietat són universalment aplicables (diferents entorns d'escolta, diferents necessitats, etc.) es podria utilitzar el mateix full d'estil d'autor en tots els casos (veieu l'apartat sobre el volum del tema "Fulls d'estil audibles") simplement fent correspondre adientment els punts '0' i '100' per part del client.
Propietat white-space
Tema associat: Text.

Valor:normal | pre | nowrap | inherit
Valor inicial:normal
S'aplica a:elements block-level
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Declara com es tracta un espai blanc dins l'element.

Els valors tenen els següents significats:

normal
Encamina els agents d'usuari a comprimir les seqüències d'espais blancs i els trencaments de línia de la manera que sigui necessari a fi d'omplir les caixes de línia. Es poden crear trencaments de línia addicionals mitjançant ocurrències de "\A" en contingut generat (per ex., per a l'element BR en l'HTML).


pre
Prohibeix als agents d'usuari comprimir les seqüències d'espais blancs. Les línies només es trenquen on tenen lloc els "retorns de carro" en el document font, o en les ocurrències de "\A" en contingut generat.


nowrap
Comprimeix els espais blancs com a 'normal' però suprimeix els trencaments de línia del text excepte aquells creats amb "\A" en contingut generat (per ex., per a l'element BR de l'HTML).


Els agents d'usuari conformats és possible que ignorin la propietat white-space en els fulls d'estil d'autor i d'usuari però han d'especificar un valor per a ella en el full d'estil per defecte.
Ex.:
Aquí es mostra quin és el comportament esperat dels espais blancs en els elements PRE i P i de l'atribut "nowrap" de l'HTML:
	PRE { white-space: pre }
	P { white-space: normal }
	TD[nowrap] { white-space: nowrap }
Propietat widows
Tema associat: Mitjans paginats.

Valor:<enter> | inherit
Valor inicial:2
S'aplica a:elements block-level
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals, paginats

Especifica el mínim nombre de línies d'un paràgraf que s'han de deixar al capdamunt de la pàgina. Per més informació consulteu els apartats sobre els trencaments de pàgina dins d'elements.
Ex.:
La següent regla aplica la propietat widows a tots els elements P de l'HTML:
	P { widows: 5 }  //5 línies
Propietat width
Tema associat: Detalls del model de formatat visual.

Valor:<longitut> | <percentatge> | auto | inherit
Valor inicial:auto
S'aplica a:tots els elements excepte els elements inline no reemplaçats, files de taula i grups de files
S'hereta?:no
Admet valors percentuals?:sí, fan referència a l'amplada del bloc contenidor
Grups de mitjans:visuals

Especifica l'amplada del contingut de les caixes generades per elements block-level i reemplaçats.

Aquesta propietat no s'aplica a elements no reemplaçats inline-level. L'amplada de les caixes d'un element inline no reemplaçat és l'amplada del contingut generat que es troba dins seu (abans de qualsevol desplaçament relatiu dels fills). Cal recordar que les caixes inline flueixen en caixes de línia. L'amplada de les caixes de línia ve donada pel seu bloc contenidor, però poden ser escurçades per la presència de floats.

L'amplada de la caixa d'un element reemplaçat és intrínseca i pot ser escalada per l'agent d'usuari si el valor d'aquesta propietat és diferent de 'auto'.

Els valors tenen els següents significats:

Especifica una amplada fixa.


Especifica una amplada percentual. El percentatge es calcula respecte l'amplada del bloc contenidor de la caixa generada.


auto
L'amplada depèn dels valors d'altres propietats. Veieu el tema "Detalls del model de formatat visual".


Els valors negatius per a width són il·legals.
Ex.:
La següent regla fixa l'amplada del contingut dels paràgrafs a 100 píxels:
	P { width: 100px }
Propietat word-spacing
Tema associat: Text.

Valor:normal | <longitut> | inherit
Valor inicial:normal
S'aplica a:tots els elements
S'hereta?:
Admet valors percentuals?:no
Grups de mitjans:visuals

Especifica el comportament de l'espaiat entre paraules.

Els algorismes d'espaiat de paraules són depenents de l'agent d'usuari. L'espaiat de paraules també està influenciat per la justificació (veieu la propietat text-align).

Els valors tenen els següents significats:

normal
L'espai normal entre paraules, tal i com està definit per la font actual i/o l'agent d'usuari.


Indica l'espai entre paraules que hi ha d'haver a més a més de l'espai per defecte entre paraules. Els valors poden ser negatius, però hi poden haver límits específics de la implementació.


Els agents d'usuari conformats pot ser que considerin el valor de la propietat word-spacing com a 'normal'.
Ex.:
L'espai entre paraules en els elements H1 s'ha incrementat en '1em':
	H1 { word-spacing: 1em }
Propietat z-index
Tema associat: Model de formatat visual.

Valor:auto | <enter> | inherit
Valor inicial:auto
S'aplica a:elements posicionats
S'hereta?:no
Admet valors percentuals?:no
Grups de mitjans:visuals

Per a una caixa posicionada, la propietat z-index especifica:

  1. El nivell d'apilament de la caixa dins l'actual context d'apilament
  2. Si la caixa estableix o no un context local d'apilament

Els valors tenen els següents significats:

Nivell d'apilació de la caixa generada dins l'actual context d'apilament. La caixa també estableix un context local d'apilament dins el qual el seu nivell d'apilament és '0'.


auto
El nivell d'apilament de la caixa generada en l'actual context d'apilació és el mateix que el de la caixa del seu pare. La caixa no estableix un nou context local d'apilament.
Ex.:
La caixa groga estarà davant de totes, la verda estarà enmig i la vermella estarà darrera de tot:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD> 
<TITLE>Test de z-index</TITLE> 
<STYLE type="text/css"> 

	.vermella {
		z-index: 0;
		position: absolute;
		top: 150px;
		left: 300px;
	}
	.verda {
		z-index: 1;
		position: absolute;
		top: 165px;
		left: 315px;
	}
	.groga {
		z-index: 2;
		position: absolute;
		top: 180px;
		left: 330px;
	}

</STYLE> 
</HEAD> 
<BODY> 
   <DIV class="vermella"><IMG src="img/red.gif"></DIV>
   <DIV class="groga"><IMG src="img/yellow.gif"></DIV>
   <DIV class="verda"><IMG src="img/green.gif"></DIV>
</BODY>
</HTML>
[Resultat]
Tancar
Pàgina Principal
Introducció al Manual d'HTML Dinàmic
Glossari
Referències























HTML 4.0
Introducció al manual d'HTML 4.0
Taules
Formularis
Objectes, imatges i applets
Scripts
Informació de l'idioma i sentit del text
Frames
Nous elements
Elements menyspreuats i obsolets
Fulls d'estil
Nous atributs de l'HTML 4.0
Índex d'atributs nous
Índex d'atributs menyspreuats
DTD
Annexe












Introducció als CSS
Introducció als CSS2 i al manual
Propietats CSS2
Fulls d'estil audibles
Model de caixa
Sintaxi i tipus bàsics de dades
Model de formatat visual
Detalls del model de formatat visual
Assignar valors de propietats, la cascada i l'herència
Interfície d'usuari
Efectes visuals
Text
Taules
Fonts
Contingut generat, numeració automàtica i llistes
Colors i fons
Selectors
Tipus de mitjans
Mitjans paginats
Suport de CSS2
Annexe




Introducció al DOM
DOM Nivell 1 - Nucli
DOM Nivell 1 - HTML
Articles sobre el DOM






















Programació en DHTML
Demos