Shorthand: notación CSS abreviada. border-width (thin, thick) border-color (transparent). Ejemplos. (CU01027D)
Les dejo ambas aquí:
1-Crea un documento HTML con 2 divisiones, cada una separada de la anterior por dos elementos <br/>. En cada división introduce un texto (p.ej. div 1, div 2) y aplícale los siguientes estilos de borde escribiendo de forma individual cada una de las siguientes propiedades CSS:
a) Para el div 1: la parte superior con borde de puntos redondeados, grosor 10 píxeles y color verde. La parte derecha con borde de trazos o segmentos rectangulares, grosor 20 píxeles y color azul. La parte inferior con borde de línea doble, grosor 10 píxeles y color #A52A2A. La parte izquierda con borde con efecto groove, grosor 30 píxeles y color #2F4F4F.
b) Para el div 2: la parte superior con borde con efecto inset, grosor 30 píxeles y color #B22222. La parte derecha con borde sólido, grosor 22 píxeles y color #DAA520. La parte inferior con borde de línea doble, grosor 25 píxeles y color #4B0082. La parte izquierda con borde de puntos redondeados, grosor 17 píxeles y color #808000.
Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tipos de bordes (Actividad 1 de CU01027D)</title>
<link rel="stylesheet" type="text/css" href="TiposDeBordes.css">
</head>
<body>
<h1>Tipos de bordes</h1>
<br>
<div id="first-div">
<p>División 1</p>
</div>
<br><br>
<div id="second-div">
<p>División 2</p>
</div>
</body>
</html>
Código CSS
/*DATOS DEL ARCHIVO*/
body{text-align: center; width: 800px;}
/*titulo*/
h1{text-decoration: underline; font-family: "lucida console", arial;}
/*Definición de los bordes para div 1*/
#first-div{border-top-style: dotted; border-top-width: 10px; border-top-color: #0F0;/*arriba*/
border-right-style: dashed; border-right-width: 20px; border-right-color: #00F;/*derecha*/
border-bottom-style: double; border-bottom-width: 10px; border-bottom-color: #A52A2A;/*abajo*/
border-left-style: groove; border-left-width: 30px; border-left-color: #2F4F4F;}/*izquierda*/
/*Definición de los bordes para div 2*/
#second-div{border-top-style: inset; border-top-width: 30px; border-top-color: #B22222;/*arriba*/
border-right-style: solid; border-right-width: 22px; border-right-color: #DAA520;/*derecha*/
border-bottom-style: double; border-bottom-width: 25px; border-bottom-color: #4B0082;/*abajo*/
border-left-style: dotted; border-left-width: 17px; border-left-color: #808000;}/*izquierda*/
2-Crea un documento HTML con el mismo aspecto y propiedades CSS que las descritas para el ejercicio 1, pero en este caso usando la notación shorthand de bordes CSS y la propiedad border abreviada.
Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tipos de bordes (Actividad 1 de CU01027D)</title>
<link rel="stylesheet" type="text/css" href="TiposDeBordes2.css">
</head>
<body>
<h1>Tipos de bordes</h1>
<br>
<div id="first-div">
<p>División 1</p>
</div>
<br><br>
<div id="second-div">
<p>División 2</p>
</div>
</body>
</html>
Código CSS
/*DATOS DEL ARCHIVO*/
body{text-align: center; width: 800px;}
/*titulo*/
h1{text-decoration: underline; font-family: "lucida console", arial;}
/*Definición de los bordes para div 1*/
#first-div{border-width: 10px 20px 10px 30px;
border-style: dotted dashed double groove;
border-color: #0F0 #00F #A52A2A #2F4F4F;}
/*Definición de los bordes para div 2*/
#second-div{border-top: 30px inset #B22222;
border-right: 22px solid #DAA520;
border-bottom: 25px double #4B0082;
border-left: 17px dotted #808000;}
Tema: HTML y CSS Shorthand: notación CSS abreviada border-width border-color CU01027D (Leído 1997 veces)
RSS -
WAP2