Unidad 10. Ejercicio: CSS. Unidades de medida



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

Ejercicio 1: CSS. Unidades de medida.

  1. Desde el editor Brackets abre el archivo excel4.html de la carpeta ejercicios/curso-excel.
  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>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="http://www.aulaclic.es/index.htm" target="_blank"> &copy; aulaClic S.L.</a></p>
    </body> </html>6
  3. Abre la hoja de estilo excel4.css, debes ver este código:
    /* CSS Hoja de estilo. excel4.css */
     a:link {
    color:darkgreen;
    text-decoration: none }
    a.:visited {
    color: red }
    a:hover { 
    color: darkviolet;
    font-weight: bold }
    a:active { 
    color: yellowgreen; }
    ul {
    list-style-type: none
    }
    /* agregado en este ejercicio */
    h1,h2 { color: darkred } #recomendamos { font-style: italic } .resaltado { color: darkblue; font-weight: bold } h1:hover {
    color: green }
    ol .resaltado {
    color: darkmagenta;
    }
    div > p { text-indent: 15px }
  4. Vamos a ver la diferencia entre varias unidades de media. Para ello, en el archivo excel4.html, cambia el código del primer encabezado por el siguiente: <h2 class="rectangulo1">4.1. Selección de celdas</h2>
  5. Ahora en la hoja de estilo excel4.css, vamos a darle el color beige como color de fondo con unas dimensiones fijas en pixels, por ejemplo, 250 px. de ancho y 35 px. de alto, para ello crea la siguiente regla: .rectangulo1 {width: 250px; height: 35px; background-color: beige}.
  6. Vamos a duplicar el encabezado para darle las dimensiones en unidades relativas. Para ello, a continuación del encabezado, añade el código siguiente: <h2 class="rectangulo2">4.1. Selección de celdas</h2>
  7. Ahora emplearemos las unidades relativas en porcentaje, por ejemplo, 35% de ancho y 5% de alto, para ello crea la siguiente regla: .rectangulo2 {width: 35%; height: 5%; background-color: beige}. Observa cómo al modificar el ancho de la ventana del navegador, el ancho del rectángulo2 también cambia.
  8. Vamos a duplicar otra vez el encabezado para darle otras dimensiones en unidades relativas. Añade el código siguiente: <h2 class="rectangulo3">4.1. Selección de celdas</h2>
  9. Utilizamos las unidades relativas em, por ejemplo, 12em de ancho y 2em. de alto, crea la siguiente regla: .rectangulo3 {width: 12em; height: 2em; background-color: beige}. Observa cómo al modificar el ancho de la ventana del navegador, el ancho del rectángulo3 no cambia a pesar de utilizar unidades relativas ¿Por qué? La respuesta es que las unidades em son relativas respecto al tamaño de letra del contenedor. Si cambiamos el tamaño de letra del documento HTML con la regla body { font-size: 1.2em}, veremos cómo cambia el tamaño del rectángulo3.
  10. Una vez comprobado el efecto anterior, dejamos el tamaño del texto como antes eliminando la regla body { font-size: 1.2em}.
  11. Para practicar con las diferentes formas de especificar los colores modificamos la hoja de estilo añadiendo la propiedad color de tres formas distintas para el color verde:,
    .rectangulo1 {width: 250px; height: 35px;
      background-color: beige;
      color: hsl(120, 100%, 25%)
    }
    .rectangulo2 {width: 35%; height: 5%; background-color: beige; color: #008000 }
    .rectangulo3 {width: 12em; height: 2em; background-color: beige; color: rgba(0, 128, 0, 0.45) }

    En el primer caso hemos empleado el sistema hsl(120, 100%, 25%) que da el color por matiz, saturación y luminosidad.
    En el segundo caso el sistema #008000 RGB con valores hexadecimales, con valores para cada color entre el 00 (mínimo) y FF (máximo).
    Y en el tercer caso con rgba(0,128,0,0.45) con valores decimales, con valores entre 0 y 255, y un cuarto valor para la transparencia, el valor 0 indica transparencia total, y el valor 1 indica transparencia nula, en nuestro caso una transparencia de 0.45
  12. Visualiza la página web desde el editor Brackets con el botón
  13. Desde el editor Brackets, en el menú Archivo y elige Guardar con el mismo nombre para los dos archivos que hemos modificado, excel4.html y excel4.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.