Arribi en 15:02 26 nov 2010

2010-11-26T15:02:55Z

Página nueva

== Introdución ==
Todos os elementos dun documento, tanto a nivel de bloque como en liña, xeran unha caixa rectangular chamada "caixa do elemento".

A figura seguinte mostra todas as áreas e límites definidos polo modelo de caixas CSS:

{| style="width:80%; border="0" cellpadding="2" align="center"
!width="50%"|[[imagen:modelocajascss.jpg|250px]]
!width="50%"|[[Imagen:Boxmodel.jpg]]
|}

== Área de Contido ==
* O tamaño da área de contido especifícase coas propiedades ''width'' e ''height''.
<source lang="css">
div#cabeceira {width:100px; height:200px; }
</source>
* Son interesantes as propiedades ''max-width'', ''max-height'', ''min-width'' e ''min-height'', que nos permiten axustar as alturas e anchuras máximas e mínimas de elementos de bloque.

== Marxes ==
* Cantidade de espazo que pode engadirse ao redor do bordo do elemento.
* Configurase coa propiedade '''''margin'''''.
* Os valores da propiedade ''margin'' sempre deben ir na seguinte orden:
<source lang="css">
div {margin: top right bottom left}
</source>
* Exemplo:
<source lang="css">
.imaxe {margin: 3px 20px 3px 20px; }
</source>
: Se falta un valor asúmese que é o valor da marxe esquerda. Así, sería equivalente ao anterior:
<source lang="css">
.imaxe {margin: 3px 20px 3px; }
</source>
: Se só se proporcionan dous valores... Serían o superior e o inferior e o dereito e o esquerdo. Así, o exemplo anterior:
<source lang="css">
.imaxe {margin: 3px 20px; }
</source>
: Por último, se só damos un valor... Sería a mesma marxe para todos os lados. Exemplo:
<source lang="css">
.imaxe {margin: 20px; }
</source>
* Saber que '''colapsan as marxes ''top'' e ''bottom'' de dous elementos seguidos...''' É dicir a suma das dúas marxes será o mais grande. Exemplo:
<source lang="css">
h1#titulo1 {margin: 10px 20px 10px 20px; }
h1#titulo2 {margin: 20px; }
</source>
:: Se estes dous elementos se colocan seguidos, a suma das marxes será 20px.
* '''Non colapsan ''right'' e ''left''.'''

== Bordes ==
Un bordo é unha liña debuxada ao redor da área de contido dun elemento e o seu recheo (este, vimos que era opcional).
=== ''border-style'' ===
* '''O estilo''' é a cualidade mais importante do bordo, pois, se non está especificado o bordo non existe.
* Para configurar o estilo do bordo temos a propiedade ''border-style''.
* A propiedade ''border-style'' poderá ter os valores: ''none'', ''doted'', ''dashed'', ''solid'', ''double'', ''groove'', ''ridge'', ''inset'' e ''ouset''.
* Poderemos configurar o estilo de cada un dos lados (empregar a secuencia de sempre: ''top'', ''right'', ''botton'' e ''left''):
<source lang="css">
.imaxe {border-style: solid dashed dotted double; }
</source>

=== ''border-width'' ===
* '''O grosor''' do bordo especifícase coa propiedade ''border-width''.
* Podemos especificar o grosor de cada un dos lados da caixa.
* Os valores que pode tomar esta propiedade son: ''thin'', ''medium'', ''thick'', ''inherit'' ou un valor en píxeles.
* Se non se especifica o valor tomado é ''medium''.
<source lang="css">
div {border-style: solid; border-width: thin medium thick 12px; }
</source>

=== ''border-color'' ===
* '''A cor''' do bordo especifícase coa propiedade ''border-color''.
* Se non especificamos a cor o elemento collerá a cor do "'primeiro plano"', é dicir que se, por exemplo tempos unha caixa de texto a cor collida polo bordo é a cor do texto.
* Existe a cor ''transparent'' pero non está soportada por todos os navegadores (IE v.6).
<source lang="css">
div.conclusion {border-style: solid;
border-width: 4px;
border-color: #333 #666 #AAA #DDD; }
</source>
=== ''border'' ===
* A propiedade ''border'' une todas as propiedades '''border''' vistas ata o de agora.
* Non hai que colocar os valores en ningún orde concreto.
* A propiedade ''border'' emprégase cando se queren configurar os catro lados por igual.
* Tamén temos as propiedades: ''border-top'', ''border-right'', ''border-bottom'' e ''border-left''.
* Algúns exemplos válidos son os seguintes:
<source lang="css">
h1 {border: .5em solid blue; }
h2 {border-left: solid blue .5em; }
h3 {border-right: solid .5em; }
</source>

== Recheo ==
O recheo é unha cantidade opcional de espazo entre a área de contido dun elemento e o seu bordo.
* É interesante colocar recheo cando poñemos bordo a un elemento.
* Para configurar o recheo empregamos a propiedade '''''padding'''''.
* Para pasarlle os valores emprega a mesma filosofía que coa propiedade ''margin''.
* '''O valor de recheo sumarase ao ''width'' definido no elemento pola dereita e pola esquerda.'''
<source lang="css">
h2#antetitulo {padding: 4px; }
</source>
* A cor do recheo é a mesma que a cor da área de contido.
<source lang="css">
h2#antetitulo {padding: 4px 10px; background: #ccc; }
</source>
* '''O recheo nunca colapsa.'''

--[[Usuario:Vieites|Manuel Vieites]] e -- [[Usuario:Veiga|Rafael Veiga]] feb 2008

As Caixas en CSS - Historial de revisiones

Arribi en 15:02 26 nov 2010