6. CSS: propiedades textos y modelo de cajas

-

Herencia de valores de propiedades

En el siguiente parrafo estamos aplicando la regla "color: green".


Resultado:



Como se puede apreciar, dicho párrafo contiene un elemento <b> que también adopta el color verde. Podemos suponer que aunque el elemento <b> no tiene ninguna regla que le haya proporcionado el color verde, este habrá heredado el color de su elemento precedente (<p>).

Ahora vamos a añadir otra regla CSS al parrafo, en concreto "border: 1px solid #000". Sería de esperar, que del mismo modo que el elemento <b> a adoptado el color del elemento precedente en el anterior ejemplo, esta vez también apareciese un border negro alrededor del elemento <b>, pero eso no ocurre..


Como vemos, los elementos HTML heredan el valor de las propiedades de sus elementos precedentes en algunos casos pero en otros no. Por ejemplo, el valor de la propiedad "color" se hereda de padres a hijos, pero la propiedad "border" no.

Podemos comprobar cuales son las propieades que se heredan, acuendiendo a la página de www.w3schools.com de cada una de ellas. En la sección "Definition and usage", se indica cuando una propiedad se hereda y cuando no.



En la anterior imagen se muestra la sección "Definition and usage" de la propiedad "font-size".

Propiedades CSS para textos


text-align: centra un texto, lo alinea a la izquierda o a la derecha, etc. Posibles valores: center, left, right, etc.
font-style: modifica el aspecto del texto. Posibles valores: normal, italic  (cursiva), etc.
font-size: tamaño de la fuente.
color: color de la fuente.
font-weight: grosor de la fuente. 
word-spacing: espacio entre palabras.
letter-spacing: espacio entre letras.
text-decoration: decora el texto. Posibles valores: underline (subrayado), line-throught (tachado), etc.


Tipos de letra en sistemas operativos

Cada sistema operativo tiene una serie de fuentes (tipos de letras) instaladas por defecto. Las fuentes son en realidad simples archivos instalados en el sistema operativo. Las fuentes que tenemos instaladas en nuestro sistema operativo aparecen en aplicaciones como Word, Photoshop, etc. cuando intentamos cambiar el tipo de letra de un texto.


Nosotros podemos añadir más fuentes a nuestro sistema operativo descargando los archivos correspondientes e instalándolos.

Cambiar el tipo de fuente en HTML: la propiedad CSS "font-family"

La propiedad "font-family" nos permite establecer la fuente (tipo de letra) de los textos cuando creamos una página web.

h1 { font-family: "Times New Roman", Times, serif; }
En este ejemplo, hemos establecido que todos los encabezados <h1> de nuestra página se muestren con fuente "Times New Roman". El resultado sería este:
En dicha regla, podemos apreciar que a continuación de "Times New Roman" aparece escritas las palabras "Times" y "serif". "Times" y "serif" son las fuentes que el navegador del usuario que visita la web va a buscar en el sistema operativo donde está instalado, en caso de que el archivo de la fuente "Times New Roman" no se esté instalado. Evidentemente, estos 3 tipos de letra son parecidos.

Por tanto las fuentes que incluyamos en la propiedad "font-family" no se visualizaran en el navegador del usuario que visita la web si este no las tiene instaladas en su sistema operativo.

Fuentes seguras para la web ("safe fonts")

Las llamadas "fuentes seguras para la web" son tipos de letra que los principales sistemas operativos tienen preinstalados.

  • Georgia, serif
  • "Palatino Linotype", "Book Antiqua", Palatino, serif
  • "Times New Roman", Times, serif
  • Arial, Helvetica, sans-serif
  • "Arial Black", Gadget, sans-serif
  • "Comic Sans MS", cursive, sans-serif
  • Impact, Charcoal, sans-serif
  • "Lucida Sans Unicode", "Lucida Grande", sans-serif
  • Tahoma, Geneva, sans-serif
  • "Trebuchet MS", Helvetica, sans-serif
  • Verdana, Geneva, sans-serif
  • "Courier New", Courier, monospace
  • "Lucida Console", Monaco, monospace

