Tutor de hojas de estilo gratis
Los BORDES con CSS.
a todo tipo de elementos.
invisible dentro de /* */
Ejemplo:
<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 y tenue abajo /* OUTSET; / *Borde de un color, fuerte abajo y tenue arriba.*/ |
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;
}
Significados:
solid; borde superior
ridge; borde derecho
groove; borde inferior
dashed; borde izquierdo
Los atributos son los siguientes:
none;
solid;
ridge;
inset;
outset;
dotted;
groove;
double;
dashed;
text-align: center; border: 6px green;
border-style: solid dotted ridge dashed;">
TEXTO DE LA CAJA
</div>
Admite cuatro colores para los 4 bordes.
BORDER-COLOR: red brown green navy;
Pone los colores de los cuatro bordes.
Ejemplo en una pagina:
<html> <head> <title>Ejemplo</title>
<style>
#bordecolor
{
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:
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:
los cuatro bordes se puede emplear:
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>
Para poner los grosores de cada uno
de los cuatro bordes se emplean:
BORDER-LEFT-WIDTH: valor;
BORDER-RIGHT-WIDTH: valor;
BORDER-BOTTOM-WIDTH: valor;
En lugar de todos ellos se puede usar:
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>
Los valores pueden ser
uno de los siguientes:
THIN; Borde fino.
THICK; Borde grueso.
MEDIUM; Borde mediano.
con varias grosores
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 */
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>
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
Borde en color rojo.
{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>
<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>
BORDER: double;
en un 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>
<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>
A tutores
Al curso de ingles
Aticos para verano
Programas y juegos
