https://manuais.iessanclemente.net/index.php?title=As_Caixas_en_CSS&feed=atom&action=historyAs Caixas en CSS - Historial de revisiones2024-03-29T05:27:53ZHistorial de revisiones de esta página en el wikiMediaWiki 1.36.2https://manuais.iessanclemente.net/index.php?title=As_Caixas_en_CSS&diff=19703&oldid=prevArribi en 15:02 26 nov 20102010-11-26T15:02:55Z<p></p>
<p><b>Página nueva</b></p><div>== Introdución ==<br />
Todos os elementos dun documento, tanto a nivel de bloque como en liña, xeran unha caixa rectangular chamada "caixa do elemento". <br />
<br />
A figura seguinte mostra todas as áreas e límites definidos polo modelo de caixas CSS:<br />
<br />
{| style="width:80%; border="0" cellpadding="2" align="center" <br />
!width="50%"|[[imagen:modelocajascss.jpg|250px]]<br />
!width="50%"|[[Imagen:Boxmodel.jpg]]<br />
|}<br />
<br />
== Área de Contido ==<br />
* O tamaño da área de contido especifícase coas propiedades ''width'' e ''height''.<br />
<source lang="css"><br />
div#cabeceira {width:100px; height:200px; }<br />
</source><br />
* 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.<br />
<br />
== Marxes ==<br />
* Cantidade de espazo que pode engadirse ao redor do bordo do elemento.<br />
* Configurase coa propiedade '''''margin'''''.<br />
* Os valores da propiedade ''margin'' sempre deben ir na seguinte orden:<br />
<source lang="css"><br />
div {margin: top right bottom left}<br />
</source><br />
* Exemplo:<br />
<source lang="css"><br />
.imaxe {margin: 3px 20px 3px 20px; }<br />
</source><br />
: Se falta un valor asúmese que é o valor da marxe esquerda. Así, sería equivalente ao anterior:<br />
<source lang="css"><br />
.imaxe {margin: 3px 20px 3px; }<br />
</source><br />
: Se só se proporcionan dous valores... Serían o superior e o inferior e o dereito e o esquerdo. Así, o exemplo anterior:<br />
<source lang="css"><br />
.imaxe {margin: 3px 20px; }<br />
</source><br />
: Por último, se só damos un valor... Sería a mesma marxe para todos os lados. Exemplo:<br />
<source lang="css"><br />
.imaxe {margin: 20px; }<br />
</source><br />
* Saber que '''colapsan as marxes ''top'' e ''bottom'' de dous elementos seguidos...''' É dicir a suma das dúas marxes será o mais grande. Exemplo:<br />
<source lang="css"><br />
h1#titulo1 {margin: 10px 20px 10px 20px; }<br />
h1#titulo2 {margin: 20px; }<br />
</source><br />
:: Se estes dous elementos se colocan seguidos, a suma das marxes será 20px.<br />
* '''Non colapsan ''right'' e ''left''.'''<br />
<br />
== Bordes ==<br />
Un bordo é unha liña debuxada ao redor da área de contido dun elemento e o seu recheo (este, vimos que era opcional).<br />
=== ''border-style'' ===<br />
* '''O estilo''' é a cualidade mais importante do bordo, pois, se non está especificado o bordo non existe. <br />
* Para configurar o estilo do bordo temos a propiedade ''border-style''.<br />
* A propiedade ''border-style'' poderá ter os valores: ''none'', ''doted'', ''dashed'', ''solid'', ''double'', ''groove'', ''ridge'', ''inset'' e ''ouset''.<br />
* Poderemos configurar o estilo de cada un dos lados (empregar a secuencia de sempre: ''top'', ''right'', ''botton'' e ''left''):<br />
<source lang="css"><br />
.imaxe {border-style: solid dashed dotted double; }<br />
</source><br />
<br />
=== ''border-width'' ===<br />
* '''O grosor''' do bordo especifícase coa propiedade ''border-width''.<br />
* Podemos especificar o grosor de cada un dos lados da caixa.<br />
* Os valores que pode tomar esta propiedade son: ''thin'', ''medium'', ''thick'', ''inherit'' ou un valor en píxeles.<br />
* Se non se especifica o valor tomado é ''medium''.<br />
<source lang="css"><br />
div {border-style: solid; border-width: thin medium thick 12px; }<br />
</source><br />
<br />
=== ''border-color'' ===<br />
* '''A cor''' do bordo especifícase coa propiedade ''border-color''.<br />
* 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.<br />
* Existe a cor ''transparent'' pero non está soportada por todos os navegadores (IE v.6).<br />
<source lang="css"><br />
div.conclusion {border-style: solid; <br />
border-width: 4px;<br />
border-color: #333 #666 #AAA #DDD; }<br />
</source><br />
=== ''border'' ===<br />
* A propiedade ''border'' une todas as propiedades '''border''' vistas ata o de agora.<br />
* Non hai que colocar os valores en ningún orde concreto.<br />
* A propiedade ''border'' emprégase cando se queren configurar os catro lados por igual.<br />
* Tamén temos as propiedades: ''border-top'', ''border-right'', ''border-bottom'' e ''border-left''.<br />
* Algúns exemplos válidos son os seguintes:<br />
<source lang="css"><br />
h1 {border: .5em solid blue; }<br />
h2 {border-left: solid blue .5em; }<br />
h3 {border-right: solid .5em; }<br />
</source><br />
<br />
== Recheo ==<br />
O recheo é unha cantidade opcional de espazo entre a área de contido dun elemento e o seu bordo.<br />
* É interesante colocar recheo cando poñemos bordo a un elemento.<br />
* Para configurar o recheo empregamos a propiedade '''''padding'''''.<br />
* Para pasarlle os valores emprega a mesma filosofía que coa propiedade ''margin''.<br />
* '''O valor de recheo sumarase ao ''width'' definido no elemento pola dereita e pola esquerda.'''<br />
<source lang="css"><br />
h2#antetitulo {padding: 4px; }<br />
</source><br />
* A cor do recheo é a mesma que a cor da área de contido.<br />
<source lang="css"><br />
h2#antetitulo {padding: 4px 10px; background: #ccc; }<br />
</source><br />
* '''O recheo nunca colapsa.'''<br />
<br />
--[[Usuario:Vieites|Manuel Vieites]] e -- [[Usuario:Veiga|Rafael Veiga]] feb 2008</div>Arribi