APUNTES

HTML Y CSS

Mara Arpa Recio

marparecio@educa.jcyl.es
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

Índice

INTRODUCCIÓN................................................................................................................................................................. 2
DOCUMENTO HTML 5 ................................................................................................................................................... 2
ESTRUCTURA DEL ARCHIVO. ............................................................................................................................................. 2
ETIQUETAS PARA LA CABECERA .................................................................................................................................... 3
ETIQUETAS PARA EL CUERPO ........................................................................................................................................ 4
Divisiones .................................................................................................................................................................. 4
Formato ..................................................................................................................................................................... 4
Listas.......................................................................................................................................................................... 5
Tabla .......................................................................................................................................................................... 6
Imágenes ................................................................................................................................................................... 8
Enlaces ...................................................................................................................................................................... 8
OTRAS ETIQUETAS, HTML5 ........................................................................................................................................... 9
Audio ......................................................................................................................................................................... 9
Video ....................................................................................................................................................................... 10
Embed ..................................................................................................................................................................... 10
Iframe ...................................................................................................................................................................... 10
Canvas ..................................................................................................................................................................... 11
Otras etiquetas........................................................................................................................................................ 12
VERSIÓN PARA MÓVIL ............................................................................................................................................ 12
FORMATO CON CSS (estilo) ............................................................................................................................................ 13
FORMAS DE DAR ESTILO ............................................................................................................................................. 13
PSEUDO CLASES .......................................................................................................................................................... 15
FONDOS....................................................................................................................................................................... 15
TEXTO .......................................................................................................................................................................... 17
CAJAS........................................................................................................................................................................... 17
LISTAS .......................................................................................................................................................................... 20
TABLAS ........................................................................................................................................................................ 21
IMÁGENES ................................................................................................................................................................... 22
ENLACES ...................................................................................................................................................................... 22
CURSOR ....................................................................................................................................................................... 22
ANIMACIONES ............................................................................................................................................................. 23
EFECTOS ...................................................................................................................................................................... 26
CÓDIGO DE COLORES: ..................................................................................................................................................... 27
FUENTES CONSULTADAS. ................................................................................................................................................ 34

1
 INTRODUCCIÓN
Para facilitar la búsqueda, las etiquetas aparecerán en azul, los atributos en rojo y los posibles valores en morado.
Crear carpeta para guardar todos los archivos de la página web. PaginaWeb_nombre
Primer paso: crear un nuevo documento en notepad++ (o bloc de notas) y guardarlo como index.html, eligiendo como
tipo hyper text markup language(o “todos los archivos” en bloc de notas) para que lo guarde como una página web y
no como texto.
El programa notepad++ usa código de colores para identificar los distintos componentes de un documento html. Azul
para las etiquetas, rojo para atributos, morado para los valores de los atributos, negro para el texto y verde para
los comentarios. Las sangrías serán muy útiles para entender el documento y que está contenido en que etiqueta de
una forma rápida y visual pero no afecta al código.

Todos los archivos tienen que estar guardados en la misma carpeta, si se crean carpetas dentro para ordenar, por
ejemplo fotos, se debe especificar en las rutas.
El documento .html creado se abrirá para ver el navegador haciendo doble clic o con el botón derecho abrir como para
elegir un navegador no predeterminado. Para poder editar el código html, con el botón derecho se elegirá la poción
editar con notepad++.

¡¡OJO!! Guardad todos los archivos y actualizad pestaña del navegador para ver los cambios.
Los documentos que creemos deben estar documentados, tanto para que los comprendan terceras personas, como
para ayudarnos a nosotros mismos a organizar el documento. Para incluir comentarios en HTML tenemos que usar la
etiqueta <!-- --> dentro de la cuál escribiremos el texto.

DOCUMENTO HTML 5
Para declarar que el documento está creado bajo HTML5, para ellos se usa la etiqueta <! DOCTYPE html>, en la primera
línea del documento.
Para que se reconozcan la mayoría de los caracteres usado, y no aparezcan símbolos raros en tildes o en la letra ñ,
usaremos la etiqueta. <meta charset="UTF-8">. La codificación UTF-8 también es la que mejor reconocen los
teléfonos, esta etiqueta la incluiremos dentro de la cabecera del documento HTML, en <HEAD>.

ESTRUCTURA DEL ARCHIVO.

HTML es un lenguaje que se basa en etiquetas, las etiquetas se identifican por los símbolos de <> donde se abre la
etiqueta y por </> donde se cierra. Normalmente entre las etiquetas de apertura y cierra se incluye el contenido.
<HTML> (Etiqueta que indica que estamos creando una página web)
<HEAD>(Etiqueta de apertura de la cabecera).
En esta parte se incluye información sobre el documento como título, autor, enlaces, estilo… lo único visible
en la página es el título, que aparecerá en la pestaña del navegador.
</HEAD>(Etiqueta de cierre de la cabecera)
<BODY>(Etiqueta de apertura del cuerpo)
Aquí va el contenido de la página que será lo que se vea en el navegador.
</BODY>(Etiqueta de cierre del cuerpo)
</HTML>(Etiqueta de cierre del documento)

