Unidad 11. Ejercicio: CSS. Fuente y texto

En este ejercicio practicaremos con selectores CSS de Fuente y texto. Para realizar este ejercicio debes descargarte el archivo excel6.html de la carpeta ejercicios/unidad-11/curso-excel/excel6.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 excel6.css ejercicios/unidad-11/curso-excel/css/excel6.css y guardarlo en la carpeta de ejercicios/curso-excel/css (o copiar el código que se muestra a continuación).

Ejercicio 1: Selectores.

Desde el editor Brackets abre el archivo excel6.html.

Debes ver el siguiente código:

<html>
<head>
  <meta charset="utf-8" />
  <title>Curso de Excel 2016</title>
  <link rel="stylesheet" type="text/css" href="css/excel6.css" />
</head>
  <body>
  <ul>
  <li><a href="excel5_inicial.html">Atrás</a></li>
  <li><a href="index.html">Índice</a></li>
  <li><a href="excel7.html">Adelante</a></li>
  </ul>
  <h1 id ="top">Unidad 5. Los datos</h1>
  <div>
  <p>Ya hemos visto que Excel se utiliza principalmente para introducir datos, ya sean datos literales o fórmulas. En este tema, nos centraremos centrar en algunas de las operaciones típicas que se pueden realizar sobre ellos.</p>
  </div>
  <h2>5.1. Eliminar filas duplicadas</h2>
  <div>
    <p>Frecuentemente, cuando trabajamos con un gran volumen de información o recopilamos datos desde varios orígenes diferentes, aparecen en nuestro libro de trabajo filas idénticas. A menos que lo que nos interese sea estudiar la frecuencia con la que aparece un determinado registro, la mayoría de las veces no nos interesará tener duplicados, porque no aportan información adicional y pueden comprometer la fiabilidad de las estadísticas basadas en los datos. </p>
    <p>Por ejemplo, si disponemos de un listado de trabajadores y queremos saber la media de edad, el cálculo se vería comprometido en el caso de que un mismo trabajador apareciese varias veces.</p>
    <p>Para eliminar filas duplicadas:</p>
    <ol>
       <li><p>Deberemos tener como celda activa uno de los registros a comprobar, de forma que, si existen varias tablas distintas, Excel sepa interpretar a cuál nos referimos. Visualizarás un marco alrededor de todos los registros que se verán afectados por la comprobación.</p></li>
       <li><p>En la prestaña Datos pulsamos Quitar duplicados.</p></li>
    </ol>
 </div>
<div>
  <p>Para ir al principio de esta página <span >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 excel6.css, debes ver este código:

/* CSS Hoja de estilo. excel6.css */
ul {
    list-style-type: none
}

Como no hemos definido ningún tipo de fuente, la página web se verá con el tipo que le asigne el navegador, suele ser "Times New Roman". Visualiza la página para ver el aspecto que tiene la fuente en tu navegador.
Ahora vamos a cambiar la fuente a una familia genérica, por ejemplo, sans-serif. Para ello la asignamos al body en nuestra hoja de estilo, añadiendo body { font-family: sans-serif}. Visualiza la página para ver cómo ha cambiado el aspecto del texto.
A la familia sans-serif, los navegadores le suelen asignar la fuente verdana, para comprobarlo cambia la fuente del body a verdana body { font-family: verdana } y comprueba si se sigue viendo igual .
Vamos a asignar una fuente a los párrafos, añadimos p { font-family: arial, verdana, sans-serif } de esta forma se intentará usar la fuente arial, si no es posible, se intentará con verdana, y si tampoco es posible se usará alguna fuente de tipo sans-serif, de esta forma nos aseguramos que siempre haya una fuente disponible.
El tamaño de la fuente se puede dar de diversas formas, vamos a ver tres de ellas. Para el body y para los párrafos usaremos la unidad relativa em; para el body 1em y para los párrafos 0.9em; para h1 el nombre predeterminado x-large y para la clase .primero los pixels, 12px. Por lo tanto tendremos esta hoja de estilo:
```
* CSS Hoja de estilo. excel6.css */
 ul {
    list-style-type: none
}
body {
    font-family: verdana;
    font-size 1em;
}
p {
    font-family: arial, verdana, sans-serif;
    font-size 1em;
}
h1 {
    font-size: x-large
}
.primero { 
    font-size: 12px;
 }

	
```
Visualiza los tamaños y cambia los valores para ver el efecto que producen.
Para entender cómo funciona la unidad relativa em, vamos a cambiar el valor del body de 1em a 1.2em, y veremos cómo afecta al tamaño de fuente del párrafo p porque también está definido en em, pero no afecta al párrafo con clase .primero, ya que este tiene definido el tamaño en px. Es decir, el tamaño definido en em es afectado por el tamaño de su contenedor. Lo cual es positivo si queremos que algunos elementos cambien al cambiar sus contenedores para así mantener la proporción.
Ahora utilizaremos dos nuevas propiedades, para la clase .primero ponderemos el texto en cursiva con font-style: italic; y en negrita con font-weight: bold;; también vamos a cambiarle la fuente a font-family: "times new roman", serif;
Podemos escribir las propiedades de la fuente de forma compacta, por ejemplo, para la clase .segundo vamos a darle las mismas características que la clase .primero pero de esta forma: font: italic bold 12px "times new roman", serif; Visualiza la página y comprueba que ambas clases tienen el mismo diseño.
Para ver claramente las diferencias entre el alineado centrado y justificado, vamos a aplicarlo a las clases .primero y .segundo, respectivamente, con text-align: center y text-align: justify. Observa el resultado cambiando el ancho de la ventana para ver mejor el efecto.

Al final, el archivo de la hoja de estilo excel6.css tendrá este aspecto:

/* CSS Hoja de estilo. excel6.css */
 ul {
    list-style-type: none
}
body {
    font-family: verdana;
    font-size: 1.2em
}
p {
    font-family: arial, verdana, sans-serif;
    font-size: 0.9em
}
h1 {
    font-size: x-large
}
.primero { 
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
    font-family: "times new roman", serif;
    text-align: center
}
.segundo { 
    font: italic bold 12px "times new roman", serif;
    text-align: justify
}

Visualiza la página web desde el editor Brackets con el botón . También puedes verla desde este enlace: excel6.html
Desde el editor Brackets, en el menú Archivo y elige Guardar con el mismo nombre para los dos archivos que hemos modificado, excel6.html y excel6.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.0)

Cursos Informática Gratuitos

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