oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS
Curso CSS - Lección 11: Modelo de caja (bordes)
En esta lección veremos para qué podemos utilizar los bordes, se pueden usar como elemento decorativo o bien para separar dos elementos. Gracias a CSS podemos utilizar un sin fin de opciones en la inserción de bordes para tus páginas.
Anchura del borde (border-width)
Definiremos la anchura del borde por medio de la propiedad border-width.Definiremos los valores para esta propiedad utilizando píxeles o bien por: thin, medium y strong. Aunque yo siempre recomiendo la utilización de los píxeles: 1px, 3px, etc... .
Color del borde (border-color)
Con border-color definiremos el color de nuestro borde. Los valores a usar en esta propiedad son:
- Notación hexadecimal: "#ff0000"
- Notación RGB: "rgb(239,48,56)"
- Nombre del color: "red"
Estilo del borde (border-style)
Con esta propiedad prodremos elegir diferentes estilos de borde, los valores para usar con esta propiedad son los siguientes: dotted, dashed, solid, double, groove, ridge, inset y outset.
Pero veamos unas imágenes para asociar los valores anteriormente descritos:
Algunos ejemplos de definición de bordes
Veamos ahora unos cuantos ejemplos para los elementos <h1>, <h2>, <p> y <ul>. Para ello juntaremos las tres propiedades descritas anteriormente para que nuestro código CSS quede de la siguiente manera:
h1 {
border-width: 4px;
border-style: dashed;
border-color: red;
}
h2 {
border-width: 10px;
border-style: groove;
border-color: gold;
}
p {
border-width: 6px;
border-style: outset;
border-color: green;
}
ul {
border-width: 15;
border-style: double;
border-color: blue;
}
Y el resultado en nuestro navegador se visualizaría así:
Como ves las posibilidades CSS a la hora de aplicar bordes son prácticamente infinitas, solo es cuestión de ir probando convinaciones y aplicar a tus páginas las que más te gusten. Como siempre te digo, estate algo de tiempo practicando lo que acabas de aprender y aplicandolo a tus experimentos. Verás como ahora tus páginas ganan en diseño.
En la siguiente lección veremos como aplicar dimensiones al modelo de caja de nuestras páginas web.
Quiero aprender más!!!
- Avanzar a Lección 12: Modelo de caja (altura y anchura)
- Retroceder a Lección 10: Modelo de caja (margen y relleno)
©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es
Design By: JTole®