Usando estos tipos de letra como valores de la propiedad "font-family", nos aseguraremos de que el usuario de la web estará viendo los textos tal y como esperamos.

Como incluir en una web fuentes distintas a las "fuentes seguras" a través de @font-face

Es posible incluir en nuestra página web fuentes que no sean aquellas denominadas como seguras a través de la regla @font-face de CSS.
  1. Buscamos en Google las palabras clave "free fonts" (fuentes libres), clicamos sobre alguno de los primeros resultados, y descargamos algún tipo de letra que nos guste.
  2. Se descargará un archivo con extension ".ttf" o ".otf".
  3. Creamos la carpeta "fonts" junto a la carpetas "images", "videos", etc., y guardamos en ella el archivo ".ttf" o ".otf" descargado.
  4. Ahora añadimos la siguiente regla @font-face al principio del código CSS, haciendo referencia al archivo que hemos guardado en la carpet "fonts"

El ejemplo anterior establece la fuente "Miraculous&Christmas" para los encabezados <h1>.

Como incluir en una web fuentes distintas a las "fuentes seguras" a través de un archivo .css (Google Fonts).

  1. Entramos en https://fonts.google.com
  2. Pulsamos sobre el signo "+" de una fuente.
  3. Pulsamos sobre el pop-up negro de la parte inferior. Aparecerá esto:
  4. Seguimos los 2 pasos del pop-up, es decir: 
  • Pegar la linea <link href="https://fonts..."> en la etiqueta <head> de nuestro documento HTML.
  • Y crear una regla font-family para aquellos elementos donde queremos aplicar la nueva fuente.

Unidades de medida en CSS

Existen algunas propiedades que tienen como valores longitudes, como width, margin, padding, font-size, border-width, etc. Dichos valores van acompañados de una unidad de medida.


Unidades absolutas:
  • px: píxeles.
  • cm: centimetros.
  • mm: milimetros.
  • in: pulgadas.
Unidades relativas:

  • %: tanto por ciento del contenedor del elemento.
  • em: relativo al valor del atributo "font-size" del propio elemento.
        Ejemplo: height: 2em. Si el valor del atributo "font-size" del elemento es 16px, el valor equivalente en pixels será 32 píxeles (2x16=32).
  • rem: relativo al tamaño del atributo "font-size" del elemento raíz del documento HTML (<html>).
        Ejemplo: height: 3em. Si el valor del atributo "font-size" del elemento <html> es 16px, el valor equivalente en pixels será 48 píxeles (3x16=48).

La etiqueta <span> de HTML: formatear una fracción de un texto

Imaginemos que queremos establecer un tipo de fuente distinto para dos primeras palabras de un parrafo cualquiera.

Para identificar esas dos primeras palabras usaremos la etiqueta "<span>" así:


y la siguiente regla CSS:

Otro ejemplo: para cambiar además el tamaño de la primera letra del párrafo anterior escribiremos lo siguiente.

 


Modelo de cajas: padding, border y margin.

Todos los elementos HTML tienen 4 zonas:
  • El contenido (un texto, una imagen, etc).
  • El "padding", que es el área que está entre el contenido y el borde. Es invisible.
  • El borde (border). Es visible en el caso de que se declare un estilo para el mismo.
  • El "margin", que es la porción de espacio que queda entre el borde y otros elementos adyacentes o los bordes del navegador. Es invisible.
En el inspector de Firefox Developer, el "padding" es de color morado, y el margin de color amarillo claro.

Los valores del padding, el border y el "margin", se pueden establecer por cada uno de los 4 costados que tiene un elemento:

Ejemplos para el "padding":
  • padding: 4px ->  4px por los 4 costados.
  • padding: 4px 8px -> 4px arriba y abajo, y 8px a la izquierda y la derecha.
  • padding: 4px 8px 12px -> 4px arriba, 8px a la izquierda y la derecha, y 12px abajo.
  • padding: 4px 8px 12px 10px -> 4px arriba, 8px a la derecha, 12px abajo y 10px a la izquierda.
