Autor Tema: Comparación entre escribir propiedades extendidas y CSS abreviado CU01027D#  (Leído 1981 veces)

hymsoft

  • Intermedio
  • ***
  • Mensajes: 103
  • hymsoft
    • Ver Perfil
Buenas buenas!!!!

Dejo mi ejercicio para la entrega numero CU01027D del curso de fundamentos de programación web con CSS. Ya que la idea de CSS es cambiar la hoja de estilo tratando de no tocar el HTML, solo hice 1 html y 2 hojas de estilo, aunque en este caso no cambia nada visualmente, jajajajaja, pero ya llegaremos a eso!!!!

saluto a tutti e buona vita

CU01027D.html
Código: [Seleccionar]
<html lang="es">
  <head>
    <title>Notación CSS abreviada - curso aprenderaprogramar.com</title>
    <meta name="author" content="Hugo A. Segura" />
    <meta name="description" content="Notacion CSS abreviada - aprenderaprogramar.com" />
    <meta name="keywords" content="bordes CSS, CSS, cursos, ejemplos, aprenderaprogramar.com,CU01026D" />   
    <meta charset="utf-8" />
    <meta name="robots" content="index, follow" />
    <link rel="stylesheet" type="text/css" href="CU01027Dejer1.css"/>
  </head>
 
  <body>
    <div id="contenedor">
      <div id="div01">Div 1</div>
      <br/><br/>
      <div id="div02">Div 2</div>
    </div>
  </body>
</html>

CU01027Dejer1.css
Código: [Seleccionar]
/* Estilos aplicados al ejercicio entrega N1 26
aprenderaprogramar.com (CU01027D) ejercicio 1*/
html{
  text-align: center;
  background-color: aquamarine;
}

#contenedor{
  font-size: 1.2em;
  height: 400px;
}

#div01{
  height: 50%;
  border-top-style:dotted; border-top-width:10px; border-top-color:#00FF00;
  border-right-style:dashed; border-right-width:20px; border-right-color:#0000FF;
  border-bottom-style:double; border-bottom-width:10px; border-bottom-color:#A52A2A;
  border-left-style:groove; border-left-width:30px; border-left-color:#2F4F4F;
}

#div02{
  height: 50%;
  border-top-style:inset; border-top-width:30px; border-top-color:#B22222;
  border-right-style:solid; border-right-width:22px; border-right-color:#DAA520;
  border-bottom-style:double; border-bottom-width:25px; border-bottom-color:#4B0082;
  border-left-style:dotted; border-left-width:17px; border-left-color:#808000;
}

CU01027Dejer2.css
Código: [Seleccionar]
/* Estilos aplicados al ejercicio entrega N1 26
aprenderaprogramar.com (CU01023D) ejercicio 2*/
html{
  text-align: center;
  background-color: aquamarine;
}

#contenedor{
  font-size: 1.2em;
  height: 400px;
}

#div01{
  height: 50%;
  border-top:dotted 10px #00FF00;
  border-right:dashed 20px #0000FF;
  border-bottom:double 10px #A52A2A;
  border-left:groove 30px #2F4F4F;
}

#div02{
  height: 50%;
  border-top:inset 30px #B22222;
  border-right:solid 22px #DAA520;
  border-bottom:double 25px #4B0082;
  border-left:dotted 17px #808000;
}
« Última modificación: 26 de Agosto 2016, 20:46 por Ogramar »
"Una persona inteligente es aquel que sabe ser tan inteligente como para contratar gente mas inteligente que el"

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Buenas Hugo, el ejercicio perfecto, además aplicando la idea básica de todo esto: la misma estructura, diferentes estilos (aunque en este caso como dices resulta que se ve igual :) )

Salu2

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".