Ejercicios unidad 9: Hojas de estilo CSS. Sintaxis. Selectores



En este ejercicio practicaremos con selectores CSS. Para realizar este ejercicio debes descargarte el archivo excel4.html de la carpeta ejercicios/unidad-9/curso-excel/excel4.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 excel4.css ejercicios/unidad-9/curso-excel/css/excel4.css y guardarlo en la carpeta de ejercicios/curso-excel/css.

Ejercicio 1: Selectores.

  1. Desde el editor Brackets abre el archivo excel4.html de la carpeta ejercicios/curso-excel.
  2. Debes ver el siguiente código HTML:
    <!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>
  3. Abre también el archivo excel4.css de ejercicios/curso-excel/css/excel4.css, verás esta hoja de estilo:
    /* 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
    }
  4. Ahora debes modificar esta hoja de estilo para realizar los ejercicios que te presentamos a continuación. El código HTML no necesita ser modificado para realizar los ejercicios. En primer lugar crea una regla para que todos los encabezados h1 y h2 sean de color darkred
  5. Crear una regla para poner la fuente en estilo italic en los elementos que tengan el identificador: recomendamos.
  6. Crea una regla para todos los elementos de la clase .resaltado, con el color darkblue y en negrita (font-weight: bold)
  7. Crea una regla para que al colocar el cursor en los encabezados h1, cambie el color a verde. Debes utilizar una pseudoclase.
  8. Crea una regla para que todos los elementos de la clase .resaltado, que estén dentro de una lista desordenada tengan el color darkmagenta y sigan estando en negrita, el resto de elementos de la clase .resaltado seguirán con el color darkblue y en negrita (font-weight: bold).
  9. Crea una regla para que todos los párrafos que estén dentro de una etiqueta div a primer nivel tengan una identación de 15 px (text-indent: 15px). Por lo tanto los párrafos que están dentro de la lista ordenada no deben tener la identación ya que están a segundo nivel dentro de una etiqueta div.

Puedes consultar aquí las soluciones propuestas, primero intenta resolverlo sin ayuda.


Enero-2019 (V 2.0)
Atrás Volver Adelante






Página inicial  Cursos Informática Gratuitos

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


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