El orden que siguen los valores es el de las agujas del reloj partiendo de las 12 horas.
También es posible establecerlos por separado:

h1 {
  padding-top: 4px;
  padding-right: 8px;
  padding-bottom: 12px;
  padding-left: 10px;
}

El formateo CSS por defecto de los navegadores

Si creamos un encabezado <h1> sin estilo CSS alguno, y pasamos el ratón por encima del mismo en el inspector se visualizará lo siguiente:


Como se puede ver, el elemento <h1> tiene un margen inferior y superior que le ha añade por defecto cualquier navegador.

Es posible eliminar dichos márgenes, incluyendo en nuestro CSS: h1 { margin: 0; }

Lo mismo ocurre con otros elementos. Por ejemplo, a las listas se les añade (<p>) un margin superior e inferior y un padding la izquierda:


Podremos eliminarlos del mismo modo que se pueden eliminar para el <h1>.


La etiqueta <div>


Comentarios

Publicar un comentario

Entradas populares de este blog

5. CSS: formatear un documento HTML

-
Imagen
Las hojas de estilos CSS permiten formatear los elementos HTML y/o cambiar el lugar en que estos se visualizan por defecto en el navegador. Al igual que HTML, CSS es un lenguaje que interpreta el navegador. El código CSS tiene este aspecto: Añadir CSS en un documento HTML Existen 3 métodos , para incluir hojas de estilos CSS a un documento HTML: Mediante el atributo style="..." . Mediante la etiqueta <style></style> Mediante archivos con extensión ".css" externos (RECOMENDADO) . Veamos a continuación cada una de ellas en detalle. Añadir CSS mediante el atributo style="..." Este método consiste en escribir las reglas CSS directamente en la etiqueta HTML a través del atributo style="..." . El siguiente enlace se visualizará de color rojo y tamaño de letra 8 píxeles. <a href="..." style="color: red; font-size: 8px" > Añadir CSS mediante la etiqueta <style></style> Ot...
Leer más

34. Java: final, static, constantes, colecciones

-
Imagen
El modificador "final" La palabra clave " final " se puede aplicar en: variables métodos clases 1. Variables : cuando se aplica " final " en variables , quiere decir que la variable sólo podrá ser inicializada una vez, es decir una vez asignado un valor, este no podrá ser cambiado, y si en algún sitio se intenta cambiarlo el compilador dará error . Ejemplo: En el cuerpo del enumerado anterior, se declaran dos atributos de tipo " final ". Es aconsejable añadir "final" a un atributo cuando sabemos que su valor no debería de ser modificado una vez inicializado , tal y como ocurre en este enumerado. Es decir, en este caso, las constates que se declaran dentro del enumerado, se inicializaran dentro del constructor TipoLugar(),  y ya no deberían de cambiarse , por tanto nos puede venir bien declarar esos dos atributos como final para evitar la posiblidad de que se puedan cambiar el valor de ambos atributos una vez inicializa...
Leer más

29. Android: tipos de layouts

-
Imagen
Uno de los elementos de los que estan compuestas la interfaces de usuario en Android son los " layouts ". Los "layout" son elementos invisibles de la interfaz de usuario. En realidad son como un contenedor que establece la manera en que se dispondrán los elementos que coloquemos en su interior. Por lo general, cada interfaz de usuario tendrá un "layout" que actuará como contenedor general de toda nuestra interfaz , es decir, englobando al resto de los elementos que la componen. Los tipos de "layouts" que podemos añadir a nuestras interfaces de usuario son los siguientes: LinearLayout TableLayout RelativeLayout AbsoluteLayout FrameLayout ConstraintLayout GridLayout Los veremos en detalle cada uno de ellos en este mismo artículo. El "layout" por defecto de la interfaz de usuario Como ya hemos visto anteriormente, cuando creamos un nuevo proyecto Android, se genera un archivo XML para la interfaz de usuario llamado ...
Leer más