Atico
Calas y pueblos gallegos
Piso en las rias bajas y Pontevedra

Tutor de hojas de estilo gratis


Pasa el cursor por el rectangulo

Codigo:
<STYLE>
button {font: caption;}
icon {font: icon;}
menu {font: menu;}
</STYLE>
</BUTTON>
Este es el texto del button
</BUTTON>

Cajas Nº1

Caja exterior exterior
Caja interior interior
Codigo
<STYLE>
#cajaexterior1 {
text-align: center;
width: 300; height: 100;
border: 1px solid #FF0000;
}
#cajainterior1 {
text-align: center;
height: 80; width: 300;
border: 1px solid #FF0000;
}
</STYLE>
<div id=cajaexterior1>
Caja exterior exterior<br>
<div id=cajainterior1>
Caja interior interior<br>
</div></div>

Cajas Nº2

Caja exterior exterior
Caja interior interior
La caja se expandira
al añadirle texto
Codigo:
<STYLE>
#cajaexterior {
background: beige;
/*color de la caja*/
 width: 300px;
/*longitud de la caja*/
 padding-top: 2%;
/*espacio del texto por arriba*/
 text-align: center;
/*centra el texto*/
 border: 1px solid #FF0000;
/*parametros del borde*/}
 #cajainterior {
text-align: center;
/*centra el texto*/
background: coral;
/*color de la caja*/
 padding: 2%;
/*expande la caja alrededor del texto*/
 margin-top: 3%;
/*mueve la caja hacia abajo*/
 margin-bottom: 4%;
/*mueve la caja hacia arriba*/
 border: 1px solid #0000FF;
/*parametros del borde*/
}
</STYLE>
<div id=cajaexterior>
 Caja exterior exterior<br>
<div id=cajainterior>
 Caja interior interior<br>
</div>
 La caja se expandira<br>
al añadirle texto<br>
</div>

Los BORDES con CSS.

Se pueden especificar bordes
a todo tipo de elementos.

Se puede poner un texto descriptivo
invisible dentro de /* */
Ejemplo:
background: gold /*fondo oro*/;

Existen tres atributos para el borde:
BORDER: <tipo> <grosor> <color>;

<COLOR> especifica el color
en #xxxxxx o nombre.
 h1 {border: green}
h1 {border: #006600}

<GROSOR> especifica el grosor
en medidas px, pc, in, cm, mm, etc.
 h1 {border: 10px}
h1 {border: 1mm}
El <TIPO> es uno de los siguientes:

NONE; /*Por defecto (prefijada).*/
 DOTTED; /*Borde de puntos.*/
 DASHED; /*Borde de cuadrados.*/
 DOUBLE; /*Borde con dos líneas*/
 SOLID; /* Borde sólido */
 RIDGE; /* Borde sólido 3D */
 GROOVE; /* Borde sólido 3D */
 INSET; /*Borde de un color,fuerte arriba/tenue abajo/*
 OUTSET;/*Borde de color,fuerte abajo/tenue arriba.*/

Atributos de bordes
BORDER-STYLE: atributos de borde/s;
 Admite uno o cuatro estilos de borde.
 ( Si se ponen cuatro estilos de borde
cada uno definira un borde de la caja).
Ejemplo
DIV
{BORDER-STYLE:solid ridge groove dashed;}

Ejemplo de una caja.
<div style="width: 400;
color: navy;
text-align: center;
border: 6px green;
margin-bottom:12px;
border-style: solid dotted ridge dashed;">
TEXTO DE LA CAJA
</div>

Colores de los bordes:

Ejemplo en una pagina:
<html> <head> <title>Ejemplo</title>
<style>
#bordecolor
{
PADDING:12px;
BOTTOM: 120px;
TEXT-ALIGN: center;
WIDTH: 200; HEIGHT: 80;
BORDER: solid;
BORDER-COLOR: red lime green aqua;
BORDER-WIDTH: 2px 4px 6px 8px;
}
</style> </head> <body>
<div id=bordecolor>
<B>TEXTO DE LA PAGINA</B>
</div></body> </html>
Resultado:
TEXTO DE LA PAGINA

Ejemplo de otra pagina:
<html> <head> <tittle>Ejemplo</title>
<style>
#bordercolor {
PADDING-TOP: 20;/*espacio de arriba*/
 WIDTH: 400; HEIGHT: 80;/*tamaño de la caja*/
 BORDER-COLOR: green;/*color de bordes*/
 BORDER-WIDTH: 6px;/*grosor de los bordes*/
 BORDER-STYLE: dotted dashed inset outset;
/*clases o estilos de los cuatro bordes*/
 }
</style> </head> <body>
<div id=bordercolor>
<B>TEXTO DE LA PAGINA</B>
</div></body> </html>
Resultado:
TEXTO DE LA PAGINA

Para poner grosores en uno de
los cuatro bordes se puede emplear:
BORDER-TOP: ridge         4px; (arriba)
BORDER-LEFT: dotted     4px; (izquierda)
BORDER-RIGHT: dashed 4px; (derecha)
 BORDER-BOTTOM: solid 4px; (abajo)
Se puede abreviar asi;
BORDER: atributo 4px 4px 4px 4px;

Ejemplo en una pagina:
 <HTML> <HEAD> <tittle>Ejemplo</TITLE>
