Aplicar estilo: administrar margen, relleno y borde a los elementos

Aplicar estilo: administrar margen, relleno y borde a los

elementos

Introducción En esta lección estudiaremos detalladamente todas las reglas de estilo CSS 2.0 utilizadas actualmente para administrar y aplicar estilos específicos a las cajas rectangulares (box), en las cuales se colocan generalmente los elementos de una estructura (X)HTML. Aprovechando la estructura de estas cajas (el llamado box-model) será posible aplicar los estilos específicos para modificar sus márgenes, rellenos y bordes.

Modelo de cajas ( box model) El modelo de cajas o "box model" es la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Estas cajas se crean automáticamente y no son visibles a simple vista porque inicialmente no muestran ningún color de fondo ni ningún borde. Es posible modificar estas cajas mediante el uso de los CSS, con propiedades específicas y valores relativos.

Como hemos dicho, es posible controlar las características de cada “caja” mediante el uso de determinadas propiedades que pueden intervenir en los siguientes parámetros o partes del box-model:

✦Márgenes – Separación opcional existente entre la caja y el resto de cajas adyacentes ✦Bordes – Línea que encierra completamente el contenido y su relleno. ✦Relleno (padding) – El espacio existente entre el contenido de un elemento y su borde.

✦Límite interno – Los límites del elemento o del área de contenido se consideran como los bordes internos del elemento contenedor. Tomando en cuenta este elemento es posible establecer propiedades de estilo en relación a su extensión (propiedades width y height). En las páginas (X)HTML tales límites son invisibles. ✦– El borde externo del área “margen” está representado por el límite máximo de un elemento contenedor. Este límite indica el área total que un determinado elemento ocupará en la página. Este límite incluye el ancho del área de contenido, las dimensiones del relleno, de los bordes y de las eventuales imágenes aplicadas en el

elemento en cuestión. También en este caso, en la visualización final de la página este límite será siempre invisible. ✦Área elemento o de contenido – Se trata del contenido del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.) .

Representación gráfica de un modelo de cajas y de las partes en las cuales es posible

intervenir utilizando las reglas de estilo

Límite externo

Lím

ite interno Bordes

Relleno padding

Márgenes

Las propiedades relativas a los márgenes, al relleno, a los bordes y a los otros componentes del modelo de cajas pueden ser aplicadas individualmente o en conjunto para transformar contemporáneamente más aspectos en la visualización de un determinado elemento.

Modificar el área de contenido

La propiedad CSS que controla la anchura de los elementos se denomina width y la que controla la altura se llama height. Los valores asociables a estas propiedades pueden ser expresados en em, pixel y porcentaje.

Las propiedades width y height pueden ser aplicadas sólo en asociación a los elementos a nivel de bloque y a los elementos en línea no textuales (como por ejemplo los elementos img). Por lo tanto, no será posible especificar el ancho y el alto del área ocupada por un elemento <em>. Los parámetros de ancho y largo de un elemento a nivel de bloque se calculan automáticamente por el navegador en uso. Por lo tanto, si no se establece de forma explícita un valor a esta propiedad, el navegador deberá calcular automáticamente la anchura y altura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

