Ayuda 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:
    <!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. Crea una regla para que todos los encabezados h1 y h2 sean de color darkred.
    Solución: modifica la hoja de estilo añadiendo h1,h2 { color: darkred }
  4. Crear una regla para poner la fuente en estilo italic en los elementos que tengan el identificador: recomendamos.
    Solución: #recomendamos { font-style: italic }
  5. Crea una regla para todos los elementos de la clase .resaltado, con el color darkblue y en negrita (font-weight: bold).
    Solución: .resaltado { color: darkblue; font-weight: bold }
  6. Crea una regla para que al colocar el cursor en los encabezados h1, cambie el color a verde. Debes utilizar una pseudoclase.
    Solución: h1:hover { color: green }
  7. 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).
    Solución: ol .resaltado { color: darkmagenta; }
    Al separar por un espacio en blanco los selectores ol . resaltado indicamos que el estilo se aplicará a los elementos de .resaltado que estén dentro de ol.
  8. Crea una regla para que todos los párrafos que estén dentro de una etiqueta div a primer nivel tengan una indentació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 indentación ya que están a segundo nivel dentro de una etiqueta div.
    Solución: div > p { text-indent: 15px} }
    Al indicar el carácter > entre dos selectores estamos indicando que el segundo sea hijo del primero, es decir que se aplicará a los elementos p que estén dentro de los elementos div y a primer nivel, por lo tanto no se aplicará a la lista ordenada.
  9. La hoja de estilo quedará como se muestra a continuación:
    /* 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 }
  10. Pulsa en el menú Archivo y elige Guardar con el mismo nombre, excel4.css, en la carpeta de ejercicios/curso-excel/css. Visualiza la página web desde el editor Brackets con el botón . También la puedes ver desde este enlace excel4.html
  11. 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)
Atrás Volver Adelante






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.