Los marcos colocados alrededor de imágenes o texto decoran el sitio y agregan variedad a su diseño. Si usa tablas para crear bordes, entonces el código para cada borde ocupará demasiado espacio. Además, en este caso, tendrá que volver a escribir el código HTML para cada marco. Con CSS, puede crear fácilmente un borde de cualquier grosor y color que desee escribiendo un código simple una vez para todos los elementos que estarán rodeados por este borde. Esta tecnología permitirá, si es necesario, cambiar el tipo de marcos en el sitio en un par de minutos.
Es necesario
- - tener su propio sitio web;
- - saber qué es CSS y dónde están escritos estos estilos en el sitio.
Instrucciones
Paso 1
Para crear un borde, primero escriba el siguiente código en CSS:
ramka {}
Paso 2
Para hacer que el borde tenga el tamaño que desea, use el parámetro de ancho de borde, que establece el ancho de línea en píxeles. Por ejemplo, si la línea del marco debe tener 3 píxeles de ancho, la entrada se verá así:
ramka {border-width: 3px;}
Paso 3
Ahora defina el estilo del borde usando el parámetro de estilo de borde. Si desea crear un borde cuyos lados sean líneas continuas regulares, coloque la siguiente entrada en el código entre las llaves: border-style: solid.
Paso 4
Se puede obtener un borde punteado escribiéndolo así: border-style: dotted. Verificando el estilo del borde: discontinuo le dará un borde discontinuo.
Paso 5
Puede hacer que el borde sea una línea sólida doble como esta: border-style: double. Utilice border-style: groove o border-style: ridge para enmarcar texto o imágenes en marcos con efectos secundarios 3D. La diferencia entre estas dos opciones es que en el primer caso, el marco consta de líneas con sangría y en el segundo, convexas.
Paso 6
Utilice este código: border-style: inset para crear el efecto de un recuadro con el borde de un elemento del sitio. Para hacer que el contenido del borde, junto con el borde, por el contrario, sea convexo, escriba border-style: outset.
Paso 7
Puede agregar el color deseado al marco usando el parámetro border-color, también colocado entre las llaves. Si desea que el borde sea rojo, escriba color de borde: rojo, azul - color de borde: azul, naranja - color de borde: naranja.
Paso 8
El código de borde CSS, incluidas todas las opciones, se ve así:
ramka {ancho del borde: 3px; estilo de borde: sólido; color del borde: azul;}
Paso 9
Ahora, en HTML, escribe esto:
Contenido del marco En lugar de la frase "Contenido del marco", inserte el texto o código de la imagen deseada.
Paso 10
Por lo tanto, puede diseñar un número ilimitado de elementos en el sitio. Para cambiar la apariencia del marco, solo necesita cambiar el código CSS.