Sintaxis básica de las propiedades de estilo height y width selector1 {width: 200px; height: 100px;} selector2{width: 200px; height: 400px;} Ejemplo <html> <head><title>propiedades de estilo width y height</title> <style type="text/css"> body {background-color: #FF7F50; } p:first-line { color: red; } p, h3, em, h4 {width: 50%; height: 20%; text-align: center; color: #00008B; } </style> </head> <body>

<h3>Ejemplo de uso de las propiedades de estilo <b>width</b> e <b>height</b></h3> <h4>El más bello de los mares</h4> <p> El más bello de los mares Es aquel que no hemos navegado<br/> El más bello de nuestros hijos No ha crecido aún <br/> El más bello de nuestros días aún no lo hemos vivido<br/> Y aquello, lo más hermoso, que quiero decirte, aún no te lo he dicho<br/> <em> Nazim Hikmet</em> </p> </body> </html>

Output

Definir los márgenes de los elementos

El uso de reglas de estilos para modificar la visualización de los márgenes de los elementos es fundamental para establecer con precisión la distancia exacta que deberá existir entre los múltiples elementos presentes en un documento (X)HTML. De hecho, es posible utilizar la propiedad relativa a los márgenes para modificar el espacio alrededor de un determinado elemento. CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento.

• margin-top – Actúa en el margen superior de un elemento.

• margin-bottom – Actúa en el margen inferior de un elemento.

• margin-right – Actúa en el margen derecho de un elemento.

• margin-left – Actúa en el margen izquierdo de un elemento.

Ejemplo

Las propiedades indicadas presentan el siguiente formato base de uso: selector {propiedad_margen: valor;}

Además de las cuatro propiedades que controlan cada uno de los márgenes del elemento, CSS define una propiedad que permite establecer los cuatro márgenes de forma conjunta, empleando una única propiedad. La propiedad que permite definir de forma simultánea los cuatro márgenes se denomina margin. Mediante el uso de la propiedad abreviada margin será posible especificar más parámetros contemporáneamente en relación a uno o a los cuatro bordes, como en la siguiente regla de estilo: selector {margin: 2px 4px 10px 4px; }

Utilizando la propiedad abreviada margin no es necesario especificar el espesor de los 4 márgenes, ya que la propiedad margin admite entre uno y cuatro valores, con el siguiente significado:

• Si sólo se indica un valor, todos los márgenes tienen ese valor. • Si se indican dos valores, el primero se asigna al margen superior

e inferior y el segundo se asigna a los márgenes izquierdo y derecho.

• Si se indican tres valores, el primero se asigna al margen superior, el segundo se asigna a los márgenes izquierdo y derecho y el tercero se asigna al margen inferior.

• Si se indican los cuatro valores, el orden de asignación es: margen

superior, margen derecho, margen inferior y margen izquierdo.

Para modificar la distancia entre los elementos es posible utilizar también la propiedad float. Con esta propiedad es posible especificar la posición de un determinado elemento dentro de su contenedor. El contenido que circunda al elemento se desplaza hasta la zona más próxima a la izquierda o más cercana a la derecha de la posición en la que originalmente se encontraba.

Sintaxis selector {float: valor;} Los valores de uso para esta propiedad en particular son:

• left. El elemento indicado se pone en el lado izquierdo de la caja contenedora, mientras el contenido se desliza a la derecha.

• right. El elemento indicado se pone en el lado derecho de la caja contenedora, mientras el contenido se desliza a la izquierda.

El valor por defecto, sin que la propiedad float se especifique, implica un posicionamiento normal del elemento indicado. La siguiente estructura parcial, por ejemplo, se usará para posicionar, según un valor preciso, dos elementos: la imagen será colocada a la izquierda del elemento contenedor, mientras el contenido presente junto a la misma, se deslizará al lado derecho.

<html> <head><title>propiedad float</title> <style type="text/css"> p { font: italic bold 20px "Times New Roman", serif;} h2 {text-decoration: underline; } img {float: left; } </style> </head> <body> <h2><em>Dedicada a los amigos de cuatro patas</em></h2> <p> <img src="cachorros.jpg"/> Poniendo la nariz negra en el vidrio, el perro espera, espera siempre a alguien</p> <p> Meto la mano en su pelo, yo también espero a alguien. </p> <p>Recuerda, perro, hubo un momento cuando una mujer vivía aquí. </p> <p>¿Y quién era ella para mí?

Quizás una hermana, una esposa quizás, </p> <p>y quizás, a veces, parecía una hija a quien debía ayudar. </p> <p>Ella está lejos... Te has quedado callado. Mas no habrán otras mujeres aquí. </p> <p>Mi buen perro, eres bueno en todo, pero que lástima que no puedas beber!</p> </body> </html>

Output

Modificar el estilo del relleno Como hemos visto el relleno (padding) es aquel espacio entre un elemento y su borde. La configuración del relleno es similar a aquella relativa a los márgenes. De hecho, existen propiedades individuales para especificar el estilo del relleno de cada uno de los lados de un elemento y el uso de una propiedad abreviada para configurar contemporáneamente distintos rellenos.

Las propiedades de estilo individuales utilizables para la configuración del relleno son: padding-top, padding-right, padding-left y padding-bottom. Como ya dijimos, es posible utilizar los rellenos como si fueran márgenes. Incrementar el relleno implica también un incremento del espacio entre los elementos. Sin embargo, los márgenes deberían ser utilizados para aumentar el espacio entre los elementos, mientras el relleno debería ser especificado y aumentado para mejorar la legibilidad de un documento, separando un determinado elemento de sus bordes.

Por ejemplo, el color de fondo de un elemento se extiende automáticamente hasta el límite del relleno del elemento mismo. Por lo tanto, incrementar el relleno de un elemento puede extender el fondo más allá del elemento. Veamos de qué modo usar las propiedades de estilo específicas para modificar el relleno de los elementos. Con las propiedades padding-top, padding-right, padding-bottom y padding-left, podemos especificar un valor distinto de relleno para cada lado de un elemento, como se indica en la siguiente estructura y en el output relativo.

<html> <head><title>padding</title> <style type="text/css"> h2 {text-align: center; } p { font: italic bold 20px "Times New Roman", serif;} blockquote { padding-top: 1em; padding-right: 3em; padding-bottom: 1em; padding-left: 3em; background-color: #D098D4; width: 60%; text-align: center;} // El área del relleno ha sido evidenciada en violeta. Se establecieron valores de relleno mayores para los lados izquierdo y derecho del elemento blockquote // img {float: right; } </style> </head> <body> <h2><em>Dedicada a los amigos de cuatro patas</em><img src="cachorros.jpg"/></h2> <blockquote> <p> Metiendo la nariz negra en el vidrio,

el perro espera, espera siempre a alguien. </p> <p> Meto la mano en su pelo, yo también espero a alguien. </p> <p> Recuerda, perro, hubo un momento cuando una mujer vivía aquí. </p> <p> ¿Y quién era ella para mí? Quizás una hermana, una esposa quizás, </p> <p> y quizás, a veces, parecía una hija a quien debía ayudar.

</p> <p> Ella está lejos... Te has quedado callado. Mas no habrán otras mujeres aquí. </p> <p> Mi buen perro, sos bueno en todo, pero que lástima que no puedas beber! </p> </blockquote> </body> </html>

Output

Como ya dijimos, es posible establecer los cuatro rellenos de un elemento de forma directa. La propiedad que permite definir de forma simultánea los cuatro rellenos se denomina padding. Con esta propiedad abreviada es posible especificar de 1 hasta 4 valores, respetando la siguiente secuencia de valores: Ejemplo: selector { padding: top right bottom left; } blockquote { padding: 1em 3em 1em 3em; background-color: #D098D4;}

Si se desea establecer un relleno derecho e izquierdo de igual amplitud es posible proporcionar sólo 3 valores, teniendo en cuenta que: el valor de relleno para el lado derecho (el segundo de la secuencia) será aplicado automáticamente también para el lado izquierdo, así como hemos visto en relación a la propiedad margin. selector { padding: top right/left bottom; } Del mismo modo, proporcionando sólo dos valores de relleno, el primer valor será aplicado a los lados superior e inferior, mientras el segundo a los lados izquierdo y derecho.

selector { padding: top/bottom right/left; }

Agregar y modificar los bordes

CSS permite definir el aspecto de cada uno de los cuatro bordes horizontales y verticales de los elementos. Para cada borde se puede establecer su anchura, su color y su estilo. Todas las propiedades de estilo, para modificar la visualización de los bordes de los elementos, se indican en la siguiente tabla.

Atributos de las celdas

Nombre propiedad Función border Propiedad abreviada

border-collapse Se usa para unir en un borde único, los bordes de dos

elementos adyacentes. Valores: collapse y separate (por defecto)

border-spacing Se usa para indicar el espacio presente entre los bordes de las

celdas adyacentes de una tabla.

border-top Establece un borde superior para un determinado elemento

border-right Establece un borde derecho para un determinado elemento

border-bottom Establece un borde inferior para un determinado elemento

border-left Establece un borde izquierdo para un determinado elemento

border-color Establece un color específico para los bordes de un determinado elemento.

border-top-color Establece un color específico para el borde superior de un determinado elemento

border-right-color Establece un color específico para el borde derecho de un determinado elemento

border-bottom-color Establece un color específico para el borde inferior de un determinado elemento

border-left-color Establece un color específico para el borde izquierdo de un determinado elemento

border-style

Establece un estilo específico para todos los bordes de un determinado elemento.

Valores: none, hidden, dotted, dashed, solid, double, groove, ridge , inset y outset.

border-top-style Establece un estilo específico para el borde superior de un determinado elemento.

border-right-style Establece un estilo específico para el borde derecho de un determinado elemento.

border-bottom-style Establece un estilo específico para el borde inferior de un determinado elemento.

border-left-style Establece un estilo específico para el borde izquierdo de un determinado elemento.

border-width Establece un espesor específico para los bordes de un determinado elemento

border-top-width Establece un espesor específico para el borde superior de un determinado elemento.

border-right-width Establece un espesor específico para el borde derecho de un determinado elemento.

border-bottom-width Establece un espesor específico para el borde inferior de un determinado elemento.

border-left-width Establece un espesor específico para el borde izquierdo de un determinado elemento.

Formatear los bordes creados Ahora que hemos visto todas las propiedades de estilo asociables a los bordes, veamos en detalle algunas de ellas. Utilizando la propiedad border-style será posible aplicar 10 tipos distintas de estilos predefinidos relativos a todos los bordes de un determinado elemento. Veamos, por ejemplo, la siguiente estructura y su output relativo. <html> <head><title>Estilos bordes</title> <link rel="stylesheet" href="estilo_bordes.css" type="text/css"/> <style type="text/css"> * { font-size: 30px; color: red; text-align: center; }

body {width: 50%;} </style> </head> <h3> Estilos predefinidos de los bordes</h3> <body> <div id="izquierda"> <p class="borde1"> dotted </p> <p class="borde2"> dashed </p> <p class="borde3"> solid </p> <p class="borde4"> double </p> </div> <div id="derecha"> <p class="borde5"> groove </p> <p class="borde6"> ridge </p> <p class="borde7"> inset </p> <p class="borde8"> outset </p> </div>

</body> </html> File .css conectado .borde1 {border-style: dotted; } .borde2 {border-style: dashed; } .borde3 {border-style: solid; } .borde4 {border-style: double; } .borde5 {border-style: groove; } .borde6 {border-style: ridge; } .borde7 {border-style: inset; } .borde8 {border-style: outset; } #izquierda { float: left; } #derecha {float: right; }

Output

Existen otros dos valores relativos a los tipos de bordes: none e hidden. El valor por defecto de esta propiedad es none, es decir, los elementos no muestran ningún borde visible a menos que se establezca explícitamente un estilo de borde.. El valor hidden es idéntico visualmente al elemento none, la única diferencia entre estos dos valores es que un borde oculto (hidden) se considera siempre como un borde real en el caso de que se verifiquen conflictos de visualización. Estos conflictos aparecen cuando elementos adyacentes comparten un mismo borde. En este caso, prevalecerá para ambos el valor del borde “no hidden”. En caso de que ambos elementos tengan un borde indicado como “hidden”, el borde en común será “ocultado” automáticamente.

Los estilos para los bordes incluyen propiedades específicas para cada lado: border-top-style, border-right-style, border-bottom-style, border-leftstyle y obviamente una propiedad abreviada, ya utilizada en el ejemplo anterior, para establecer contemporáneamente distintos estilos a los diferentes lados (border-style). Las propiedades individuales aceptan un solo valor de estilo por borde. El siguiente ejemplo establece todos los bordes de un elemento como “punteado” (dotted). h2 {border-style: dotted;}

Como cada propiedad de estilo abreviada, los valores de border-style Siguen las siguientes reglas:

• Especificando un solo valor este será aplicado automáticamente a

todos los lados.

• Especificando dos valores, el primer valor será usado para el borde superior e inferior, mientras el segundo valor será utilizado para el lado derecho e izquierdo.

• Especificando 3 valores, el borde superior seguirá el primer valor, los lados derecho e izquierdo el segundo mientras el lado inferior seguirá el tercero.

Cambiar los colores de un borde CSS

Es posible aplicar color a los bordes individualmente, para cada lado del elemento, mediante las propiedades individuales vistas en la tabla. Sin embargo, también en este caso para agilizar la operación de aplicación de estilos es posible utilizar la propiedad abreviada border-color.

Esta propiedad permite indicar de uno a cuatro valores. También para esta propiedad, la cantidad de valores insertados determina qué lados serán involucrados y con qué valores. La propiedad relativa a los colores de los bordes acepta valores en tres formatos distintos: ✦Palabras claves - black, white, green, etc. ✦Valores hexadecimales – Estos valores se especifican, como hemos ya visto en la forma #rrggbb.

✦Valores de colores decimales o porcentajes – Este valor se

especifica usando la propiedad rgb. Esta propiedad hace referencia a la composición del color en términos de la intensidad de los colores primarios con que se forma: el rojo, el verde y el azul. Cada valor individual puede ser cualquier número entero incluido entre 0 y 255, o un valor de porcentaje. Por ejemplo, el siguiente código especifica un color violeta (solo valores de rojo y azul, sin valores de verde) en forma de número entero. selector {border-color: rgb(255, 0, 255); }

El siguiente código especifica el mismo color violeta en valores porcentuales. selector {border-color: rgb(100%, 0, 100%); }

Espesor de los bordes El espesor o anchura de los bordes de un elemento puede ser especificado mediante la propiedad abreviada border-width, o

mediante las propiedades individuales, relativas a cada uno de los cuatro bordes de los elementos. La propiedad abreviada acepta de 1 a 4 valores. También en este caso, el modo con el cual los valores son asociados a los lados individuales depende del número de los valores indicados. Las reglas a seguir para la especificación de los valores son las mismas que hemos visto en relación a la propiedad border-style. Como valores para esta propiedad es posible usar las palabras claves: thin (borde delgado), medium (borde normal) y thick. (borde ancho). Además, es posible establecer el espesor de un borde empleando las unidades de medida em y px.

Por ejemplo, para indicar todos los bordes de un elemento con un espesor de 2px es posible usar la siguiente regla de estilo: selector { border-width: 2px; }

La propiedad abreviada border Por último, CSS define una propiedad de tipo abreviada global para establecer el valor de todos los atributos de todos los bordes de forma directa La propiedad border, indicada en primer lugar en la tabla relativa a las propiedades de estilo de los bordes, puede ser usada como propiedad abreviada, determinando en una única regla: el estilo, el espesor y el color de todos los bordes de un elemento. Esta propiedad abreviada, presenta la siguiente sintaxis:

selector {border: border-width border-style border-color; } Por lo tanto, según esta sintaxis los valores de las propiedades individuales deberán respetar el orden indicado, estableciendo en primer lugar los valores relativos al espesor y en última posición aquellos relativos al color. Por ejemplo, para establecer un borde ancho (thick), doble (double) y de color rojo (red) será necesario aplicar la siguiente regla de estilo. selector {border: thick double red;}

Otras propiedades en relación a los bordes

En relación a las tablas se usan dos propiedades de estilo específicas para los bordes de un elemento. La propiedad borderspacing controla el espacio presente entre los bordes de las celdas de una tabla (X)HTML. La propiedad border-collapse, en cambio, sirve para indicar cuando los bordes de las celdas adyacentes deben ser consideradas como un borde único.

Perfiles (outline) dinámicos

La propiedad outline es una de las "propiedades abreviadas" que define CSS y que se utilizan para establecer de forma sintetizada el valor de una o más propiedades individuales. En este caso, se utiliza para establecer el mismo grosor, estilo y/o anchura de todos los perfiles de un elemento. Si bien es cierto es muy similar a la propiedad border, en realidad se diferencian en algunos aspectos muy importantes:

1. Los perfiles no ocupan espacio, mientras que los bordes normales sí.

2. Los perfiles pueden tener formas no rectangulares.

La primera característica es la más importante. Los perfiles u outline siempre se dibujan "por encima del elemento", por lo que no modifican la posición o el tamaño total de los elementos. Un outline de base, sin estilos agregados, no es otra cosa que una línea que sirve para resaltar un determinado elemento. La aplicación de un outline básico puede ser, por ejemplo, representada por la siguiente definición de estilo: p {outline: #9932CC dashed medium; }

Estructura ejemplo <html> <head><title>ejemplo básico outline</title> <style type="text/css"> h3 {color: red; text-align: center;} p {outline: #9932CC double medium; margin: auto; // márgen automático, por lo tanto, el elemento p aparecerá en automático como centrado, es decir, con una misma distancia de los límites externos, según el box model // width: 200px; // ancho del elemento / padding: 50px; align: center;} @font-face { font-family: Chiller; src: local("chiller.ttf"), url("chiller.ttf") format('truetype')} body {font-family: Chiller; font-size: 24px ; background-color: #FFE4E1;} </style> </head>

<body> <h3>Este es un ejemplo de uso de un estilo relativo al outline</h3> <p>El texto de este elemento párrafo está encerrado por un "outline" de color violeta, double, medium ¡y no simplemente por un borde! </p> </body> </html>

Output

Como dijimos, los llamados outline no ocupan un espacio específico en la página, se posicionan fuera del borde de los elementos. Por lo tanto, no se puede indicar directamente la posición del outline, pero puede ser influenciada por la posición del borde de un elemento. A través de los CSS es posible modificar la visualización final de estos perfiles especiales. Pero, al contrario de las otras propiedades tratadas en esta lección, todos los perfiles u outline de un elemento deben ser los mismos y no pueden ser controlados individualmente. El perfil de un elemento es único y sus propiedades son idénticas para cada uno de los cuatro lados.

Las propiedades de outline son las siguientes: outline-color, outline-style, outline-width y la propiedad abreviada outline, usada en el ejemplo anterior. La propiedad outline no requiere que se indiquen las tres propiedades que definen el estilo de los perfiles. Si no se indica alguna propiedad, su valor se obtiene mediante el valor por defecto de esa propiedad. Por ejemplo, si sólo se indica el estilo del perfil, el navegador asignará en automático el valor medium a su grosor y el color que tenga el máximo contraste con el fondo de la página. La propiedad abreviada outline puede ser empleada con la siguiente sintaxis de base: selector {outline: outline-color outline-style outline-width; }

Es posible usar los perfiles de forma dinámica asociándolos a los pseudo-selectores :active y :focus. Como sabemos, estos pseudo-elementos permiten al diseñador web variar los estilos de un elemento en respuesta a las acciones del usuario. Active se acciona cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratón sobre un elemento, y focus cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado. Estos dos pseudo-elementos permiten especificar que el eventual perfil de un determinado elemento sea visible solamente cuando el mismo elemento sea “focalizado” por el usuario.

Por ejemplo, la siguiente definición de estilo especifica un perfil azul delgado sólo cuando los elementos del formulario tienen un “foco”, y un perfil rojo delgado cuando, en cambio, están “activos”. <html> <head> <title>ejemplo outline</title> <style type="text/css"> textarea:focus {outline: 2px solid blue;} textarea:active {outline: 2px solid red;} </style> </head> <body> <h4>¿Cómo se enteró de la promoción?</h4> <hr/> <form action="handler.php" method="post">

<p class="primer campo"> <label for="nombre">Nombre: </label><br/> <input type="text" name="nombre" id="nombre" size="20"><br/> <label for="apellido">Apellido: </label><br/> <input type="text" name="apellido" id="apellido" size="20"> </p> <p> <input type="checkbox" name="enteró" value="boca a boca" id="boca a boca"> <label for="boca a boca">Pasa palabraB</label><br/> <input type="checkbox" name="enteró" value="internet" id="internet"> <label for="internet">Internet</label><br/> <input type="checkbox" name="enteró" value="diarios" id="diarios"> <label for="diarios">Diarios</label><br/> <input type="checkbox" name="enteró" value="televisión" id="televisión"> <label for="televisión">Televisión</label><br/>

<input type="checkbox" name="enteró" value="otro" id="otro"> <label for="otro">Otro</label><br/> </p> <p> Especificar de que fuente<br/> <textarea> </textarea> </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>

Output

Sin embargo, no todos los navegadores soportan correctamente estos estilos específicos a través del uso conjunto de la propiedad outline con los pseudo-selectores :active y :focus. Un efecto similar se puede obtener utilizando en lugar de la propiedad outline, la propiedad border. Veamos nuevamente la estructura del ejemplo previo, oportunamente modificada. <html> <head> <title>border en lugar de outline</title> <style type="text/css"> body {background-color: #FFDEAD; }

form {margin: 50px 200px 200px 550px; } input:focus { border: 2px solid green;} textarea:active { border: 2px solid red;} hr {width: 50%; } h4 {text-align: center; } </style> </head> <body> <h4>¿Cómo se enteró de la promoción?</h4> <hr/> <form action="handler.php" method="post"> <p> <label for="nombre">Nombre: </label><br/> <input type="text" name="nombre" id="nombre" size="20"><br/> <label for="apellido">Apellido: </label><br/> <input type="text" name="apellido" id="apellido" size="20"> </p>

<p> <input type="checkbox" name="enteró" value="boca a boca" id="boca a boca"> <label for="boca a boca">Boca a boca</label><br/> <input type="checkbox" name="enteró" value="internet" id="internet"> <label for="internet">Internet</label><br/> <input type="checkbox" name="enteró" value="diarios" id="diarios"> <label for="diarios">Diarios</label><br/> <input type="checkbox" name="enteró" value="televisión" id="televisión"> <label for="televisión">Televisión</label><br/> <input type="checkbox" name="enteró" value="otro" id="otro"> <label for="otro">Otro</label><br/> </p> <p> Especificar la fuente<br/> <textarea> </textarea> </p> <p>

Output

FIN DE LA LECCIÓN

Aplicar estilo: administrar margen, relleno y borde a los elementos

Documents

Transcript of Aplicar estilo: administrar margen, relleno y borde a los elementos