2
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

Para facilitar que el navegador comprenda las partes de la página web podemos usar, dentro de<body>, etiquetas
para diferenciar encabezado, parte principal y pie de página. Estás etiquetas no afectan a la apariencia de la página,
pero facilitan la labor de las herramientas de accesibilidad, como el dictado.
<header> </header> suele contener logo, título, descripción o información sobre el sitio y los botones de navegación.
El menú de navegación, se puede delimitar por la etiqueta <nav></nav> que indicará al navegador que es una
secuencia de enlaces
<main></main> incluye el contenido principal
<footer></footer> En esta parte suele ir la información sobre protección de datos, contacto, diseño de la web…

ETIQUETAS PARA LA CABECERA

La cabecera contiene información sobre el documento HTML y su configuración, como título, enlaces, script o
metadatos. La mayoría de la información escrita en este apartado no se muestra en la página web, una excepción en
el título.
<title> Aquí se escribe el título de la página que aparecerá en la pestaña del navegador </title>
Este título también será el nombre que aparecerá por defecto al incluir una página web en marcadores del navegador.
Resultado:

<link> Enlaza con archivos externos como el archivo .css con el estilo de la página, o imágenes como el icono que se
muestra en la pestaña o en los marcadores.
<link href= "style.css" rel="stylesheet" type="text/css"> es la etiqueta que enlaza el documento style.css con el HTML
para poder cambiar formatos de texto, fondo, imágenes… (tamaño, fuente, color…)
<link rel= "shortcut icon" href= "icono.ico" /> es el icono que se muestra en la pestaña junto al título, y en el marcador
si lo marcamos como favorito.

En el encabezado podemos incluir la etiqueta <script>, un fragmento o enlace a un archivo de código fuente, el
lenguaje más usado es Java, pero también podemos usar Processing.

El atributo esencial de esta etiqueta es src, la ruta del archivo. (Aunque se podría incluir el código directamente dentro
de la etiqueta, es preferible usar un archivo externo).
En las versiones anteriores a Html 5, también era necesario incluir el atributo Type, donde se indicaba el lenguaje del
script. (text/javascript, application/javascript …)

3
<meta> Esta etiqueta permite indicar información sobre los metadatos de la página como la codificación de caracteres
usada, el autor o la descripción.
<meta charset="UTF-8"/>. Como se ha indicado antes, esta etiqueta sirve para que se reconozcan la mayoría de los
caracteres usados, y que no aparezcan símbolos raros en tildes o en la letra ñ, usaremos la etiqueta. Como se ha
indicado en la introducción, UTF-8 es la codificación de caracteres adecuada para páginas en castellano.
<meta name= "author" content= "Mara Arpa Recio" /> Indica el nombre el autor de la página.
<meta name= "description" content= "Página de ejemplo para aprender HTML" /> La descripción ayuda a posicionar
la página web en las primeras posiciones de las búsquedas de los navegadores, para ello se deben incluir palabras
clave relacionadas con el contenido de la página.

ETIQUETAS PARA EL CUERPO

Divisiones
Para poder dividir la página en partes podemos usar la etiqueta <div></div> esta etiqueta debe llevar el atributo id,
de esta forma podremos identificar las distintas zonas de nuestra página. Para lograr un diseño atractivo, jugaremos
con las cajas en CSS (posicionamiento, tamaño, márgenes, fondo y demás de cada división).

Las etiquetas <Header>, <main> y <footer> funcionan también como divisores.

Formato
El formato de una página web se puede hacer de tres formas distintas: dentro de cada etiqueta, usando código CSS en
la etiqueta Style dentro de la cabecera, o con un archivo CSS independiente enlazado al archivo de html. La opción
más práctica, y la que vamos a usar, es la tercera. Por ello no vamos a ver todas las etiquetas y atributos que nos
permiten dar formato en Html, tan solo vamos a ver algunos de ellos.
El texto que se escriba o se copie en un documento html no tendrá formato, aparecerá como un arial 11 de color
negro, sin saltos de línea.
 Saltos de línea
<br/> hacer un salto de línea.
<p>Limita un párrafo, con un doble salto de línea después</p>
 Alineación

<center>centra en la pantalla el texto, tabla o imagen incluido</center>

 Formato del texto:
<b> pone en negrita el texto que está dentro de estas etiquetas</b>
<i> pone en cursiva </i>
<u> subraya</u>
<mark> resalta el texto </mark>

4
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

Listas
En html podemos incluir listas en las que los elementos pueden aparecer desordenados, precedidos por un símbolo,
u ordenadas, precedidos por número o letras.
Listas desordenadas (con puntos, cuadrados o guiones)
La etiqueta es <ul></ul>, y dentro de ella usaremos <li></li> para cada elemento. Podemos usar el atributo type para
definir el símbolo o modificarlo en CSS.
<ul>Empieza listado
<li type="circle">texto de cada punto de la lista, el símbolo es un círculo.</li>
<li type="square">texto de cada punto de la lista, el símbolo es un cuadrado.</li>
<li type="disc">texto de cada punto de la lista, el símbolo es un punto, si no se pone estilo es el que aparece
por defecto.</li>
</ul>Termina el listado
Para que todos los elementos de la lista tengan el mismo símbolo, incluimos el argumento type dentro de la etiqueta
<ul>

