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.

Desde el editor Brackets abre el archivo excel5.html.

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>

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;
}

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.
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.
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 teoría de esta unidad, el margin-top y el margin-bottom de elementos adyacentes no se acumulan, se aplica el mayor de ambos.
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.
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
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
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;.

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%
}

Visualiza la página web desde el editor Brackets con el botón . También puedes verla desde este enlace: excel5.html
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.
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.2)

Cursos Informática Gratuitos

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