<STYLE>
#tiposdeborde
{
WIDTH: 200; HEIGHT: 80;
BORDER-TOP: ridge 4px red;
 BORDER-LEFT: dotted 4px maroon;
 BORDER-RIGHT: dashed 4px blue;
 BORDER-BOTTOM: solid 4px green;
 }
</STYLE> </HEAD> <BODY>
<div id=tiposdeborde>
<CENTER>
<B>TEXTO DE LA PAGINA</B>
</CENTER>
</DIV></BODY> </HTML>
Resultado:
TEXTO DE LA PAGINA

BORDER-WIDTH: estilo valor/es;
 Para poner los grosores de cada uno
de los cuatro bordes se emplean:
BORDER-TOP-WIDTH: valor;
BORDER-LEFT-WIDTH: valor;
BORDER-RIGHT-WIDTH: valor;
BORDER-BOTTOM-WIDTH: valor;
En lugar de todos ellos se puede usar:
BORDER-WIDTH: valor valor valor valor;

Ejemplo en una pagina:
 <HTML> <HEAD> <TITTLE>Ejemplo</TITLE>
<STYLE type="text/css">
#borde-width
{ WIDTH: 200; HEIGHT: 80;
BORDER: solid green;
BORDER-TOP-WIDTH: 2px;
BORDER-LEFT-WIDTH: 4px;
BORDER-RIGHT-WIDTH: 6px;
BORDER-BOTTOM-WIDTH: 8px; }
</STYLE> </HEAD> <BODY>
<P id=borde-width>
<CENTER>
<B>TEXTO DE LA PAGINA</B>
</CENTER> </P>
</BODY> </HTML>

Resultado:
TEXTO DE LA PAGINA

Los valores pueden ser
uno de los siguientes:
THIN; Borde fino.
THICK; Borde grueso.
MEDIUM; Borde mediano.

Ejemplos de bordes
con varias grosores
P {border-width: 9px 9px9px 9px;}
Los 4 bordes tienen un grosor 9pixeles

H1 { border-width: thin }
/* thin thin thin thin */

H1 { border-width: thin thick }
/* thin thick thin thick */

H1 { border-width: thin thick medium }
/* thin thick medium thin */

H1 { border-width: thin thick medium thin}
/* thin thick medium thin */


Ejemplo con
THIN THICK MEDIUM:
 <HTML> <HEAD> <TITTLE>Ejemplo</TITLE>
<STYLE>
#bordes
{
WIDTH: 200; HEIGHT: 80;
BORDER: solid green;
BORDER-TOP-WIDTH: thin;
BORDER-LEFT-WIDTH: thick;
BORDER-RIGHT-WIDTH: medium;
BORDER-BOTTOM-WIDTH: thin;
}
</STYLE> </HEAD> <BODY>
<P id=bordes>
<CENTER>
<B>TEXTO DE LA PAGINA</B>
</CENTER>
</P></BODY> </HTML>
Resultado:
TEXTO DE LA PAGINA



Insertando codigos CSS
dentro de un <DIV>
o cualquier otra etiqueta, tales como
<p>   <h1>   <h2>   <h3>,   etc.
se pueden hacer tablas (cajas).
Ejemplo:
 <div style="width: 300;
background: red;
font: bold 18px beige;
border: 4px dashed navy">
TEXTO EJEMPLO
</div>
 Este es el resustado:

TEXTO EJEMPLO

Ejemplos de varios estilos

Este es el estilo de BORDER: solid;

Este es el estilo de BORDER: ridge;

Este es el estilo de BORDER: dotted;

Este es el estilo de BORDER: dashed;

Este es el estilo de BORDER: double;

Este es el estilo de BORDER: groove;

Este es el estilo de BORDER: inset;

Este es el estilo de BORDER: outset;

Ejemplos de bordes:
BORDER-COLOR: RED;
Borde en color rojo.

Ejemplos de borde doble y en rojo:
.borde
{border: 1em red double}
O tambien:
 #borde
{border: 1em red double}

Ejemplos de activacion de .BORDE <P class="borde">Texto </P>
<div class="borde">Texto </div>
Ejemplos de activacion de #BORDE
<P id="borde">Texto </P>
o <div id="borde">Texto </div>

Codigo de esta caja:
 <div style="
border: 2px red ridge; /*clase de bordes*/
width: 400; /*longitud de la caja*/
padding: 6px; /*tamaño espacio interior*/
text-align:center; /*texto centrado*/
font: bold 18px arial; /*texto de la caja*/ ">
</div>

Caja con
BORDER: double;
en un pagina

css TEXTO DE LA PAGINA


Codigo:
<html><head><title>Ejemplo</title>
<style type="text/css">
.borde
{
width:250; padding: 8px;
border: blue 1em double;
}
</style></head>
<body>
<B class="borde">
TEXTO DE LA PAGINA
</B>
</body></html>

Esto se llama caja o marco
Codigo:
<div style="background: beige;
border: ridge 15px;
border-color: red plum yellow aqua;
width: 400;
padding: 9px;
color: darkred;
text-align: center;
font: bold 18px arial black">
Esto se llama caja o marco
</div>
Al curso de CSS
Curso de ingles
A tutores gratuitos
Aticos para verano
Curso de Windows
Programas y juegos
Programas de idiomas
Curso