5
Listas ordenadas
Para las listas ordenadas usamos la etiqueta <ol></ol> e igual que en las no ordenadas, <li> para cada elemento.
<ol> empieza el listado
<li> etiquetas para cada elemento de la lista </li>
</ol> termina el listado
Puedo elegir el tipo de ordenación entre numeración decimal, que es la lista ordenada por defecto, alfabética o romana
usando el atributo type. También puedo forzar a un elemento para que tenga un determinado valor, en ese caso, los
siguientes elementos seguirán la numeración desde el valor forzado, con el atributo value.

Tabla
Para crear tablas usamos la etiqueta <table>, dentro de la tabla primero hay que crear filas, y dentro de estas
columnas. La etiqueta para las filas es <tr>y para las columnas<td>.

6
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

Podemos darle título a la tabla usando la etiqueta <caption></caption>

Para que se vean las líneas que delimitan las celdas podemos usar el atributo border, con el grosor de la línea, en la
etiqueta table o darle formato a las celdas con CSS.
Dentro de las columnas creadas podemos usar los atributos rowspan para combinar filas, y colspan para combinar
columnas.

7
Imágenes
Para incluir imágenes en un documento HTML, usamos la etiqueta <img /> dentro de la cuál necesitaremos como
atributo esencial la ruta de la imagen a mostrar, src. Además, podemos incluir otros atributos como los siguientes,
aunque es recomendable dar el formato usando con CSS.
<img src="imagen.jpg" alt="texto" border="1” align=“top” width="400"
height="341">

 Src: ruta y nombre de la imagen. Si la imagen está en la misma carpeta que el

documento html, no hace falta incluir la ruta, si está en otra carpeta, o en una
sitio web, tendremos que incluir la ruta completa.
 alt: texto si no se ve la imagen,
 width: anchura en pixeles (también puede poderse por porcentaje)
 height: altura
 border: pone borde a la imagen.
 align: utilizando los atributos “left” para alinearla a la izquierda, “right” para
alinearla a la derecha, “top” para alinearla arriba, “bottom” para alinearla
abajo y “middle” para alinearla al centro.

Enlaces
Para crear enlaces tanto internos (en el propio documento) como externos, la etiqueta a usar es <a>, el atributo
esencial de esta etiqueta es href, que indica a que estamos referenciando con el enlace. Entre la etiqueta de apertura
y cierra tenemos que escribir el texto que servirá de enlace al pinchar sobre él, o incluir la imagen que actúe como un
botón, haciendo que vayamos a otra página, documento, o lugar de la misma página al pinchar sobre ella.
Igual que con las imágenes, debemos incluir la ruta completa, en el caso de enlazar a documentos, si están guardados
en la misma carpeta que el archivo html, tan solo necesitaremos el nombre.
Podemos crear enlaces externos, a otra página o documento, e internos, a un apartado de la propia página.
<a href="https://www.google.es ">texto sobre el que pinchar</a> es un texto que sirve de enlace a google.
<a href=”https://www.google.es” target="_blank">texto sobre el que pinchar</a> es un texto que sirve de enlace a
google y que se abre en una pestaña nueva.
<a href="trabajo.docx ">texto sobre el que pinchar</a> es un texto que sirve para descargar un documento de word.
<a href="pagina.html">texto sobre el que pinchar</a> es un texto que sirve para otro archivo de la página web.
<a href= "#punto2">ver punto 2</a> el texto sirve de enlace para que se muestre el párrafo donde está el punto 2. En
ese párrafo necesitamos poner la identificación llamada con #
<p id="punto2">El punto 2 del tema es</p>

8
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

OTRAS ETIQUETAS, HTML5

En este apartado vamos a incluir otras etiquetas más avanzadas, incluidas las propias de Html 5.

Audio
<audio></audio> Esta etiqueta permite incluir un archivo de audio en la página web para que se reproduzca. El
atributo esencial es src, pero podemos incluir otros atributos que nos permiten configurar la reproducción .

 src Ruta del audio

 controls Muestra los controles de reproducción.

