Unidad 10. Ejercicio: CSS. Margin y padding. Fondo, bordes



En este ejercicio practicaremos con selectores CSS. Para realizar este ejercicio debes descargarte el archivo excel5.html de la carpeta ejercicios/unidad-10/curso-excel/excel5.html y guardarlo en la carpeta de ejercicios/curso-excel (o copiar el código que se muestra a continuación). También debes descargarte el archivo de la hoja de estilo excel5.css ejercicios/unidad-10/curso-excel/css/excel5.css y guardarlo en la carpeta de ejercicios/curso-excel/css (o copiar el código que se muestra a continuación).

Ejercicio 1: Margin y padding. Fondo, bordes.

  1. Desde el editor Brackets abre el archivo excel5.html.
  2. Debes ver el siguiente código:
    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>Curso de Excel 2016</title>
      <link rel="stylesheet" type="text/css" href="css/excel4.css" />
    </head>
     <body>
      <ul>
      <li><a href="excel3.html">Atrás</a></li>
      <li><a href="index.html">Índice</a></li>
      <li><a href="excel5.html">Adelante</a></li>
      </ul>
      <h1 id ="top">Unidad 4. Manipulando celdas</h1>
      <div>
      <p>Vamos a ver los diferentes métodos de <span class="resaltado">selección de celdas</span> para poder modificar el aspecto de éstas, así como diferenciar entre cada uno de los métodos y saber elegir el más adecuado según la operación a realizar.</p>
    </div> <h2 class="rectangulo1">4.1. Selección de celdas</h2>
    <h2 class="rectangulo2">4.1. Selección de celdas</h2>
    <h2 class="rectangulo3">4.1. Selección de celdas</h2> <div> <p>Antes de realizar cualquier modificación a una celda o a un rango de celdas con Excel 2016, tendremos que <span class="resaltado">seleccionar</span> aquellas celdas sobre las que queremos que se realice la operación. A continuación encontrarás algunos de los métodos de selección más utilizados. </p> <p id="recomendamos">Te recomendamos iniciar Excel 2016 ahora para ir probando todo lo que te explicamos.</p> <p>A la hora de seleccionar celdas, es muy importante fijarse en la forma del puntero del ratón para saber si realmente vamos a seleccionar celdas o realizar otra operación. La forma del puntero del ratón a la hora de seleccionar celdas consiste en una cruz gruesa blanca, tal como se ve a continuación:<img src="graficos/seleccion_excel_2013.gif"></p>
    <p>Hay varias formas de seleccionar elementos:</p> <ol> <li><p>Selección de una <span class="resaltado">celda</span>: Solo tienes que hacer clic sobre ella.</p></li> <li><p>Selección de una <span class="resaltado">columna</span>: Hacer clic en el identificativo superior de la columna a seleccionar.</p></li> <li><p>Selección de una <span class="resaltado">fila</span>: Hacer clic en el identificativo izquierdo de la fila.</p></li> </ol> </div> <h2>4.2. Añadir a una selección </h2> <div> <p>Muchas veces puede que se nos olvide seleccionar alguna celda o que queramos seleccionar celdas <span class="resaltado">NO contiguas</span>. Para ello, se ha de realizar la nueva selección manteniendo pulsada la tecla CTRL.</p>
    <p>Este tipo de selección se puede aplicar con celdas, columnas o filas. Por ejemplo, podemos seleccionar una fila y añadir una nueva fila a la selección haciendo clic sobre el indicador de fila manteniendo pulsada la tecla CTRL.</p>
    <p>Para ir al principio de esta página <span class="resaltado">pulsa</span> este icono <a href="#top"><img src="graficos/icono_top.png"></a></p>
    </div> <hr> <p><a href="https://www.aulaclic.es/index.htm" target="_blank"> &copy; aulaClic S.L.</a></p>
    </body> </html>
  3. Abre la hoja de estilo excel5.css, debes ver este código:
    /* CSS Hoja de estilo. excel5.css */
    ul {
        list-style-type: none
    }
    .rectangulo1 { background-color: beige; color: green; border: 1px; border-style: solid; } .rectangulo2 { background-color: beige; color: green; border: 1px; border-style: solid; } .rectangulo3 { background-color: beige; color: green; border: 1px; border-style: solid; }
  4. Para ver mejor el efecto del margin y del padding hemos dado un color de fondo y un borde a los tres encabezados repetidos <h2 class="rectangulo1">4.1. Selección de celdas</h2>, ...
    Observa como hay un espacio entre los bordes de estos tres h2, ello es debido a que el margin superior e inferior no es cero, tiene un valor por defecto (suele ser de 20 px ó 1em, dependiendo de los navegadores). Para comprobarlo, en la hoja de estilo excel5.css, vamos a dar un valor de cero a los margin superior e inferior de h2 con la regla siguiente: h2 {margin-top: 0px; margin-bottom: 0px}.
    Visualiza la página y observa como ahora los bordes de los encabezados están juntos. Una vez comprobado, elimina la regla que acabamos de crear.
  5. Ahora vamos a aumentar a 30 px. el margin inferior del primer encabezado h2, añadiendo margin-bottom: 30px;, a la clase .rectangulo1, por lo tanto la clase quedará:
    .rectangulo1 {
    background-color: beige;
    color: green;
    border: 1px;
    border-style: solid;
    margin-bottom: 30px;
    }

    Observa cómo ha aumentado la distancia entre los bordes del primer y segundo encabezados.
  6. Si ahora aumentamos a 25 px. el margin superior del segundo encabezado h2 añadiendo margin-top: 25px;, a la clase .rectangulo2, la distancia entre los bordes del primer y segundo encabezados debería aumentar a 55 px (25+30), sin embargo la distancia no aumenta, permanece igual. Esto se debe a que, como explicamos en la teoria de esta unidad, el margin-top y el margin-bottom de elementos adyacentes no se acumulan, se aplica el mayor de ambos.
  7. Podemos utilizar los márgenes para centrar un elemento horizontalmente. Por ejemplo, vamos a definir una anchura del 75% al tercer encabezado h2, añadiendo width: 75%, a la clase .rectangulo3, si lo visualizas verás como el encabezado está ajustado a la izquierda. Para centrarlo añadimos margin-left: auto; margin-right: auto; por lo tanto la clase quedará:
    .rectangulo3 {
    background-color: beige;
    color: green;
    border: 1px;
    border-style: solid;
    margin-left: auto;
    margin-right: auto;
    width: 75% }

    Observa cómo ahora el encabezado está centrado horizontalmente.
  8. El padding es el espacio transparente entre el contenido y el borde, para verlo claramente vamos a establecer un padding de 10 px. en el primer encabezado h2 con padding: 10px
    Visualiza la página y observa como queda un espacio de 10 px. entre el texto y el borde
  9. Ya tenemos definido un borde de un pixel para el primer encabezado, ahora vamos a redondear las esquinas con el código siguiente: border-radius: 9px
  10. Vamos a establecer una imagen de fondo en el segundo encabezado h2, para ello, primero vamos a establecer una altura de 105 px, con height: 105px; y a continuación añadimos la imagen de fondo que puedes descargar en ejercicios/unidad-10/curso-excel/graficos/barra-repetida.png, y guardar en la carpeta ejercicios/curso-excel/gráficos, para ello escribimos la regla background-image: url(../graficos/barra-repetida.png);
    Observa como la imagen se repite a lo largo del eje x y del eje y, como solo quemos que se repita en el eje x, escribimos background-repeat: repeat-x;
    Ahora ya podemos cambiar la altura para que tenga la misma altura de la imagen height: 105px;.
  11. Al final, el archivo de la hoja de estilo excel5.css tendrá este aspecto:
    /* CSS Hoja de estilo. excel5.css */
    ul {
    list-style-type: none
    }
    .rectangulo1 {
    background-color: beige;
    color: green;
    border: 1px;
    border-style: solid;
    margin-bottom: 30px;
    padding: 10px;
    border-radius: 9px
    }
    .rectangulo2 {
    background-color: beige;
    color: green;
    border: 1px;
    border-style: solid;
    margin-top: 25px;
    background-image: url(../graficos/barra-repetida.png);
    height: 55px;
    background-repeat: repeat-x
    }
    .rectangulo3 {
    background-color: beige;
    color: green;
    border: 1px;
    border-style: solid;
    margin-left: auto;
    margin-right: auto;
    width: 75%
    }

  12. Visualiza la página web desde el editor Brackets con el botón . También puedes verla desde este enlace: excel5.html
  13. Desde el editor Brackets, en el menú Archivo y elige Guardar con el mismo nombre para los dos archivos que hemos modificado, excel5.html y excel5.css.
  14. Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

 


Enero-2019 (V 2.0)
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.