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.

Desde el editor Brackets abre el archivo excel4.html de la carpeta ejercicios/curso-excel.

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="https://www.aulaclic.es/index.htm" target="_blank"> &copy; aulaClic S.L.</a></p>
  </body>
  </html>

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
}

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
Crear una regla para poner la fuente en estilo italic en los elementos que tengan el identificador: recomendamos.
Crea una regla para todos los elementos de la clase .resaltado, con el color darkblue y en negrita (font-weight: bold)
Crea una regla para que al colocar el cursor en los encabezados h1, cambie el color a verde. Debes utilizar una pseudoclase.
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).
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.

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

Enero-2019 (V 2.2)

Cursos Informática Gratuitos

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