Hay que tener en cuenta los formatos de audio, la calidad que tienen, si son recomendables para reproducir en
navegadores y los códec que necesitan.
Formato Codec utilizado Características
MP3 MPEG Layer-3 Buena calidad. Buen soporte
OGG Ogg Vorbis Buena calidad. Alternativa libre a MP3. Soporte medio
AAC Advanced Audio Coding Mejora el MP3. Usado como audio en MP4.Soporte medio
Opus Opus Buena calidad. Alternativa libre a MP3. Soporte malo
FLAC FLAC Audio Lossless Compresión sin pérdidas. Alto tamaño
WAV Wave sound Formato de Microsoft. Está soportado. Muy pesado
Para conseguir mayor compatibilidad con el navegador, o incluir opciones adicionales, como los subtítulos, podemos
usar etiquetas como <source> o <track> dentro ella,
La etiqueta <source> para incluir varios formatos de un mismo audio, el navegador reproducirá el primero que sea
compatible. Tiene como atributos src con la ruta del audio y type que especificará los códec que usa.
<track> permite incorporar subtítulos. Sus atributos son: src, (contiene la ruta), srclang (código idioma), label
(descripción del idioma), kind (tipos de sibtítulo, puede tener los valores: subtitles: subtítulo sobre el reproductor,
metadata son datos técnicos, no se ven, chapters: título de los capítulos, captions: transcripción de audio, incluye
música, efectos.. descriptions: Descripción textual del contenido del vídeo)

9
Video
<video> </video> Esta etiqueta permite incrustar un video, el atributo esencial es la ruta src, pero para que se pueda
interactuar con el video deberemos incluir otros atributos como Controls. Funciona como la etiqueta audio, aunque
a mayores se puede configurar el tamaño del video, width ancho del video y height alto del video.

También podemos usar la etiqueta video, para que contenga las etiquetas source y track, igual que en el audio.

Embed
La etiqueta <embed></embed> permite integrar contenido externo, como aplicaciones o archivos. Los atributos que
admite son src, type, width, height. Dentro de la ruta del archivo podemos incluir parámetros después de #(para usar
varios se usa & entre ellos) como: page=número (muestra la página del documento indicada) o zoom= número (100
representará un zoom del 100%) entre otros.

Iframe
Para poder incrustar contenido de otro sitio web, podemos usar la etiqueta <iframe> como atributos esenciales
tenemos src, width y height.
Además, podemos incluir otros atributos como importance con valores auto, high y low, que le indican al navegador
la prioridad que tiene el contenido del iframe dentro de la página para poder gestionar los recursos., o allowfullscreen
con el valor true, si se quiere permitir que se ponga a pantalla completa.
Para incluir contenido de algunas páginas como google maps, o youtube, debemos usar la opción insertar dentro de
compartir, de esta forma nos mostrará la etiqueta iframe con la ruta necesaria y una serie de atributos por defecto
que se podrán modificar una vez lo hayamos copiado al archivo html.

10
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

Canvas
La etiqueta <canvas> permite incluir gráficos animados, como pueden ser los banner de publicidad, las simulaciones
o imágenes interactivas, mediante scripts (como javascript o processing). Está etiqueta es la que va a permitir que se
pueda seguir usando juegos online cuando flash termine de desaparecer.
Para poder asociar processing con la etiqueta canvas, primero se debe usar la etiqueta script en la cabecera.
Debemos usar una primera etiqueta para enlazar el archivo processing.js, que debe estar en la carpeta del archivo
html, que permitirá que se ejecute el código en el navegador. (se puede descargar de la página
http://processingjs.org/download/)
Después crearemos otro script para el canva que queremos mostrar, en este usaremos el atributo data-processing-
target para indicar obajetivo, identificador de la etiqueta Canva, que va a contenerlo.

Dentro del segundo script copiaremos el código Processing.

En el cuerpo del documento HTML, incluiremos la etiqueta <canvas> con el identificador

que hemos indicado como objetivo en el script.

11
Otras etiquetas
<article> Define contenido autónomo que podría existir independientemente del resto del contenido.
<aside> Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si se quita
el resto de contenido sigue teniendo sentido.
<bdi> Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del
texto. Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
<command> Representa un comando que un usuario puede invocar.
<details> Representa un widget desde el que un usuario puede obtener información o controles adicionales.
<figure> Representa una figura ilustrada como parte del documento.
<figcaption> Representa la leyenda de una figura.
<form> Crear un formulario para enviar información a través de la página. Llevará elementos. <input> de
distintos tipos, como áreas de texto, selectores, desplegable, textos de tipo búsqueda, url, teléfono,
correo, fecha, color… necesitan ir acompañados de programación (php, java..) para enviar la
información.
<math> Define una fórmula matemática.
<menu> Representa una lista de comandos
<meter> Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.
<output> Representa el resultado de un cálculo.
<progress> Representa el progreso de finalización de una tarea.
<section> Define una sección en un documento.
<summary> Representa un resumen, título o leyenda para un elemento <details> dado.
<svg> Define una imagen vectorial embebida.
<wbr> Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto
de múltiples líneas puede ser dividido para mejorar su legibilidad.

VERSIÓN PARA MÓVIL

Al diseñar una web en HTML 5 optimizada para móviles debemos tener en cuenta distintas cuestiones como:
 Usar metadatos específicos para que los contenidos puedan mostrarse, tanto en relación con los caracteres
como las escalas, adecuadamente en los teléfono.
Por ejemplo:
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes"> Esta etiqueta fue creada para
dispositivos de Apple pero ahora se ha convertido casi en un estándar.

 No usar tablas. Las tablas son componentes fijos que no se adaptan a tamaños de pantalla distintos, lo más
fácil es que se deformen y no se entienda el contenido.
 Usar divisores con formato CSS flexible. Los divisores <div> permiten usar formatos flexibles mediante CSS
para que su tamaño, principalmente anchura, se adapte a las distintas pantallas.
 Crear dos versiones de cada página, una para móviles y otra para PC, enlazadas entre sí. Una opción bastante
extendida es crear dos versiones de una página y un botón (normalmente en el encabezado) para que el
usuario cambie de una a otra.

12
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

FORMATO CON CSS (estilo)

Para facilitar la búsqueda, usaremos el azul oscuro para las propiedades y el morado para los posibles valores.

FORMAS DE DAR ESTILO

Para dar distintos formatos al texto, tablas, fondos y demás componentes de un documento HTML usamos archivos
externos CSS, son archivos que contienen todos los estilos que van a usarse en la página web.
En un archivo nuevo guardado como style.css (tipo cascadestylesheetfile) creamos el código para dar estilo.
Para crear estilos en CSS, usaremos selectores, como * para todos los elementos, el nombre de las etiquetas de Html
o selectores de estilo propios (incluyendo un punto antes del nombre del estilo), selector de ID (incluyendo # antes
del id del elemento). Si usamos las etiquetas de html, el formato afectará a todo el contenido que esté dentro de todas
las etiquetas nombradas. Por ejemplo, si en el estilo body indico que el texto será de color azul. Todo el texto de la
página será azul.

Si uso la etiqueta p como un estilo, y le indico fuente, color, alineación y decoración al texto, veremos cómo solo afecta
al texto del documento HTML contenido en las etiquetas <p>

13
Si quiero que el formato solo afecte a unos párrafos concretos, crearé un estilo propio (.nombre_estilo{) y en la
etiqueta html incluiremos el atributo class con el estilo elegido. En vez de usar el atributo class, también puedo usar
el atributo id, en este caso en el archivo css en vez de preceder el nombre del estilo por un punto, usaremos #.

Puedo usar selectores descendentes, de forma que el estilo solo afecta a un elemento incluido en otro, para ello
escribiremos el estilo del elemento y seguido el descendiente.

En el ejemplo el estilo afectará a cada elemento de la lista del menú de navegación identificado como
menuhorizontal.

14
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

PSEUDO CLASES
Representan estados, se incluyen en el archivo CSS después de los estilos creados, indican que cambiará el estilo de
un elemento en función del estado en el que se encuentre.

Estados más comunes:

 :active, indica que se está pulsando el botón del ratón sobre el elemento.
 :focus, se ha seleccionado el elemento.
 :hover, el ratón está encima del elemento.
Estados exclusivos de enlaces:

 :link, indica que el enlace no ha sido visitado.

 :visited, indica que el enlace ha sido visitado.
Cuando se configuran varias pseudo clases se debe seguir el siguiente orden, LVHA (link, visited, hover, active).

FONDOS
Podemos dar formato al fondo usando la propiedad background
 Dar color al fondo de la página, usaremos la propiedad específica background-color seguida del nombre del
color (Green) o con el código hexadecimal el color (#B0C4DE).

*la etiqueta header contiene la propiedad min-height, para que ocupe un espacio aunque no tenga contenido en
el documento html.

 Imagen de fondo. Para ellos usaremos la propiedad background-image: url("imagen.jpg");

Se verá la parte de la imagen que permita el tamaño tanto del contenedor como de la imagen, al no ocupar todo
el espacio horizontal la ha repetido.
Con background-repeat podremos indicar si queremos que la imagen se repita (repeat), se repita en
horizontal(repeat-x), en vertical (repeat-y) o no se repita (no-repeat).
También contamos con las propiedades background-attachment para indicar la imagen se va a mover al movernos
por la página (scroll), o si queda fija (fixed), y background-position para la posición de la imagen, esta posición se
puede indicar por los valores de x e y (0%,0%) o por la palabra que indica la alineación de la imagen (left, right,
center, top, bottom).

15
Si queremos incluir varias de estas propiedades, como en el ejemplo anterior, podemos incluirlas seguidas tras la
propiedad genérica background.

La propiedad de CSS3 background-size modifica el tamaño de la imagen, para que la imagen no se escale (auto),
se escale al alto de la página (contain), se escale al alto (cover), o se escale al tamaño que le indiquemos con
porcentajes o pixeles (50%x50%).

CSS3 permite incluir varias imágenes de fondo, además de elegir las características de cada una ellas.

En CSS 3 podemos indicar la opacidad del fondo con la propiedad opacity y los valores del 0 a 1. Podemos hacer
que el encabezado aparezca con un 40% de opacidad por encima del fondo del cuerpo de la página.

Si optamos por poner el fondo en rgba, incluiremos el porcentaje de rojo, verde, azul y la opacidad del color elegido
en una sola línea.

16
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

TEXTO
Para dar estilo al texto tenemos varias propiedades como:
 font-family que selecciona la Fuente
 font-size: para el tamaño, se suele indicar en pixel.
 font-weight: para el grosor de la letra, para negrita usaremos el valor bold.
 Font-style, los valores que podemos usar son italic, para letra cursiva, oblique. En ambos casos la letra está
inclinada, italic es una cursiva real, mientras oblique simula la cursiva cuando la fuente no tiene modo itálico.
 Font-variant, para convertir a letras mayúsculas de tamaño pequeño con el valor small-caps.
 Font-display: indica al navegador que debe hacer antes de mostrar una tipografía hasta que se carga (existe
la posibilidad de personalizar la fuente descargándola e indicando la url), los valores son auto, (texto
invisible),block (se muestra sin estilo), swap (muestra la siguiente tipografía cargada por un momento),
fallback (muestra la siguiente tipografía cargada, y deja esa si no se carga la elegida), optional (muestra la
siguiente tipografía si la elegida tarda mucho o hay algún problema).
 text-align, para la alinear el texto, los valores con right, center ,left y justify.
 Text-decoration: subraya (underline) o tacha(line-through) el texto
o También podemos elegir el color de la línea, text-decoration-color
o Estilo de la línea, siendo sólida (solid), ondulada (wavy) o discontinua (dashed),text-decoration-style
o El grosor de la línea, text-decoration-thickness
 Text-transform: para transformar un texto a mayúsculas (uppercase), minúsculas (lowercase), o con la
primera letra mayúscula y el resto minúsculas (capitalize)
 Text-shadow: añade sombra al texto, donde indicaremos la posición horizontal, vertical, y como opcionales
están el radio de desenfoque y el color de la sombra (las posiciones y el radio se indicarán en pixeles, y el color
el hexadecimal).
 Text-indent: para sangrar la primera línea del párrafo, el sangrado se manca en píxeles.
 color, seguido del nombre, o código del color del texto.
 Line-height, para el interlineado, los más comunes son 1, 1.15 y 1.5.
 Vertical-align: permite alinear el texto en su vertical con los valores top, middle y bottom, pero no siempre
funciona bien., también tiene los valores baseline, text-top, text-bottom, sub, super, para alinear respecto a
líneas, texto y scripts. El resultado varía mucho según el navegador.

CAJAS
Las cajas nos permiten distribuir los elementos por la página. Para cada división podremos usar las propiedades:
 Tamaño: width (ancho) y height (alto), indicando pixeles o porcentaje sobre el contenedor.
 Fondo, con la propiedad background.
 Borde: border, indicando grosor, el estilo del borde con los valores más comunes como dotted (puntos),
dashed (guiones), solid (línea normal), double (doble línea), y el color.
 Relleno y márgenes: padding (margen interno, relleno entre el contenido y el borde), margin (margen
externo, distancia entre la imagen y el resto de componentes. Por defecto los elementos tienen márgenes

17
 distintos de cero, si queremos que todos los bloques de la página estén juntos, sin espacios entre ellos,
podemos usar el selector general * e indicarle en el estilo que los márgenes externos e internos sean cero.

 Posición: position, donde tendremos que indicar las características de tipo con los valores, static (estático no
se desplaza), relative (relative, toma como referencia la esquina superior izquierda de su contenedor),
absolute (absolute, toma como referencia la esquina superior izquierda de la ventana del navegador) y fixed
(fijo, toma como referencia la esquina superior derecha de la ventana del navegador).
 Desplazamiento: con las propiedades left (izquierda), right (derecha), top (superior) y bottom (inferior),
podemos indicar el desplazamiento de la caja en pixeles o porcentajes.

 Flote:float esta propiedad permite que las cajas floten colocándose según el valor dado (left, right, top,
bottom). Si varias cajas tienen float left, la primera se colocorá a la izquierda del todo, y la siguiente todo a la
izquierda possible en le espacio libre dejado por la primera.

 Fijar: clear, si queremos poner un componente debajo de las cajas que están flotantes debemos usar la
propiedad clear con el valor both, lograremos que la siguiente caja no aparezca con las flotantes superpuestas,
si no debajo de ellas.

18
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

Con clear:both;

 Cajas flexibles: con display:flex, indico que las cajas son flexibles, se adaptan al tamaño disponible.
Normalmente usaremos una caja contendor con cajas en su interior. Podremos orientar las cajas
horizontalmente con flex-direction:row, o verticalmente con column. La propiedad flex-wrap:wrap, permite
que las cajas del interior cambien de línea si no caben en la misma. Los márgenes automáticos de las cajas
consiguen que se centren.

19
  Redimensionar: resize, permite que le usuario cambien el tamaño de la caja horizontalmente (horizontal),
verticalmente (vertical) o en ambos sentidos (both). Debe ir acompañada de la propiedad overflow: auto,
para que el contenido se adapta el tamaño del contenedor. El contenedor indica al usuario que puede cambiar
el tamaño con líneas diagonales en la esquina inferior derecha.

LISTAS
El formato propio de las listas se configura con las propiedades:

list-style-type, para el tipo de viñeta, los valores que puede tomar son para listas no ordenadas :disc (punto), circle
(circulo) y square (cuadradado), para las listas ordenadas: decimal (números ), decimal-leading-zero (números con
cero delante,) lower-roman (números romanos en minúsculas), upper-roman (números romanos en mayúsculas),
lower-latin (letras minúsculas), upper-latin (letras mayúsculas), lower-greek (letras griegas), none (sin viñeta).

List-style-position, para que todas las líneas de un mismo elemento empiecen en la misma posición (inside), o que
las siguientes líneas empizen más a la derecha(outside).

20
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

CSS permite que usemos cualquier imagen como viñeta de una lista con la propiedad list-style-image, indicando la url
de la imagen.

Si queremos indicar varias propiedades podemos hacerlos usando la propiedad genérica list-style, seguidos del tipo,
posición e imagen.

TABLAS
Para dar formato con CSS a las tablas contamos con las propiedades de ancho (width) y alto(height) donde podremos
indicar el tamaño como pixeles o porcentajes, todas las vistas para el texto, y otras como:

Border-collapse con los valores collapse para que los bordes de las celdas de la tabla aparezcan juntos,
o separate para que se vean separados.

Border-spacing, donde indicaremos el espacio entre bordes.

Podremos usar las propiedades padding (margen interno, relleno entre el contenido y el borde), margin (margen
externo, distancia entre la imagen y el resto de componentes) y borde (border), para la que debemos indicaremos el
grosor, el estilo del borde con los valores más comunes como dotted (puntos), dashed (guiones), solid (línea normal),
double (doble línea), y el color.
Si queremos dar formato a las celdas, usaremos el selector descendiente, es decir después del nombre del estilo de la
tabla, indicaremos la celda.

La propiedad empty-cell permite ocultar (hide) o mostrar(show) las celdas vacias. No puede combinarse con la opción
de collapse. También podemos modificar la posición del título de la tabla con caption-side con los valores top o
bottom.

21
IMÁGENES
Con CSS se puede dar formato a todas las imágenes usando la etiqueta img en el estilo, o a una concreta usando su
identificador.

Las propiedades más comunes para las imágenes son la anchura (width) y la altura (height), que se concretan usando
pixeles, porcentajes.
Podremos usar las propiedades padding (margen interno, relleno entre el contenido y el borde), margin (margen
externo, distancia entre la imagen y el resto de componentes) y borde (border), para la que debemos indicaremos el
grosor, el estilo del borde con los valores más comunes como dotted (puntos), dashed (guiones), solid (línea normal),
double (doble línea), y el color.
A las imágenes, como a las tablas podemos aplicarles las propiedades, margin, padding y border.
Además del modo acortado, también se puede definir cada uno de los márgenes o bordes de la imagen (derecho,
izquierdo, inferior y superior) con la propiedad específica, padding-top, margin-bottom, border-right-width, border-
top-color, border-left-style.

La propiedad float permite posicionar la imagen respecto al texto, con los valores left y right.

ENLACES
Los enlaces suelen ser texto o imágenes, por ello las propiedades de estilo usadas son las explicadas para estos
elementos. (una de las que se suele usar es text-decoration: none; para quitar el subrayado típico del enlace)
Debemos recordar que existen pseudoclases exclusivas de los enlaces, por lo que podemos dar estilo diferentes o
iguales a los enlaces según se hayan o no visitado. (:link, :visited). Además puede interesarnos dar distintos formatos
cuando se pase el ratón por encima o se active, (:hover, :active)

CURSOR
Podemos modificar el cursor del ratón con la propiedad cursor, podemos modificarlo usando un icono propio con su
url, o usar las formas preestablecida auto (puntero de texto), cell (cruz rellena), col-resize (flechas a izquierda y
derecha con líneas paralelas verticales en medio) crosshair (cruz), copy (flecha con un +), default (flecha),grab (mano
abierta), grabbing (mano agarrando) pointer (mano señalando), move (flechas en cruz), no-drop y not-allowed(
prohibido), none (sin cursor, ew-resize (fecha puntas en extremos horizontal), ns-resize (fecha puntas en extremos

22
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

vertical), nesw-resize (fecha puntas en extremos de noreste a suroeste), nwse-resize (fecha puntas en extremos de
noroeste a sureste),row-resize (flechas hacia arriba y abajo con líneas paralelas horizontales en medio) text (puntero
de texto), wait (circulo girando), help (flecha con interrogación), progress (flecha con circulo de espera), zoom-in
(lupa con +), zoom-out( lupa con menos).
Esta propiedad se combina con las acciones del ratón, como son las pseudoclases hover, focus, o active.

ANIMACIONES
Con CSS se pueden hacer animaciones. En el documento html deberemos identificar los elementos que queremos
animar y en el documento CSS configuraremos las animaciones. Para hacer una animación debemos usar la regla de
los fotogramas clave @keyframe.
Al inicio del CSS crearemos la regla indicando los fotogramas con porcentaje (si solo hay 2 podemos usar from para el
inicial y to para el final), para cada uno de ellos debemos indicar su posición (left, right, top o buttom en pixeles) y
podemos añadirle estilo propio como color de fondo.
Después crearemos el estilo del elemento identificado, además del estilo general como tamaño, fondo, borde…,
tendremos que incluir propiedades propias de las animaciones.
El elemento debe estar posicionado (position:relative o absolute) para poder moverlo por la página.
 Animation-name: nombre del keyframe. Es obligatorio.
 Animation-duration: duración de la animación (en segundos “s” o milisegundos “ms”). Es obligatorio.
 animation-timing-function: controla la velocidad de la animación linear (velocidad constant todo el tiempo),
ease (inicia lento, se acelera y termina lenta), ease-in (inicia lento y termina rápido), ease-out (inicia rápido y
termina lento).
 Animation-delay: tiempo que tarde en empezar la animación.
 Animation-iteration-count: número de veces que se repetirá, desde 0 hasta infinito (infinite).ç Animation-
direction: tiene los valores: normal (solo se mueve en un sentido) o alternative (va y vuelve).
Para estos valores podemos usar la forma corta, animation, seguido de las opciones elegidas en el orden en que se
han nombrado.

23
  animation-play-state: indica si la animación está active (running), o pausada (paused). Suele usarse
combinado con botones para la intereación del usuario.

Otro tipo de animaciones son las transiciones, simulamos la animación de un elemento cambiado propiedades como
tamaño o color en función del estado en el que se encuentre el elemento, solemos usar la pseudoclase :hover;
Las propiedades para hacer transiciones son similares a las de las animaciones:

 Transition-property indica a que propiedades se le va a aplicar la transición, con los valores none, all o con la
o las propiedades concretas.
 Transition-duration: tiempo en segundos (s) o milisegundos (ms)
 Transition-timing-function: con los valores linear, ease, ease-in y ease-out.
 Transition-delay: retraso de la animación.

Otra forma de crear animaciones es usar las transformaciones, que cambiarán el aspecto de un elemento.
Las propiedad transform, puede usar varios métodos:
 Translate, traslada el objeto a la posición indicada por los eje x y del eje y. Este método tiene las opciones de
translateX (cambia la posición solo en el eje x) y translateY (cambia la posición solo en el eje y). También se
puede trasladar en las 3 dimensiones, translate3d, o en el eje z translateZ.
 Rotate: rota la imagen los grados indicados seguido de deg. Admite rotaciones en el eje X (rotateX), y en eje
Y (rotateY)
 Scale: escala la imagen indicando la proporción que va a aumentar la anchura y la altura mediante números.
 Skew, inclina la imagen en los ejes x e y, o solo en el x (skewX) o solo en el y (SkewY).

24
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

Si combinamos las transiciones con las transformaciones y con las animaciones, podremos crear animaciones más
complejas.

En este ejemplo veríamos como pasamos de la foto pequeñita a la izquierda, a la grande y deformada que va girando
360º en el desplazamiento.

25
En este caso, veremos como la imagen gira 360º mientras aumenta 5 veces su tamaño.

EFECTOS
Con la propiedad filter podemos aplicar filtros. Esta opción combina muy bien con las animaciones y las psudoclases.

Tenemos los siguientes filtros:

(imagen original )

 Grayscale podemos modificar el color desde el original (0%) hasta blanco y negro (100%)

 Sepia, podemos modificar el color desde el original (0%) hasta el sepia(100%)

 Blur, difumina la imagen, el valor será el radio de desenfoque.

 Saturate, satura la imagen con blanco y negro (0%), original (100%) o sobresaturado ( >100%)

 Opacity, transparencia desde transparencia (0%) hasta opaco(100%)

 Brightness, modifica el brillo desde imagen negra(0%) pasando por original (100%) hasta quemada (>100%)

 contrast cambie el contraste desde gris (0%), original (100%) a sobresaturado ( >100%)

26
 I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

 hue-rotate, altera el color rotando en el círculo cromático, desde rojo (1deg), amarillo (90deg), azul (270deg)
a original (0 o 360).

 Invert, invertir el color de la imagen desde original (0%) hasta 100%( invertido).

 drop-shadow, añade una sombra son forma idéntica a la imagen, donde indicaremos la posición horizontal,
vertical, el tamaño y el color.

CÓDIGO DE COLORES:

27
28
I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

29
30
I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

31
32
I.E.S Marqués de Lozoya Departamento de Tecnología TIC II
Mara Arpa Recio 2020/2021

33
 FUENTES CONSULTADAS.

Fuentes consultadas para realizar los apuntes:

 Apuntes propios del módulo Lenguaje de Marcar del ciclo: ASIR.

 “Processing A programming handbook for visual designers and artists”. Casey Reas y Ben Fray.
 https://brandominus.com/
 https://desarrolloweb.com/
 https://developer.mozilla.org/
 https://htmlcolorcodes.com/
 https://lenguajecss.com
 https://lenguajehtml.com/
 https://processing.org/
 https://uniwebsidad.com/
 https://www.arsys.es/blog
 https://www.w3schools.com/

34